Introduction to React Native (MadridJS - September 2018)

Introduction to  React Native Javier Cuevas @javier_dev MadridJS - September
2018

Javier Cuevas @javier_dev About me

• P2P marketplace for Dog Owners and Dog Sitters  (tl;dr
“Airbnb for dogs”). • Operating since 2012 in Spain, France, UK and Germany. • Launched our first mobile (hybrid) app in 2015 with Ionic Framework (Cordova) • Launched new React Native app in September 2017 About

Why mobile   matters so much?

Jun-13 Aug-13 O ct-13 Dec-13 Feb-14 Apr-14 Jun-14 Aug-14 O
ct-14 Dec-14 Feb-15 Apr-15 Jun-15 Aug-15 O ct-15 Dec-15 Feb-16 Apr-16 Jun-16 Aug-16 O ct-16 Dec-16 Feb-17 Apr-17 Jun-17 Aug-17 O ct-17 Dec-17 Feb-18 Apr-18 Jun-18 Desktop Mobile Tablet Gudog web traffic by type of device

Gudog's Android app cumulative rating

A crash course   into React

1. A JavaScript library for building UIs 2. Declarative: UI
= fn(data) 3. Component-based 4. Learn Once, Write Anywhere Note: when we talk about React we're normally talking about React + React DOM React

React: Hello World class HelloMessage extends React.Component { render() {
return ( <div>Hello {this.props.name}!</div> ); } } ReactDOM.render( <HelloMessage name="MadridJS" />, document.getElementById('root') ); <html> <body> <div id="root"/> </body> </html> JSX

React: Hello World class HelloMessage extends React.Component { render() {
return React.createElement( "div", null, "Hello ", this.props.name, "!" ); } } ReactDOM.render( React.createElement(HelloMessage, { name: "MadridJS" }), document.getElementById('root') ); <html> <body> <div id="root"/> </body> </html>

1. Lets you build native mobile* apps using JavaScript and
React. 2. The main targets for RN are iOS & Android. 3. It does not compile JS into native code. 4. It does not use a webview. * Actually not just mobile apps, we'll see that later. React Native

RN Selling Points ⚡ Iteration speed on dev & prod:
  Hot Reloading + Code Push Close enough to cross platform:   write once, run in both iOS & Android % Large and active community:   leverage the React + RN ecosystems Backed by large companies:  Facebook, Microsoft, Netflix, Uber, etc.

React (DOM)   vs React Native

React DOM React Native <div> <View>  <ScrollView> <p>, <span>, <strong> 
<em>, <b>, <i> <Text> <a>  <button> <TouchableOpacity>  <TouchableNativeFeedback>  <TouchableHighlight>  <Button> <input type="text"> <textarea> <TextInput> <select> <Picker> <img> <Image>

React DOM React Native // ./Components/StylingDemo.js class StylingDemo extends React.Component
{ render() { return ( <div> <p class="red">A text in red</p> <p class="bigblue">A big text in blue</p> </div> ); } } /* ./styles/styling_demo_styles.css */ .red { color: 'red' } .bigblue{ color: 'blue'; font-weight: 'bold'; font-size: 30px; } // ./Components/StylingDemo.js class StylingDemo extends React.Component { render() { return ( <View> <Text style={styles.red}>A text in red</Text> <Text style={styles.bigblue}>A big text in blue</Text> </View> ); } } const styles = StyleSheet.create({ red: { color: 'red', }, bigblue: { color: 'blue', fontWeight: 'bold', fontSize: 30, }, });

How does   React Native work?

RN Bridge Native Realm Main UI Thread Background Threads Obj
C [or Swift] / Java IPA / APK JavaScript Realm JavaScriptCore * Single Thread ** One JS Bundle Business Logic * On iOS RN uses the existing JavaScriptCore. On Android, RN bundles it with your app. ** This is the thread you don't wanna block. Source: Talk Kol's "Introduction to React Native Performance"

class HelloMadridJS extends Component { render() { return ( <View>
<Text style={{ color: "blue" }}>Hello MadridJS</Text> </View> ); } } { createView: { type: "RCTView", children: [ { type: "RCTText", text: "Hello MadridJS", style: { color: 255 } } ] } } UIView *view = [UIView new]; view.frame = CGRectZero; UILabel *label = [UILabel new]; label.frame = CGRectZero; label.text = @"Hello MadridJS"; label.textColor = [UIColor blueColor]; [view addSubview:label]; Javascript Realm RN Bridge Native Realm (iOS)

Getting started  with React Native

