The Modern React Bootcamp (Hooks, Context, Router & More)

The Modern React Bootcamp (Hooks, Context, Router & More)
The Modern React Bootcamp (Hooks, Context, Router & More)
English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 36.5 Hours | 21.6 GB

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

Welcome to the best online resource for learning React! 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 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’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
Table of Contents

A Taste of React
1 Welcome to the Course!
2 Intro to React
3 Is React a Framework or Library
4 Introducing Components!
5 Pie Chart Component
6 Setting Up Your Server
7 Writing Our First Component
8 Function Vs. Class Components
9 Download All Code, Slides, & Handouts

Introducing JSX
10 Basics Rules of JSX
11 How JSX Works Behind the Scenes
12 Embedding JavaScript in JSX
13 Conditionals in JSX
14 Standard React App Layout

Props and More
15 Intro to React Props
16 Props are Immutable
17 Other Types of Props
18 Pie Chart Component Demo w Props
19 EXERCISE Slot Machine
20 EXERCISE Slot Machine Solution
21 Looping in JSX
22 Adding Default Props
23 Styling React

Introducing Create React App
24 Intro to Create React App
25 Ways of Installing CRA
26 Creating a New App
27 Starting Up the Server
28 Modules Import & Export Crash Course
29 EXERICSE Fruits Modules
30 EXERCISE Fruits Modules Solution
31 Create React App Conventions
32 CSS and Assets in Create React App

Pokedex Project
33 Intro To Pokedex Exercise
34 Creating Pokecard Component
35 Adding Pokedex Component
36 Styling PokeCard and Pokedex
37 Adding Fancier Images
38 The PokeGame Component
39 Styling Pokegame

Introducing State
40 State Goals
41 EXERCISE State Clicker
42 EXERCISE State Clicker Solution
43 The State As Props Design Pattern
44 Quick Detour React Dev Tools
45 State in General
46 Initializing State
47 IMPORTANT! ALTERNATE SYNTAX
48 WTF is super() Vs. super(props)
49 Setting State Correctly
50 Crash Course Click Events in React
51 ALTERNATE SYNTAX PT 2

React State Dice Exercise
52 Introduction to Dice Exercise
53 Writing the Die Component
54 Adding the RollDice Component
55 Styling RollDice
56 Animating Dice Rolls!

React State Patterns
57 Updating Existing State
58 Mutating State the Safe Way
59 Designing State Minimizing State
60 Designing State Downward Data Flow
61 State Design Example Lottery
62 State Design Example LottoBall Component
63 State Design Example Lottery Component

State Exercises!
64 State Exercise 1 Coin Flipper
65 State Exercise 1 Coin Flipper Solution
66 State Exercise 2 Color Boxes
67 State Exercise 2 Color Boxes Solution

