Introduction to React Native (Devsmeetup Freiburg)

Two years ago, Facebook open-sourced React Native, a framework to build native mobile apps using JavaScript and React. It quickly became a game-changer and we all use applications written with React Native (Airbnb, Instagram, Skype, etc.).

In this short talk (in English), I’ll introduce the React and React Native ecosystems and share my experience building a mobile application for Android and iOS.

Online slides: http://slides.williamdurand.fr/introduction-to-react-native/
Sources: https://github.com/willdurand-slides/introduction-to-react-native

Transcript

1. View Slide

2. View Slide

3. View Slide

4. View Slide

5. JavaScript code
   No Errors Show Details
   Preview
   State value is: 42
   import React from 'react';
   import ReactDOM from 'react-dom';
   const Counter = ({ value }) => (
   State value is: {value}
   );
   class App extends React.Component {
   constructor(props) {
   super(props);
   this.state = { value: 42 };
   }
   handleOnClick = () => {
   this.setState(prevState => ({ value: prevState.value + 1 }));
   }
   d () {
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   

   View Slide

6. ❤
   

   View Slide

7. View Slide

8. View Slide

9. ➡ ➡
   

   View Slide

10. JavaScript code
    No Errors Show Details
    Preview
    import React from 'react';
    import { AppRegistry, Button, Text, View } from 'react-native';
    const Counter = ({ value }) => (
    State value is: {value}
    );
    class App extends React.Component {
    constructor(props) {
    super(props);
    this.state = { value: 42 };
    }
    handleOnClick = () => {
    this.setState(prevState => ({ value: prevState.value + 1 }));
    }
    d () {
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    

    View Slide

11. JavaScript code
    No Errors Show Details
    Preview
    import React from 'react';
    import { AppRegistry, Button, Text, View } from 'react-native';
    const Counter = ({ value }) => (
    State value is: {value}
    );
    class App extends React.Component {
    constructor(props) {
    super(props);
    this.state = { value: 42 };
    }
    handleOnClick = () => {
    this.setState(prevState => ({ value: prevState.value + 1 }));
    }
    d () {
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    

    View Slide

12. JavaScript code
    No Errors Show Details
    Preview
    import React from 'react';
    import { AppRegistry, View } from 'react-native';
    class App extends React.Component {
    render() {
    return (
    // flexDirection: 'row' | 'column'
    
    
    
    
    
    );
    }
    }
    AppRegistry.registerComponent('App', () => App);
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. import StyleSheet from 'app/PaulingStyleSheet';
    export default StyleSheet.create({
    Header: {
    paddingTop: 0,
    android: {
    height: 56,
    },
    ios: {
    height: 44,
    },
    },
    // ...
    });
    

    View Slide

24. import PosterViewer from 'app/PosterViewer';
    fileType={poster.file_type}
    path={poster.cached_file}
    />
    src/PosterViewer
    ├── index.android.js
    ├── index.android.test.js
    ├── index.ios.js
    └── index.ios.test.js
    

    View Slide

25. ❤❤❤
    

    View Slide

26. View Slide

27. View Slide