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.