Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

React Native ❤️ Web

React Native ❤️ Web

2019.6.29の #bigLT2019_aizu で話しました

Yukiya Nakagawa

June 29, 2019
Tweet

More Decks by Yukiya Nakagawa

Other Decks in Technology

Transcript

  1. 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. 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. export function View(props) { return ( <div>{props.children}</div> ); } export

    function Text(props) { return ( <span>{props.children}</span> ); } React Nativeͱಉ໊͡લͰϒϥ΢β޲͚ ίϯϙʔωϯτΛ࣮૷͢Δ
  4. ࢖͍ํ 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ϞδϡʔϧΛ࢖͏
  5. ۀ຿Ͱ࢖ͬͯΈ·ͨ͠ • React Native for WebΛϓϩμΫγϣϯͰ࢖ͬ ͯΈ·ͨ͠ - WaterCell Developer’s

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

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