Overview of React Native
Our React Native training course will give you an intensive hands-on introduction to developing cross-platform mobile applications.
The React Native framework is an ideal way for Web / JavaScript developers to get into developing mobile applications for iOS and Android devices, as well as reusing code for / from web apps too.
Duration
3 Days
Prerequisite for React Native
Participants must be experienced JavaScript developers with a fair advanced understanding of JavaScript, including prototypes and functions as first-class citizens.
Course Outline for React Native
Introduction
- Getting Content on the Screen
- React vs React Native
- Creating a Component with JSX
- Registering a Component
- DE structuring Imports
- Application Outline
- The Header Component
- Consuming File Exports
Styling Apps with React
- Styling with React Native
- More on Styling Components
- Intro to FlexBox
- Header Styling
- Making the Header Reusable
HTTP Requests with React Native
- Sourcing Album Data
- List Component Boilerplate
- Class Based Components
- Lifecycle Methods
- Quick Note On Axios
- Network Requests
- Component Level State
- More on Component Level State
- Rendering a List of Components
- Displaying Individual Albums
- Fantastic Reusable Components – The Card
- Styling a Card
- Passing Components as Props
- Dividing Cards into Sections
Handling Component Layout
- Mastering Layout with Flexbox
- Positioning of Elements on Mobile
- More on Styling
- App Wrapup
Authentication with Firebase
- Auth App Introduction
- A Common Root Component
- Copying Reusable Components
- What is Firebase?
- Firebase Client Setup
- Login Form Scaffolding
- Handling User Inputs
- More on Handling User Inputs
- How to Create Controlled Components
- Making Text Inputs From Scratch
- A Focus on Passing Props
- Making the Input Pretty
- Wrapping up Inputs
- Creating an Activity Spinner
- Conditional Rendering of JSX
- Clearing the Form Spinner
- Logging a User Out and Wrapup
Digging Deeper with Redux
- App Mockup and Approach
- The Basics of Redux
- More on Redux
- More on Redux Boilerplate
Rendering Lists the Right Way
- The Theory of ListView
- ListView in Practice
- Rendering a Single Row
- Styling the List
- Creating the Selection Reducer
- Introducing Action Creators
- Calling Action Creators
- Adding a Touchable
- Rules of Reducers
- Expanding a Row
- Moving Logic Out of Components
- Animations
- Wrapup
Handling Data in React vs Redux
- Login Form in a Redux World
- Rebuilding the Login Form
- Handling Form Updates with Action Creators
- Wiring up Action Creators
- Typed Actions
Don’t Mutate that State
- Immutable State
- Creating Immutable State
- More on Creating Immutable State
- Synchronous vs Asynchronous Action Creators
- Introduction to Redux Thunk
- Redux Thunk in Practice
- Making LoginUser More Robust
- Creating User Accounts
- Showing Error Messages
- A Firebase Gotcha
- Showing a Spinner on Loading
Navigating Users Around
- Dealing with Navigation
- Navigation in the Router
- Addressing Styling Issues
- Displaying Multiple Scenes
- Navigating Between Routes
- Grouping Scenes with Buckets
- Navigation Bar Buttons
- Navigating to the Employee Creation Form
- Building the Employee Creation Form
- Employee Form Actions
- Handling Form Updates at the Reducer Level
- Dynamic Property Updates
- The Picker Component
- Pickers and Style Overrides
Firebase as a Data Store
- Firebase JSON Schema
- Data Security in Firebase
- Creating Records with Firebase
- Default Form Values
- Resetting Form Properties
- Fetching Data from Firebase
- Dynamic DataSource Building
- Transforming Objects to Arrays
- List Building in List
Code Reuse – Edit vs Create
- Reusing the Form
- Create vs Edit Forms
- A Standalone Edit Form
- Initializing Forms from State
- Updating Firebase Records
- Clearing Form Attributes