The World of React Events
68 Commonly Used React Events
69 The Joys of Method Binding (
70 Alternative Binding With Class Properties
71 Binding With Arguments
72 Passing Methods to Child Components
73 Parent-Child Method Naming
74 Quick Detour React Keys

Hangman Exercise
75 Introducing The Hangman Exercise
76 Starter Code Walkthrough
77 Adding Keys
78 Tracking Incorrect Guesses
79 Adding Game Over
80 Adding Alt Text
81 Randomizing Words
82 Adding a Reset Button
83 Making the Game Winnable & Styling

Lights Out Game
84 Introducing Lights Out
85 Exploring the Starter Code
86 Displaying the Game Board
87 Flipping Cells
88 Winning the Game
89 Styling the Game

Forms in React
90 Intro to React Forms
91 Writing Forms w Multiple Inputs
92 The htmlFor Attribute
93 Design Pattern Passing Data Upwards
94 Using the UUID Library

Forms Exercise
95 Introduction to Box Maker Exercise
96 Adding the BoxList Component
97 Creating the BoxForm Component
98 Removing Color Boxes

Todo List Project
99 Project Overview
100 TodoList and TodoItem Components
101 Adding NewTodoForm
102 Removing Todos
103 Editing Todos
104 Toggling Todo Completion
105 Styling the Todo App

Building Yahtzee
106 Introducing Yahtzee
107 Animating Dice Rolls
108 Final Touches and Bug Fixes
109 Yahtzee Starter Code Walkthrough
110 Fixing the Dice Locking Bug
111 Reading the Rules Classes
112 Adding In New Rules
113 Fixing the Re-Rolling Bug
114 Preventing Score Reuse
115 Adding Score Descriptions
116 Replacing Text w Dice Icons

React Lifecycle Methods
117 Introducing ComponentDidMount
118 Loading Data Via AJAX
119 Adding Animated Loaders
120 Loading Data With Async Functions
121 Introducing ComponentDidUpdate
122 PrevProps and PrevState in ComponentDidUpdate
123 Introducing ComponentWillUnmount

LifeCycle Methods & API Exercise
124 Introducing the Cards API Project
125 Requesting a Deck ID
126 Fetching New Cards with AJAX
127 Adding the Card Component
128 Randomly Transforming Cards
129 Styling Cards and Deck

Building the Dad Jokes App
130 Introducing the Dad Jokes Project
131 Preventing Duplicate Jokes
132 Sorting Jokes
133 Styling The Fetch Button
134 Adding Animations
135 Fetching New Jokes From the API
136 Styling JokeList Component
137 Upvoting and Downvoting Jokes
138 Styling the Joke Component
139 Adding Dynamic Colors and Emojis
140 Syncing with LocalStorage
141 Fixing Our LocalStorage Bug
142 Adding a Loading Spinner

React Router
143 Intro to Client-Side Routing
144 Adding Our First Route
145 Using Switch and Exact
146 Intro to the Link Component
147 Adding in NavLinks
148 Render prop vs. Component prop in Routes

Vending Machine Exercise
149 Intro to Vending Machine Exercise
150 Adding The Vending Machine Routes
151 Adding the Links
152 Creating the Navbar
153 NEW CONCEPT Props.children

React Router Patterns
154 Working with URL Params
155 Multiple Route Params
156 Adding a 404 Not Found Route
157 Writing a Simple Search Form
158 The Redirect Component
159 Pushing onto the History Prop
160 Comparing History and Redirect
161 withRouter Higher Order Component
162 Implementing a Back Button

Router Exercises Part 2
163 Exercise Introduction
164 Working with Bootstrap in React
165 Writing the DogList Component
166 Adding the DogDetails Component
167 Creating Our Navbar Component
168 Refactoring & Extracting Our Routes
169 A Couple Small Tweaks
170 Styling the App

The Massive Color Project Pt 1
171 Introducing the Color App
172 Adding Color Slider
173 Styling the Color Slider
174 Adding Navbar Component
175 The New Stuff We Cover in This Project
176 Finding the Final Project Code
177 Creating the Palette Component
178 Color Box Basics
179 Styling Color Box
180 Copying to Clipboard
181 Copy Overlay Animation
182 Generating Shades of Colors

The Massive Color Project Pt 2
183 Intro to Material UI & Adding Select
184 Adding Snackbar
185 Add Palette Footer
186 Integrating React Router
187 Finding Palettes
188 PaletteList and Links

JSS & withStyles (Color App)
189 Introducing withStyles HOC
190 Styling MiniPalette with JSS
191 Styling PaletteList with JSS
192 Finishing Up MiniPalette

The Massive Color Project Pt 3
193 Linking To Palettes
194 Finish Refactoring Color Box
195 Brainstorming Single Color Palette
196 Adding More Links
197 Creating Single Color Palette
198 Displaying Shades in Single Color Palette
199 Adding Navbar and Footer
200 Add Go Back Box
201 Dynamic Text Color w Luminosity
202 Refactoring More Styles

The Massive Color Project Pt 4
203 Refactor Palette Styles
204 Introducing Form Validator
205 Move Styles Into New Folder
206 Refactor Navbar CSS
207 Overview of PaletteForm
208 Adding NewPaletteForm
209 Adding Slide-Out Drawer
210 Adding Color Picker Component
211 Connecting Color Picker to Button
212 Creating Draggable Color Box

The Massive Color Project Pt 5
213 Saving New Palettes
214 Styling Color Picker
215 Add Palette Name Form
216 Styling Draggable Color Box
217 Adding Color Box Delete
218 It’s Drag and Drop Time!
219 Clear Palette and Random Color Buttons
220 Extract New Palette Nav
221 Extract Color Picker Component
222 Styling Palette Form Nav

The Massive Color Project Pt 6
223 Adding ModalsDialogs
224 Create Responsive Sizes Helper
225 Make Color Box Responsive
226 Make Form & Navbar Responsive
227 Styling Dialog
228 Closing Form & Adding Emoji
229 Finish Emoji Picker Form
230 Moving JSS Styles Out
231 Tweak Form Styles
232 Saving to LocalStorage
233 Adding MiniPalette Delete Button
234 Finish MiniPalette Delete

The Massive Color Project Pt 7
235 Make Palette List Responsive
236 More Cleaning Up!
237 Fix Issues w New Palette Form
238 Prevent Duplicate Random Colors
239 Add SVG Background
240 Fade Animations w Transition Group
241 Delete Confirmation Dialog
242 Fix DeleteDrag Bug
243 Animating Route Transitions
244 Refactoring Route Transitions
245 Optimizing w PureComponent
246 Cleaning Things Up

Introducing React Hooks
247 Intro to Hooks & useState
248 Building a Custom Hook useToggleState
249 Building a Custom Hook useInputState
250 The useEffect Hook
251 Fetching Data w the useEffect Hook

React Hooks Project
252 Intro to Hooks Project
253 Adding Our Form With Hooks
254 Adding Todo Item Component
255 Toggling and Deletion w Hooks
256 Editing w Hooks
257 Small Style Tweaks
258 LocalStorage w UseEffect Hook
259 Refactoring to a Custom Hook

Introducing The Context API!
260 Where We Are Heading
261 Consuming 2 Contexts Enter the Higher Order Component
262 THE CODE FOR THIS SECTION!
263 What Even is Context
264 Adding a Responsive Navbar To Our Context App
265 Adding a Responsive Form to our Context App
266 Intro to Context and Providers
267 Consuming A Context
268 Updating A Context Dynamically
269 Writing the Language Context

Using Context with Hooks
270 THE CODE FOR THIS SECTION!
271 Introducing the useContext Hook
272 Consuming Multiple Contexts w Hooks
273 Rewriting a Context Provider w Hooks
274 Context Providers w Custom Hooks
275 Hookify-ing the Rest of the App

State Management w useReducer & useContext
276 IMPORTANT GET THE CODE HERE!
277 Custom Hook Reducer + LocalStorage
278 Adding In Todos Context
279 Consuming the Todo Context
280 The Issues w Our Current Approach
281 WTF Is a Reducer
282 First useReducer Example
283 Defining our Todo Reducer
284 Splitting Into 2 Contexts
285 Optimizing w Memo

Bonus Webpack Mini Course – Your Own Simple Version of Create React App
286 What Is Webpack
287 Extract and Minify CSS
288 Installing and Running Webpack
289 Imports, Exports, and Webpack
290 Configuring Webpack
291 Webpack Loaders, CSS, & SASS
292 Cache Busting and Plugins
293 Splitting Dev & Production
294 Html-loader, file-loader, and Clean Webpack Plugin
295 Multiple Entry Points