Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
20190707Ionic_Meetup.pdf
Yosuke Onoue
July 07, 2019
0
210
20190707Ionic_Meetup.pdf
Yosuke Onoue
July 07, 2019
Tweet
Share
More Decks by Yosuke Onoue
See All by Yosuke Onoue
likr
2
310
likr
1
310
likr
1
92
likr
23
9.5k
likr
4
3.3k
likr
0
150
likr
2
360
likr
15
5.8k
likr
1
550
Featured
See All Featured
lara
172
9.5k
productmarketing
5
660
jnunemaker
PRO
40
4.6k
dougneiner
55
5.4k
bkeepers
321
53k
deanohume
295
27k
searls
204
35k
qrush
285
18k
sachag
446
36k
sugarenia
233
840k
tanoku
86
8.5k
danielanewman
200
20k
Transcript
͓ͷ͏͑ʢ!@MJLSʣ *POJD3FBDUGSPN4DSBUDI *POJD.FFUVQ5PLZP +VMZ
w ඌ্༸հʢ:PTVLF0OPVFʣ w "TTPDJBUF1SPGFTTPSBUUIF%FQBSUNFOUPG*OGPSNBUJPO 4DJFODF $PMMFHFPG)VNBOJUJFTBOE4DJFODFT /JIPO6OJWFSTJUZ w 3FTFBSDI*OGPSNBUJPO7JTVBMJ[BUJPO
w )PCCZ8FC%FWFMPQNFOU w *POJD#FHJOOFS "CPVU.F
*POJD3FBDU w IUUQTXXXOQNKTDPNQBDLBHF!JPOJDSFBDU w *POJDDPNQPOFOUMJCSBSZGPS3FBDUKT w $VSSFOUMZCFUBSFMFBTF w -BUFTUWFSTJPO EBZTBHP
)PXUPTUBSU*POJD3FBDU w $SFBUFOFXQSPKFDU w JPOJDDMJ SFDPNNFOEFE w DSFBUFSFBDUBQQ w
GSPNTDSBUDI w XFCQBDL ˡUPEBZ w QBSDFM
1VSQPTFPGUIJTUBML w *OUSPEVDF*POJD3FBDU w -FBSOIPXUPTFUVQ*POJD3FBDU XJUINJOJNBMTFUUUJOHT w *OUSPEVDFTPNF$PNQPOFOUTJO*POJD3FBDU
$POUFOUT w *OUSPEVDUJPO w .JOJNBMTFUVQGPS*POJD3FBDUBOEXFCQBDL w #VJMEJOH"QQXJUI*POJD3FBDU w 4VNNBSZ
$POUFOUT w *OUSPEVDUJPO w .JOJNBMTFUVQGPS*POJD3FBDUBOEXFCQBDL w #VJMEJOH"QQXJUI*POJD3FBDU w 4VNNBSZ
1SFSFRVJTJUF,OPXMFEHF w /FDFTTBSZCVOEMFSTFUUJOHT w !JPOJDDPSF JOUFSOBMJNQMFNFOUBUJPOPG*POJD OFFETTPNF$44BTTFUT w JPOJDPOTMPBET47(BTTFUTVTJOHJNQPSUTZOUBY
w JPOJDDMJDSFBUFT3FBDUBQQUFNQMBUFCBTFEPODSFBUF SFBDUBQQ w /FDFTTBSZQBSUPGJUTTFUUJOHTOFFEUPCFVTFE
*OTUBMMBUJPO $ npm init -y $ npm i @ionic/react react
react-dom \ react-router react-router-dom $ npm i -D @babel/core @babel/preset-react @svgr/webpack \ babel-loader css-loader style-loader url-loader \ webpack webpack-cli webpack-dev-server
XFCQBDLDPOpHKT const path = require('path') const options = { module:
{ rules: [ // write our loader settings here ] }, entry: { bundle: './src/index' }, output: { path: path.join(__dirname, 'public'), filename: '[name].js' }, devServer: { historyApiFallback: true, contentBase: path.join(__dirname, 'public'), port: 8080 }, mode: process.env.NODE_ENV || 'development' } if (process.env.NODE_ENV !== 'production') { Object.assign(options, { devtool: 'inline-source-map' }) } module.exports = options
CBCFM { test: /\.js$/, use: { loader: 'babel-loader', options: {
presets: ['@babel/preset-react'] } }, include: [path.resolve(__dirname, 'src')] },
-PBEJOH$44 import '@ionic/core/css/core.css' import '@ionic/core/css/ionic.bundle.css' "OE JOZPVSFOUSZQPJOU { test: /\.css$/,
use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1 } } ] },
-PBEJOH*DPOT { test: /\.svg$/, use: ['@svgr/webpack', 'url-loader'] } TWHS w
5SBOTGPSN47(TJOUP3FBDUDPNQPOFOUT IUUQTHJUIVCDPNTNPPUIDPEFTWHS w VTFEJODSFBUFSFBDUBQQ import React from 'react' import { IonIcon } from '@ionic/react' import { logoTwitter } from 'ionicons/icons' export const IconExample = () => <IonIcon icon={logoTwitter} /> *OZPVSBQQ
$POUFOUT w *OUSPEVDUJPO w .JOJNBMTFUVQGPS*POJD3FBDU w #VJMEJOH"QQXJUI*POJD3FBDU w 4VNNBSZ
)FMMP 8PSME import React from 'react' import { render }
from 'react-dom' import { IonApp, IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/react' const App = () => { return ( <IonApp> <IonPage> <IonHeader> <IonToolbar> <IonTitle>Title</IonTitle> </IonToolbar> </IonHeader> <IonContent className='ion-padding'> <h1>Hello, Ionic React</h1> </IonContent> </IonPage> </IonApp> ) } render(<App />, document.querySelector('#content'))
3PVUJOH import React from 'react' import { render } from
'react-dom' import { Route } from 'react-router' import { IonApp, IonPage, IonReactRouter, IonRouterOutlet } from '@ionic/react' import RootPage from './pages/root' const App = () => { return ( <IonApp> <IonReactRouter> <IonPage> <IonRouterOutlet> <Route path='/' component={RootPage} exact /> </IonRouterOutlet> </IonPage> </IonReactRouter> </IonApp> ) } render(<App />, document.querySelector('#content'))
*PO.PEBM const ModalExample = () => { const [showModal, setShowModal]
= React.useState(false) return ( <> <IonContent> <IonButton onClick={() => { setShowModal(true) }} > Show Modal </IonButton> </IonContent> <IonModal isOpen={showModal}> <IonPage> <IonHeader> <IonToolbar> <IonTitle>Modal Example</IonTitle> <IonButtons slot='end'> <IonButton onClick={() => { setShowModal(false) }} > Close </IonButton> </IonButtons> </IonToolbar> </IonHeader> <IonContent className='ion-padding'> <p>Modal opened</p> </IonContent> </IonPage> </IonModal> </> ) }
6TJOH3FEVY import React from 'react' import { render } from
'react-dom' import { Route, Switch } from 'react-router-dom' import { Provider } from 'react-redux' import { IonApp, IonPage, IonReactRouter } from '@ionic/react' import store from './store' import RootPage from './pages/root' const App = () => { return ( <Provider store={store}> <IonApp> <IonReactRouter> <IonPage> <Switch> <Route path='/' component={RootPage} /> </Switch> </IonPage> </IonReactRouter> </IonApp> </Provider> ) } render(<App />, document.querySelector('#content'))
#VJMEJOHJ04"QQXJUI$BQBDJUPS w IUUQTDBQBDJUPSJPOJDGSBNFXPSLDPNEPDTHFUUJOH TUBSUFE $ npm install --save @capacitor/core @capacitor/cli
$ npx cap init --web-dir public $ npx cap add ios $ npx cap open ios $ npx webpack --mode production $ npx cap copy 1SFQBSBUJPO 3FCVJME
%FNP"QQ w $VUFEPHJNBHFWJFXFS w IUUQTEPHWETMBCKQ w 6TJOH%PH"1* IUUQTEPHDFPEPHBQJ w TPVSDFDPEF
IUUQTHJUIVCDPNMJLSTBOECPYEPHWJFXFS
$POUFOUT w *OUSPEVDUJPO w .JOJNBMTFUVQGPS*POJD3FBDUBOEXFCQBDL w #VJMEJOH"QQXJUI*POJD3FBDU w 4VNNBSZ
*DPNQMFUFMZVOEFSTUPPE *POJD3FBDU
.Z*NQSFTTJPO w &BTZUPMFBSOGPS3FBDUVTFST w 3FBMMZOJDFDPNQPOFOUMJCSBSZ w 6TFGVMGPSCPUIDSFBUJOHOFXBQQBOEFNCFEEJOH FYJTUJOH3FBDUBQQ w #VU
NBOZCVHTGPSOPX w 8FSFMPPLJOHGPSXBSEUPP⒏DJBMSFMFBTF
4VNNBSZ w 5IJTUBMLJOUSPEVDFT*POJD3FBDU w *GZPVBSFB3FBDUVTFS MFUTUSZOPX w %FNPTPVSDFDPEF IUUQTHJUIVCDPNMJLSTBOECPYEPHWJFXFS w
4FFBMTP ࠷খߏͰ࢝ΊΔ!JPOJDSFBDU IUUQTRJJUBDPN@MJLSJUFNTB