$30 off During Our Annual Pro Sale. View Details »

Introduction to React Native (Devsmeetup Freiburg)

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

William Durand

October 25, 2017
Tweet

More Decks by William Durand

Other Decks in Programming

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