The Complete React Native And Redux

Understand React Native with Hooks, Context, and React Navigation.

Last updated 2022-01-10 | 4.6

- Create real-world native apps using React Native
- Make truly reusable components that look great
- Understand the terminology and concepts of Redux

What you'll learn

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

* Requirements

* All you need is basic understanding of Javascript

Description

If you're tired of spinning your wheels learning Swift or Android, this is the course for you.

Authentication? You will learn it.  Hooks? Included.  Navigation? Of course!

This course will get you up and running with React Native quickly, and teach you the core knowledge you need to deeply understand and build React components for mobile devices.

Both OSX and Windows supported - develop iOS or Android!

This course includes content on both v0.62.2 and the legacy v0.30.x, which is widely used in industry.

We'll start by mastering the fundamentals of React, including JSX, “props", “state", and event handling. Source code is provided for each lecture, so you will always stay up-to-date with the course pacing.  Special attention has been paid to creating reusable components that you'll be able to make use of on your own fantastic projects.

React Native is an excellent solution for developing apps on mobile in a fraction of the time it takes to make an equivalent iOS or Swift app.  You'll love seeing your changes instantly appear on your own device, rather than waiting for Swift/Java code to recompile!  This quick feedback loop, along with excellent cross platform support, is what has catapulted React Native to the top must-have skill for Javascript engineers.

If you are new to React, or if you've been working to learn it but sometimes feel like you still don't quite 'get it', this is the React course for you! To learn React you have to understand it.

  • Learn how to use React's custom markup language, JSX, to clean up your Javascript code

  • Master the process of breaking down a complex component into many smaller, interchangeable components

  • Grasp the difference between “props" and “state" and when to use each

  • Render interactive, media-rich components in beautifully styled apps

  • Develop apps that are unique, fun, and responsive

  • Build on both Android and iOS platforms

  • Master integration with Firebase for user authentication

  • Learn the core principles of navigation with React Native


I've built the course that I would have wanted to take when I was learning React Native. A course that explains the concepts and how they're implemented in the best order for you to learn and deeply understand them.

Who this course is for:

  • This course is for anyone looking to make native apps with React Native

Course content

18 sections • 435 lectures

How to Get Help Preview 00:52

Course Resources Preview 00:38

Join Our Community! Preview 00:07

Course Overview Preview 03:19

Boilerplate Download Preview 00:19

Important info about Expo for Web Browser - Do Not Skip Preview 00:20

Detailed Installation Instructions for macOS Preview 01:41

Detailed Installation Instructions for Windows Preview 02:01

App Setup Preview 08:43

Making Changes Preview 04:09

Using iOS and Android Simulators Preview 03:54

Overview of React Components Preview 08:50

Showing a Custom Component Preview 04:08

Common Questions and Answers Preview 07:08

Rules of JSX Preview 05:50

One Common Error Preview 01:45

JSX Exercise Overview Preview 01:46

JSX Solution Preview 02:40

Building Lists Preview 02:24

The FlatList Element Preview 02:24

Rendering a FlatList Preview 05:12

Why a Key Property? Preview 04:11

Solving the Key Issue Preview 05:18

A Few Props Around FlatList Preview 04:57

Exercise Overview Preview 00:53

Exercise Solution Preview 02:14

Button Types Preview 03:44

Buttons in Action Preview 05:20

Touchable Opacity in Action Preview 04:18

Navigating with React Navigation Preview 06:46

Destructuring Props Preview 04:03

Component Reuse with Props Preview 03:35

Exercise Solution Preview 01:49

Parent-Child Relationships Preview 05:07

Communicating from Parent to Child Preview 05:44

Images Download Preview 00:04

Showing Images Preview 04:07

Passing Images as Props Preview 04:14

Exercise Outline Preview 00:47

Exercise Solution Preview 02:26

State in Components Preview 05:35

Screen Boilerplate Preview 03:14

State in Action Preview 09:45

Notes on State Preview 06:59

App Overview Preview 05:06

Generating Random Colors Preview 04:27

Adding Random Colors Preview 04:48

