Welcome to

Beginner's Guide to Real World React

Example Code Download

You can download the complete example code by clicking here.


5 lessons 8m total

Course introduction

This is the introduction to the Beginner's Guide to Real World React.


3:45 minutes

About the author

You'll learn a little bit about Rob Kendal, his development background, and the motivations for producing this course on React.


2:01 minutes

Conventions used and helpful links

In this lesson we'll take a look at some of the conventions we'll be using throughout the course, including the type of code styles we'll employ, and code editing programs.


1:48 minutes

Reporting errors and getting support

This lesson will cover how to seek help if you get stuck, as well as how to report any errors or omissions that you come across.


0:37 minutes

Downloading the course code

A brief guide to downloading the


0:46 minutes

React - A modern UI library

7 lessons1h 3m total

What is React?

React is a declarative JavaScript library introduced by Facebook in 2013. We'll look at how React came about and determine some of the skills you'll need as a React developer.


4:03 minutes

Comparisons with similar frameworks

This lesson takes a deeper look at React in comparison with other, similar frameworks such as Vue and Angular


4:11 minutes

Drawbacks of React

React does have a few drawbacks and caveats to working with it. We'll explore some of those in this lesson.


1:36 minutes

First React app - The Greeting App

Before we dive into more deep and challenging topics, we'll have some fun by building an app. Our first React app will present our users with an input and send them a friendly greeting message.


0:47 minutes

Building the Greeting App

Now that we've introduced our very first app, the Greeting App, this lesson will cover the actual building of it, step by step.


24:16 minutes

Refactoring the Greeting App

With our Greeting App built, we're going to learn how to 'think in React' by breaking down our small App into components and refactoring it to use them.


25:30 minutes

React core concepts

So far, we've built and refactored a great React app. Now, it's time to talk about the fundamental principles of React components and its core concepts.


3:30 minutes

Introducing React Hooks

4 lessons 50m total

Introducing React Hooks

This module introduces us to React Hooks; what they are, how to use them, and why they're an important part of modern React development.


3:55 minutes

Common Hooks

In this lesson we'll take a look at the most common Hooks you'll come across and learn how to use them in your apps.


26:53 minutes

Furry Friend Gallery app

We're going to build on the previous Hooks demo by creating a dog picture gallery. First though, let's take a look at what we're going to build.


0:43 minutes

Building the Furry Friend Gallery

This code-along lesson walks through using Create React App to build a fully-functioning picture gallery, the Furry Friend Gallery.


18:55 minutes

Fetching data with React

3 lessons 37m total

Introduction to fetching data with React

This lesson introduces the concepts and approaches you can use to deal with fetching data within React, including the JavaScript Fetch API.


5:06 minutes

Furry Friends Gallery Mark II

Our code-along project for this module is to build a new Furry Friends Gallery. This time, we'll be using a new API and common UI patterns such as a sidebar filter. In this lesson, we'll take a look at what we'll be building.


1:16 minutes

Building the Furry Friends Gallery Mark II

We've seen the finished app, so now it's time to build it! This lesson will take you, step by step, through creating a brand new app, the Furry Friends Gallery Mark II.


30:47 minutes

Deploying an app to the world

3 lessons 27m total

Deploying an app to the world

Deploying your React apps is a vital step and this module will help you learn just how to do that. We cover some hosting history as well as your options for deployment in modern hosting ecosystems.


9:12 minutes

Building an app to deploy

React apps need to be built and packaged up for deployment before we can think about sending them off to a hosting platform. This lessons covers how to build your React apps, ready for deployment.


4:04 minutes

Setting up deployment on Netlify

In this final lesson of the module, we'll walkthrough the deployment process to host our Furry Friends Gallery Mark II app on the Netlify hosting platform.


13:55 minutes

Thinking in React

5 lessons 45m total

Thinking in React

Successful React development involves being able to 'think in React'. We'll look at breaking down UI's into components and their relationships.


10:10 minutes

Component relationships

React components are modular, isolated slices of functionality that connect together to build user interfaces. This lesson discusses the relationships between components.


5:55 minutes

Project structure

There are many different ways to structure your apps' code. This lesson introduces some different approaches, including how I structure my projects and suggestions from the Facebook team themselves.


4:14 minutes

Form Builder project

The big project in this module is a Form Builder. Let's take a look at what we'll be building.


0:47 minutes

Building the Form Builder

The Form Builder app is the most complex we've built so far. It builds on concepts from earlier modules and reenforces the idea of building modular, component-driven UIs. We'll walk through the app build together to create a dynamic form powered from a set of JSON objects.


23:54 minutes

React Hooks Deep Dive

6 lessons 48m total

Hooks Deep Dive

We'll be taking a deep dive walkthrough of the most common Hooks in React, including their use cases and how to work with them.


6:29 minutes

Hooks project setup

Setup the base project for our Hooks deep dive examples.


5:28 minutes

useContext Hook

Learn about the useContext Hook, its use cases and implementation.


11:24 minutes

useRef Hook

Learn about the useRef Hook, its use cases and implementation.


7:55 minutes

useMemo Hook

Learn about the useMemo Hook, its use cases and implementation.


8:48 minutes

useCallback Hook

Learn about the useCallback Hook, its use cases and implementation.


8:01 minutes

Navigation in complex apps

5 lessons 48m total

Navigation in complex apps

In this module we'll explore the third party React Router library to add a routing and navigation system to our applications.


5:11 minutes

Introducing React Router

React Router is a routing and navigation library that bolts onto to React. We'll explore what it is and how it works.


6:19 minutes

Admin Console app

For the demo lesson in this module we'll be building an Admin Console app. Let's take a look at what we'll be building in greater detail.


0:35 minutes

Building the Admin Console

We're going to build a demo Admin Console app step by step during this lesson, adding in React Router as we go.


26:43 minutes

Extending the Admin Console

With the basics in place, this lesson is all about extending the Admin Console with parameterized routing and query strings.


9:38 minutes

State management with Redux

6 lessons1h 12m total

State management in complex apps

Let's take a look at why we often need a centralized state area in our apps and how we can manage updates and changes to it


2:39 minutes

Introducing Redux

One of the best ways to manage your apps' centralized state is with the redux pattern. In this lesson we'll deep dive into redux and how you can use it for managing state.


9:34 minutes

Event Sign Up App

This lesson introduces the new demo project for this module, the Event Sign-Up App.


0:46 minutes

Building the Event Sign Up App

Learn how to build our very own Event Sign-Up App using the React Redux library with a centralized state management store.


29:49 minutes

Extending the Event Sign-Up App

This lesson takes things further by extending the Event Sign-Up App to use the Redux Toolkit for even easier state management.


14:20 minutes

Using the useReducer Hook

This final lesson eschews all external redux libraries and swaps in the use of React's built-in useReducer Hook and Context tools.


15:00 minutes

The Dinosaur Search App

6 lessons1h 26m total

The Dinosaur Search App

In this final module we'll be putting our skills together and building a Dinosaur Search App


5:44 minutes

Project setup and scaffolding

We put the foundations of the Dinosaur Search App in place such as creating a new React app and exploring the supporting API


18:41 minutes

Building the services

This lesson focusses on building the data-handling services and core Redux management system for the Dinosaur Search App


19:47 minutes

Building the components

In the final coding lesson of this module we'll flesh out the UI components that will power the Dinosaur Search App


35:01 minutes

Exploring the app

With all the code in place, we'll take a walk through the finished Dinosaur Search App and discuss the finer points


4:31 minutes

Closing thoughts and learning paths

With the course at an end we'll take a look at some next steps to continue your React learning and where you can go from here


2:28 minutes