Beginner's Guide to Real World React
In this course, you'll learn to build web applications with modern front end techniques using the React JS library
What You Will Learn
How to build realistic React applications from scratch
How React compares to other front end frameworks
How to use React Hooks
What React is missing and how to fill in the blanks
How to use React with popular libraries like axios
What problems React solves
How to navigate in complex apps with React-Router
How to manage app state with Redux
In this course you'll take a deep dive into core React concepts as you learn more about how React works, how you can use it to build complex web applications, and how to combine it with third-party libraries and frameworks to 'join the dots' and gain a detailed understanding of how you might use React in a real world setting.
Why this course
The Beginner's Guide to Real World React will teach you how to successfully build web applications with modern frontend techniques, using the ReactJS library.
React on its own is only one piece of the puzzle and it doesn't, out of the box, cater for some of the missing pieces of common frontend development. Pieces such as:
- Connecting to an API or external data source and retrieving data to power your app.
- Navigating around your app to different pages or areas.
- Managing the "state" of your application's data at a higher level (i.e. outside of components).
The problem is, these missing pieces are vital parts of any modern web application, as well as any realistic development scenario. It's key to understand both their concepts and how to approach them in React development. Many tutorials only cover one aspect of these and don't bring them together in a realistic setting.
On completion of The Beginner's Guide to Real World React, you'll not only have a knowledge of modern React development, but also the skills required to build real-world apps that talk to real data.
You don't have to be a coding guru or have years of experience as this course is designed for beginners. However, you should be familiar with the basics of frontend development, including HTML, CSS and JavaScript. It would be helpful to have an understanding of basic concepts around RESTful APIs and how to interact with them, but it's not essential.
Course topics
In The Beginners Guide to Real World React you'll join me on a deep dive into core React concepts. As you progress through this course, you will learn more about how React works, how you can use it to build complex web applications, and how to combine it with third-party libraries and frameworks to 'join the dots'. You will gain a detailed understanding of how you might use React in a real world setting.
Part I
In part one of the course, we'll take an end-to-end approach to React. We'll start with taking a look at the library itself and the problems it solves, before moving on to topics such as Hooks and handling data from an API. Finally, we'll talk about how to build and deploy our application to a popular service such as Netlify.
Included in the introductory part one of the course are the following modules:
- Module 1 - this very introduction.
- Module 2 - React JS: an introduction to React, a modern UI library.
- Module 3 - React Hooks: what they are and how to use them.
- Module 4 - Fetching data: using APIs in your code, and popular helper libraries such as Axios.
- Module 5 - Deploying your first app: using Netlify to deploy our app to the public.
Part II
In the extended course part two, we'll cover similar topics to the first part but take a deeper dive into them and look at some of the challenges we face as React developers and how to overcome them. We'll also learn about navigating around our application, and managing state across our application using Redux -- a common stumbling block for aspiring React developers.
The outline for part two of the course includes the following modules:
- Module 6 - Thinking in React: structuring your projects, breaking functionality into components
- Module 7 - React Hooks deep dive: learn what each Hook does and how to use them
- Module 8 - Navigation in complex apps: moving users around different areas of your application
- Module 9 - State management in complex apps: using Redux and useReducer Hooks to manage app state
- Module 10 - The Dinosaur Search App: putting it altogether by building our very own application
If you've been looking for a way to learn real-world React patterns, then this course is for you.
Course Content
Introduction
Course introduction
This is the introduction to the Beginner's Guide to Real World React.
INTRODUCTION
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.
LESSON
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.
LESSON
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.
LESSON
0:37 minutes
React - A modern UI library
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.
INTRODUCTION
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
LESSON
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.
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.
LESSON
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.
LESSON
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.
LESSON
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.
LESSON
3:30 minutes
Introducing React Hooks
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.
INTRODUCTION
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.
LESSON
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.
LESSON
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.
LESSON
18:55 minutes
Fetching data with React
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.
INTRODUCTION
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.
LESSON
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.
LESSON
30:47 minutes
Deploying an app to the world
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.
INTRODUCTION
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.
LESSON
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.
LESSON
13:55 minutes
Thinking in React
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.
INTRODUCTION
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.
LESSON
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.
LESSON
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.
LESSON
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.
LESSON
23:54 minutes
React Hooks Deep Dive
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.
INTRODUCTION
6:29 minutes
useContext Hook
Learn about the useContext Hook, its use cases and implementation.
LESSON
11:24 minutes
useCallback Hook
Learn about the useCallback Hook, its use cases and implementation.
LESSON
8:01 minutes
Navigation in complex apps
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.
INTRODUCTION
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.
LESSON
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.
LESSON
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.
LESSON
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.
LESSON
9:38 minutes
State management with Redux
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
LESSON
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.
LESSON
9:34 minutes
Event Sign Up App
This lesson introduces the new demo project for this module, the Event Sign-Up App.
LESSON
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.
LESSON
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.
LESSON
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.
LESSON
15:00 minutes
The Dinosaur Search App
The Dinosaur Search App
In this final module we'll be putting our skills together and building a Dinosaur Search App
LESSON
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
LESSON
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
LESSON
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
LESSON
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
LESSON
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
LESSON
2:28 minutes
Your Instructors
Frequently Asked Questions
Who is this course for?
This course is designed for anyone who's gained a solid foundation in modern front end development and is looking to move onto learning React from the ground up.
Is it really suitable for beginners?
Yep, sure is! You don’t have to be a coding guru or have years of experience as this course is designed for those who are new to React. However, you should be familiar with the basics of front end development, including HTML, CSS and JavaScript.
What if I need help?
You can ask us questions anytime through the community Discord channel (#reactbeginners) or by sending us a message.