React NativE Live Class: Part 1

Getting Up and Running with React Native

Mute Your

Mics

Slack Channel

https://codementor-classes.slack.com/messages/react-native/

(don't use zoom)

Slide Deck

https://slides.com/joshdavidmiller/react-native-live-class-1/live

An Outline with Important Info & Links

Josh David Miller

Product Consultant & Entrepreneur

@joshdmiller

joshdavidmiller.com

Engineering Mentor

Who Are you?

Name

Experience with React

Profession

Experience with React Native?

Syllabus

Part 1: Overview

Part 2: Using React to Create Mobile Apps

Part 3: Going Native with Platform APIs

Part 4: Live Coding an App

React Big Ideas

Everything is a Component

Data Flows Down

Events Bubble Up

( state ) => ui

State is Immutable

( currentState, action ) => newState

Why Native?

Platform-Specific UI Components

Maps

Date-Pickers

Tabs

et cetera

Platforms are DifferEnt

Web Gestures Suck

But...

Native App Dev Sucks

Builds and Compiles Can Take Minutes

No git-based Deployment Pipelines

Android, iOS Have Different Tech Stacks

Slow Iteration

APIs are Imperative & Mutative

No Code Re-Use Between Android, iOS

tl;dr

Native provides a superior user experience, at the cost of an inferior developer experience.

What is React Native?

A framework for building native mobile applications in JavaScript with React.

React Native Apps Are Truly

NATIVE

It's All About The Virtual DOM

Single-page Web App

Client

Server

REST API

UX

DOM

View Layer

Routing

Business Logic

ISOMORPHIC Web App

Client

Server

REST API

UX

DOM

View Layer

Routing

Business Logic

React Native App

Native

JavaScript

UI Components

View Layer

Routing

Business Logic

Data Layer

Virtual "DOM"

({ children }) => (
  <Header>
    { children }
  </Header>
);

Virtual "DOM"

Web Browser

Android

iOS

Set-Top Boxes

Server

Write Once, Run Anywhere

Learn Once, Write Anywhere

Installation & SetUP

https://facebook.github.io/react-native/docs/getting-started.html

Prerequisites

Node.js & NPM
Git
Watchman

General

Android

Mac or Linux
Android Studio

IOS

Mac
Homebrew

Create Running Emulators

Create an AVD (Android)

# Open Android Virtual Device Manager
$ android avd

Step 1: Open AVD Manager

Step 2: Create New AVD

Step 3: Create Profile

Running AVD Emulator

Open iPhone Device (IOS)

Xcode > Open Developer Tool > Simulator

Running IOS Simulator

Nuclide

(Optional React Native IDE)

# Download, Setup, & Install Atom
# http://flight-manual.atom.io/getting-started/sections/installing-atom/

$ apm install nuclide

# Install Buck on Mac
$ brew install Caskroom/cask/java
$ brew tap facebook/fb
$ brew install buck

# Install Buck on Linux
# https://buckbuild.com/setup/install.html

# Install Nuclide Recommended Addons
# http://nuclide.io/docs/editor/setup/#post-installation

nuclide.io

Install React Native

$ npm install -g react-native-cli

Testing it OUt

Create a New Project

$ react-native init liveClassPart1

(this may take a while...)

Run IT!

Step 1: Run the Emulator

Step 2: Run Your App

$ cd liveClassPart1

# iOS
$ react-native run-ios

# Android
$ react-native run-android

(this may take a long while...)

App Is Deploying...

It's Running!

Questions?

Next Session

Layout with Flexbox
Styling Components
Data Flow (including network fetching)
Native Components
How Native Modules Work
Testing