React Native Internals

REACT NATIVEInternals

@tadeuzagallo #reactamsterdam

ABOUT Me


WHAT HAPPENS WHENYOU TYPE A URL INTO YOUR BROWSER

AND PRESS ENTER?


What HAPPENS WHEN YOU RUN A React Native APP?


▸ No WebView▸ No HTML▸ No CSS


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);


@implementation MyNativeModule

RCT_EXPORT_MODULE()

@end


@implementation MyNativeModule

+ (NSString *)moduleName { return @""; }+ (void)load { RCTRegisterModule(self); }

@end


{ "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"]], // ... ]}


VMBasics


// 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);


class SampleApp extends Component { onPress() {-> alert('Hello, World!'); } ... }


if (Platform.OS === 'ios') { AlertIOS.alert(title, message, buttons);} else if (Platform.OS === 'android') { AlertAndroid.alert(title, message, buttons);}


// 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);


Thank you


React Native Internals

Software

Transcript of React Native Internals