Udemy

Platform

English

Language

Web Development

Category

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

Just published! Follow the same curriculum I teach my students in SF. 10+ projects including one HUGE application!

4.69 (5856 reviews)

Students

39 hours

Content

Mar 2021

Last Update
Regular Price


What you will learn

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


Description

EXPANDED and UPDATED to include new sections on Next JS and Server-Side Rendering!

Welcome to the best online resource for learning React! Published in April 2019, this course is brand new and covers the latest in React.  This course follows the exact same React curriculum my in-person bootcamp students follow in San Francisco, where students have gone on to get jobs at places like Google, Apple, Pinterest, & Linkedin.  This is the most polished React course online, and it's the only course that is based on REAL bootcamp curriculum that has been tried and tested in the classroom.

This course builds up concepts one at a time, cementing each new topic with an expertly designed exercise or project to test your knowledge. It includes a huge variety of beautiful exercises, projects, and games that we create together from scratch.  Sometimes we mix things up and give you a broken React app and ask you to fix it or optimize the code. Check out the promo video to see a couple of the course exercises. The course culminates in one huge capstone project, which is the largest project I've ever built for any of my online courses.  I'm really excited about it :) 

React is the most popular JS library around, and there's never been a better time to learn it! Companies all over the world are turning to React to help manage their JavaScript chaos, including tech giants like Facebook, Airbnb, and Uber.  React is consistently voted the most loved and most wanted front-end framework by developers, and it's clear why! React is a joy to use, and it makes writing maintainable and modular JavaScript code a breeze.

If you're new to frameworks, React is the ideal first framework to learn. It's easy enough to learn the basics, but it doesn't teach you bad habits. Even if you've already enrolled in another React course, this course is worth your time for the exercises and projects alone!  This curriculum is the product of two years of development and iteration in the bootcamp classroom.   All the lectures, exercises, and projects have been tweaked and improved based on real student feedback. You won't find anything else online as structured and polished as this course.

The highlights:

  • Learn React, from the very basics up to advanced topics like Next JS, React Router, Higher Order Components and Hooks and the Context API.

  • Build one massive capstone application, complete with drag & drop, animations, route transitions, complex form validations, and more.

  • Learn the latest in React, including Hooks (my favorite part of React!).  We build a complete app using Hooks, including multiple custom hooks.

  • Learn state management using the useContext and useReducer hooks, to mimic some of the functionality of Redux.

  • You get tons of detailed handouts and cheatsheets that you can refer back to whenever you need to.   Think of this as a React textbook you can study at any point if you get tired of videos.

What you get:

  • 250+ videos

  • Slick, interactive slide decks custom made for each section

  • Detailed handouts and cheatsheets, the React "textbook".

  • Dozens of exercises, projects, and quizzes.

  • One massive code-along project with nearly 20 different React components.

  • Free Webpack Mini Course!


Screenshots

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

Content

A Taste of React

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

The World of React Events

Commonly Used React Events

