Pro Yearly is on sale from $80 to $50! »

React Native ❤️ Web

React Native ❤️ Web

2019.6.29の #bigLT2019_aizu で話しました

9a6e4623f9314c5e1fc99635ac9617ed?s=128

Yukiya Nakagawa

June 29, 2019
Tweet

Transcript

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

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

  3. ͨ·ʹ೶஍ʹग़·͢ https://water-cell.jp/recruit/

  4. ͬ͘͟ΓReact Native

  5. Reactͱ͸ • JavaScript޲͚ͷUIঢ়ଶ؅ཧϥΠϒϥϦ • Facebook͕ࣾΦʔφʔ • ϒϥ΢β޲͚ඳըϥΠϒϥϦͷReact DOM ΍ɺϞόΠϧΞϓϦ޲͚ඳըϥΠϒϥϦͷ React

    Nativeͱซ༻͢Δ
  6. f(x) = UI / ؔ਺ͱͯ͠ͷUI import React from 'react'; import

    { View, TextInput, Button } from 'react-native'; export function LoginForm(props) { return ( <View> <TextInput placeholder="User ID" /> <TextInput placeholder="Password" /> <Button title="ϩάΠϯ" /> </View> ); } JSX -PHJO'PSNίϯϙʔωϯτͷ࣮૷
  7. https://codezine.jp/article/detail/11295

  8. Learn Once, Write Anywhere

  9. 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/
  10. Anywhereͬͯݴ͏ͳΒ Web΋React NativeͰ
 ॻ͖ͨ͘ͳ͍Ͱ͔͢ʂʁ

  11. React Native for Web

  12. ϒϥ΢β޲͚Reactͷ໰୊఺ • <div>΍<input>ͱ͍ͬͨHTMLͷཁૉ΍
 CSSΛ૊Έ߹ΘͤͯUIΛߏங͍ͯ͘͠ • HTMLͷλά͸ΞϓϦͷUIߏஙʹͦ͜·Ͱ޲͍ ͍ͯͳ͍ React NativeΛWebʹ࣋ͬͯ͘Δ͜ͱͷҙຯ -

    φΧβϯυοτωοτ https://blog.nkzn.info/entry/2018/05/29/210030
  13. React Nativeͷ৔߹ • ΞϓϦΛ։ൃ͢Δࡍʹ࠷௿ݶඞཁͳը໘෦඼ ͕ἧ͍ͬͯΔ

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

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

  17. export function View(props) { return ( <div>{props.children}</div> ); } export

    function Text(props) { return ( <span>{props.children}</span> ); } React Nativeͱಉ໊͡લͰϒϥ΢β޲͚ ίϯϙʔωϯτΛ࣮૷͢Δ
  18. React Native for Web https://github.com/necolas/react-native-web

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

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

  23. None
  24. ࢖͍ํ import React from 'react'; import { View, TextInput, Button

    } from ‘react-native-web’; export function LoginForm(props) { return ( <View> <TextInput placeholder="User ID" /> <TextInput placeholder="Password" /> <Button title="ϩάΠϯ" /> </View> ); } ϒϥ΢β޲͚ͷ؀ڥͰ react-native-webϞδϡʔϧΛ࢖͏
  25. Ϗϧυ৬ਓ޲͚ͷઆ໌ • Webpack΍BabelϓϥάΠϯͰϞδϡʔϧ໊ ΛޡຐԽͯ͠ɺιʔείʔυ্͸
 “react-native“ ϞδϡʔϧΛ࢖͍ͬͯΔΑ͏ʹ ݟ͔͚ͤΔ͜ͱ΋Ͱ͖·͢ • ϞόΠϧΞϓϦ޲͚UIͱWebΞϓϦ޲͚UIΛ ͋Δఔ౓͸ڞ௨ԽͰ͖Δ

  26. ۀ຿Ͱ࢖ͬͯΈ·ͨ͠ • React Native for WebΛϓϩμΫγϣϯͰ࢖ͬ ͯΈ·ͨ͠ - WaterCell Developer’s

    Blog
 https://watercelldev.hatenablog.jp/entry/ 2018/07/18/122604 • ϒϥ΢β൛ͱAndroid൛Ͱ78%ͷTypeScript ίʔυΛڞ༗Ͱ͖ͨ
  27. ࢼͯ͠Έ͍ͨํ • React Nativeͷ֦ுπʔϧ܈Ͱ͋ΔExpo͕ɺ ϒϥ΢βλʔήοτΛϏϧυ͢ΔͨΊͷπʔ ϧͱͯ͠React Native for WebΛ࠾༻ͨ͠ •

    expo-cliΛnpmͰΠϯετʔϧͯ͠ɺexpo init ίϚϯυΛୟ͚͹ɺϒϥ΢βରԠࡁΈͷΞϓ Ϧ։ൃϓϩδΣΫτ͕࡞ΕΔ
  28. σϞ ʢ࣌ؒ͋Ε͹ʣ

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

  30. We are hiring!

  31. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