Introduction to React Native

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.

Want this course for your team?

Atmosera can provide this course virtually or on-site. Please reach out to discuss your requirements.

Atmosera is thrilled to announce that we have been named GitHub AI Partner of the Year.