Join the interactive journey with 'The Joy of React' by Josh W Comeau. This beginner-friendly course teaches React from the ground up, covering JSX, state management, React Hooks, and more. Dive into the world of React and become a confident React developer with real-world projects and valuable bonus features

The all-new interactive learning experience that shows you how to assemble rich, powerful web apps with React.

In this way, how about we be genuine. Learning React is hard.

Throughout the course of recent years, React has turned into a "must-have" expertise for front-end developers. Basically every work posting records it as a pre-imperative!

In the event that you've attempted to learn React, however, you realize it very well may be confounding and overpowering. There's simply such a great amount to be aware, and the vast majority of the instructional exercises out there expect a lot of earlier information and context.

Perhaps you've stalled out in instructional exercise heck, following many instructional exercises while never gaining unmistakable headway, similar to a mouse on a running wheel. You've constructed so many darn "Schedule" apps now, but when you attempt to fabricate your own venture, you don't have the foggiest idea where to begin.

You need to learn React, yet you've battled. 😬

I need to help.

For the beyond two years, I've been working diligently fabricating a definitive beginner-friendly React course.

The Joy of React is an interactive course. You will not simply sit and watch me code. There are lots of activities, genuine world-roused projects, and fun smaller than normal games and exercises. Dislike some other course you've taken previously (except if you've taken my CSS course, in which case, it's a lot like that).

We gain React from the beginning, constructing a hearty mental model we can use to comprehend React and take care of difficult issues. I'll share the many revelations I've had after very nearly 10 years of professional React insight.

We will not simply find out about React, possibly; we cover all that you really want to be aware to prevail as a React developer, including current JavaScript syntax, alongside a lot of supportive local area instruments and bundles.

Truly, React is a joy to utilize.

When you get the hang of it, React is a fantasy. I've attempted most famous JS systems, and nothing else causes me to feel as enabled as React.

I care very much about the client experience, including things like execution, accessibility, clean. Getting this stuff right is difficult. Yet, the React people group has moved forward, and there are so many great arrangements we can use.

We first need to construct an unshakable groundwork, to genuinely comprehend React shows and best practices. Then, we'll perceive how "clear-cut advantage" local area bundles expand our scope.

This is a recipe for continuous stream state. It's unadulterated joy, and I believe that you should encounter it.

Allow me to let you know how The Joy of React will work everything out.

 

The Joy of React

The all-new interactive learning experience that shows you how to fabricate rich, unique web apps with React.

Instructed by Josh W Comeau

Switch turquoise light (visual effect)Toggle yellow light (visual effect)Toggle purple light (special visualization)

 

In this way, we should be genuine. Learning React is hard.

Throughout the course of recent years, React has turned into a "must-have" expertise for front-end developers. Basically every work posting records it as a pre-essential!

On the off chance that you've attempted to learn React, however, you realize it tends to be confounding and overpowering. There's simply such a huge amount to be aware, and the greater part of the instructional exercises out there expect a lot of earlier information and context.

Perhaps you've stalled out in instructional exercise heck, following many instructional exercises while never gaining unmistakable headway, similar to a mouse on a running wheel. You've assembled so many darn "Lineup for the day" apps now, but when you attempt to construct your own undertaking, you don't have the foggiest idea where to begin.

You need to learn React, yet you've battled. 😬

I need to help.

For the beyond two years, I've been working diligently assembling a definitive beginner-friendly React course.

The Joy of React is an interactive course. You will not simply sit and watch me code. There are lots of activities, genuine world-enlivened projects, and fun smaller than usual games and exercises. Dislike some other course you've taken previously (except if you've taken my CSS course, in which case, it's a considerable amount like that).

We gain React from the beginning, fabricating a strong mental model we can use to comprehend React and tackle difficult issues. I'll share the many revelations I've had after very nearly 10 years of professional React insight.

We will not simply find out about React, possibly; we cover all that you want to be aware to prevail as a React developer, including present day JavaScript syntax, alongside a lot of supportive local area instruments and bundles.

Truly, React is a joy to utilize.

When you get the hang of it, React is a fantasy. I've attempted most well known JS systems, and nothing else causes me to feel as enabled as React.

I care very much about the client experience, including things like execution, accessibility, clean. Getting this stuff right is difficult. However, the React people group has moved forward, and there are so many great arrangements we can use.

