Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. JavaScript code No Errors Show Details Preview State value is:

    42 import React from 'react'; import ReactDOM from 'react-dom'; const Counter = ({ value }) => ( <p>State value is: {value}</p> ); 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
  2. JavaScript code No Errors Show Details Preview import React from

    'react'; import { AppRegistry, Button, Text, View } from 'react-native'; const Counter = ({ value }) => ( <Text>State value is: {value}</Text> ); 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
  3. JavaScript code No Errors Show Details Preview import React from

    'react'; import { AppRegistry, Button, Text, View } from 'react-native'; const Counter = ({ value }) => ( <Text>State value is: {value}</Text> ); 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
  4. 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' <View style={{flex: 1, flexDirection: 'row'}}> <View style={{flex: 1, backgroundColor: 'blue'}} /> <View style={{flex: 1, backgroundColor: 'white'}} /> <View style={{flex: 1, backgroundColor: 'red'}} /> </View> ); } } AppRegistry.registerComponent('App', () => App); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
  5. import PosterViewer from 'app/PosterViewer'; <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