English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 239 Lessons (25h 35m) | 8.64 GB
The all-new interactive learning experience that teaches you how to build rich, dynamic web apps with React.
So, let’s be real. Learning React is hard.
Over the past few years, React has become a “must-have” skill for front-end developers. Just about every job posting lists it as a pre-requisite!
If you’ve tried to learn React, though, you know it can be confusing and overwhelming. There’s just so much to know, and most of the tutorials out there assume a ton of prior knowledge and context.
Maybe you’ve gotten stuck in tutorial hell, following tutorial after tutorial without ever making tangible progress, like a mouse on a running wheel. You’ve built so many dang “Todo list” apps now, and yet when you try to build your own project, you don’t know where to start.
You want to learn React, but you’ve struggled.
I want to help.
For the past two years, I’ve been hard at work building the ultimate beginner-friendly React course.
The Joy of React is an interactive course. You won’t just sit and watch me code. There are tons of exercises, real-world-inspired projects, and fun mini-games and activities. It’s not like any other course you’ve taken before (unless you’ve taken my CSS course, in which case, it’s quite a bit like that).
We learn React from the ground up, building a robust mental model we can use to understand React and solve hard problems. I’ll share the dozens of epiphanies I’ve had after almost a decade of professional React experience.
We won’t just learn about React, either; we cover everything you need to know to succeed as a React developer, including modern JavaScript syntax, along with a ton of helpful community tools and packages.
The truth is, React is a joy to use.
Once you get the hang of it, React is a dream. I’ve tried most popular JS frameworks, and nothing else makes me feel as empowered as React.
I care a lot about the user experience, including things like performance, accessibility, polish. Getting this stuff right is not easy. But the React community has stepped up, and there are so many wonderful solutions we can leverage.
We first need to build a rock-solid foundation, to truly understand React conventions and best practices. Then, we’ll see how “secret weapon” community packages extend our reach.
This is a recipe for uninterrupted flow state. It’s pure joy, and I want you to experience it.
Let me tell you how The Joy of React will make it so.
Module 1
React Fundamentals
In this first module, we introduce React, and build a common understanding we’ll use throughout the course.
We’ll learn all about JSX, components, and props. We’ll discover how to do iteration and conditional rendering in React. We’ll also cover styling in React.
As someone who has taught React to hundreds of students in-person, I know what all of the common early stumbling blocks are, and we address them head-on in this module.
We go surprisingly deep in this module. By the end of Module 1, you’ll understand how JSX differs from a templating language, what a React element is, why keys are necessary… you’ll even build your own stateless mini-React from scratch, so you know exactly how it works under-the-hood!
Module 2
Working With State
The real magic starts with state. React state allows us to make dynamic applications that feel alive.
In this module, we learn how to use event handlers and the React useState hook to update the UI based on user actions. We’ll learn how to wire up forms, how to work with complex state structures, and how to manage state across the application.
We’ll also deepen our understanding of how React works. We’ll learn why React sometimes feels so much more complicated than other frameworks. We’ll discover the crucial role that React component instances play. And we’ll learn how to leverage best practices like lifting state up.
There are lots of fun exercises in this module. We build a couple of mini-games, and see how to build a minimal version of my Gradient Generator project.
Module 3
React Hooks
In 2019, React was revolutionized with the addition of hooks. Hooks allow us to “hook into” React internals.
In this module, we go beyond the useState hook, and cover things like:
- Managing side effects with the useEffect hook.
- Capturing DOM references with the useRef hook.
- Optimizing the performance of our applications with useMemo and useCallback.
- Creating our own abstractions with custom hooks.
- Fetching data from the network with Fetch + the useSWRthird-party hook.
Stuff gets real in this module. We cover some of the hardest concepts in React, like avoiding stale values in our side effects. To help us make sense of the hard stuff, we double down on our efforts to understand how React ticks, learning why immutability is so important, what exactly a “render” is, and more.
Module 4
Component API Design
At this point in the course, we’ve covered a good chunk of the React API, but we’ve been focusing on how everything works. In this module, our focus starts to shift.
The components we create should be a joy to use: they should be easy to understand, composable, and offer the right amount of flexibility. Even more critically, they should offer a wonderful user experience, in terms of accessibility, usability, and performance.
This module is all about refining our thinking around components. I’ll teach you the mental models I use every day when deciding how I want to structure my code.
We’ll cover a ton of practical tips and tricks in this module, from polymorphism to prop delegation to compound components and slots. You’ll also learn about React Context, and see how it can be useful in achieving our goals.
Accessibility is a focus throughout the course, but we really lean into it in this module. We’ll build notoriously-tricky components like modals from scratch, with a focus on usability and accessibility, and see why it’s probably a better idea to use a library.
Module 5
Happy Practices
I started working with React in 2015, and I’ve learned so much along the way. My goal with this module is to help you skip a few years of experimentation, and jump straight to the patterns and practices that are a delight to use.
In the dev community, we talk a lot about “Best Practices”, but really, there’s no such thing as a best practice. It depends what you’re optimizing for! It’s all trade-offs.
In this module, I’ll share my favourite “Happy Practices”, the design patterns and habits I’ve been refining over 8 years, things that just make it enjoyable to work with React.
Here’s a few examples of what we’ll cover:
- The Principle of Least Privilege, and why I give components as little knowledge/power as possible.
- The distinction between parents and owners, and how we can simplify our code and improve performance in one fell swoop.
- The magic of Immer, and how it makes complex state much less scary.
- Really getting to understand things like React elements, refs, and keys, and how a deep understanding exposes entirely new patterns we can take advantage of.
Module 6
Full-Stack React
In this module, we go beyond the browser and explore how React works in a full-stack context, using Next.js.
Next.js is a meta-framework, built on top of React. It’s been around since 2016, but was recently totally rebuilt from the ground up. In May 2023, Next brought its new “App” router out of beta, and ushered in the start of a new era in React.
In this module, we’ll learn how to build performant full-stack applications using the latest version of Next.js. We cover all of the shiny new tech, including:
- React Server Components
- Suspense
- Streaming Server Side Rendering w/ Selective Hydration
- Next.js App Router
We’ll learn how these things work, but also how they fit together to deliver incredible next-level user experiences. This stuff is bleeding-edge, and this course is one of the first in-depth resources to really explore this new world.
This is the module where everything comes together. Using everything we learned over the first 5 modules of the course, we’ll build dynamic full-stack React applications, from project initialization to deploy.
Table of Contents
1 Welcome!
2 Hello React
3 Build Your Own React
4 Expression Slots
5 Fix The Converter –
6 The Whitespace Gotcha
7 Exercises
8 Exercises
9 Thinking in Components
10 Props
11 Exercises
12 Exercises
13 Fragments
14 Mapping Over Data
15 Keys
16 Exercises
17 Exercises
18 Exercises
19 Exercises
20 Exercises
21 Exercises
22 Styling In React
23 CSS Modules
24 Exercises
25 Exercises
26 Exercises
27 Exercises
28 Asynchronous Updates
29 Exercises
30 Exercises
31 Why the Dance
32 Data Binding
33 Exercises
34 Exercises
35 Exercises
36 Props Vs. State
37 Mutation Bugs
38 Exercises
39 Exercises
40 Dynamic Key Generation
41 Key Gotchas
42 Lifting State Up
43 Exercises
44 Exercises
45 Component Instances
46 About This Project
47 Getting Started
48 Solution
49 Solution
50 hhdfnang
51 ogfbmgeg
52 fgfcikbp
53 Josh W Comeau’s Course Platform
54 Josh W Comeau’s Course Platform
55 Rules of Hooks
56 Exercises
57 Exercises
58 Immutability Revisited
59 Refs
60 Exercises
61 Exercises
62 Side Effects
63 The useEffect hook
64 Exercises
65 Exercises
66 Effect Lint Rules
67 Running on Mount
68 Running on Mount
69 Exercises
70 Exercises
71 Exercises
72 Exercises
73 Cleanup
74 Cleanup
75 Cleanup Exercises
76 Cleanup Exercises
77 Cleanup Exercises
78 Cleanup Exercises
79 Stale Values
80 Stale Values
81 Exercises
82 Strict Mode
83 Strict Mode
84 Custom Hooks
85 Exercises
86 Exercises
87 Exercises
88 Fetching on Event
89 Fetching on Event
90 Fetching on Mount
91 Exercises
92 Exercises
93 Exercises
94 Exercises
95 Exercises
96 Alternatives
97 Introduction
98 The Spectrum of Components
99 Exercises
100 Exercises
101 Prop Delegation
102 Exercises
103 Exercises
104 Delegating Styles
105 Forwarding Refs
106 Exercises
107 Exercises
108 Polymorphism
109 Exercises
110 Exercises
111 Slots
112 Exercises
113 Exercises
114 The Problem
115 Exercises
116 Exercises
117 Provider Components
118 Performance
119 Performance
120 Modals
121 Exercises
122 Converting Our Modal
123 Exercises
124 Exercises
125 Exercises
126 Solution
127 Solution
128 Solution
129 Solution
130 edfhjakg
131 fpooaoln
132 Leveraging Keys
133 Leveraging Keys
134 Leveraging Keys
135 Exercises
136 Exercises
137 Exercises
138 Elements Revisited
139 Elements Revisited
140 Deriving State
141 Exercises
142 Exercises
143 Exercises
144 Lifting Content Up
145 Lifting Content Up
146 Exercises
147 Single Source of Truth
148 Exercises
149 Exercises
150 Principle of Least Privilege
151 Exercises
152 useReducer
153 Exercises
154 Exercises
155 Exercises
156 Exercises
157 Exercises
158 Exercises
159 Portals
160 Exercise
161 Exercise
162 Refs Revisited
163 Error Boundaries
164 Josh W Comeau’s Course Platform
165 React Server Components
166 Hello Next!
167 Exercises
168 Exercises
169 Client Components
170 Exercises
171 Exercises
172 Exercises
173 Exercises
174 SSR Gotchas
175 SSR Exercises
176 SSR Exercises
177 SSR Exercises
178 Page Transitions
179 Dynamic Segments
180 Exercises
181 Exercises
182 Next’s Metadata API
183 Starting a New Project – 1952×1080
184 Building for Production
185 Building for Production
186 Exercises
187 React Cache
188 An Exciting New World
189 Graphing It Out
190 Suspense Exercises
191 Suspense Exercises
192 jbjdnpaj
193 Dark Mode
194 Getting Started
195 Exercises
196 Exercises
197 Layout Animations
198 Layout Exercises
199 Layout Exercises
200 Shared Layout
201 Working With Groups
202 Working With Groups
203 Shared Layout Exercises
204 Shared Layout Exercises
205 Shared Layout Exercises
206 One Last Exercise
207 One Last Exercise
208 Josh W Comeau’s Course Platform
209 Josh W Comeau’s Course Platform
210 Solution
211 Solution
212 Solution
213 Solution
214 ccobbnfj
215 pbjemcph
216 egfjagcc
217 nkfhacjj
218 jcppdheb
219 Suspense Investigations
220 Navigation
221 Tips N’ Tricks
222 Webpack
223 Cover Letters
224 Cover Letters
225 Cover Letters
226 Technical Interviews
227 FizzBuzz
228 Scroll Position
229 Todo App
230 Project Euler
231 Starfield Button
232 Multi-Step Signup
233 Trello Clone
234 Clicking Outside
235 Multi Checkbox
236 Fetch Race Condition
237 Fetch Race Condition
238 Fetch Race Condition
239 useEffectSkipMount
Resolve the captcha to access the links!