We first need to fabricate an unshakable groundwork, to genuinely comprehend React shows and best practices. Then, we'll perceive how "unmistakable advantage" local area bundles broaden our span.

This is a recipe for continuous stream state. It's unadulterated joy, and I maintain that you should encounter it.

Allow me to let you know how The Joy of React will work everything out.

 

The Joy of React wants to play a computer game. You have text, recordings, coding difficulties, small games, very much planned jokes and a manager toward the finish of each part. You never get exhausted!

It makes a remarkable showing with making sense of every profound choice and compromises we've made while making React in a manner a beginner can comprehend.

 

Christopher "vjeux" ChedeauFront-end Designer at Meta. Co-made React Local, Prettier

 

As somebody who has experience utilizing and educating React, I can't underline enough: This is the information you really want to know React at a profound level.

Josh covers the essentials in this course in a manner that is unquestionably natural, but not overpowering. It's so essential to know why you are building applications in some ways, not exactly how, and this course covers both.

Regardless of whether you've worked with React previously, this course will fill in holes in your comprehension. Draw out your note pads and prepare to fill your cerebrum!

 

CassidyCTO at Contenda. Previously Netlify, React Preparing.

 

TheCurriculum

Module 1React Fundamentals

In this first module, we present React, and construct a typical comprehension we'll use all through the course.

We'll realize about JSX, components, and props. We'll find how to do cycle and contingent delivering in React. We'll likewise cover styling in React.

As somebody who has instructed React to many understudies face to face, I understand what all of the normal early hindrances are, and we address them head-on in this module.

We dive shockingly deep in this module. Toward the finish of Module 1, you'll comprehend how JSX varies from a templating language, what a React component is, the reason keys are vital… you'll try and fabricate your own stateless little React without any preparation, so you know precisely the way in which it works in the engine!

Module 2Working With State

The genuine enchantment begins with state. React state permits us to cause dynamic applications that to feel invigorated.

In this module, we figure out how to utilize occasion overseers and the React useState snare to refresh the UI based on client activities. We'll figure out how to wire up structures, how to work with complex state designs, and how to oversee state across the application.

We'll likewise develop how we might interpret how React functions. We'll realize the reason why React now and again feels a lot more convoluted than different systems. We'll find the significant job that React component occasions play. What's more, we'll figure out how to use best practices like lifting state up.

There are heaps of tomfoolery practices in this module. We fabricate two or three small games, and perceive how to construct an insignificant variant of my Inclination Generator project.

Module 3React Hooks

In 2019, React was altered with the expansion of hooks. Hooks permit us to "guide into" React internals.

In this module, we go past the useState snare, and cover things like:

Overseeing secondary effects with the useEffect snare.

Catching DOM references with the useRef snare.

Enhancing the exhibition of our applications with useMemo and useCallback.

Making our own deliberations with custom hooks.

Bringing information from the organization with Get + the useSWRthird-party snare.

Stuff gets genuinely in this module. We cover probably the hardest ideas in React, such as staying away from flat qualities in our secondary effects. To assist us with getting a handle on the hard stuff, we twofold down on our endeavors to comprehend how React ticks, learning the reason why unchanging nature is so significant, what precisely a "render" is, and that's just the beginning.

Module 4Component API Design

Right now in the course, we've covered a decent piece of the React API, yet we've been zeroing in on how everything functions. In this module, our center begins to move.

The components we make ought to be a joy to utilize: they ought to be straightforward, composable, and offer the perfect proportion of adaptability. Much more fundamentally, they ought to offer a great client experience, with regards to accessibility, ease of use, and execution.

This module is tied in with refining our reasoning around components. I'll show you the psychological models I utilize each day while concluding how I need to structure my code.

We'll cover a lot of viable tips and deceives in this module, from polymorphism to prop designation to intensify components and spaces. You'll likewise find out about React Context, and perceive how it very well may be valuable in accomplishing our objectives.

Accessibility is a concentration all through the course, yet we truly incline toward it in this module. We'll fabricate famously interesting components like modals without any preparation, with an emphasis on convenience and accessibility, and see the reason why it's presumably a superior plan to utilize a library.

Module 5Happy Practices

I began working with React in 2015, and I've advanced such a great amount en route. My objective with this module is to assist you with skirting a couple of long periods of trial and error, and hop directly to the examples and practices that are a pleasure to utilize.

In the dev local area, we jabber about "Prescribed procedures", however, a best practice can't really exist. It depends what you're streamlining for! It's all compromises.

