The Modern React Bootcamp (Hooks/ Context/ NextJS/ Router)

About Course

Learn React from scratch with this comprehensive bootcamp course, covering everything from the basics to advanced concepts like Next JS, React Router, Hooks, and the Context API. This course is completely free and is offered by Udemy, Udacity, Coursera, MasterClass, NearPeer, and other platforms.

This course is based on the same curriculum used in real-world bootcamps and has been refined based on feedback from students. You will build a massive capstone application with drag & drop, animations, route transitions, complex form validations, and more. You’ll also learn the latest in React, including Hooks, and master state management using the useContext and useReducer hooks.

This course includes over 250 videos, interactive slide decks, detailed handouts, and cheatsheets, dozens of exercises, projects, and quizzes, and one massive code-along project with nearly 20 different React components. Get started today and become a React expert!

Keywords: React, React Bootcamp, Hooks, NextJS, React Router, Context API, JavaScript, Web Development, Front-End Development, Webpack, Udemy, Udacity, Coursera, MasterClass, NearPeer, Free Online Courses

React Hooks! (My favorite part of React!)
The new Context API
State management w/ useReducer + use Context (Redux Lite)
The basics of React (props, state, etc)
Master React Router
Build tons of projects, each with a beautiful interface
React State Management Patterns
Drag & Drop With React
Writing dynamically styled components w/ JSS
Common React Router Patterns
Work with tons of libraries and tools
Integrate UI libraries like Material UI and Bootstrap into your React apps
React Design Patterns and Strategies
Learn the ins and outs of JSS!
Learn how to easily use React to build responsive apps
Add complex animations to React projects
Debug and Fix buggy React code
Optimize React components
Integrate React with APIs
Learn the basics of Webpack in a free mini-course!
DOM events in React
Forms and complex validations in React
Using Context API w/ Hooks

Course Content

A Taste of React

A Message from the Professor
Welcome to the Course!

01:42
Intro to React

03:35
Is React a Framework or Library

05:03
Introducing Components!

10:32
Looking at a Large App

04:31
Setting Up Your Server

03:44
Writing Our First Component

09:32
Function Vs. Class Components

04:09
Download All Code Slides & Handouts

05:05

Introducing JSX

Props and More

Introducing Create React App

Intro to Create React App

02:58
2 Ways of Installing CRA

04:25
Creating a New App

05:06
Starting Up the Server

05:06
Modules Import & Export Crash Course

11:05
EXERICSE Fruits Modules

02:43
EXERCISE Fruits Modules Solution

07:39
Create React App Conventions

03:10
CSS and Assets in Create React App

07:51

Pokedex Project

Introducing State

State Goals

02:01
Quick Detour React Dev Tools

03:12
State in General

03:33
Initializing State

08:37
IMPORTANT! ALTERNATE SYNTAX

09:17
WTF is super() Vs. super(props)

07:24
Setting State Correctly

10:24
Crash Course Click Events in React

10:49
ALTERNATE SYNTAX PT 2

05:52
EXERCISE State Clicker

01:48
EXERCISE State Clicker Solution

07:25
The State As Props Design Pattern

03:02

React State Dice Exercise

React State Patterns

State Exercises!

The World of React Events

Hangman Exercise

Lights Out Game

Forms in React

Forms Exercise

Todo List Project

Building Yahtzee

Introducing Yahtzee

08:16
Yahtzee Starter Code Walkthrough

13:16
Fixing the Dice Locking Bug

09:33
Reading the Rules Classes

16:02
Adding In New Rules

09:50
Fixing the Re-Rolling Bug

08:13
Preventing Score Reuse

09:21
Adding Score Descriptions

04:00
Replacing Text w Dice Icons

14:07
Animating Dice Rolls

13:45
Final Touches and Bug Fixes

09:17

React Lifecycle Methods

LifeCycle Methods & API Exercise

Building the Dad Jokes App

Introducing the Dad Jokes Project