Showing Colors with a FlatList Preview 03:33

App Overview Preview 04:43

Reusable Color Adjusters Preview 06:14

Coordinating State Preview 05:31

Passing Callbacks to Children Preview 06:21

Tying State Values Together Preview 07:16

Validating State Changes Preview 07:56

Reusable State Updates Preview 07:34

Introduction to Reducers Preview 08:39

Creating a Reducer Preview 15:00

Applying State with a Reducer Preview 08:55

Restoring Validation Preview 07:00

Community Convention in Reducers Preview 06:49

Exercise Outline Preview 01:16

Exercise Solution Preview 10:56

Handling Text Input Preview 03:22

Showing a Text Input Preview 03:28

Two Important Props Preview 04:16

Weird Things with Text and State Preview 06:11

Updating State Preview 04:52

Exercise Outline Preview 02:28

Exercise Solution Preview 02:34

Layout with React Native Preview 03:49

Basics of Box Object Model Preview 05:55

AlignItems with Flex Preview 04:34

Flex Direction Preview 03:47

Justify Content Preview 02:56

Flex Values Preview 05:08

Align Self on Children Preview 02:24

The Position Property Preview 02:33

Top, Bottom, Left, Right Preview 03:01

Absolute Fill Objects Preview 02:46

Applying Layout Systems Preview 01:52

Exercise Overview Preview 01:13

Exercise Solution Preview 06:18

App Overview Preview 01:36

Important Note About Project Generation Preview 00:08

Project Generation Preview 02:40

Yelp API Workarounds Preview 00:37

Yelp Signup Preview 04:40

Yelp Walkthrough Preview 04:16

React Navigation Preview 03:06

React Navigation Fix Preview 01:16

Assembling a Navigator Preview 06:58

Architecture Approach Preview 02:47

Starting the SearchBar Preview 04:11

Displaying Icons Preview 05:48

Search Bar Styling Preview 04:08

A Touch More Styling Preview 03:52

Managing State Preview 06:42

Detecting Editing Completion Preview 04:04

Configuring Axios Preview 06:58

Making the Request Preview 10:37

Error Handling Preview 07:30

Running an Initial Search Preview 06:18

Incorrect Hook Name in Slide Preview 00:09

The UseEffect Hook Preview 04:14

Extracting Hook Logic Preview 07:34

Showing Search Results Preview 05:57

Grouping Results Preview 07:10

FlatList Rendering Preview 03:58

Showing a Single Result Preview 04:26

Showing Additional Info Preview 05:42

A Few More Styling Issues Preview 07:00

Hiding Scroll Bars Preview 02:38

Constraining View Elements Preview 02:57

Empty Elements Preview 02:38

Spacing on the Search Bar Preview 01:40

Reminder on Navigation Preview 04:48

Navigating from a Child Component Preview 03:18

The WithNavigation Helper Preview 03:24

Communicating Between Screens Preview 03:44

Fetching a Single Restaurant Preview 05:54

Showing a List of Images Preview 04:12

One Last Fix Preview 02:21

Important Note About Project Generation Preview 00:08

App Overview Preview 03:09

Issues with Data Preview 05:45

React Navigation Fix Preview 01:13

Initial Setup Preview 05:19

Wrapping the Navigator Preview 02:41

Introduction to Context Preview 02:19

Adding Context Preview 06:00

Moving Data with Context Preview 06:04

Rendering a List of Posts Preview 03:55

Adding State in Context Preview 07:54

It Works! Preview 04:05

Opportunity for Improvement Preview 02:11

Updating with UseReducer Preview 09:32

Automating Context Creation Preview 12:12

More Automatic Context Creation Preview 09:12

A Bit of Styling Preview 07:17

Deleting Posts Preview 03:46

Updating the Reducer Preview 05:52

Navigation on Tap Preview 05:00

Retrieving Single Posts Preview 05:00

Adding a Creation Screen Preview 02:15

headerRight Deprecation in 'navigationOptions' Preview 00:09

Header Navigation Preview 04:57

Displaying a Form Preview 06:51

Saving a New Post Preview 04:41

