JoyOfReact – The Joy of React – Josh W Comeau [FCO]
About
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 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 hook, and cover things like:
• Managing side effects with the hook.
• Capturing DOM references with the hook.
• Optimizing the performance of our applications with and.
• Creating our own abstractions with custom hooks.
• Fetching data from the network with Fetch + the third-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.
Capstone Projects
Everything you learn in the modules will be reinforced and solidified in 3 challenging projects, woven between the modules. You’ll use your newfound skills to build:
Project 1 Word Game
One of the best ways to learn React is by building games. In this first project, we build a clone of Wordle, a popular online word-guessing game.
The main focus of this project is to get comfortable with React state, but it also exposes us to some really interesting questions around application structure. You’ll need to decide how you want state to move through the application, and consider different tradeoffs!
Project 2 Toast Playground
We build a reusable, low-level component!
This is way harder than it seems. The component we build will adhere to all accessibility guidelines, with a focus on usability and user experience. We’ll also put a lot of thought into its API design, making sure it’s composable and flexible.
We’ll also build a mini app to help us customize and generate toasts.
A few years back, I created a React curriculum for a local coding bootcamp, and it featured a project like this, building a seemingly-straightforward UI component. Students have said that this is a really eye-opening exercise.
Project 3 Interactive MDX-Based Blog
When I created my blog back in 2018, I didn’t want to make a boring ol’ static blog. I wanted to create custom, bespoke widgets that would help the reader learn a concept by doing.
In this final project, we’ll build the ultimate blog. You’ll learn exactly how to set things up so that you have the full power of React available to you within the content.
Bonus Module Layout Animations with Framer Motion
Framer Motion is one of the most incredible tools in the React ecosystem. In this bonus module, you’ll learn how to use its “layout projection” engine to do truly remarkable, seemingly-impossible layout animations.
This is honestly one of the best “secret weapon” packages in my arsenal, and I’m psyched to show you how I use it!
Bonus Feature React Technical Interview Prep
When it comes to getting hired as a React developer, one of the trickiest parts is the technical interview.
In this bonus feature, I’ll help you prepare by giving you interview-style challenges, and then showing you how I would tackle them.
This bonus feature will be released later in 2023.
Media Information:
MP4 | Video: h264, 1920×1080 | Audio: AAC, 48 KHz, 2 Ch
Genre: eLearning | Language: English | Last updated: 24 Dec 2023 | Duration: 239 lectures ( 25h 35m 33s ) | Author: Josh W Comeau
Course Source: https://www.joyofreact.com/
Size: 8.62GB
