React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Recoil provides a boilerplate-free API for shared state across your React application. It enables you to derive state and display computed data through selectors for efficient updates and performance in your app.

Recoil works and thinks like React. Add some to your app and get fast and flexible shared state.

Tomasz Łakomy

Sync State Across Components with Recoil in React

In this collection, you'll create a simple game with React using Recoil, to explore how you can share and update state across an app.

Chris Achard

Getting Started with Recoil in React

Start with the basics of state management and dive further into the selector API, as well as learning different strategies for handling synchronous and asynchronous Selectors 

Yoni Weisbrod

Manage React State with Recoil

Learn Recoil

React Landing Page

One of the web’s most popular frameworks for building JavaScript applications. If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead.

You can find courses below curated just for you whether you're looking for a particular topic or want to take your React skills to the next level.

Epic collection of interactive self-paced workshops.

Kent C. Dodds

EpicReact.dev

course

The Beginner's Guide to React

Erin Doyle

Develop Accessible Web Apps with React

Colby Fayock

Build Maps with React Leaflet

Just starting out with React

Beginner

Joe Previte

Shareable Custom Hooks in React

Simplify React Apps with React Hooks

Elijah Manor

Reusable State and Effects with React Hooks

Hitting your stride

Intermediate

Jamund Ferguson

Apply Redux to a Modern React Hooks Application

Michael Chan

Build an App with React Suspense

Above and beyond

Advanced

Level up at React

When it comes down to it, nearly every UI problem is a state management problem. Orchestrating a whole symphony of menus, forms, and data requests is hard enough before you even begin debating which of the 99 React state management libraries you should pick.

We've spoken to top experts in the field of state management to hear their thoughts on why the best ideas in state management aren't always the newest, why principles are often universal where implementations are not, and how state management concepts carry across frameworks and tools.

This is a series of videos where you'll find part interview and part screen share with experts. They focus on React, but the underlying principles are valid for UI work in general.

Joel Hooks

React State Management Expert Interviews

Managing state is one of the primary reasons our applications become so complex. See how to simplify state with state machines.

Kyle Shevlin

Introduction to State Machines Using XState

Isaac Mann

Construct Sturdy UIs with XState

You’ll learn how to create a context, how to pass data through an app without manually passing props everywhere, and how to group related data using simple wrapper components.

Dave Ceddia

React Context for State Management

Learn how to build a grid with CSS Grid and manage complex state with useReducer while building a Tic Tac Toe Game.

Manage Complex Tic Tac Toe Game State in React

jotai gives you a minimalistic API that you can use that separates your state management from your UI. Don't have to set up any boilerplate like actions, reducers, etc.

Daishi Kato

Manage Application State with Jotai Atoms

State Management in React

Will gives you the knowledge of how to customize your animations in any React application.

Will Johnson

Animate React Apps with Framer Motion

Learn all about styled-components from styling an HTML element to animating your custom components to styling a component based on complex props.

Sara Vieira

Styling React Applications with Styled Components

Garth Braithwaite

Style an Application from Start to Finish

Alex Reardon

Beautiful and Accessible Drag and Drop with react-beautiful-dnd

In this course, you'll learn how to handle responsive breakpoints, and how to seamlessly extend Tailwind with your own custom utility classes.

Simon Vrachliotis

Build User Interfaces by Composing CSS Utility Classes with Tailwind

By the end of the course, you will understand the basics of Figma so you can use it to your advantage when building your next app or website.

The Beginner's Guide to Figma

Style React Apps

You will come away from this collection with the ability to ship an API that you can use on any of your sites.

Chris Biscardi

Building an OpenGraph image generation API with Cloudinary, Netlify Functions, and React

The course starts with a fresh CRA and then moves forward to setting up & consuming the GraphQL subscription.

Ian Jones

React Real-Time Messaging with GraphQL using urql and OneGraph

Build a Terminal Dashboard with React

Build interesting React Apps

Never written a line of React? We've got a curated guide designed to teach you all the fundamentals skills and mental models you'll need to build in React.

Dan Abramov

collection

Just JavaScript

Hiroko Nishimura

article

WTF is React?

Is React.js a framework or a toolkit?

WTF is JSX?

Mental Models for React

podcast

Brian Vaughn, React Core Team

Ryan Florence Talks About Bringing Web 1.0 Philosophies Back With Remix

Kent C. Dodds Chats About How Epic React was Designed for Learner Success

Jason Lengstorf on GatsbyJS

Conversations with React Experts

Fundamentals of React explained through five visual metaphors. From component trees to state, Maggie explains the analogies and metaphorical comparisons that helped her "get" React

Maggie Appleton

talk

Drawing the Invisible: React Explained in Five Visual Metaphors

Create an effective mental model of Concurrent React by building a tiny clone of React!

Shawn Wang

Concurrent React from Scratch