Navigation on Save Preview 06:19

headerRight Deprecation in 'navigationOptions' Preview 00:09

The Edit Icon Link Preview 04:49

Communicating Info to Edit Preview 06:15

Initializing State from Context Preview 05:38

Extracting Form Logic Preview 09:05

Customizing OnSubmit Preview 04:24

Initial Form Values Preview 04:59

Default Props Preview 02:28

Editing Action Function Preview 04:58

Editing in a Reducer Preview 03:38

Navigating Backwards Preview 04:15

Outside Data API Preview 02:09

Issues with Servers + React Native Preview 03:12

Important - Required Ngrok Setup Steps Preview 00:43

JSON Server and Ngrok Setup Preview 06:43

JSON Server REST Conventions Preview 03:48

Making a Request Preview 10:16

Remote Fetch of Posts Preview 05:55

Creating Posts with Post Requests Preview 03:53

Refetching on Navigate Preview 05:59

Deleting a Post Preview 02:33

Editing Posts Preview 01:38

App Wrapup Preview 03:21

App Overview Preview 04:30

Dependencies Setup Preview 02:06

The Basics of Express Preview 03:44

MongoDB Setup Preview 03:37

Connecting to MongoDB Preview 06:36

Nodemon for Automatic Restarts Preview 01:18

Understanding the Signup Process Preview 05:31

Using Postman Preview 02:46

Handling JSON Data Preview 05:25

Defining a User Schema Preview 07:09

Creating and Saving a User Preview 04:37

Error Handling Preview 05:43

JSON Web Tokens Preview 07:12

Creating a JWT Preview 02:48

Wiring Up JSON Web Tokens Preview 13:00

Understanding Password Hashing Preview 08:18

Salting and Hashing Preview 08:35

The Signin Route Preview 06:42

Testing Signup and Signin Preview 03:23

Defining Tracks Preview 06:59

Listing Tracks Preview 07:47

Creating Tracks Preview 10:00

Server Code Preview 00:06

Server Setup Preview 08:25

Important Note About Project Generation Preview 00:08

Navigation Design Preview 11:14

React Navigation Fix Preview 01:18

A LOT of Boilerplate Preview 07:24

Navigator Hookup Preview 07:44

Testing the Navigation Flow Preview 06:28

React Native Elements Preview 05:19

Helper Styling Components Preview 08:58

navigationOptions Deprecation Warning Preview 00:08

Styling Odds and Ends Preview 06:39

Input Props Preview 04:39

The Auth Context Preview 10:43

What's the Context Doing? Preview 07:36

Axios Setup Preview 05:31

Making an API Request Preview 09:44

Handling Errored Requests Preview 07:43

Async Storage Preview 04:22

Async Storage Update Preview 00:14

Storing the Token Preview 06:31

Navigation From Outside of React Preview 13:09

Oops, Typo Preview 00:50

Navigation to Signin Preview 03:37

Extracting Form Logic Preview 09:45

Last Bit of Extracting Preview 04:31

Creating a NavLink Preview 06:56

navigationOptions Deprecation Preview 00:13

Real Component Reuse! Preview 05:08

Wiring Up Signin Preview 08:02

onWillFocus vs onWillBlur Update Preview 00:16

Clearing Error Messages Preview 11:04

Automatic Signin Preview 05:36

Empty Screens While Resolving Auth Preview 07:22

Signing Out a User Preview 07:01

Safe Area Views Preview 02:10

Working on Track Create Preview 05:03

Installing React Native Maps Preview 00:11

Showing a Map Preview 04:58

Drawing a Series of Points Preview 04:37

Notes on Location Preview 04:13

Fix for Missing Location Request Error Preview 00:18

"requestPermissionsAsync" is now deprecated in Expo SDK 41+ Preview 00:24

Requesting Location Permissions Preview 06:39

Resetting Permissions Preview 04:22

How to Test Location? Preview 03:45

Faking the Users Location Preview 06:08

Reading a Location Preview 04:05

Bugginess with Location Preview 03:19

Location Architecture Preview 03:52

Location Context Preview 04:20

