Course introduction

About the author

Conventions used and helpful links

Reporting errors and getting support

Downloading the course code

Introduction

What is React?

Comparisons with similar frameworks

Drawbacks of React

First React app - The Greeting App

Building the Greeting App

Refactoring the Greeting App

React core concepts

React - A modern UI library

Introducing React Hooks

Common Hooks

Furry Friend Gallery app

Building the Furry Friend Gallery

Introduction to fetching data with React

Furry Friends Gallery Mark II

Building the Furry Friends Gallery Mark II

Fetching data with React

Deploying an app to the world

Building an app to deploy

Setting up deployment on Netlify

Thinking in React

Component relationships

Project structure

Form Builder project

Building the Form Builder

Hooks Deep Dive

Hooks project setup

useContext Hook

useRef Hook

useMemo Hook

useCallback Hook

React Hooks Deep Dive

Navigation in complex apps

Introducing React Router

Admin Console app

Building the Admin Console

Extending the Admin Console

State management in complex apps

Introducing Redux

Event Sign Up App

Building the Event Sign Up App

Extending the Event Sign-Up App

Using the useReducer Hook

State management with Redux

The Dinosaur Search App

Project setup and scaffolding

Building the services

Building the components

Exploring the app

Closing thoughts and learning paths

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.

In this course, you'll learn build web applications with modern front end techniques using the React JS library

Beginner's Guide to Real World React

How to build realistic React applications from scratch

How React compares to other front end frameworks

What React is missing and how to fill in the blanks

How to use React with popular libraries like axios

How to navigate in complex apps with React-Router

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Featured Podcast

A Software Engineer's Guide to Venture Capital with AngelList Engineer Sumukh Sridhara

Beginner's Guide to Real World React

Welcome: Introduction

Introduction:

Start Here

Module 1: Introduction

Introduction: (3:45)

Course introduction

Lesson 1: (2:01)

About the author

Lesson 2: (1:48)

Conventions used and helpful links

Lesson 3: (0:37)

Reporting errors and getting support

Lesson 4: (0:46)

Downloading the course code

Module 2: React - A modern UI library

Introduction: (4:03)

What is React?

Lesson 1: (4:11)

Comparisons with similar frameworks

Lesson 2: (1:36)

Drawbacks of React

Lesson 3: (0:47)

First React app - The Greeting App

Lesson 4: (24:16)

Building the Greeting App

Lesson 5: (25:30)

Refactoring the Greeting App

Lesson 6: (3:30)

React core concepts

Module 3: Introducing React Hooks

Introduction: (3:55)

Introducing React Hooks

Lesson 1: (26:53)

Common Hooks

Lesson 2: (0:43)

Furry Friend Gallery app

Lesson 3: (18:55)

Building the Furry Friend Gallery

Module 4: Fetching data with React

Introduction: (5:06)

Introduction to fetching data with React

Lesson 1: (1:16)

Furry Friends Gallery Mark II

Lesson 2: (30:47)

Building the Furry Friends Gallery Mark II

Module 5: Deploying an app to the world

Introduction: (9:12)

Deploying an app to the world

Lesson 1: (4:04)

Building an app to deploy

Lesson 2: (13:55)

Setting up deployment on Netlify

Module 6: Thinking in React

Introduction: (10:10)

Thinking in React

Lesson 1: (5:55)

Component relationships

Lesson 2: (4:14)

Project structure

Lesson 3: (0:47)

Form Builder project

Lesson 4: (23:54)

Building the Form Builder

Module 7: React Hooks Deep Dive

Introduction: (6:29)

Hooks Deep Dive

Lesson 1: (5:28)

Hooks project setup

Lesson 2: (11:24)

useContext Hook

Lesson 3: (7:55)