React Native - Workshop
•
6 likes•632 views
Workshop sobre React Native realizado pela Vizir Software Studio (http://www.vizir.com.br) para Natura. OVERVIEW Desenvolvimento nativo Desenvolvimento híbrido Frameworks disponíveis Ionic NativeScript Xamarin React Native REACT & REACT NATIVE Componentes React Components Lifecycle Tudo pode ser Javascript JSX CSS em JSON Virtual DOM Benefícios Futuro REACT NATIVE Componentes & APIs Comunidade Utilizando bibliotecas nativas Comportamentos específicos de cada plataforma Ferramentas Code Push RNPM BOAS PRÁTICAS Fluxo de dados da aplicação Testando seus componentes Como estruturamos as aplicações GITHUB SAMPLE APP https://github.com/Vizir/ReactNativeWorkshop
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to React Native - Workshop
Similar to React Native - Workshop (20)
Recently uploaded
Recently uploaded (20)
React Native - Workshop
- 1. REACT NATIVE
- 4. Ajudamos grandes empresas e startups a focarem em seu negócio entregando tecnologia
- 20. FRAMEWORKS
- 21. FRAMEWORKS
- 22. FRAMEWORKS
- 23. FRAMEWORKS
- 24. FRAMEWORKS
- 25. FRAMEWORKS
- 26. FRAMEWORKS 35.350 stars 897 contribuidores e crescendo…
- 27. REACT
- 28. REACT
- 29. REACT
- 30. REACT
- 31. REACT e milhares de outros…
- 33. REACT COMPONENTES TUDO PODE SER JAVASCRIPT
- 34. REACT VIRTUAL DOM COMPONENTES TUDO PODE SER JAVASCRIPT
- 35. COMPONENTES APP
- 37. COMPONENTES HEADER TABS CARD CARD IMAGE USER AVATAR CARD TEXT CARD IMAGE USER AVATAR CARD TEXT
- 38. COMPONENTES HEADER TABS CARD CARD IMAGE USER AVATAR CARD TEXT CARD IMAGE USER AVATAR CARD TEXT HEADER TABS ACCOUNT INFO USER AVATAR ACCOUNT SETTINGS
- 41. import React, { Component, StyleSheet, PropTypes, Image, } from 'react-native' export default class Avatar extends Component { constructor(props) { super(props) } render() { return ( <Image source={this.props.image} style={styles.image} /> ) } } Avatar.propTypes = { image: PropTypes.object.isRequired, } const styles = StyleSheet.create({ image: { width: 30, height: 30, borderRadius: 15 }, })
- 46. COMPONENTES componentWillMount componentDidMount componentWillReceiveProps shouldComponentUpdate
- 52. REACT VIRTUAL DOM COMPONENTES TUDO PODE SER JAVASCRIPT
- 53. TUDO PODE SER JAVASCRIPT
- 54. TUDO PODE SER JAVASCRIPT
- 55. HTML
- 56. import React, { Component, StyleSheet, PropTypes, Image, } from 'react-native' export default class Avatar extends Component { constructor(props) { super(props) } render() { return ( <Image source={this.props.image} style={styles.image} /> ) } } Avatar.propTypes = { image: PropTypes.object.isRequired, } const styles = StyleSheet.create({ image: { width: 30, height: 30, borderRadius: 15, }, })
- 57. import React, { Component, StyleSheet, PropTypes, Image, } from 'react-native' export default class Avatar extends Component { constructor(props) { super(props) } render() { return ( <Image source={this.props.image} style={styles.image} /> ) } } Avatar.propTypes = { image: PropTypes.object.isRequired, } const styles = StyleSheet.create({ image: { width: 30, height: 30, borderRadius: 15, }, })
- 58. TUDO PODE SER JAVASCRIPT <Image source={this.props.image} style={styles.image} />
- 59. TUDO PODE SER JAVASCRIPT <Image source={this.props.image} style={styles.image} /> JSX
- 60. TUDO PODE SER JAVASCRIPT <Image source={this.props.image} style={styles.image} /> JSX let image = React.createElement( Image, { source: this.props.image, style: styles.image })
- 61. TUDO PODE SER JAVASCRIPT <Image source={this.props.image} style={styles.image} /> JSX <img src=‘imagem.png’ style=‘border-radius: 5px’ /> HTML
- 62. CSS
- 63. import React, { Component, StyleSheet, PropTypes, Image, } from 'react-native' export default class Avatar extends Component { constructor(props) { super(props) } render() { return ( <Image source={this.props.image} style={styles.image} /> ) } } Avatar.propTypes = { image: PropTypes.object.isRequired, } const styles = StyleSheet.create({ image: { width: 30, height: 30, borderRadius: 15, }, })
- 64. import React, { Component, StyleSheet, PropTypes, Image, } from 'react-native' export default class Avatar extends Component { constructor(props) { super(props) } render() { return ( <Image source={this.props.image} style={styles.image} /> ) } } Avatar.propTypes = { image: PropTypes.object.isRequired, } const styles = StyleSheet.create({ image: { width: 30, height: 30, borderRadius: 15, }, })
- 65. TUDO PODE SER JAVASCRIPT StyleSheet.create({ image: { width: 30, height: 30, borderRadius: 15, }, })
- 66. TUDO PODE SER JAVASCRIPT StyleSheet.create({ image: { width: 30, height: 30, borderRadius: 15, }, }) StyleSheet
- 67. TUDO PODE SER JAVASCRIPT StyleSheet.create({ image: { width: 30, height: 30, borderRadius: 15, }, }) StyleSheet .image { width: 30px, height: 30px, borderRadius: 15px } CSS
- 68. REACT VIRTUAL DOM COMPONENTES TUDO PODE SER JAVASCRIPT
- 74. REACT NATIVE
- 75. COMPONENTES View Image Text Activity Indicator Modal Navigator Refresh Control ScrollView StatusBar Switch ListView TextInput WebView MapView ProgressBar Android …
- 76. APIs Alert Animated AppState BackAndroid CameraRoll Clipboard DatePicker Android Dimensions Geolocation Linking NetInfo ToastAndroid PixelRatio PushNotification IOS Vibration +++
- 77. COMUNIDADE
- 78. COMUNIDADE
- 79. COMUNIDADE
- 81. BIBLIOTECAS NATIVAS BIBLIOTECA NATIVA REACT NATIVE
- 82. BIBLIOTECAS NATIVAS BIBLIOTECA NATIVA REACT NATIVE
- 83. BIBLIOTECAS NATIVAS BIBLIOTECA NATIVA REACT NATIVE
- 84. BIBLIOTECAS NATIVAS BIBLIOTECA NATIVA REACT NATIVE REACT NATIVE BRIDGE
- 85. 'use strict'; var {PayPal} = require('react-native').NativeModules; var constants = {}; var constantNames = Object.keys(PayPal).filter(p => p == p.toUpperCase()); constantNames.forEach(c => constants[c] = PayPal[c]); var functions = { paymentRequest(payPalParameters) { return new Promise(function(resolve, reject) { PayPal.paymentRequest(payPalParameters, resolve, reject); }); } }; var exported = {}; Object.assign(exported, constants, functions); module.exports = exported;
- 86. 'use strict'; var {PayPal} = require('react-native').NativeModules; var constants = {}; var constantNames = Object.keys(PayPal).filter(p => p == p.toUpperCase()); constantNames.forEach(c => constants[c] = PayPal[c]); var functions = { paymentRequest(payPalParameters) { return new Promise(function(resolve, reject) { PayPal.paymentRequest(payPalParameters, resolve, reject); }); } }; var exported = {}; Object.assign(exported, constants, functions); module.exports = exported;
- 87. public class PayPal extends ReactContextBaseJavaModule { @ReactMethod public void paymentRequest( final ReadableMap payPalParameters, final Callback successCallback, final Callback errorCallback ) { final String environment = payPalParameters.getString("environment"); final String clientId = payPalParameters.getString("clientId"); final String price = payPalParameters.getString("price"); final String currency = payPalParameters.getString("currency"); final String description = payPalParameters.getString("description"); PayPalConfiguration config = new PayPalConfiguration().environment(environment).clientId(clientId); startPayPalService(config); PayPalPayment thingToBuy = new PayPalPayment( new BigDecimal(price), currency, description, PayPalPayment.PAYMENT_INTENT_SALE); Intent intent = new Intent(activityContext, PaymentActivity.class) .putExtra(PayPalService.EXTRA_PAYPAL_CONFIGURATION, config) .putExtra(PaymentActivity.EXTRA_PAYMENT, thingToBuy); currentActivity.startActivityForResult(intent, paymentIntentRequestCode); } }
- 88. public class PayPal extends ReactContextBaseJavaModule { @ReactMethod public void paymentRequest( final ReadableMap payPalParameters, final Callback successCallback, final Callback errorCallback ) { final String environment = payPalParameters.getString("environment"); final String clientId = payPalParameters.getString("clientId"); final String price = payPalParameters.getString("price"); final String currency = payPalParameters.getString("currency"); final String description = payPalParameters.getString("description"); PayPalConfiguration config = new PayPalConfiguration().environment(environment).clientId(clientId); startPayPalService(config); PayPalPayment thingToBuy = new PayPalPayment( new BigDecimal(price), currency, description, PayPalPayment.PAYMENT_INTENT_SALE); Intent intent = new Intent(activityContext, PaymentActivity.class) .putExtra(PayPalService.EXTRA_PAYPAL_CONFIGURATION, config) .putExtra(PaymentActivity.EXTRA_PAYMENT, thingToBuy); currentActivity.startActivityForResult(intent, paymentIntentRequestCode); } }
- 89. public class PayPal extends ReactContextBaseJavaModule { @ReactMethod public void paymentRequest( final ReadableMap payPalParameters, final Callback successCallback, final Callback errorCallback ) { final String environment = payPalParameters.getString("environment"); final String clientId = payPalParameters.getString("clientId"); final String price = payPalParameters.getString("price"); final String currency = payPalParameters.getString("currency"); final String description = payPalParameters.getString("description"); PayPalConfiguration config = new PayPalConfiguration().environment(environment).clientId(clientId); startPayPalService(config); PayPalPayment thingToBuy = new PayPalPayment( new BigDecimal(price), currency, description, PayPalPayment.PAYMENT_INTENT_SALE); Intent intent = new Intent(activityContext, PaymentActivity.class) .putExtra(PayPalService.EXTRA_PAYPAL_CONFIGURATION, config) .putExtra(PaymentActivity.EXTRA_PAYMENT, thingToBuy); currentActivity.startActivityForResult(intent, paymentIntentRequestCode); } }
- 90. PLATAFORMAS
- 91. PLATAFORMAS
- 92. PLATAFORMAS =
- 93. PLATAFORMAS =
- 94. PLATAFORMAS =
- 95. PLATAFORMAS const Loader = Platform.select({ ios: () => require('LoaderIOS'), android: () => require('LoaderAndroid'), })() render () { ... <Loader /> ... }
- 96. PLATAFORMAS import Loader from './Loader' render () { ... <Loader /> ... } - Loader.ios.js - Loader.android.js
- 99. REACT NATIVE TOOLS Não precisa compilar Desenvolvimento dinâmico Monitor de performance
- 100. REACT NATIVE TOOLS $ react-native logs-ios $ react-native logs-android
- 101. REACT NATIVE TOOLS $ react-native logs-ios $ react-native logs-android Debug on Chrome
- 102. CODE PUSH
- 103. CODE PUSH
- 104. CODE PUSH
- 105. CODE PUSH npm i —save react-native-code-push@latest
- 106. CODE PUSH npm i —save react-native-code-push@latest import codePush from ‘react-native-code-push' ... componentDidMount() { codePush.sync() }
- 107. CODE PUSH npm i —save react-native-code-push@latest import codePush from ‘react-native-code-push' ... componentDidMount() { codePush.sync() } code-push release-react SampleApp ios
- 108. CODE PUSH code-push release-react SampleApp -- rollout 25% -- targetBinaryVersion “~1.1.0”
- 110. RNPM
- 111. RNPM
- 112. RNPM
- 113. RNPM
- 114. RNPM
- 115. RNPM
- 116. RNPM npm i rnpm -g
- 117. RNPM npm i rnpm -g npm i react-native-module --save rnpm link react-native-module
- 118. RNPM npm i rnpm -g rnpm install react-native-module
- 119. BOAS PRÁTICAS
- 120. BOAS PRÁTICAS ESTRUTURA DO SEU PROJETO FLUXO DE DADOS TESTANDO SEUS COMPONENTES
- 123. FLUXO DE DADOS COMPONENT API class SampleComponent extends Component { ... componentDidMount() { fetch(‘http://api.com/data‘).then((res) => { this.setState({ data: res }) }) } ... }
- 126. FLUXO DE DADOS
- 127. FLUXO DE DADOS
- 139. BOAS PRÁTICAS ESTRUTURA DO SEU PROJETO FLUXO DE DADOS TESTANDO SEUS COMPONENTES
- 147. TESTANDO SEUS COMPONENTES ACTION CREATORS describe('actions', () => { it('should create an action to load items', () => { // given const loading = true const expectedAction = { type: 'START_LOADER', loading: loading } // when let action = actions.loadItems() // then expect(action).toEqual(expectedAction) } })
- 149. REDUCERS TESTANDO SEUS COMPONENTES describe('items reducer', () => { it('should handle START_LOADER', () => { // given const initialState = { loading: false, items: [] } const expectedState = { loading: true, items: [] } const action = { type: 'START_LOADER', loading: true } // when let state = reducer(initialState, action) // then expect(state).toEqual(expectedState) } })
- 151. COMPONENT TESTANDO SEUS COMPONENTES class ItemList extends Component { constructor(props) { super(props) } _handleLoader() { if (this.props.loading) { return <Loader /> } } render() { let loader = this._handleLoader() return ( <View> {loader} </View> ) } }
- 152. COMPONENT TESTANDO SEUS COMPONENTES describe(‘ItemList Component', () => { it('should render a view without loader', () => { // given const props = { loading: false, } // when let renderer = TestUtils.createRenderer() renderer.render(<ItemList {...props} />) let output = renderer.getRenderOutput() // then expect(output.type).toBe(View) expect(output.props.children).toEqual(undefined) } })
- 156. BOAS PRÁTICAS ESTRUTURA DO SEU PROJETO FLUXO DE DADOS TESTANDO SEUS COMPONENTES
- 157. ESTRUTURA DO SEU PROJETO your-project/ android/ ios/ - index.android.js - index.ios.js
- 158. ESTRUTURA DO SEU PROJETO your-project/ android/ ios/ src/ - index.android.js - index.ios.js
- 159. ESTRUTURA DO SEU PROJETO your-project/ android/ ios/ src/ actions/ components/ containers/ reducers/ store/ - index.android.js - index.ios.js
- 160. ESTRUTURA DO SEU PROJETO src/ actions/ - Posts.js - Posts.spec.js components/ containers/ reducers/ store/
- 161. ESTRUTURA DO SEU PROJETO src/ actions/ components/ - Loader.js - Loader.spec.js - Post.js - Post.spec.js containers/ reducers/ store/
- 162. ESTRUTURA DO SEU PROJETO src/ actions/ components/ base/ - Loader.js - Loader.spec.js post/ - Post.js - Post.spec.js - PostActions.js - PostActions.spec.js account/ - AccountSettings.js - AccountSettings.spec.js containers/ reducers/ store/
- 163. ESTRUTURA DO SEU PROJETO src/ actions/ components/ containers/ - Root.js - Root.spec.js - Timeline.js - Timeline.spec.js - Account.js - Account.spec.js reducers/ store/
- 164. ESTRUTURA DO SEU PROJETO src/ actions/ components/ containers/ reducers/ - Root.js - Root.spec.js - Posts.js - Posts.spec.js - Account.js - Account.spec.js store/
- 165. ESTRUTURA DO SEU PROJETO src/ actions/ components/ containers/ reducers/ store/ - ConfigureStore.js
- 166. SAMPLE APP