In this module, I'll share my #1 "Blissful Practices", the design examples and propensities I've been refining north of 8 years, things that simply make it enjoyable to work with React.

Here is a couple of instances of what we'll cover:

The Standard of Least Honor, and why I give components as little information/power as could be expected.

The qualification among guardians and proprietors, and how we can work on our code and further develop execution all at once.

The sorcery of Immer, and how it makes complex state substantially less unnerving.

Truly getting to comprehend things like React elements, refs, and keys, and how a profound comprehension uncovered completely new examples we can exploit.

Module 6Full-Stack React

In this module, we go past the program and investigate how React functions in a full-stack context, utilizing Next.js.

Next.js is a meta-structure, based on top of React. It's been around beginning around 2016, however was as of late absolutely reconstructed starting from the earliest stage. In May 2023, Next brought its new "Application" switch out of beta, and introduced the beginning of another period in React.

In this module, we'll figure out how to assemble performant full-stack applications utilizing the most recent rendition of Next.js. We cover the entirety of the totally new tech, including:

React Server Components

Anticipation

Streaming Server Side Delivering w/Specific Hydration

Next.js Application Switch

We'll figure out how these things work, yet additionally the way in which they fit together to convey fantastic next-level client encounters. This stuff is extreme front line, and this course is one of the principal top to bottom assets to investigate this new world, as a matter of fact.

Here everything meets up. Utilizing all that we learned over the initial 5 modules of the course, we'll fabricate dynamic full-stack React applications, from project instatement to send.

 

Real-world inspiredCapstone Projects

 

All that you learn in the modules will be supported and cemented in 3 testing projects, woven between the modules. You'll utilize your freshly discovered abilities to construct:

Project 1Word Game

One of the most mind-blowing ways of learning React is by building games. In this first venture, we construct a clone of Wordle, a famous internet based word-speculating game.

The fundamental focal point of this task is to become familiar with React state, however it likewise opens us to a few truly fascinating inquiries around application structure. You'll have to conclude how you believe that state should travel through the application, and think about various tradeoffs!

Project 2Toast Playground

We construct a reusable, low-level <Toast> component!

This is way harder than it appears. The component we fabricate will comply with all accessibility rules, with an emphasis on ease of use and client experience. We'll likewise place a ton of thought into its API design, ensuring it's composable and adaptable.

We'll likewise construct a scaled down application to help us redo and produce toasts.

A couple of years back, I made a React educational plan for a nearby coding bootcamp, and it highlighted a venture like this, fabricating an apparently direct UI component. Understudies have said that this is a truly educational activity.

 

Project 3Interactive MDX-Based Blog

At the point when I made my blog back in 2018, I would have rather not made an exhausting old static blog. I needed to make custom, tailor made gadgets that would assist the peruser with learning an idea by doing.

In this last undertaking, we'll construct a definitive blog. You'll advance precisely how to set things up so you have the full force of React accessible to you inside the substance.

You'll utilize what you've realized all through the course to fabricate dynamic, vivified demos like this:

 

This isn't some thought up toy rendition of a blog. We utilize precisely the same stack I use for my genuine blog, joshwcomeau.com, aside from it's considerably more current, utilizing extreme front line tech like the Next.js Application Switch and React Server Components.

In the event that I was making another blog today, this is unequivocally the way in which I would get it done. You'll realize about it in this course. You could in fact involve this undertaking as the establishment for your own genuine world blog!*

It likewise comes withBonus Highlights!

Assuming you purchase A definitive bundle of the course, you'll likewise get close enough to some clever rewards which will assist you in your excursion with React.

 

Reward ModuleLayout Activitys with Framer Motion

Framer Motion is one of the most extraordinary apparatuses in the React biological system. In this reward module, you'll figure out how to utilize its "format projection" motor to do genuinely momentous, apparently unthinkable design activitys.

This is really quite possibly of the best "unmistakable advantage" bundles in my weapons store, and I'm psyched to show you how I use it!

Reward FeatureReact Technical Interview Prep

With regards to getting employed as a React developer, one of the trickiest parts is the technical interview.

In this reward highlight, I'll assist you with preparing by giving you interview-style difficulties, and afterward showing you how I would handle them.

This reward component will be added later in 2023.

 

Useful Links:

1. React Official Website
2. Next.js - React Framework
3. Framer Motion - Animation Library for React
4. React Technical Interview Preparation