Download as PDF, PPTX
!['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;](https://image.slidesharecdn.com/reactnative-workshop-160728180157/75/React-Native-Workshop-85-2048.jpg)
!['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;](https://image.slidesharecdn.com/reactnative-workshop-160728180157/75/React-Native-Workshop-86-2048.jpg)
![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) } })](https://image.slidesharecdn.com/reactnative-workshop-160728180157/75/React-Native-Workshop-149-2048.jpg)
Uploaded byFellipe Chagas
React Native - Workshop
The document discusses a React Native workshop led by Fellipe Chagas, covering topics such as native and hybrid development, frameworks, and best practices. It includes code examples for component creation, state management, testing components, and utilizing PayPal integration. Resources, community involvement, and sample project structures are also highlighted to guide developers in their React Native applications.
React Native - Workshop
- 1.
- 2.
- 3.
- 4. Ajudamos grandes empresase startups a focarem em seu negócio entregando tecnologia
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31. REACT e milhares deoutros…
- 32.
- 33. REACT COMPONENTES TUDO PODE SERJAVASCRIPT
- 34. REACT VIRTUAL DOM COMPONENTES TUDO PODESER JAVASCRIPT
- 35.
- 36.
- 37. COMPONENTES HEADER TABS CARD CARD IMAGE USER AVATAR CARD TEXT CARDIMAGE USER AVATAR CARD TEXT
- 38. COMPONENTES HEADER TABS CARD CARD IMAGE USER AVATAR CARD TEXT CARDIMAGE USER AVATAR CARD TEXT HEADER TABS ACCOUNT INFO USER AVATAR ACCOUNT SETTINGS
- 39.
- 40.
- 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 }, })
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52. REACT VIRTUAL DOM COMPONENTES TUDO PODESER JAVASCRIPT
- 53. TUDO PODE SERJAVASCRIPT
- 54. TUDO PODE SERJAVASCRIPT
- 55.
- 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 SERJAVASCRIPT <Image source={this.props.image} style={styles.image} />
- 59. TUDO PODE SERJAVASCRIPT <Image source={this.props.image} style={styles.image} /> JSX
- 60. TUDO PODE SERJAVASCRIPT <Image source={this.props.image} style={styles.image} /> JSX let image = React.createElement( Image, { source: this.props.image, style: styles.image })
- 61. TUDO PODE SERJAVASCRIPT <Image source={this.props.image} style={styles.image} /> JSX <img src=‘imagem.png’ style=‘border-radius: 5px’ /> HTML
- 62.
- 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 SERJAVASCRIPT StyleSheet.create({ image: { width: 30, height: 30, borderRadius: 15, }, })
- 66. TUDO PODE SERJAVASCRIPT StyleSheet.create({ image: { width: 30, height: 30, borderRadius: 15, }, }) StyleSheet
- 67. TUDO PODE SERJAVASCRIPT StyleSheet.create({ image: { width: 30, height: 30, borderRadius: 15, }, }) StyleSheet .image { width: 30px, height: 30px, borderRadius: 15px } CSS
- 68. REACT VIRTUAL DOM COMPONENTES TUDO PODESER JAVASCRIPT
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75. COMPONENTES View Image Text Activity Indicator ModalNavigator Refresh Control ScrollView StatusBar Switch ListView TextInput WebView MapView ProgressBar Android …
- 76. APIs Alert Animated AppStateBackAndroid CameraRoll Clipboard DatePicker Android Dimensions Geolocation Linking NetInfo ToastAndroid PixelRatio PushNotification IOS Vibration +++
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84. BIBLIOTECAS NATIVAS BIBLIOTECA NATIVA REACTNATIVE 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 PayPalextends 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 PayPalextends 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 PayPalextends 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.
- 91.
- 92.
- 93.
- 94.
- 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
- 97.
- 98.
- 99. REACT NATIVE TOOLS Nãoprecisa 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.
- 103.
- 104.
- 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-reactSampleApp -- rollout 25% -- targetBinaryVersion “~1.1.0”
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 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.
- 120. BOAS PRÁTICAS ESTRUTURA DOSEU PROJETO FLUXO DE DADOS TESTANDO SEUS COMPONENTES
- 121.
- 122.
- 123. FLUXO DE DADOS COMPONENT API classSampleComponent extends Component { ... componentDidMount() { fetch(‘http://api.com/data‘).then((res) => { this.setState({ data: res }) }) } ... }
- 124.
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139. BOAS PRÁTICAS ESTRUTURA DOSEU PROJETO FLUXO DE DADOS TESTANDO SEUS COMPONENTES
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 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) } })
- 148.
- 149. REDUCERS TESTANDO SEUS COMPONENTES describe('itemsreducer', () => { 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) } })
- 150.
- 151. COMPONENT TESTANDO SEUS COMPONENTES classItemList 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(‘ItemListComponent', () => { 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) } })
- 153.
- 154.
- 155.
- 156. BOAS PRÁTICAS ESTRUTURA DOSEU PROJETO FLUXO DE DADOS TESTANDO SEUS COMPONENTES
- 157. ESTRUTURA DO SEUPROJETO your-project/ android/ ios/ - index.android.js - index.ios.js
- 158. ESTRUTURA DO SEUPROJETO your-project/ android/ ios/ src/ - index.android.js - index.ios.js
- 159. ESTRUTURA DO SEUPROJETO your-project/ android/ ios/ src/ actions/ components/ containers/ reducers/ store/ - index.android.js - index.ios.js
- 160. ESTRUTURA DO SEUPROJETO src/ actions/ - Posts.js - Posts.spec.js components/ containers/ reducers/ store/
- 161. ESTRUTURA DO SEUPROJETO src/ actions/ components/ - Loader.js - Loader.spec.js - Post.js - Post.spec.js containers/ reducers/ store/
- 162. ESTRUTURA DO SEUPROJETO 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 SEUPROJETO src/ actions/ components/ containers/ - Root.js - Root.spec.js - Timeline.js - Timeline.spec.js - Account.js - Account.spec.js reducers/ store/
- 164. ESTRUTURA DO SEUPROJETO src/ actions/ components/ containers/ reducers/ - Root.js - Root.spec.js - Posts.js - Posts.spec.js - Account.js - Account.spec.js store/
- 165. ESTRUTURA DO SEUPROJETO src/ actions/ components/ containers/ reducers/ store/ - ConfigureStore.js
- 166.
- 167.
- 168.