06:01
Fetching New Jokes From the API

07:42
Styling JokeList Component

10:07
Upvoting and Downvoting Jokes

09:01
Styling the Joke Component

05:59
Adding Dynamic Colors and Emojis

03:50
Syncing with LocalStorage

05:36
Fixing Our LocalStorage Bug

03:54
Adding a Loading Spinner

03:29
Preventing Duplicate Jokes

08:07
Sorting Jokes

02:35
Styling The Fetch Button

04:56
Adding Animations

06:35

React Router

Vending Machine Exercise

React Router Patterns

Working with URL Params

12:46
Multiple Route Params

05:10
Adding a 404 Not Found Route

03:11
Writing a Simple Search Form

05:20
The Redirect Component

04:44
Pushing onto the History Prop

06:13
Comparing History and Redirect

03:05
withRouter Higher Order Component

04:31
Implementing a Back Button

02:57

Router Exercises Part 2

The Massive Color Project Pt 1

Introducing the Color App

09:16
The New Stuff We Cover in This Project

07:48
Finding the Final Project Code

01:57
Creating the Palette Component

05:59
Color Box Basics

06:49
Styling Color Box

10:34
Copying to Clipboard

03:26
Copy Overlay Animation

14:50
Generating Shades of Colors

17:11
Adding Color Slider

07:39
Styling the Color Slider

06:03
Adding Navbar Component

09:23

The Massive Color Project Pt 2

JSS & withStyles (Color App)

The Massive Color Project Pt 3

Linking To Palettes

06:26
Brainstorming Single Color Palette

05:20
Adding More Links

06:30
Creating Single Color Palette

08:28
Displaying Shades in Single Color Palette

12:42
Adding Navbar and Footer

09:24
Add Go Back Box

09:48
Dynamic Text Color w Luminosity

11:22
Refactoring More Styles

17:31
Finish Refactoring Color Box

06:54

The Massive Color Project Pt 4

Refactor Palette Styles

08:11
Move Styles Into New Folder

06:36
Refactor Navbar CSS

08:46
Overview of PaletteForm

05:46
Adding NewPaletteForm

04:58
Adding Slide-Out Drawer

11:21
Adding Color Picker Component

09:46
Connecting Color Picker to Button

08:47
Creating Draggable Color Box

07:20
Introducing Form Validator

12:28

The Massive Color Project Pt 5-problem

Saving New Palettes

11:01
Add Palette Name Form

10:17
Styling Draggable Color Box

06:49
Adding Color Box Delete

04:41
It’s Drag and Drop Time!

14:58
Clear Palette and Random Color Buttons

11:05
Extract New Palette Nav

13:07
Extract Color Picker Component

11:48
Styling Palette Form Nav

05:43
Styling Color Picker

10:04

The Massive Color Project Pt 6-problem

Adding ModalsDialogs

07:33
Styling Dialog

08:49
Closing Form & Adding Emoji

05:22
Finish Emoji Picker Form

12:23
Moving JSS Styles Out

06:54
Tweak Form Styles

07:08
Saving to LocalStorage

05:02
Adding MiniPalette Delete Button

07:00
Finish MiniPalette Delete

08:52
Create Responsive Sizes Helper

14:17
Make Color Box Responsive

07:34
Make Form & Navbar Responsive

09:00

The Massive Color Project Pt 7

Make Palette List Responsive

08:45
Add SVG Background

08:07
Fade Animations w Transition Group

12:14
Delete Confirmation Dialog

16:52
Fix DeleteDrag Bug

03:24
Animating Route Transitions

08:21
Refactoring Route Transitions

09:03
Optimizing w PureComponent

07:57
Cleaning Things Up

03:58
More Cleaning Up!

07:23
Fix Issues w New Palette Form

06:02
Prevent Duplicate Random Colors

05:05

Introducing React Hooks

React Hooks Project

Intro to Hooks Project

10:15
Adding Our Form With Hooks

07:56
Adding Todo Item Component

