Welcome to
Beginner's Guide to Real World React
Course Syllabus and Content
Introduction
5 Lessons 8 Minutes
This is the introduction to the Beginner's Guide to Real World React.
You'll learn a little bit about Rob Kendal, his development background, and the motivations for producing this course on React.
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.
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.
How to download and run the project files
React - A modern UI library
7 Lessons1 Hours 3 Minutes
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.
This lesson takes a deeper look at React in comparison with other, similar frameworks such as Vue and Angular
React does have a few drawbacks and caveats to working with it. We'll explore some of those in this lesson.
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.
Now that we've introduced our very first app, the Greeting App, this lesson will cover the actual building of it, step by step.
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.
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.
Introducing React Hooks
4 Lessons 50 Minutes
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.
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.
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.
This code-along lesson walks through using Create React App to build a fully-functioning picture gallery, the Furry Friend Gallery.
Fetching data with React
3 Lessons 37 Minutes
This lesson introduces the concepts and approaches you can use to deal with fetching data within React, including the JavaScript Fetch API.
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.
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.
Deploying an app to the world
3 Lessons 27 Minutes
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.
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.
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.
Thinking in React
5 Lessons 45 Minutes
Successful React development involves being able to 'think in React'. We'll look at breaking down UI's into components and their relationships.
React components are modular, isolated slices of functionality that connect together to build user interfaces. This lesson discusses the relationships between components.
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.
The big project in this module is a Form Builder. Let's take a look at what we'll be building.
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.
React Hooks Deep Dive
6 Lessons 48 Minutes
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.
Setup the base project for our Hooks deep dive examples.
Learn about the useContext Hook, its use cases and implementation.
Learn about the useRef Hook, its use cases and implementation.
Learn about the useMemo Hook, its use cases and implementation.
Learn about the useCallback Hook, its use cases and implementation.
Navigation in complex apps
5 Lessons 48 Minutes
In this module we'll explore the third party React Router library to add a routing and navigation system to our applications.
React Router is a routing and navigation library that bolts onto to React. We'll explore what it is and how it works.
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.
We're going to build a demo Admin Console app step by step during this lesson, adding in React Router as we go.
With the basics in place, this lesson is all about extending the Admin Console with parameterized routing and query strings.
State management with Redux
6 Lessons1 Hours 12 Minutes
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
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.
This lesson introduces the new demo project for this module, 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.
This lesson takes things further by extending the Event Sign-Up App to use the Redux Toolkit for even easier state management.
This final lesson eschews all external redux libraries and swaps in the use of React's built-in useReducer Hook and Context tools.
The Dinosaur Search App
6 Lessons1 Hours 26 Minutes
In this final module we'll be putting our skills together and building a Dinosaur Search App
We put the foundations of the Dinosaur Search App in place such as creating a new React app and exploring the supporting API
This lesson focusses on building the data-handling services and core Redux management system for the Dinosaur Search App
In the final coding lesson of this module we'll flesh out the UI components that will power the Dinosaur Search App
With all the code in place, we'll take a walk through the finished Dinosaur Search App and discuss the finer points
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