Hands On: React Native

Transcript

1. Hands On
   React Native
   Robert Vogt
   #NCamp16
   

   View Slide

2. Robert Vogt
   Software Engineer
   from & in Sankt Gallen
   @_deniaz
   

   View Slide

3. React Native
   

   View Slide

4. Efficient Re-rendering
   through
   Virtual DOM
   

   View Slide

5. Rendering Components
   with
   JSX
   

   View Slide

6. class HelloMessage extends React.Component {
   render() {
   return Hello {this.props.name}
   }
   }
   

   View Slide

7. const HelloMessage = (props) => (
   Hello {props.name}
   );
   

   View Slide

8. const HelloMessage = (props) => (
   
   
   Hello {props.name}
   
   
   );
   

   View Slide

9. 
   

   View Slide

10. How JavaScript
    can be
    Native
    

    View Slide

11. Store View
    Action
    Action Dispatcher
    

    View Slide

12. ES6 / ES2015
    babeljs.io/docs/learn-es2015
    

    View Slide

13. View Slide

14. View Slide

15. An exemplary
    Project Structure
    

    View Slide

16. .babelrc
    android
    index.android.js
    index.ios.js
    ios
    node_modules
    package.json
    src
    ├── app.js
    ├── infrastructure
    │ ├── router.js
    │ ├── store.js
    └── ui
    ├── components
    │ └── scenes
    │ └── home.js
    └── reducers
    ├── update.js
    ├── actions
    

    View Slide

17. git.io/v6bSK
    git.io/v6bSK
    

    View Slide

18. 1
    1
    The Talks
    ❏ Geolocation
    ❏ HTTP
    13:50 - 14:10
    

    View Slide

19. 2
    2
    The Looks
    ❏ Layouting
    ❏ Styling
    14:10 - 14:20
    

    View Slide

20. 3
    3
    The Brain
    ❏ Persistent Storage
    14:20 - 14:40
    

    View Slide

21. 4
    4
    The Personality
    ❏ Navigation
    ❏ Routing
    ❏ Storage
    14:40 - 15:00
    

    View Slide

22. 5
    5
    The Package
    ❏ Deployment
    15:00 - 15:20
    

    View Slide

23. That’s it!
    

    View Slide