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

5. 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
6. ❤
9. ➡ ➡
10. 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
11. 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
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' <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
23. import StyleSheet from 'app/PaulingStyleSheet'; export default StyleSheet.create({ Header: { paddingTop: 0, android: { height: 56, }, ios: { height: 44, }, }, // ... });
24. 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
25. ❤❤❤