3 ways to get started with RN A. The "I
want to test React Native right away" way  create-react-native-app + Expo Client OR Snack + Expo Client B. The "Classic" way   react-native-cli + Android Studio & Xcode + lots of imagination C. The "I'm building something serious but I got a million questions" way  ignite-cli + your favorite boilerplate (+ Android Studio & Xcode)

A1. create-react-native-app • Doesn't require any native dependency: no Xcode,
no Android Studio • We'll run our app within the Expo client for Android or iOS $ npm install -g create-react-native-app   $ create-react-native-app AwesomeProject $ cd AwesomeProject $ npm start

A1. create-react-native-app

A1. create-react-native-app "## App.js "## App.test.js "## README.md "## app.json
"## node_modules "## package.json $## yarn.lock // ./App.js import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> <Text>Changes you make will automatically reload.</Text> <Text>Shake your phone to open the developer menu.</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });

A2. Snack

B. react-native-cli • It's the default way to start React
Native apps • You'll need: - Xcode for iOS and/or Android Studio for Android - Node & watchman $ npm install -g react-native-cli   $ react-native init AwesomeProject $ cd AwesomeProject $ react-native run-ios [--device] or $ react-native run-android [--device]

Project Structure "Rails-style" Domain-style Rails-style + Ducks Domain-style + Ducks
Domain-style + Ducks Router-based ... State Management redux mobx Side Effects  (Redux Middlewares) redux-thunk redux-saga redux-observable redux-promise- middleware redux-loop redux-persist redux-offline Managing Relational & Nested Data normalizr redux-orm apollo-client Navigation react-navigation react-router (v4) aksonov/react- native-router-flux wix/react-native- navigation airbnb/native- navigation react-native-ya- navigator ... Linting   & Code Style prettier prettier-eslint eslint-config-airbnb standard JS Typechecking prop-types Flow TypeScript Styling StyleSheet styled-components glamorous fela react-native-css Testing jest ava enzyme wix/detox Immutability & Functional seamless- immutable ImmutableJS ramda UI Kits shoutem native-base react-native- elements react-native-material- design nachos-ui react-native-ui- kitten Boilerplates / CLI / Generators ignite-cli create-react-native- app snowflake pepperoni-app-kit kittenTricks Miscellaneous react-native- maps lottie socket.io react-native-giftedchat react-native- i18n react-native- vector-icons react-native-code- push apisauce reduxsauce reactotron reselect tcomb-form- native moment.js ...

https://github.com/FaridSafi/react-native-gifted-chat import { GiftedChat } from "react-native-gifted-chat"; class Example extends
React.Component { state = { messages: [] }; componentWillMount() { this.setState({ messages: [ { _id: 1, text: "Hello developer", createdAt: new Date(), user: { _id: 2, name: "React Native", avatar: "https://placeimg.com/140/140/any" } } ] }); } onSend(messages = []) { this.setState(previousState => ({ messages: GiftedChat.append(previousState.messages, messages) })); } render() { return ( <GiftedChat messages={this.state.messages} onSend={messages => this.onSend(messages)} user={{ _id: 1 }} /> ); } }

https://github.com/react-community/react-native-maps

  https://github.com/kmagiera/react-native-reanimated  https://github.com/kmagiera/react-native-gesture-handler  https://snack.expo.io/@kzzzf/interactable-demo

https://github.com/fram-x/FluidTransitions  https://reactnavigation.org/  https://twitter.com/vincentriemer/status/1013419168287346689

C. ignite-cli • A CLI to build RN apps with
boilerplates, plugins and generators. • You'll still need the same dependencies than for option B.   (node, watchman, xcode, android studio) $ npm install -g ignite-cli   $ ignite new AwesomeProject $ cd AwesomeProject $ ignite generate screen my-first-screen $ ignite generate component my-first-dumb-component  $ ignite add maps  $ ignite add i18n https://github.com/infinitered/ignite

C. ignite-cli https://github.com/infinitered/ignite-ir-boilerplate

Beyond mobile with React Native

https://github.com/Microsoft/react-native-windows

https://github.com/necolas/react-native-web

https://github.com/vincentriemer/react-native-dom

https://github.com/react-everywhere/re-start

Should I use React Native? Do you hate JavaScript? I
feel your pain...  Yes Is it a brand new project? No Yes No Can you lobby your existing native team? Yes!   Use React Native! Yes No

THANK YOU. Javier Cuevas @javier_dev

Introduction to React Native (MadridJS - September 2018)

Introduction to React Native (MadridJS - September 2018)

More Decks by Javier Cuevas

Other Decks in Programming

Featured

Transcript