React Nativefor Web Developers

JS MVC Meetup #15 - March 16, 2016 - Rob Gietema @robgietema

Who am I?

Why React Native?

Native development

UIWebView

React

Hello World Exampleimport React from 'react';

class HelloWorld extends React.Component { render() { return ( <div> <h1>Hello World!</h1> </div> ); } }

export default HelloWorld;

Hello World Exampleimport React from 'react'; import HelloWorld from './hello-world';

React.render( <HelloWorld />, document.body );

Propsimport React from 'react';

class HelloWorld extends React.Component { render() { return ( <div> <h1>Hello from {this.props.author}</h1> </div> ); } }

React.render( <HelloWorld author="John Doe" />, document.body );

Stateclass HelloWorld extends React.Component { constructor(props) { super(props); this.state = { counter: 0 }; }

increase() { this.setState('counter', this.state.counter + 1); }

... }

Nestingimport React from 'react'; import NavBar from './navbar'; import Footer from './footer';

class HelloWorld extends React.Component { render() { return ( <div> <NavBar title="Example App" /> <h1>Hello World!</h1> <Footer /> </div> ); } }

Event Handlersclass HelloWorld extends React.Component { handleClick(event) { alert(this.refs.myInput); }

render() { return ( <div> <h1>Hello from {this.props.author}</h1> <input type="text" ref="myInput" /> <button onClick={this.handleClick} /> </div> ); } }

Lifecycle Methodsclass HelloWorld extends React.Component { componentWillMount() { // Fetch some data }

render() { return ( <h1>Hello from {this.props.author}</h1> ); } }

ReactState > Components > DOM

React NativeState > Components > DOM, iOS Views, Android Views

Learn once write anywhere

What does React Native provide?Touch HandlingNative ComponentsStyle & Layout

How to installMac OS XHomebrewNode >= 4.0

How to installnpm install -g react-native-cli

Optionalnpm install watchmen npm install flow

iOSInstall Xcode

AndroidInstall Android Studio

Getting startedreact-native init ExampleApp

Run Androidreact-native run-android

Run iOS

ComponentsViewTextListViewScrollViewTextInputNavigatorImage...

Components

Native modules

Frameworks

TextInput<TextInput ref="title" autoFocus={true} placeholder={Untitled} style={styles.title} />

<TextInput ref="description" multiline={true} placeholder={Description} style={styles.description} />

Button<TouchableOpacity onPress={() => console.log('pressed')}> <View> <Text>Button</Text> </View> </TouchableOpacity>

Styles and Layoutconst styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', }, instructions: { textAlign: 'center', marginBottom: 5, }, });

Navigator<Navigator initialRoute={{name: 'My First Scene', index: 0}} renderScene={(route, navigator) => // Return view based on route } />

Navigator MethodsgetCurrentRoutes() - returns the current list of routes jumpBack() - Jump backward without unmounting the current scene jumpForward() - Jump forward to the next scene in the route stack jumpTo(route) - Transition to an existing scene without unmounting push(route) - Navigate forward to a new scene pop() - Transition back and unmount the current scene replace(route) - Replace the current scene with a new route replaceAtIndex(route, index) - Replace scene specified by index replacePrevious(route) - Replace the previous scene resetTo(route) - Navigate to a new scene and reset route stack immediatelyResetRouteStack(routeStack) - Reset scene with array popToRoute(route) - Pop to a particular scene popToTop() - Pop to the first scene in the stack

Fetch datafetch(encodeURI('http://myendpoint')) .then(response => { // Handle data });

AsyncStorageasync setMyValue(value) { try { await AsyncStorage.setItem(MY_KEY, value); } catch (error) { // Handle error } }

AsyncStorageasync loadMyValue() { try { let notes = await AsyncStorage.getItem(MY_KEY); } catch (error) { // Handle error } }

AsyncStorageasync removeValue() { try { await AsyncStorage.removeItem(MY_KEY); } catch (error) { // Handle error } }

Questions?slideshare.net/robgietema