The Joys of Method Binding :(

Alternative Binding With Class Properties

Binding With Arguments

Passing Methods to Child Components

Parent-Child Method Naming

Quick Detour: React Keys

Hangman Exercise

Introducing The Hangman Exercise

Starter Code Walkthrough

Adding Keys

Tracking Incorrect Guesses

Adding Game Over

Adding Alt Text

Randomizing Words

Adding a Reset Button

Making the Game Winnable & Styling

Lights Out Game

Introducing Lights Out

Exploring the Starter Code

Displaying the Game Board

Flipping Cells

Winning the Game

Styling the Game

Forms in React

Intro to React Forms

Writing Forms w/ Multiple Inputs

The htmlFor Attribute

Design Pattern: Passing Data Upwards

Using the UUID Library

Forms Exercise

Introduction to Box Maker Exercise

Adding the BoxList Component

Creating the BoxForm Component

Removing Color Boxes

Todo List Project

Project Overview

TodoList and TodoItem Components

Adding NewTodoForm

Removing Todos

Editing Todos

Toggling Todo Completion

Styling the Todo App

Building Yahtzee

Introducing Yahtzee

Yahtzee Starter Code Walkthrough

Fixing the Dice Locking Bug

Reading the Rules Classes

Adding In New Rules

Fixing the Re-Rolling Bug

Preventing Score Reuse

Adding Score Descriptions

Replacing Text w/ Dice Icons

Animating Dice Rolls

Final Touches and Bug Fixes

React Lifecycle Methods

Introducing ComponentDidMount

Loading Data Via AJAX

Adding Animated Loaders

Loading Data With Async Functions

Introducing ComponentDidUpdate

PrevProps and PrevState in ComponentDidUpdate

Introducing ComponentWillUnmount

LifeCycle Methods & API Exercise

Introducing the Cards API Project

Requesting a Deck ID

Fetching New Cards with AJAX

Adding the Card Component

Randomly Transforming Cards

Styling Cards and Deck

Building the Dad Jokes App

Introducing the Dad Jokes Project

Fetching New Jokes From the API

Styling JokeList Component

Upvoting and Downvoting Jokes

Styling the Joke Component

Adding Dynamic Colors and Emojis

Syncing with LocalStorage

Fixing Our LocalStorage Bug

Adding a Loading Spinner

Preventing Duplicate Jokes

Sorting Jokes

Styling The Fetch Button

Adding Animations

React Router:

Intro to Client-Side Routing

Adding Our First Route

Using Switch and Exact

Intro to the Link Component

Adding in NavLinks

Render prop vs. Component prop in Routes

Vending Machine Exercise

Intro to Vending Machine Exercise

Adding The Vending Machine Routes

Adding the Links

Creating the Navbar

NEW CONCEPT: Props.children

React Router Patterns

Working with URL Params

Multiple Route Params

Adding a 404 Not Found Route

Writing a Simple Search Form

The Redirect Component

Pushing onto the History Prop

Comparing History and Redirect

withRouter Higher Order Component

Implementing a Back Button

Router Exercises Part 2

Exercise Introduction

Working with Bootstrap in React

Writing the DogList Component

Adding the DogDetails Component

Creating Our Navbar Component

Refactoring & Extracting Our Routes

A Couple Small Tweaks

Styling the App

The Massive Color Project Pt 1

Introducing the Color App

The New Stuff We Cover in This Project

Finding the Final Project Code

Creating the Palette Component

Color Box Basics

Styling Color Box

Copying to Clipboard

Copy Overlay Animation

Generating Shades of Colors

Adding Color Slider

Styling the Color Slider

Adding Navbar Component

The Massive Color Project Pt 2

Intro to Material UI & Adding Select

Adding Snackbar

Add Palette Footer

Integrating React Router

Finding Palettes

PaletteList and Links

JSS & withStyles (Color App)

Introducing withStyles HOC

Styling MiniPalette with JSS

Styling PaletteList with JSS

Finishing Up MiniPalette

The Massive Color Project Pt 3

Linking To Palettes

Brainstorming Single Color Palette

Adding More Links

Creating Single Color Palette

Displaying Shades in Single Color Palette

Adding Navbar and Footer

Add Go Back Box

Dynamic Text Color w/ Luminosity

Refactoring More Styles

Finish Refactoring Color Box

The Massive Color Project Pt 4

Refactor Palette Styles

Move Styles Into New Folder

Refactor Navbar CSS

Overview of PaletteForm

Adding NewPaletteForm

Adding Slide-Out Drawer

Adding Color Picker Component

Connecting Color Picker to Button

Creating Draggable Color Box

Introducing Form Validator

The Massive Color Project Pt 5

Saving New Palettes

Add Palette Name Form

Styling Draggable Color Box

Adding Color Box Delete

It's Drag and Drop Time!

Clear Palette and Random Color Buttons

Extract New Palette Nav

Extract Color Picker Component

Styling Palette Form Nav

Styling Color Picker

The Massive Color Project Pt 6

Adding Modals/Dialogs

Styling Dialog

Closing Form & Adding Emoji

Finish Emoji Picker Form

Moving JSS Styles Out

Tweak Form Styles

Saving to LocalStorage

Adding MiniPalette Delete Button

Finish MiniPalette Delete

Create Responsive Sizes Helper

Make Color Box Responsive

Make Form & Navbar Responsive

The Massive Color Project Pt 7

Make Palette List Responsive

Add SVG Background

Fade Animations w/ Transition Group

Delete Confirmation Dialog

Fix Delete/Drag Bug

Animating Route Transitions

Refactoring Route Transitions

Optimizing w/ PureComponent

Cleaning Things Up

More Cleaning Up!

Fix Issues w/ New Palette Form

Prevent Duplicate Random Colors

Introducing React Hooks

Intro to Hooks & useState

Building a Custom Hook: useToggleState

Building a Custom Hook: useInputState

The useEffect Hook

Fetching Data w/ the useEffect Hook

React Hooks Project

Intro to Hooks Project

Adding Our Form With Hooks

Adding Todo Item Component

Toggling and Deletion w/ Hooks

Editing w/ Hooks

Small Style Tweaks

LocalStorage w/ UseEffect Hook

Refactoring to a Custom Hook

Creating our UseLocaslStorateState Hook

Introducing The Context API!

Where We Are Heading

THE CODE FOR THIS SECTION!

What Even is Context?

Adding a Responsive Navbar To Our Context App

Adding a Responsive Form to our Context App

Intro to Context and Providers

Consuming A Context

Updating A Context Dynamically

Writing the Language Context

Consuming 2 Contexts: Enter the Higher Order Component

Using Context with Hooks

THE CODE FOR THIS SECTION!

Introducing the useContext Hook

Consuming Multiple Contexts w/ Hooks

Rewriting a Context Provider w/ Hooks

Context Providers w/ Custom Hooks

"Hookify-ing" the Rest of the App

State Management w/ useReducer & useContext

IMPORTANT: GET THE CODE HERE!

Adding In Todos Context

Consuming the Todo Context

The Issues w/ Our Current Approach

WTF Is a Reducer

First useReducer Example

Defining our Todo Reducer

Splitting Into 2 Contexts

Optimizing w/ Memo

Custom Hook: Reducer + LocalStorage

Next JS

Intro to Next

What is Server Side Rendering?

Getting Started w/ Next

Basic Routing in Next

Next's Link Component

Links Without Anchor Tags

Components Vs. Pages

Overriding the Default _app.js

Next: Fetching & Server API

Introducing getInitialProps

Fetching Posts w/ getInitialProps

Query Strings in Next

withRouter Higher Order Component

Fetching Comments

The "as" Prop

Custom Server Without Express

Custom Server-Side Routes w/ Express

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

What Is Webpack??

Installing and Running Webpack

Imports, Exports, and Webpack

Configuring Webpack

Webpack Loaders, CSS, & SASS

Cache Busting and Plugins

Splitting Dev & Production

Html-loader, file-loader, and Clean Webpack Plugin

Multiple Entry Points

Extract and Minify CSS


Reviews

A
Alex5 October 2020

Went from 0 react knowledge to intermediate. I'm able to make my own personal projects after taking this and I appreciate that it teaches class based components. In the real world I'm running into class components constantly and without this course I would have been lost. Highly recommend this course/teacher!

R
Ruben2 October 2020

The color project took up too much of the course and it felt like a lot of it wasn't directly related to learning React. NextJS was a bit confusing and I didn't really understand the point of it, likewise with the Webpack section. Otherwise very good course, and Colt is absolutely one of the best instructors with top quality teaching style.

C
Christopher30 September 2020

Colt Steele is one of, if not the best, instructors ever! This course has exceeded my expectations so far. Learning React can be difficult. It doesn’t help when instructors move at light speed through the material. However, Colt has a magic way of turning complicated concepts into these digestible chunks that even a complete newbie would understand. The attention to detail in this course is superb! It includes beautiful documentation, with downloadable interactive slides, pdfs, starter files, and solution code. You can tell Colt put a ton of heart and effort into this project. His friendly, engaging, and humorous charm spills out of every video lesson. I’ve tried watching YouTube tutorials and some other Udemy courses on React, but they left me with my head whirling and feeling discouraged. Whenever I’m stuck trying to learn some concept, I always reach for one of Colt’s courses, and this one has not let me down either. The Modern React Bootcamp, along with any other course by Colt Steele, is a must buy. I’d give this 10 ⭐ if I could! Thanks, Colt ?

C
Carlo30 September 2020

too many things that not belong to react, it's confusing I'm not here to learn about colors and tools for colors

D
Daniel29 September 2020

This course is a masterpiece. I did Colt's web development course and Javascript Bootcamp before this one. And in my opinion this is by far his best course out of these three mentioned ones. This course has: - Colt super engaging style and his unique way of teaching, he is a natural. He explain things in his easy going way and you really understand and enjoy the videos. Unlike other instructors who sound like they are reading a script, slowly and boring, he teaches from a conversation level and he really does it good. - I am not done with complimenting Colt. As in this course: It's just him! Unlike in his other courses where part of of the content is given by other instructors with who I really don't learn as much as I do with Colt. In this one is just him. Master Yoda Colt 100% - Tons of exercises: Almost after every new topic there is a new exercise to put our new Knowledge in practice. Now this is the way to learn! - You can see he did put a lot of work into this. He also provides full written documentation on the lessons and exercises. - Motivation: Somehow I feel more motivated than ever to keep on learning code, I don't know how, but I guess is partially his fault, as the way he teaches is just not great but also fun :) Maybe a little negative comment: More support on the Q&A could be nice. I <3 Colt

