Why you should try React Native

for your next mobile project.

Gwen Faraday

What is React Native?

  1. Mobile Apps in JavaScript
  2. Cross-platform
  3. Declarative
  4. Uses the React Paradigm
  5. Learn once build anywhere.

React - JSX

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    render() {
        return (

Hello App!

); } } ReactDOM.render(, document.getElementById('root'));

React - JSX

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    constructor () {
        super();
        this.state = {
            count: 0
        };
        this.add = this.add.bind(this);
    }

    add () {
        this.setState({
            count: this.state.count + 1
        });
    }

    render () {
        return (
            

                
Count = {this.state.count}

                
            

        );
    }
}
ReactDOM.render(, document.getElementById('root'));

React Native - JSX

import React, { Component } from 'react';
import { AppRegistry, View, Text } from 'react-native';

class App extends Component {
    render() {
        return (
            
                Hello App!
            
        );
    }
}
AppRegistry.registerComponent('AwesomeProject', () => App);

React Native - JSX

import React, { Component } from 'react';
import {
    AppRegistry,
    View,
    Text,
    TouchableOpacity
} from 'react-native';

class App extends Component {
    constructor () {
        super();
        this.state = {
            count: 0
        };
        this.add = this.add.bind(this);
    }

    add () {
        this.setState({
            count: this.state.count + 1
        });
    }

    render() {
        return (
            
                Count: {this.state.count}
                
                    Add One
                
            
        );
    }
}
AppRegistry.registerComponent('AwesomeProject', () => App);

Default Styling with Flexbox

display: 'flex'
flex-direction: 'column'

Benefits of React Native

  1. Fast Developer Iteration
  2. Cross-platform code sharing
  3. Native Views
  4. Performance
  5. Built in developers tools
  6. Re-use web skills

Web Ecosystem

  1. Geolocation
  2. Fetch
  3. WebGL
  4. NPM/JS Libraries

iOS and Android

Why not use native?

  1. Cost
  2. Time
  3. Fewer Native Developers
  4. Maintenance

Other Solutions - Hybrid

  1. Faster Development Time
  2. Re-use web skills/developers
  3. Doesn't feel native!

Getting Started #1 - Easy

  1. Download the Expo mobile app on a phone
  2. Open snack.expo.io in a desktop browser
  3. Scan the qr code (with the Expo app)
  4. Start coding!

Getting Started #2

*Alternative to #1*

Expo XDE

$ npm i -g create-react-native-app
$ create-react-native-app my-app
$ cd my-app
$ npm start

Getting Started #3 - Harder

  • Install Node and Python
  • Install React Native CLI
  • Xcode and Android Studio
  • Set up emulators and Marshmallow
  • Configure environment variables

Project Setup

$ react-native init appName
$ react-native run-ios
$ react-native run-android

React Native

Styling Components

Which platform am I using?

const instructions = Platform.select({
    ios: 'You are using iOS',
    android: 'You are using Android'
});
if (Platform.os === 'ios') {
    // do something
} else if (Platform.os === 'android') {
    // do something
}

Datetime Picker

React Developer Tools

npm install --save-dev react-devtools
// add “devtools”: “react-devtools” to npm scripts
npm run devtools
​

React Developer Tools

Debugging

console.log(...);
console.warn(...);
console.error(...);
debugger;

Embedding Native Code

iOS Docs - Android Docs

import React, { Component } from 'react';
import { NativeModules } from 'react-native';

Embed other people's native code - React Native Link

npm install react-native-camera
react-native link

Transitioning from a mobile friendly web app?

Embed Web Views!

import React, { Component } from 'react';
import { WebView } from 'react-native';

class MyWeb extends Component {
    render() {
        return (
            
        );
    }
}

Microsoft Code Push

  • Can only push over the air updates through the JavaScriptCore.
  • Apples Terms:

Who is using React Native?

  • Facebook
  • Airbnb
  • Wix
  • Walmart
  • Bloomberg
  • Skype
  • Tesla
  • Discord

Some Bummers

  • Restart the packager when installing native code libraries.
  • Can only run one simulator at a time.

Workflow Example

  1. Planning/Mockups
  2. Ask myself: Do I need a design framework?
  3. Create Reuseable Components using Snacks
  4. Plan the folder/component structure
  5. Set up .eslintrc extending from AirBnb
  6. Set up redux for state management.
  7. Start building!

Resource Links

Gwen Faraday

Thanks for Coming!

NDC London - React Native

By gwenf

Made with Slides.com

NDC London - React Native

  • 584

More from gwenf