The Modern React Bootcamp (Hooks, Context, NextJS, Router)
4.7 (3,834 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
19,703 students enrolled

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.7 (3,834 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
19,703 students enrolled
Created by Colt Steele
Last updated 5/2019
English
English [Auto]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 39 hours on-demand video
  • 3 articles
  • 2 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll 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
Course content
Expand all 312 lectures 38:48:03
+ A Taste of React
9 lectures 47:53
Is React a Framework or Library?
05:03
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
5 lectures 26:20
Basics Rules of JSX
04:43
How JSX Works Behind the Scenes
03:32
Embedding JavaScript in JSX
03:44
Conditionals in JSX
09:13
Standard React App Layout
05:08
+ Props and More
9 lectures 41:35
Intro to React Props
05:57
Props are Immutable?
02:21
Other Types of Props
05:53
Pie Chart Component Demo w/ Props
02:03
EXERCISE: Slot Machine
01:37
EXERCISE: Slot Machine Solution
06:47
Looping in JSX
05:19
Adding Default Props
02:42
Styling React
08:56
+ Introducing Create React App
9 lectures 50:03
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
7 lectures 46:47
Intro To Pokedex Exercise
07:01
Creating Pokecard Component
07:39
Adding Pokedex Component
04:28
Styling PokeCard and Pokedex
06:28
Adding Fancier Images
02:43
The PokeGame Component
09:16
Styling Pokegame
09:12
+ Introducing State
12 lectures 01:13:24
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
5 lectures 38:11
Introduction to Dice Exercise
08:21
Writing the Die Component
06:07
Adding the RollDice Component
09:02
Styling RollDice
04:05
Animating Dice Rolls!
10:36
+ React State Patterns
7 lectures 48:28
Updating Existing State
10:41
Mutating State the Safe Way
10:15
Designing State: Minimizing State
04:04
Designing State: Downward Data Flow
04:01
State Design Example: Lottery
03:51
State Design Example: LottoBall Component
04:02
State Design Example: Lottery Component
11:34
+ State Exercises!
4 lectures 34:04
State Exercise 1: Coin Flipper
02:45
State Exercise 1: Coin Flipper Solution
18:28
State Exercise 2: Color Boxes
02:35
State Exercise 2: Color Boxes Solution
10:16
+ The World of React Events
7 lectures 51:59
Commonly Used React Events
09:44
The Joys of Method Binding :(
09:36
Alternative Binding With Class Properties
05:03
Binding With Arguments
05:50
Passing Methods to Child Components
12:00
Parent-Child Method Naming
02:03
Quick Detour: React Keys
07:43
Requirements
  • You'll need some experience with HTML, CSS, and JavaScript, but you don't need to be an expert.
  • You don't need advanced JavaScript knowledge. ES7 features are explained in the course as we go.
Description

EXPANDED and UPDATED in June 2019 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!

Who this course is for:
  • Anyone brand new to React or front-end frameworks in general
  • Anyone who wants to build a portfolio of stunning React apps
  • Students struggling to learn React or looking for more practice
  • Anyone who wants to level up their developer skills and learn a highly in-demand skill!