React Native ❤️ Web

React Native ❤️ Web

2019.6.29の #bigLT2019_aizu で話しました

9a6e4623f9314c5e1fc99635ac9617ed?s=128

Yukiya Nakagawa

June 29, 2019
Tweet

Transcript

  1. 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ίϯϙʔωϯτͷ࣮૷
  2. 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/
  3. 14.
  4. 17.

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

    function Text(props) { return ( <span>{props.children}</span> ); } React Nativeͱಉ໊͡લͰϒϥ΢β޲͚ ίϯϙʔωϯτΛ࣮૷͢Δ
  5. 19.
  6. 21.
  7. 23.
  8. 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ϞδϡʔϧΛ࢖͏
  9. 26.

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

    Blog
 https://watercelldev.hatenablog.jp/entry/ 2018/07/18/122604 • ϒϥ΢β൛ͱAndroid൛Ͱ78%ͷTypeScript ίʔυΛڞ༗Ͱ͖ͨ
  10. 27.

    ࢼͯ͠Έ͍ͨํ • React Nativeͷ֦ுπʔϧ܈Ͱ͋ΔExpo͕ɺ ϒϥ΢βλʔήοτΛϏϧυ͢ΔͨΊͷπʔ ϧͱͯ͠React Native for WebΛ࠾༻ͨ͠ •

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