React Nativefor Web Developers
JS MVC Meetup #15 - March 16, 2016 - Rob Gietema @robgietema
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> ); } }
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
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 } }