Slide 1
Slide 1 text
ϞμϯϑϩϯτΤϯυ +
React Nativeॴײ
ୈ3ճ։ൃ߹॓Ռൃදɹyasaichi
Slide 2
Slide 2 text
ൃදߏ
1. എܠͱత
2. ٕज़֓ཁ
3. ࣮ࡍʹͬͯΈͨ
4. ॴײ
Slide 3
Slide 3 text
എܠͱత
Slide 4
Slide 4 text
എܠ1: લճͷ߹॓@2016Ն
• ReactͰॻ͍ͨMinesweeperΛվྑͨ͠
• CSS Modules, css next, PostCSSͷಋೖΛ
௨ͯ͡ϞμϯCSSٕज़ʹ৮Εͨ
• ซͤͯϏϧυपΓΛGulp + Browserify͔Β
npm-scripts + webpackʹҠߦͨ͠
Slide 5
Slide 5 text
͜ΕͰϞμϯϑϩϯτΤϯυ
։ൃҰ௨Γ͑ͨͰʂ
Slide 6
Slide 6 text
ͦΜͳ;͏ʹߟ͍͑ͯͨ
࣌ظ͕Զʹ͋Γ·ͨ͠
Slide 7
Slide 7 text
എܠ2: ReactҠߦ@2016ळౙ
• Knockout -> ReactҠߦ࣌ʹഊΛΔ
• Reduxʢͷഎܠʹ͋ΔFluxʣ͕Θ͔Βͳ͍
• APIܦ༝Ͱऔಘͨ͠ΛͲ͏͖͔࣋ͭ
• SPAͩͬͨΒRoutingߟ͑ͳ͍ͱμϝΜ
Slide 8
Slide 8 text
͢Έ·ͤΜͰͨ͠
Slide 9
Slide 9 text
ࠓճͷ߹॓ͷత
• ϑϩϯτΤϯυਂ۷Γ + React Nativeௐࠪ
• ϒϥβͰಈ͘SPAΔؾ͕Ͱͳ͔ͬͨ
• ߹॓લ: ReduxͷಋೖRoutingपΓͷ࣮
• ߹॓த: OAuthΛͬͨೝূͷ࣮
Slide 10
Slide 10 text
ٕज़֓ཁ
Slide 11
Slide 11 text
React Native
• ReactͰωΠςΟϒΞϓϦ͕࡞ΕΔͭ
• Facebook͕։ൃʢFB, InstaͰ͍ͬͯΔʣ
• Ϗϧυ͢ΔͱAndroid / iOSͰಈ͘
• ը໘JSXͱCSSʹࣅͨԿ͔Ͱهड़
Slide 12
Slide 12 text
αϯϓϧ: 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 (
Hello, World!
);
}
AppRegistry.registerComponent('AwesomeProject', () =>
AwesomeProject);
Slide 13
Slide 13 text
αϯϓϧ: 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Λ͏
Slide 14
Slide 14 text
Ϗϧυ͢Δͱ͜Μͳײ͡
※ ॳճͷΈϏϧυ͕ඞཁͰɺҎ߱㵰+RͰϦϩʔυͰ͖Δ
Slide 15
Slide 15 text
React Navigation
• React NativeͷφϏήʔγϣϯϥΠϒϥϦ
• keyͱComponentͷϚοϓΛఆٛͯ͠͏
• React NativeެࣜʢͷυΩϡϝϯτʣਪ͠
• WebͰ͍͏react-router
Slide 16
Slide 16 text
αϯϓϧ
/* 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 (
navigate('Chat')} title="Chat with Rina" />
);
}
}
…
const AwesomeProject = StackNavigator({ Home: { screen: Home }, Chat: { screen: Chat }});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
keyͱComponentͷϚοϓ
Slide 17
Slide 17 text
ςΩετΛλοϓ͢Δͱ
νϟοτը໘ʹભҠ͢Δ
Slide 18
Slide 18 text
࣮ࡍʹͬͯΈͨ
Slide 19
Slide 19 text
ࠓճͷϥΠϒϥϦߏ
• ͪΌΜͱ։ൃ͢Δࡍʹඞཁͦ͏ͳͷΛબ
• Flux࣮: redux, react-redux
• StoreपΓ: normalizr, reselect
• Routing: react-navigation
Slide 20
Slide 20 text
σϞ
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
ॴײ
Slide 24
Slide 24 text
ϞμϯϑϩϯτΤϯυ
• ͪΌΜͱਂ۷ΓͰ͖ͨײ͋ͬͯΑ͔ͬͨ
• ReduxΛ͏աఔͰFluxͷ֓೦͕ΫϦΞʹ
• σʔλΛਖ਼نԽͯ͠StoreʹೖΕΔͱ͔
• Routingͬͯ͜Μͳײ͡ͰΔΜͩ
Slide 25
Slide 25 text
React Native
• ࡐʹωΠςΟϒΞϓϦΛબΜͰྑ͔ͬͨ
• ԶɺΞϓϦ࡞ΕΔʂͱ୯७ʹײಈ͢Δ
• SPAͱͯ͠࡞Δ͔͠ͳ͍ͷͰਂ۷ΓͰ͖Δ
• ͙͢ϦϩʔυͰ͖ΔͷͰɺखΛಈ͔͠ͳ͕Β
σβΠϯ࡞Δͷʹ͍ͯΔ
Slide 26
Slide 26 text
ͱ͍͑
• ߥதͷߥͩͳʔײ
• ຊମͱΤίγεςϜ͕·ͩ҆ఆ͍ͯ͠ͳ͍
• Կ͔͋ͬͨΒ·ͣissueΛ୳͢ମྗ͕ඞཁ
• ϓϥοτϑΥʔϜݻ༗ʢྫ: Deep Linkʣͷ
ͱ͜ΖΛ৮ΔʹωΠςΟϒଆͷ͕ࣝඞཁ
Slide 27
Slide 27 text
͓ർΕ͞·Ͱͨ͠ʂ
Ռ: https://github.com/yasaichi/GHFav