Go through the quick and easy set up of creating your feature flags, and integrating them with your React App.

Talia Nassi

Setting Up Feature Flags with React

Take a look at how you can mix some commonly-used components with the ingredients of accessibility. Pair this with best practices guidance in your documentation

Kathleen McMahon

Accessibility-flavored React Components make your Design System Delicious

Presentations from React Experts

React

Learn React

Hoisting state is a common Refactoring in React.  
State in one component may need to be lifted up to a parent component for coordination with other component state.

This can be an error-prone refactoring.  
With a good editor, it's best to start with the returned JSX and move out.

Hoist React Component State

Suspense can have an unfriendly learning curve.  
Components with suspended content need a component boundary.  
Resource reads can't happen in the same component as the `Suspense` and error boundaries components.

When you have your Suspense and error boundary components in place but still get errors about them absence, you probably need to move a `read()` call into a component.

Avoid this Common Suspense Gotcha in by Reading Data From Components

`SuspenseList` is how React coordinates the reveal order of `Suspense` components.  
It only accepts `Suspense` components as children — which can effect where you error boundaries are placed.

By default `SuspenseList` will show suspended component fallbacks together and reveal `children` as suspenders resolve.

Coordinate Fallback Rendering with the React SuspenseList Component

`revealOrder` is one of `SuspenseList`s configuration options. It can be undefined, `together`, `forwards`, and `backwards`.

* `undefined` (default): reveal children as suspenders resolve
* `together`: reveal children together, once all suspenders are resolved
* `forwards`: render children from top to bottom, indifferent to suspender resolution order
* `backwards`: render children from bottom to top, indifferent to suspender resolution order

Reveal Suspense Components in Order with SuspenseList's revealOrder Prop in React

`tail` is a customization prop for `SuspenseList`. It works in tandem with `revealOrder` and has three options: `undefined`, `collapsed`, and `hidden`.

These options can be used to configure how fallbacks are displayed.

* `undefined`: show all `fallbacks`
* `hidden`: show no `fallbacks`
* `collapsed`: show only the next `fallback`

Avoid Too Many Spinners with React SuspenseList’s tail Prop

The `useState` functions we wrap in `useTransition` function wrappers can be passed around to components like any callback.
Instead of making all of your components aware of Concurrent Mode, you can provide wrapped callbacks and continue compatibility with both legacy and future React code.

Pass React Components a useTransition-Wrapped, State-Setting, Callback

You're never stuck with the data you get from the server.  
The Pokeapi doesn't have an id property on Pokemon but we can transform our response to include exactly what we need.

With a little destructuring assignment and object spread we can augment our API with helpful properties

Augment React Resource JSON with Custom Properties

React is about re-useable components.  
Often we put to many opinions into our components and diminish that re-useability.

`React.Fragment`, an `as` component prop, a `renderItem` render prop, JSX spread attributes, and object default values are tools you can use to make truly re-useable list components.

Extract Reusable React Components with an As Prop, Render Props, and React.Fragment

Our app has evolved.  
It doesn't make sense to scrub thru Pokemon one at a time when we have a list.
Let's change the function of our "Next" button to fetch the next page of Pokemon results by adding a new endpoint and connecting it to Suspense transitions.

Connect a New Endpoints in a React Suspense App

Proper Suspense code can mean a lot of functions wrapped in other functions.  
Because these function are composed with Hooks, modules can't help us hide the implementation details.  
But Context can!

Let's explore how Context Providers, Consumers, and the `useContext` Hook can integrate with Suspense to mask wordy `useTransition`-wrapped API calls.

Provide Suspensified Data to React Components with Context and useContext

Welcome!

We're going to have a great time exploring React's experimental Concurrent Mode.
Concurrent Mode is an exciting leap forward in user interface development. It allows us to describe user interface transitions in beautiful detail.

Apps aren't static. They move — responding to user input as they dart back and forth to the internet for data.
Concurrent Mode and Suspense give us a language for those movements.

In this video we talk project setup, how to find help, and what to expect from this very exciting, very experimental feature.

This course is narrowly focused on Concurrent Mode and Suspense. We will not cover adjacent topics like styling or code organization.

Build an App with React Suspense: Intro and Setup

Learn how to animate components with the transition prop to reverse animations, loop them, adjusting their easing, and more, which are all great for creating loading animations.

The transition prop is a powerful part of Framer Motion that defines "how values animate from one state to another".

Check out the [official docs](https://www.framer.com/api/motion/types/#transition) for more information on how to customize attributes of the transition prop.

Create loading animations with Framer Motion's transition prop

A great way to learn how hooks work is to try and implement them yourself. In this video we'll learn about both of the `useState` and `useReducer` hooks by reimplementing `useState` with `useReducer`.

This is based on my blog post: ["How to implement useState with useReducer"](https://kentcdodds.com/blog/how-to-implement-usestate-with-usereducer)

Search Results