React Native ❤️ Web

Slide 1

Slide 1 text

React Native ❤ Web ΢Υʔλʔηϧגࣜձࣾ த઒ ޾࠸ #bigLT2019_aizu

Slide 2

Slide 2 text

Yukiya Nakagawa / ͳ͔͟Μ ձ௡େֶ13ظੜʢ32ࡀʣ ৽ׁͰAgriTech΍ͬͯΔΑʂ AndroidΤϯδχΞ  ϞόΠϧدΓJSΤϯδχΞ

Slide 3

Slide 3 text

ͨ·ʹ೶஍ʹग़·͢ https://water-cell.jp/recruit/

Slide 4

Slide 4 text

ͬ͘͟ΓReact Native

Slide 5

Slide 5 text

Reactͱ͸ • JavaScript޲͚ͷUIঢ়ଶ؅ཧϥΠϒϥϦ • Facebook͕ࣾΦʔφʔ • ϒϥ΢β޲͚ඳըϥΠϒϥϦͷReact DOM ΍ɺϞόΠϧΞϓϦ޲͚ඳըϥΠϒϥϦͷ React Nativeͱซ༻͢Δ

Slide 6

Slide 6 text

f(x) = UI / ؔ਺ͱͯ͠ͷUI import React from 'react'; import { View, TextInput, Button } from 'react-native'; export function LoginForm(props) { return ( ); } JSX -PHJO'PSNίϯϙʔωϯτͷ࣮૷

Slide 7

Slide 7 text

https://codezine.jp/article/detail/11295

Slide 8

Slide 8 text

Learn Once, Write Anywhere

Slide 9

Slide 9 text

Learn Once, Write Anywhere • React Nativeͷίϯηϓτͷͻͱͭ • JavaͷεϩʔΨϯͷͻͱͭͰ͋ΔʮWrite Once, Run AnywhereʯΛ΋ͬͨ͡΋ͷ • Reactֶ͑͞΂͹ɺ͍ΖΜͳϓϥοτϑΥʔϜ ޲͚ʹίʔυ͕ॻ͚Δ https://code.fb.com/android/react-native-bringing-modern-web-techniques-to-mobile/

Slide 10

Slide 10 text

Anywhereͬͯݴ͏ͳΒ Web΋React NativeͰ  ॻ͖ͨ͘ͳ͍Ͱ͔͢ʂʁ

Slide 11

Slide 11 text

React Native for Web

Slide 12

Slide 12 text

ϒϥ΢β޲͚Reactͷ໰୊఺ •

΍ͱ͍ͬͨHTMLͷཁૉ΍  CSSΛ૊Έ߹ΘͤͯUIΛߏங͍ͯ͘͠ • HTMLͷλά͸ΞϓϦͷUIߏஙʹͦ͜·Ͱ޲͍ ͍ͯͳ͍ React NativeΛWebʹ࣋ͬͯ͘Δ͜ͱͷҙຯ - φΧβϯυοτωοτ https://blog.nkzn.info/entry/2018/05/29/210030

Slide 13

Slide 13 text

React Nativeͷ৔߹ • ΞϓϦΛ։ൃ͢Δࡍʹ࠷௿ݶඞཁͳը໘෦඼ ͕ἧ͍ͬͯΔ

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

JavaScript࣮ߦϛυϧ΢ΣΞ ͱͯ͠ͷReact Nativeͱ͸ผʹ UIϑϨʔϜϫʔΫͱͯ͠ͷ React Nativeͷཻ౓ׂ͕ͱଥ౰

Slide 16

Slide 16 text

“ͦΕͳΒಉཻ͡౓Ͱ Web޲͚ͷίϯϙʔωϯτ΋ ࡞Ε͹ศརͳͷͰ͸”

Slide 17

Slide 17 text

export function View(props) { return (

{props.children}

); } export function Text(props) { return ( {props.children} ); } React Nativeͱಉ໊͡લͰϒϥ΢β޲͚ ίϯϙʔωϯτΛ࣮૷͢Δ

Slide 18

Slide 18 text

React Native for Web https://github.com/necolas/react-native-web

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

React Native for Web͕ ࣮༻͞Ε͍ͯΔ શੈքͰ༗໊ͳWebαʔϏε

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Twitter͸ʂ React Native for WebͰʂ ॻ͔Ε͍ͯΔʂʂʂʂ https://twitter.com/necolas/status/913877194199359488 ˞5XJUUFSࣾͰ৽6*νʔϜͷςοΫϦʔυΛͯͨ͠ਓ͕3FBDU/BUJWFGPS8FCͷ࡞ऀ

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

࢖͍ํ import React from 'react'; import { View, TextInput, Button } from ‘react-native-web’; export function LoginForm(props) { return ( ); } ϒϥ΢β޲͚ͷ؀ڥͰ react-native-webϞδϡʔϧΛ࢖͏

Slide 25

Slide 25 text

Ϗϧυ৬ਓ޲͚ͷઆ໌ • Webpack΍BabelϓϥάΠϯͰϞδϡʔϧ໊ ΛޡຐԽͯ͠ɺιʔείʔυ্͸  “react-native“ ϞδϡʔϧΛ࢖͍ͬͯΔΑ͏ʹ ݟ͔͚ͤΔ͜ͱ΋Ͱ͖·͢ • ϞόΠϧΞϓϦ޲͚UIͱWebΞϓϦ޲͚UIΛ ͋Δఔ౓͸ڞ௨ԽͰ͖Δ

Slide 26

Slide 26 text

ۀ຿Ͱ࢖ͬͯΈ·ͨ͠ • React Native for WebΛϓϩμΫγϣϯͰ࢖ͬ ͯΈ·ͨ͠ - WaterCell Developer’s Blog  https://watercelldev.hatenablog.jp/entry/ 2018/07/18/122604 • ϒϥ΢β൛ͱAndroid൛Ͱ78%ͷTypeScript ίʔυΛڞ༗Ͱ͖ͨ

Slide 27

Slide 27 text

ࢼͯ͠Έ͍ͨํ • React Nativeͷ֦ுπʔϧ܈Ͱ͋ΔExpo͕ɺ ϒϥ΢βλʔήοτΛϏϧυ͢ΔͨΊͷπʔ ϧͱͯ͠React Native for WebΛ࠾༻ͨ͠ • expo-cliΛnpmͰΠϯετʔϧͯ͠ɺexpo init ίϚϯυΛୟ͚͹ɺϒϥ΢βରԠࡁΈͷΞϓ Ϧ։ൃϓϩδΣΫτ͕࡞ΕΔ

Slide 28

Slide 28 text

σϞ ʢ࣌ؒ͋Ε͹ʣ

Slide 29

Slide 29 text

·ͱΊ • React NativeͰΞϓϦΛॻ͚ΔͱɺAndroidɺ iOSɺϒϥ΢βͰΞϓϦΛॻ͚Δɺͱ͍͏ੈք ʹͳ͖͍ͬͯͯΔ • ͍ΖΜͳϓϥοτϑΥʔϜʹΞϓϦΛఏڙ͠ ͍ͨਓʹ͸໘ന͍෼໺ʹͳ͍ͬͯ·͢Αʂ

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text