͓ͷ͏͑ʢ!@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 = () => *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 ( Title

Hello, Ionic React

) } render(, 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 ( ) } render(, document.querySelector('#content'))

*PO.PEBM const ModalExample = () => { const [showModal, setShowModal] = React.useState(false) return ( <> { setShowModal(true) }} > Show Modal Modal Example { setShowModal(false) }} > Close

Modal opened

> ) }

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 ( ) } render(, 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