IIRF Online > Development > Mobile Development > React Native > The Complete React Native + Hooks Course
The Complete React Native + Hooks Course by Udemy
Understand React Native with Hooks, Context, and React Navigation.
Course Highlights
- Create real-world native apps using React Native
- Make truly reusable components that look great
- Understand the terminology and concepts of Redux
- Prototype and deploy your own applications to the Apple and Google Play Stores
- Get up to speed with React design principles and methodologies
- Discover mobile design patterns used by experienced engineers
Skills you will learn!
Curriculum
10 Topics
How to Get Help
Course Resources
Join Our Community!
Course Overview
Installing Node.js and Prerequisite Info
Boilerplate Download and Startup
App Setup
Making Changes
Expo for Web Browser - Do Not Skip
Using iOS and Android Simulators
7 Topics
Overview of React Components
Showing a Custom Component
Common Questions and Answers
Rules of JSX
One Common Error
JSX Exercise Overview
JSX Solution
8 Topics
Building Lists
The FlatList Element
Rendering a FlatList
Why a Key Property?
Solving the Key Issue
A Few Props Around FlatList
Exercise Overview
Exercise Solution
5 Topics
Button Types
Buttons in Action
Touchable Opacity in Action
Navigating with React Navigation
Destructuring Props
9 Topics
Component Reuse with Props
Exercise Solution
Parent-Child Relationships
Communicating from Parent to Child
Images Download
Showing Images
Passing Images as Props
Exercise Outline
Exercise Solution
29 Topics
State in Components
Screen Boilerplate
State in Action
Notes on State
App Overview
Generating Random Colors
Adding Random Colors
Showing Colors with a FlatList
App Overview
Reusable Color Adjusters
Coordinating State
Passing Callbacks to Children
Tying State Values Together
Validating State Changes
Reusable State Updates
Introduction to Reducers
Creating a Reducer
Applying State with a Reducer
Restoring Validation
Community Convention in Reducers
Exercise Outline
Exercise Solution
Handling Text Input
Showing a Text Input
Two Important Props
Weird Things with Text and State
Updating State
Exercise Outline
Exercise Solution
13 Topics
Layout with React Native
Basics of Box Object Model
AlignItems with Flex
Flex Direction
Justify Content
Flex Values
Align Self on Children
The Position Property
Top Bottom Left Right
Absolute Fill Objects
Applying Layout Systems
Exercise Overview
Exercise Solution
16 Topics
App Overview
Important Note About Project Generation
Project Generation
Yelp API Workarounds
Yelp Signup
Yelp Walkthrough
React Navigation
Required React Navigation Installation Update
Assembling a Navigator
Architecture Approach
Starting the SearchBar
Displaying Icons
Search Bar Styling
A Touch More Styling
Managing State
Detecting Editing Completion
4 Topics
Configuring Axios
Making the Request
Error Handling
Running an Initial Search
6 Topics
Incorrect Hook Name in Slide
The UseEffect Hook
Extracting Hook Logic
Showing Search Results
Grouping Results
FlatList Rendering
15 Topics
Showing a Single Result
Showing Additional Info
A Few More Styling Issues
Hiding Scroll Bars
Constraining View Elements
Empty Elements
Spacing on the Search Bar
Reminder on Navigation
Navigating from a Child Component
The WithNavigation Helper
Communicating Between Screens
Fetching a Single Restaurant
Showing a List of Images
One Last Fix
Upgrading the Restaurant app to use React Navigation v6
38 Topics
Important Note About Project Generation
App Overview
Issues with Data
Required React Navigation Installation Update
Initial Setup
Wrapping the Navigator
Introduction to Context
Adding Context
Moving Data with Context
Rendering a List of Posts
Adding State in Context
It Works!
Opportunity for Improvement
Updating with UseReducer
Automating Context Creation
More Automatic Context Creation
A Bit of Styling
Deleting Posts
Updating the Reducer
Navigation on Tap
Retrieving Single Posts
Adding a Creation Screen
headerRight Deprecation in 'navigationOptions'
Header Navigation
Displaying a Form
Saving a New Post
Navigation on Save
headerRight Deprecation in 'navigationOptions'
The Edit Icon Link
Communicating Info to Edit
Initializing State from Context
Extracting Form Logic
Customizing OnSubmit
Initial Form Values
Default Props
Editing Action Function
Editing in a Reducer
Navigating Backwards
13 Topics
Outside Data API
Issues with Servers + React Native
Important - Required Ngrok Setup Steps
JSON Server and Ngrok Setup
JSON Server REST Conventions
Making a Request
Remote Fetch of Posts
Creating Posts with Post Requests
Refetching on Navigate
Deleting a Post
Editing Posts
App Wrapup
Upgrading the Blog app to use React Navigation v6
22 Topics
App Overview
Dependencies Setup
The Basics of Express
MongoDB Setup
Connecting to MongoDB
Nodemon for Automatic Restarts
Understanding the Signup Process
Using Postman
Handling JSON Data
Defining a User Schema
Creating and Saving a User
Error Handling
JSON Web Tokens
Creating a JWT
Wiring Up JSON Web Tokens
Understanding Password Hashing
Salting and Hashing
The Signin Route
Testing Signup and Signin
Defining Tracks
Listing Tracks
Creating Tracks
80 Topics
Server Code
Server Setup
Important Note About Project Generation
Navigation Design
Required React Navigation Installation Update
A LOT of Boilerplate
Navigator Hookup
Testing the Navigation Flow
React Native Elements
Helper Styling Components
navigationOptions Deprecation Warning
Styling Odds and Ends
Input Props
The Auth Context
What's the Context Doing?
Axios Setup
Making an API Request
Handling Errored Requests
Async Storage
Async Storage Update
Storing the Token
Navigation From Outside of React
Oops Typo
Navigation to Signin
Extracting Form Logic
Last Bit of Extracting
Creating a NavLink
navigationOptions Deprecation
Real Component Reuse!
Wiring Up Signin
onWillFocus vs onWillBlur Update
Clearing Error Messages
Automatic Signin
Empty Screens While Resolving Auth
Signing Out a User
Safe Area Views
Working on Track Create
Installing React Native Maps
Showing a Map
Drawing a Series of Points
Notes on Location
Fix for Missing Location Request Error
"requestPermissionsAsync" is now deprecated in Expo SDK 41+
Requesting Location Permissions
Resetting Permissions
How to Test Location?
Faking the Users Location
Reading a Location
Bugginess with Location
Location Architecture
Location Context
Live Location Updates
Fix for Indicator not Tracking Map
Drawing a Position Indicator
Extracting Logic to a Hook
Disabling Location Tracking
Automatic Disables
Building a Track Form
Updates to Location Context
Track Form Wire Up
Buggy UseEffects
Understanding Stale References
Some Errors You May See
Kind of Fixed
The UseCallback Hook
Cleaning Up After Ourselves
Avoiding Stale References
Tracking While Recording
Bring Back the Polyline
What Manages Tracks
Coordination Between Contexts
Async Storage Update
Automatic Authentication
Form Reset and Navigation
Fetching Created Tracks
ListItem Update
Listing All Tracks
Navigating to a Saved Track
Showing Track Details
Fixing Odds and Ends
1 Topic
Note on the Following Section
159 Topics
Important - Do Not Skip
Finished Code Repository
OSX Installation
More on OSX Installation
Running in the Simulator
Windows Setup of React Native
Android Studio and React Native CLI Installation
Emulator Creation and System Variables
ESLint Setup with VSCode
Troubleshooting React Native Installs
Project Directory Walkthrough
Getting Content on the Screen
React vs React Native
Creating a Component with JSX
Registering a Component
Destructuring Imports
Application Outline
The Header Component
Consuming File Exports
Styling with React Native
More on Styling Components
Introduction to Flexbox
Header Styling
Making the Header Reusable
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
Mastering Layout with Flexbox
Positioning of Elements on Mobile
More on Styling
Images with React Native
Displaying Album Artwork
Making Content Scrollable
Handling User Input with Buttons
Styling of Buttons with UX Considerations
Responding to User Input
Linking Between Mobile Apps
Setting Button Text by Props
App Wrapup
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
Password Inputs
Logging a User In
Error Handling
More on Authentication Flow
Creating an Activity Spinner
Conditional Rendering of JSX
Clearing the Form Spinner
Handling Authentication Events
More on Conditional Rendering
Logging a User Out and Wrapup
App Mockup and Approach
The Basics of Redux
More on Redux
Redux is Hard!
Application Boilerplate
More on Redux Boilerplate
Rendering the Header
Reducer and State Design
Library List of Data
JSON CopyPaste
The Connect Function
MapStateToProps with Connect
A Quick Review and Breather
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
Overview of Our Next App
App Challenges
Quick Note
Just a Touch More Setup
More on Boilerplate Setup
Login Form in a Redux World
Rebuilding the Login Form
Handling Form Updates with Action Creators
Wiring up Action Creators
Typed Actions
Immutable State
Creating Immutable State
More on Creating Immutable State
Synchronous vs Asynchronous Action Creators
Introduction to Redux Thunk
Redux Thunk in Practice
Redux Thunk in Practice Continued
Making LoginUser More Robust
Creating User Accounts
Showing Error Messages
A Firebase Gotcha
Showing a Spinner on Loading
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 JSON Schema
Data Security in Firebase
Creating Records with Firebase
Default Form Values
Successful Data Save to Firebase
Resetting Form Properties
Fetching Data from Firebase
Storing Data by ID
Dynamic DataSource Building
Transforming Objects to Arrays
List Building in Employee List
Reusing the Employee Form
Create vs Edit Forms
Reusable Forms
A Standalone Employee Edit Form
Initializing Forms from State
Updating Firebase Records
Clearing Form Attributes
Texting Employees
Modals as a Reusable Component
The Modal Component Continued
Styling the Modal
Employee Delete Action Creator
Wiring up Employee Delete
1 Topic
Bonus!
The Complete React Native + Hooks Course
Related React Native Courses
Thank You!
Your review has been submitted successfully.