React Native: JS MVC Meetup #15
5 likes733 views
Web and mobile development have always been separate worlds. Sure there have been tools like PhoneGap but it never matched the performance of native apps. React Native is here to change all that by using React to render native components for both iOS and Android. This talk will give an introduction to React Native through the eyes of a web developer.
Ad
More Related Content
What's hot (20)
Viewers also liked (20)
![[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox](https://cdn.slidesharecdn.com/ss_thumbnails/l4-react-native-layout-160911060742-thumbnail.jpg?width=560&fit=bounds)
![[React Native Tutorial] Lecture 6: Component, Props, and Network](https://cdn.slidesharecdn.com/ss_thumbnails/l6-component-prop-network-160920050452-thumbnail.jpg?width=560&fit=bounds)
Ad
Similar to React Native: JS MVC Meetup #15 (20)
Ad
More from Rob Gietema (20)
Recently uploaded (20)
React Native: JS MVC Meetup #15
- 1. React Native for Web Developers JS MVC Meetup #15 - March 16, 2016 -Rob Gietema @robgietema
- 2. Who am I?
- 5. UIWebView
- 6. React
- 7. Hello World Example import React from 'react'; class HelloWorld extends React.Component { render() { return ( <div> <h1>Hello World!</h1> </div> ); } } export default HelloWorld;
- 8. Hello World Example import React from 'react'; import HelloWorld from './hello-world'; React.render( <HelloWorld />, document.body );
- 9. Props import 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 );
- 10. State class HelloWorld extends React.Component { constructor(props) { super(props); this.state = { counter: 0 }; } increase() { this.setState('counter', this.state.counter + 1); } ... }
- 11. Nesting import 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> ); } }
- 12. Event Handlers class 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> ); } }
- 13. Lifecycle Methods class HelloWorld extends React.Component { componentWillMount() { // Fetch some data } render() { return ( <h1>Hello from {this.props.author}</h1> ); } }
- 14. React State > Components > DOM
- 15. React Native State > Components > DOM, iOS Views, Android Views
- 16. Learn once write anywhere
- 17. What does React Native provide? Touch Handling Native Components Style & Layout
- 18. How to install Mac OS X Homebrew Node >= 4.0
- 19. How to install npm install -g react-native-cli
- 20. Optional npm install watchmen npm install flow
- 23. Getting started react-native init ExampleApp
- 25. Run iOS
- 27. Components
- 28. Native modules
- 29. Frameworks
- 31. Button <TouchableOpacity onPress={() => console.log('pressed')}> <View> <Text>Button</Text> </View> </TouchableOpacity>
- 32. Styles and Layout const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', }, instructions: { textAlign: 'center', marginBottom: 5, }, });
- 33. Navigator <Navigator initialRoute={{name: 'My First Scene', index: 0}} renderScene={(route, navigator) => // Return view based on route } />
- 34. Navigator Methods getCurrentRoutes() - 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
- 35. Fetch data fetch(encodeURI('http://myendpoint')) .then(response => { // Handle data });
- 36. AsyncStorage async setMyValue(value) { try { await AsyncStorage.setItem(MY_KEY, value); } catch (error) { // Handle error } }
- 37. AsyncStorage async loadMyValue() { try { let notes = await AsyncStorage.getItem(MY_KEY); } catch (error) { // Handle error } }
- 38. AsyncStorage async removeValue() { try { await AsyncStorage.removeItem(MY_KEY); } catch (error) { // Handle error } }