Course Overview

In this 3-day class, students learn how to build mobile apps with JavaScript using React Native. The course is focused on giving students hands-on experience with React Native, while exposing them to the most popular components, libraries, techniques, and best practices in use today.

Key Learning Areas

  • Use Create-React-Native-App to get started quickly with React Native
  • Understand what React Native is and what problem it solves
  • Explore the basic architecture of a React Native application
  • Gain a deep knowledge of React Native's Component Library
  • Learn best practices for using and composing React Native components
  • Build a working mobile app using React Native
  • Learn to write unit tests for React Native, using Jest and Enzyme
  • Use Redux for maintaining state in a React Native application
  • Use Redux middleware with React Native
  • Interact with network services using React Native
  • Learn about accessibility considerations for mobile apps
  • Learn about iOS and Android platform-specific components
  • Learn about user interface guidelines for iOS and Android
  • Learn to optimize performance of React Native apps
  • Learn to integrate native code into React Native apps

Course Outline

Introduction

  • React Native Quick Start
    • Your first React Native app
  • What is React Native?
  • Benefits of React Native

Testing and Running React Native Apps

  • Simulators
    • Android
    • iOS
  • Expo
    • XDE
    • Command Line Tools
    • Expo Client
  • Debugging React Native Apps
    • In-App Developer Menu
    • Hot Reloading
    • Errors and Warnings
    • React Developer Tools
    • Debugging over USB
  • Debugging native code

Configure a Build Environment

  • React Native CLI
  • iOS
  • Android
    • Configure a Virtual Device

React Native Components

  • Basic Components
  • User Interface
  • List Views
  • iOS Components
  • Android Components
  • Other Core Components
  • Device APIs
  • Accessibility
    • AccessibilityInfo
    • Android Accessibility
    • iOS Accessibility
  • Popular Libraries
    • NativeBase
    • React Router
    • Animatable
    • Push Notifications
    • Material UI
    • React Bootstrap
    • React Belle
    • React Grommet
    • React Toolbox
    • Semantic UI

Layout, Style, and Animation

  • Understanding Flexbox
  • StyleSheet and CSS modules
  • Layout with Flexbox
  • Animated API

Touchables and Gestures

  • Responder Lifecycle
  • The event object

State Management

  • Redux and React Native
  • Local Storage

Networking

  • Using Fetch
  • WebSocket
  • Redux Middleware
    • Thunk
    • Redux Saga

Screens and Navigation

  • React Navigation Library

Testing with Jest and Enzyme

Best Practices for Organizing a Project

Best Practices for Improving User Experience 

Platform-specific Considerations

  • Using the Platform module
  • Platform APIs
  • UX Guidelines
    • Material Design
    • Human Interface Guidelines
  • Platform-specific Extensions

Ejecting and Deploying

  • Development mode vs. Production mode
  • Performance optimization
    • Understanding Frames
    • Understanding Threads
    • Unbundling and inline requires
    • Timers and InteractionManager
  • Profiling
  • Generating a signed APK

Optional React Review

Optional Advanced JavaScript Review

 

Who Benefits

This course is designed for software developers who have previous experience working with React and Redux, or who have taken an Introduction to React course.

Prerequisites

Attendees should have at least a beginning to intermediate level of knowledge with JavaScript. Specifically, they should be comfortable working with JavaScript functions and objects.

Course includes slides, notes, assignments, a pre/post assessment test, and complete source code for all assignments.