10:38
Toggling and Deletion w Hooks

08:27
Editing w Hooks

12:06
Small Style Tweaks

04:56
LocalStorage w UseEffect Hook

05:37
Refactoring to a Custom Hook

06:10
Creating our UseLocaslStorateState Hook

13:43

Introducing The Context API!

Where We Are Heading

02:44
What Even is Context

08:34
Adding a Responsive Navbar To Our Context App

18:48
Adding a Responsive Form to our Context App

14:44
Intro to Context and Providers

12:43
Consuming A Context

07:56
Updating A Context Dynamically

05:05
Writing the Language Context

13:38
Consuming 2 Contexts Enter the Higher Order Component

12:21

Using Context with Hooks

State Management w useReducer & useContext

Adding In Todos Context

09:01
Consuming the Todo Context

05:50
The Issues w Our Current Approach

10:01
WTF Is a Reducer

08:34
First useReducer Example

12:13
Defining our Todo Reducer

13:25
Splitting Into 2 Contexts

06:45
Optimizing w Memo

05:45
Custom Hook Reducer + LocalStorage

07:24

Next JS

Next Fetching & Server API

Bonus Webpack Mini Course – Your Own Simple Version of Create React App

What Is Webpack

09:23
Installing and Running Webpack

14:23
Imports Exports and Webpack

07:56
Configuring Webpack

09:15
Webpack Loaders CSS & SASS

15:14
Cache Busting and Plugins

13:33
Splitting Dev & Production

10:16
Html-loader file-loader and Clean Webpack Plugin

11:21
Multiple Entry Points

06:04
Extract and Minify CSS

18:18

Add this certificate to your resume to demonstrate your skills & increase your chances of getting noticed.

Student Ratings & Reviews

No Review Yet

About Course

What Will You Learn?

Course Content

A Taste of React

A Message from the Professor

Welcome to the Course!

Intro to React

Is React a Framework or Library

Introducing Components!

Looking at a Large App

Setting Up Your Server

Writing Our First Component

Function Vs. Class Components

Download All Code Slides & Handouts

Introducing JSX

Basics Rules of JSX

How JSX Works Behind the Scenes

Embedding JavaScript in JSX

Conditionals in JSX

Standard React App Layout

Props and More

Intro to React Props

Props are Immutable

Other Types of Props

Pie Chart Component Demo w Props

EXERCISE Slot Machine

EXERCISE Slot Machine Solution

Looping in JSX

Adding Default Props

Styling React

Introducing Create React App

Intro to Create React App

2 Ways of Installing CRA

Creating a New App

Starting Up the Server

Modules Import & Export Crash Course

EXERICSE Fruits Modules

EXERCISE Fruits Modules Solution

Create React App Conventions

CSS and Assets in Create React App

Pokedex Project

Intro To Pokedex Exercise

Creating Pokecard Component

Adding Pokedex Component

Styling PokeCard and Pokedex

Adding Fancier Images

The PokeGame Component

Styling Pokegame

Introducing State

State Goals

Quick Detour React Dev Tools

State in General

Initializing State

IMPORTANT! ALTERNATE SYNTAX

WTF is super() Vs. super(props)

Setting State Correctly

Crash Course Click Events in React

ALTERNATE SYNTAX PT 2

EXERCISE State Clicker

EXERCISE State Clicker Solution

The State As Props Design Pattern

React State Dice Exercise

Introduction to Dice Exercise

Writing the Die Component

Adding the RollDice Component

Styling RollDice

Animating Dice Rolls!

React State Patterns

Updating Existing State

Mutating State the Safe Way

Designing State Minimizing State

Designing State Downward Data Flow

State Design Example Lottery

State Design Example LottoBall Component

State Design Example Lottery Component

State Exercises!

State Exercise 1 Coin Flipper

State Exercise 1 Coin Flipper Solution

State Exercise 2 Color Boxes

State Exercise 2 Color Boxes Solution