React NativE Live Class: Part 2

Creating Mobile Apps with React Native

Mute Your

Mics

Slack Channel

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

(don't use zoom)

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

 

Create a New Project

$ react-native init liveClassPart2

(this may take a while...)

Run IT!

Step 1: Run the Emulator

Step 2: Run Your App

$ cd liveClassPart2

# iOS
$ react-native run-ios

# Android
$ react-native run-android

(this may take a long while...)

App Is Deploying...

It's Running!

Git Commit

$ git init .
Initialized empty Git repository in /Users/joshua/.../liveClassPart2/.git/

$ git add .
<output omitted>

$ git commit -m "chore: initial commit"
[master (root-commit) 052f796] chore: initial commit
 37 files changed, 2106 insertions(+)
 ...
git show step01

Refactor

Goal: share as much code as possible between Android and iOS

git show step02
git show step03

Navigation

git show step04
git show step05

Goal: create system for managing routes and navigation

Flexbox

Goal: Add testing "playground" and demo Flexbox features

git show step06

Shared Components

Goal: create components with styles customized to their platforms 

git show step07
const ButtonFactory = ( React : Object ) => ({
  disabled = false,
  label,
  primary = false,

  onPress = f => f,

  ...props
}) => (
  <TouchableHighlight
    style={[ styles.container, primary && styles.primary ]}
    onPress={onPress}
    activeOpacity={0.6}
    underlayColor='#ffffff'
  >
    <Text style={[ styles.text, primary && styles.primaryText ]}>{ label }</Text>
  </TouchableHighlight>
);

Write Logic Once

Platform Feel

Intro to Redux

Redux

Goal: create an app-wide unidirectional state management sytem

git show step08

Redux-Persist

Goal: save app state offline

git show step09

Questions?