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

Tadeu Zagallo, Facebook, London — React Native ...

Tadeu Zagallo, Facebook, London — React Native Architecture Overview

Tadeu Zagallo, Facebook, London — React Native Architecture Overview

Software Engineer at Facebook who works on React Native performance. He will talk about React Native architecture and best practices to get all the benefits of using the platform.

React Amsterdam

April 21, 2016
Tweet

More Decks by React Amsterdam

Other Decks in Technology

Transcript

  1. WHAT HAPPENS WHEN YOU TYPE A URL INTO YOUR BROWSER

    AND PRESS ENTER? @tadeuzagallo #reactamsterdam
  2. import React, { Component, } from 'react'; import { AppRegistry,

    Text, } from 'react-native'; class SampleApp extends Component { render() { return ( <Text style={{ margin: 40 }}> Hello, World! </Text> ); } } AppRegistry.registerComponent('SampleApp', () => SampleApp); @tadeuzagallo #reactamsterdam
  3. @implementation MyNativeModule + (NSString *)moduleName { return @""; } +

    (void)load { RCTRegisterModule(self); } @end @tadeuzagallo #reactamsterdam
  4. { "remoteModuleConfig":[ // [ $moduleName, $exportedConstants:{}? $methods:[]?, $asyncIndexes:[]? ] ["RCTStatusBarManager",["getHeight","setStyle","setHidden","setNetworkActivityIndicatorVisible"]],

    ["RCTSourceCode",{"scriptURL":"http:\/\/localhost:8081\/index.ios.bundle?platform=ios&dev=true"},["getScriptText"],[0]], ["RCTAlertManager",["alertWithArgs"]], ["RCTExceptionsManager",["reportSoftException","reportFatalException","updateExceptionMessage","reportUnhandledException"]], // ... ] } @tadeuzagallo #reactamsterdam
  5. // import React, { // Component, // } from 'react';

    // // import { // AppRegistry, // Text, TouchableHighlight, // } from 'react-native'; // // class SampleApp extends Component { onPress() { alert('Hello, World!'); } // render() { // return ( <TouchableHighlight style={{ margin: 40 }} onPress={this.onPress}> <Text> Button </Text> </TouchableHighlight>; // ); // } // } // // AppRegistry.registerComponent('SampleApp', () => SampleApp); @tadeuzagallo #reactamsterdam
  6. if (Platform.OS === 'ios') { AlertIOS.alert(title, message, buttons); } else

    if (Platform.OS === 'android') { AlertAndroid.alert(title, message, buttons); } @tadeuzagallo #reactamsterdam
  7. // import React, { // Component, // } from 'react';

    // // import { // AppRegistry, // Text, // TouchableHighlight, // } from 'react-native'; // // class SampleApp extends Component { // onPress() { Alert.alert('Hello, World!', 'Press ok to alert again', [ { text: 'Ok', onPress() { alert('Ok!') } }, { text: 'Cancel', onPress() { alert('Cancel') } }, ]); // } // render() { // return ( // <TouchableHighlight style={{ margin: 40 }} onPress={this.onPress}> // <Text> // Button // </Text> // </TouchableHighlight>; // ); // } // } // // AppRegistry.registerComponent('SampleApp', () => SampleApp); @tadeuzagallo #reactamsterdam