S
ShawnPatrick26 February 2020

OMG!!! This guy is literally the best React Instructor I have EVER seen! He is able to explain many React concepts to make it so easy to understand such as state and props. I love this Course!!!!!!!!!!!!!!

R
Rob12 February 2020

I completed a web development course with Codecademy but after the tutorials I felt a bit lost starting my own projects. I'm using this to help get going again.

T
Trung11 February 2020

I enjoyed every single bits of this course. I can remake the final project from scratch with hooks ( with only 2-3 times looking back the resource). My React skills definitely becomes a lot better. Also got a job offer too!! Colt is definitely one heck of an instructor.

V
Verónika11 February 2020

Colt is such a great teacher, he always says everything from a pespective that makes you understand deeply the content

T
Timothy10 February 2020

It's a great course. My only slightly critical feedback is I think the hooks/context/reducers content should be introduced earlier and incorporated into the big colors project. I understand that would involve redoing the entire course so I get why it isn't. But this is regardless a great way to get a handle on React

J
Jordan9 February 2020

Helped me get a much better understanding of React, hooks, and context. Most of the course uses class-based components. This may be a bit divisive as React has aged since the course was made, but it's taught in a way that lays the foundation for more React knowledge.

D
Donny5 February 2020

Stunning! I've got to be Colt's biggest fan. He's my favorite coding teacher. Explanations are clear, easy to follow, down to earth, NOT heady. Super well organized classes with lots of handouts to supplement learning. Plus exercises to cement it in the brain. I'm actually in a code school now and will study React in class in about a week. Trying to get a head start by using this class. Once class is over, however, I'll come back to Colt's course and finish the rest of it. Bravo. Love PURPLE! Donny

S
Scott4 February 2020

I am familiar with Colt's work and would recommend any of his courses. This course has been in my queue for some time, and I am extremely excited to finally start. Thanks

F
Frijke4 February 2020

Colt is just great; he explains everything so well. Compared another react course and I was lost... Now I get it :)

S
Sinae3 February 2020

Yes. His explain is very clear and step by step, and the exercise is quite good to understand the concept and how to use the methods


2320056

Udemy ID

4/13/2019

Course created date

6/14/2019

Course Indexed date
Bot
Course Submitted by