Upgrade to Pro — share decks privately, control downloads, hide ads and more …

モダンフロントエンド + React Native所感 / techcamp03

モダンフロントエンド + React Native所感 / techcamp03

第3回開発合宿(2017/05/22)

B8e501d93b98a553abf0b5cee0c33503?s=128

yasaichi

May 22, 2017
Tweet

Transcript

  1. ϞμϯϑϩϯτΤϯυ + React Nativeॴײ ୈ3ճ։ൃ߹॓੒Ռൃදɹyasaichi

  2. ൃදߏ੒ 1. എܠͱ໨త 2. ٕज़֓ཁ 3. ࣮ࡍʹ΍ͬͯΈͨ 4. ॴײ

  3. എܠͱ໨త

  4. എܠ1: લճͷ߹॓@2016Ն • ReactͰॻ͍ͨMinesweeperΛվྑͨ͠ • CSS Modules, css next, PostCSSͷಋೖΛ


    ௨ͯ͡ϞμϯCSSٕज़ʹ৮Εͨ • ซͤͯϏϧυपΓΛGulp + Browserify͔Β npm-scripts + webpackʹҠߦͨ͠
  5. ͜ΕͰϞμϯϑϩϯτΤϯυ ։ൃ͸Ұ௨Γ཈͑ͨͰʂ

  6. ͦΜͳ;͏ʹߟ͍͑ͯͨ
 ࣌ظ͕Զʹ΋͋Γ·ͨ͠

  7. എܠ2: ReactҠߦ@2016ळౙ • Knockout -> ReactҠߦ࣌ʹഊ๺Λ஌Δ • Reduxʢͷഎܠʹ͋ΔFluxʣ͕Θ͔Βͳ͍ • APIܦ༝Ͱऔಘͨ͠஋ΛͲ͏࣋ͭ΂͖͔

    • SPAͩͬͨΒRouting΋ߟ͑ͳ͍ͱμϝ΍Μ
  8. ͢Έ·ͤΜͰͨ͠

  9. ࠓճͷ߹॓ͷ໨త • ϑϩϯτΤϯυਂ۷Γ + React Nativeௐࠪ • ϒϥ΢βͰಈ͘SPA͸΍Δؾ͕Ͱͳ͔ͬͨ • ߹॓લ:

    Reduxͷಋೖ΍RoutingपΓͷ࣮૷ • ߹॓த: OAuthΛ࢖ͬͨೝূͷ࣮૷
  10. ٕज़֓ཁ

  11. React Native • ReactͰωΠςΟϒΞϓϦ͕࡞ΕΔ΍ͭ • Facebook͕։ൃʢFB, InstaͰ࢖͍ͬͯΔʣ • Ϗϧυ͢ΔͱAndroid /

    iOSͰಈ͘ • ը໘͸JSXͱCSSʹࣅͨԿ͔Ͱهड़
  12. αϯϓϧ: View component /* Logo.css */ .logo { width: 200px;

    height: 200px; } // index.ios.js import React from 'react'; import { AppRegistry, Text, View } from 'react-native'; import styles from './styles'; function AwesomeProject() { return ( <View style={styles.container}> <Text style={styles.hello}> Hello, World! </Text> </View> ); } AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
  13. αϯϓϧ: Styling // styles.ios.js import { StyleSheet } from 'react-native';

    export default StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, hello: { fontSize: 20, }, }); ComponentͷϨΠΞ΢τ ʹ͸FlexboxΛ࢖͏
  14. Ϗϧυ͢Δͱ͜Μͳײ͡ ※ ॳճͷΈϏϧυ͕ඞཁͰɺҎ߱͸㵰+RͰϦϩʔυͰ͖Δ

  15. React Navigation • React NativeͷφϏήʔγϣϯϥΠϒϥϦ • keyͱComponentͷϚοϓΛఆٛͯ͠࢖͏ • React NativeެࣜʢͷυΩϡϝϯτʣਪ͠

    • WebͰ͍͏react-router
  16. αϯϓϧ /* Logo.css */ .logo { width: 200px; height: 200px;

    } import React, { Component } from 'react'; import { AppRegistry, Button, Text, View } from 'react-native'; import { StackNavigator } from 'react-navigation'; import styles from './styles'; class Home extends Component { static navigationOptions = { title: 'Home' }; render() { const { navigate } = this.props.navigation; return ( <View style={styles.container}> <Button onPress={() => navigate('Chat')} title="Chat with Rina" /> </View> ); } } … const AwesomeProject = StackNavigator({ Home: { screen: Home }, Chat: { screen: Chat }}); AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject); keyͱComponentͷϚοϓ
  17. ςΩετΛλοϓ͢Δͱ νϟοτը໘ʹભҠ͢Δ

  18. ࣮ࡍʹ΍ͬͯΈͨ

  19. ࠓճͷϥΠϒϥϦߏ੒ • ͪΌΜͱ։ൃ͢Δࡍʹඞཁͦ͏ͳ΋ͷΛબ୒ • Flux࣮૷: redux, react-redux • StoreपΓ: normalizr,

    reselect • Routing: react-navigation
  20. σϞ

  21. None
  22. None
  23. ॴײ

  24. ϞμϯϑϩϯτΤϯυ • ͪΌΜͱਂ۷ΓͰ͖ͨײ͋ͬͯΑ͔ͬͨ • ReduxΛ࢖͏աఔͰFluxͷ֓೦͕ΫϦΞʹ • σʔλΛਖ਼نԽͯ͠StoreʹೖΕΔͱ͔ • Routingͬͯ͜Μͳײ͡Ͱ΍ΔΜͩ

  25. React Native • ୊ࡐʹωΠςΟϒΞϓϦΛબΜͰྑ͔ͬͨ • ԶɺΞϓϦ࡞ΕΔʂͱ୯७ʹײಈ͢Δ • SPAͱͯ͠࡞Δ͔͠ͳ͍ͷͰਂ۷ΓͰ͖Δ • ͙͢ϦϩʔυͰ͖ΔͷͰɺखΛಈ͔͠ͳ͕Β

    σβΠϯ࡞Δͷʹ޲͍ͯΔ
  26. ͱ͸͍͑ • ߥ໺தͷߥ໺ͩͳʔײ • ຊମͱΤίγεςϜ͕·ͩ҆ఆ͍ͯ͠ͳ͍ • Կ͔͋ͬͨΒ·ͣissueΛ୳͢ମྗ͕ඞཁ • ϓϥοτϑΥʔϜݻ༗ʢྫ: Deep

    Linkʣͷ
 ͱ͜ΖΛ৮Δʹ͸ωΠςΟϒଆͷ஌͕ࣝඞཁ
  27. ͓ർΕ͞·Ͱͨ͠ʂ ੒Ռ෺: https://github.com/yasaichi/GHFav