Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React Native: JS MVC Meetup #15

616 views

Published on

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.

Published in: Internet
  • HOW TO UNLOCK HER LEGS! (SNEAK PEAK), learn more... ♥♥♥ http://ishbv.com/unlockher/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ➤➤ https://tinyurl.com/rockhardxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

React Native: JS MVC Meetup #15

  1. 1. React Native for Web Developers JS MVC Meetup #15 - March 16, 2016 -Rob Gietema @robgietema
  2. 2. Who am I?
  3. 3. Why React Native?
  4. 4. Native development
  5. 5. UIWebView
  6. 6. React
  7. 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. 8. Hello World Example import React from 'react'; import HelloWorld from './hello-world'; React.render( <HelloWorld />, document.body );
  9. 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. 10. State class HelloWorld extends React.Component { constructor(props) { super(props); this.state = { counter: 0 }; } increase() { this.setState('counter', this.state.counter + 1); } ... }
  11. 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. 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. 13. Lifecycle Methods class HelloWorld extends React.Component { componentWillMount() { // Fetch some data } render() { return ( <h1>Hello from {this.props.author}</h1> ); } }
  14. 14. React State > Components > DOM
  15. 15. React Native State > Components > DOM, iOS Views, Android Views
  16. 16. Learn once write anywhere
  17. 17. What does React Native provide? Touch Handling Native Components Style & Layout
  18. 18. How to install Mac OS X Homebrew Node >= 4.0
  19. 19. How to install npm install -g react-native-cli
  20. 20. Optional npm install watchmen npm install flow
  21. 21. iOS Install Xcode
  22. 22. Android Install Android Studio
  23. 23. Getting started react-native init ExampleApp
  24. 24. Run Android react-native run-android
  25. 25. Run iOS
  26. 26. Components View Text ListView ScrollView TextInput Navigator Image ...
  27. 27. Components
  28. 28. Native modules
  29. 29. Frameworks
  30. 30. TextInput <TextInput ref="title" autoFocus={true} placeholder={Untitled} style={styles.title} /> <TextInput ref="description" multiline={true} placeholder={Description} style={styles.description} />
  31. 31. Button <TouchableOpacity onPress={() => console.log('pressed')}> <View> <Text>Button</Text> </View> </TouchableOpacity>
  32. 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. 33. Navigator <Navigator initialRoute={{name: 'My First Scene', index: 0}} renderScene={(route, navigator) => // Return view based on route } />
  34. 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. 35. Fetch data fetch(encodeURI('http://myendpoint')) .then(response => { // Handle data });
  36. 36. AsyncStorage async setMyValue(value) { try { await AsyncStorage.setItem(MY_KEY, value); } catch (error) { // Handle error } }
  37. 37. AsyncStorage async loadMyValue() { try { let notes = await AsyncStorage.getItem(MY_KEY); } catch (error) { // Handle error } }
  38. 38. AsyncStorage async removeValue() { try { await AsyncStorage.removeItem(MY_KEY); } catch (error) { // Handle error } }
  39. 39. Questions? slideshare.net/robgietema

×