Live Location Updates Preview 13:47

Fix for Indicator not Tracking Map Preview 00:45

Drawing a Position Indicator Preview 04:08

Extracting Logic to a Hook Preview 08:27

Disabling Location Tracking Preview 04:18

Automatic Disables Preview 08:29

Building a Track Form Preview 03:49

Updates to Location Context Preview 08:41

Track Form Wire Up Preview 05:49

Buggy UseEffects Preview 08:30

Understanding Stale References Preview 12:42

Some Errors You May See Preview 00:13

Kind of Fixed Preview 06:57

The UseCallback Hook Preview 07:06

Cleaning Up After Ourselves Preview 06:04

Avoiding Stale References Preview 07:15

Tracking While Recording Preview 02:18

Bring Back the Polyline Preview 03:38

What Manages Tracks Preview 07:54

Coordination Between Contexts Preview 07:42

Async Storage Update Preview 00:14

Automatic Authentication Preview 10:26

Form Reset and Navigation Preview 07:24

Fetching Created Tracks Preview 02:06

ListItem Update Preview 00:17

Listing All Tracks Preview 07:25

Navigating to a Saved Track Preview 05:09

Showing Track Details Preview 05:21

Fixing Odds and Ends Preview 08:47

Important - Do Not Skip Preview 00:07

Finished Code Repository Preview 00:02

OSX Installation Preview 06:02

More on OSX Installation Preview 05:25

Running in the Simulator Preview 02:12

Windows Setup of React Native Preview 06:31

Android Studio and React Native CLI Installation Preview 05:12

Emulator Creation and System Variables Preview 14:56

ESLint Setup with VSCode Preview 03:37

Troubleshooting React Native Installs Preview 00:21

Project Directory Walkthrough Preview 02:16

Getting Content on the Screen Preview 03:17

React vs React Native Preview 03:11

Creating a Component with JSX Preview 06:16

Registering a Component Preview 03:45

Destructuring Imports Preview 05:25

Application Outline Preview 04:47

The Header Component Preview 08:29

Consuming File Exports Preview 06:50

Styling with React Native Preview 04:33

More on Styling Components Preview 04:51

Introduction to Flexbox Preview 05:24

Header Styling Preview 04:23

Making the Header Reusable Preview 07:18

Sourcing Album Data Preview 04:51

List Component Boilerplate Preview 06:07

Class Based Components Preview 07:26

Lifecycle Methods Preview 06:40

Quick Note On Axios Preview 00:10

Network Requests Preview 08:11

Component Level State Preview 08:57

More on Component Level State Preview 06:53

Rendering a List of Components Preview 05:55

Displaying Individual Albums Preview 09:30

Fantastic Reusable Components - The Card Preview 05:25

Styling a Card Preview 06:05

Passing Components as Props Preview 04:12

Dividing Cards into Sections Preview 08:23

Mastering Layout with Flexbox Preview 05:12

Positioning of Elements on Mobile Preview 05:20

More on Styling Preview 04:27

Images with React Native Preview 07:35

Displaying Album Artwork Preview 08:40

Making Content Scrollable Preview 04:30

Handling User Input with Buttons Preview 07:50

Styling of Buttons with UX Considerations Preview 05:28

Responding to User Input Preview 07:18

Linking Between Mobile Apps Preview 04:20

Setting Button Text by Props Preview 02:29

App Wrapup Preview 03:07

Auth App Introduction Preview 04:45

A Common Root Component Preview 04:27

Copying Reusable Components Preview 11:21

What is Firebase? Preview 05:17

Firebase Client Setup Preview 04:47

Login Form Scaffolding Preview 06:10

Handling User Inputs Preview 03:20

More on Handling User Inputs Preview 03:18

How to Create Controlled Components Preview 04:30

Making Text Inputs From Scratch Preview 04:14

A Focus on Passing Props Preview 05:01

Making the Input Pretty Preview 06:00

Wrapping up Inputs Preview 07:15

Password Inputs Preview 08:35

Logging a User In Preview 05:35

Error Handling Preview 07:18

