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

F59d2f1ed66b8d9c6ceebea5a748494b?s=128

William Durand

October 25, 2017
Tweet

Transcript

  1. None
  2. None
  3. None
  4. None
  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. None
  7. None
  8. ➡ ➡

  9. 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
  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, 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
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. import StyleSheet from 'app/PaulingStyleSheet'; export default StyleSheet.create({ Header: { paddingTop:

    0, android: { height: 56, }, ios: { height: 44, }, }, // ... });
  23. 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
  24. ❤❤❤

  25. None
  26. None