Slide 1
Slide 1 text
͓ͷ͏͑ʢ!@MJLSʣ
*POJD3FBDUGSPN4DSBUDI
*POJD.FFUVQ5PLZP
+VMZ
Slide 2
Slide 2 text
w ඌ্༸հʢ:PTVLF0OPVFʣ
w "TTPDJBUF1SPGFTTPSBUUIF%FQBSUNFOUPG*OGPSNBUJPO
4DJFODF
$PMMFHFPG)VNBOJUJFTBOE4DJFODFT
/JIPO6OJWFSTJUZ
w 3FTFBSDI*OGPSNBUJPO7JTVBMJ[BUJPO
w )PCCZ8FC%FWFMPQNFOU
w *POJD#FHJOOFS
"CPVU.F
Slide 3
Slide 3 text
*POJD3FBDU
w IUUQTXXXOQNKTDPNQBDLBHF!JPOJDSFBDU
w *POJDDPNQPOFOUMJCSBSZGPS3FBDUKT
w $VSSFOUMZCFUBSFMFBTF
w -BUFTUWFSTJPO EBZTBHP
Slide 4
Slide 4 text
)PXUPTUBSU*POJD3FBDU
w $SFBUFOFXQSPKFDU
w JPOJDDMJ SFDPNNFOEFE
w DSFBUFSFBDUBQQ
w GSPNTDSBUDI
w XFCQBDL ˡUPEBZ
w QBSDFM
Slide 5
Slide 5 text
1VSQPTFPGUIJTUBML
w *OUSPEVDF*POJD3FBDU
w -FBSOIPXUPTFUVQ*POJD3FBDU XJUINJOJNBMTFUUUJOHT
w *OUSPEVDFTPNF$PNQPOFOUTJO*POJD3FBDU
Slide 6
Slide 6 text
$POUFOUT
w *OUSPEVDUJPO
w .JOJNBMTFUVQGPS*POJD3FBDUBOEXFCQBDL
w #VJMEJOH"QQXJUI*POJD3FBDU
w 4VNNBSZ
Slide 7
Slide 7 text
$POUFOUT
w *OUSPEVDUJPO
w .JOJNBMTFUVQGPS*POJD3FBDUBOEXFCQBDL
w #VJMEJOH"QQXJUI*POJD3FBDU
w 4VNNBSZ
Slide 8
Slide 8 text
1SFSFRVJTJUF,OPXMFEHF
w /FDFTTBSZCVOEMFSTFUUJOHT
w !JPOJDDPSF JOUFSOBMJNQMFNFOUBUJPOPG*POJD
OFFETTPNF$44BTTFUT
w JPOJDPOTMPBET47(BTTFUTVTJOHJNQPSUTZOUBY
w JPOJDDMJDSFBUFT3FBDUBQQUFNQMBUFCBTFEPODSFBUF
SFBDUBQQ
w /FDFTTBSZQBSUPGJUTTFUUJOHTOFFEUPCFVTFE
Slide 9
Slide 9 text
*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
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
CBCFM
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react']
}
},
include: [path.resolve(__dirname, 'src')]
},
Slide 12
Slide 12 text
-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
}
}
]
},
Slide 13
Slide 13 text
-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
Slide 14
Slide 14 text
$POUFOUT
w *OUSPEVDUJPO
w .JOJNBMTFUVQGPS*POJD3FBDU
w #VJMEJOH"QQXJUI*POJD3FBDU
w 4VNNBSZ
Slide 15
Slide 15 text
)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'))Slide 16
Slide 16 text
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'))
Slide 17
Slide 17 text
*PO.PEBM
const ModalExample = () => {
const [showModal, setShowModal] = React.useState(false)
return (
<>
{
setShowModal(true)
}}
>
Show Modal
Modal Example
{
setShowModal(false)
}}
>
Close
Modal opened
> ) }Slide 18
Slide 18 text
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'))
Slide 19
Slide 19 text
#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
Slide 20
Slide 20 text
%FNP"QQ
w $VUFEPHJNBHFWJFXFS
w IUUQTEPHWETMBCKQ
w 6TJOH%PH"1*
IUUQTEPHDFPEPHBQJ
w TPVSDFDPEF
IUUQTHJUIVCDPNMJLSTBOECPYEPHWJFXFS
Slide 21
Slide 21 text
$POUFOUT
w *OUSPEVDUJPO
w .JOJNBMTFUVQGPS*POJD3FBDUBOEXFCQBDL
w #VJMEJOH"QQXJUI*POJD3FBDU
w 4VNNBSZ
Slide 22
Slide 22 text
*DPNQMFUFMZVOEFSTUPPE
*POJD3FBDU
Slide 23
Slide 23 text
.Z*NQSFTTJPO
w &BTZUPMFBSOGPS3FBDUVTFST
w 3FBMMZOJDFDPNQPOFOUMJCSBSZ
w 6TFGVMGPSCPUIDSFBUJOHOFXBQQBOEFNCFEEJOH
FYJTUJOH3FBDUBQQ
w #VU
NBOZCVHTGPSOPX
w 8FSFMPPLJOHGPSXBSEUPP⒏DJBMSFMFBTF
Slide 24
Slide 24 text
4VNNBSZ
w 5IJTUBMLJOUSPEVDFT*POJD3FBDU
w *GZPVBSFB3FBDUVTFS
MFUTUSZOPX
w %FNPTPVSDFDPEF
IUUQTHJUIVCDPNMJLSTBOECPYEPHWJFXFS
w 4FFBMTP
࠷খߏͰ࢝ΊΔ!JPOJDSFBDU
IUUQTRJJUBDPN@MJLSJUFNTB