More on Authentication Flow Preview 07:30

Creating an Activity Spinner Preview 04:59

Conditional Rendering of JSX Preview 06:40

Clearing the Form Spinner Preview 08:28

Handling Authentication Events Preview 06:09

More on Conditional Rendering Preview 07:19

Logging a User Out and Wrapup Preview 05:30

App Mockup and Approach Preview 03:55

The Basics of Redux Preview 08:30

More on Redux Preview 07:37

Redux is Hard! Preview 11:39

Application Boilerplate Preview 02:35

More on Redux Boilerplate Preview 08:14

Rendering the Header Preview 05:31

Reducer and State Design Preview 06:45

Library List of Data Preview 07:31

JSON CopyPaste Preview 01:18

The Connect Function Preview 10:06

MapStateToProps with Connect Preview 07:31

A Quick Review and Breather Preview 05:34

The Theory of ListView Preview 07:11

ListView in Practice Preview 03:36

Rendering a Single Row Preview 01:59

Styling the List Preview 06:31

Creating the Selection Reducer Preview 04:42

Introducing Action Creators Preview 05:47

Calling Action Creators Preview 08:56

Adding a Touchable Preview 06:56

Rules of Reducers Preview 05:16

Expanding a Row Preview 05:12

Moving Logic Out of Components Preview 06:23

Animations Preview 07:02

Wrapup Preview 05:06

Overview of Our Next App Preview 04:40

App Challenges Preview 05:08

Quick Note Preview 00:10

Just a Touch More Setup Preview 06:22

More on Boilerplate Setup Preview 07:02

Login Form in a Redux World Preview 07:00

Rebuilding the Login Form Preview 06:19

Handling Form Updates with Action Creators Preview 08:42

Wiring up Action Creators Preview 08:01

Typed Actions Preview 08:47

Immutable State Preview 08:39

Creating Immutable State Preview 07:08

More on Creating Immutable State Preview 07:45

Synchronous vs Asynchronous Action Creators Preview 08:01

Introduction to Redux Thunk Preview 06:29

Redux Thunk in Practice Preview 05:38

Redux Thunk in Practice Continued Preview 07:49

Making LoginUser More Robust Preview 03:27

Creating User Accounts Preview 07:23

Showing Error Messages Preview 06:45

A Firebase Gotcha Preview 06:45

Showing a Spinner on Loading Preview 11:57

Dealing with Navigation Preview 08:19

Navigation in the Router Preview 04:53

Addressing Styling Issues Preview 04:41

Displaying Multiple Scenes Preview 05:41

Navigating Between Routes Preview 03:40

Grouping Scenes with Buckets Preview 07:19

Navigation Bar Buttons Preview 03:17

Navigating to the Employee Creation Form Preview 06:01

Building the Employee Creation Form Preview 05:14

Employee Form Actions Preview 07:00

Handling Form Updates at the Reducer Level Preview 06:14

Dynamic Property Updates Preview 08:48

The Picker Component Preview 07:42

Pickers and Style Overrides Preview 07:00

Firebase JSON Schema Preview 06:36

Data Security in Firebase Preview 05:54

Creating Records with Firebase Preview 05:43

Default Form Values Preview 05:48

Successful Data Save to Firebase Preview 07:49

Resetting Form Properties Preview 09:48

Fetching Data from Firebase Preview 08:16

Storing Data by ID Preview 08:58

Dynamic DataSource Building Preview 08:01

Transforming Objects to Arrays Preview 07:07

List Building in Employee List Preview 06:25

Reusing the Employee Form Preview 06:56

Create vs Edit Forms Preview 06:53

Reusable Forms Preview 09:06

A Standalone Employee Edit Form Preview 03:27

Initializing Forms from State Preview 09:13

Updating Firebase Records Preview 07:15

Clearing Form Attributes Preview 05:17

Texting Employees Preview 04:42

Modals as a Reusable Component Preview 07:14

The Modal Component Continued Preview 08:11

Styling the Modal Preview 09:26

Employee Delete Action Creator Preview 08:30

Wiring up Employee Delete Preview 04:19