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

In this collection, we will dive into using  `@reach/router` as a routing option for your React application. We will start from the beginning and cover everything from Links to Nested Routes.

Using  `@reach/router` for navigation in React Apps

MobX State Tree (MST) is a library that helps you organize your application states in a very structured manner. It allows you to create a component model, but for your data!

Course instructor Michel Weststrate—creator of Mobx—will teach you to model application state after your problem domain with MST. You will get hands-on practice and see how MST lets you solve problems with its out-of-the-box support for asynchronous actions, patches, snapshots, and middleware.

Over the 17 lessons, you’ll build a little bookshop application using React, MST, and create-react-app, while learning how to manage the lifecycle of your data by describing data models. 

Join Michel in one of the most popular courses on egghead!

Manage Application State with Mobx-state-tree

In this course we are going to work through properly setting up Enzyme with Jest to test rendered components. This includes the nitty gritty of making our testing environment work with various versions of React. After we get our environment setup ready, we’ll work through the different ways we can render a component within our test pages. With a rendered component we can now test component methods and properties to assert that they are what is intended. 

Test React Components with Enzyme and Jest

In this collection, we build a minimal flashcard application using React, primarily focusing on function components and the hooks API. To make sure we can understand and maintain existing code, there are also a few lessons toward the end that use class components so you can get familiar with the syntax. We cover important React concepts, and sprinkle in libraries that are pretty standard in the ecosystem like @reach/router, Jest, and React testing library. We start with create-react-app so we can get right into it without worrying about configuring tooling. There's [a separate course for that here](https://egghead.io/courses/modern-javascript-tooling-with-react?af=5mx0ie)

jest

Build a React App with the Hooks API

***Note: Active maintenance for Recompose has been discontinued since the announcement for React hooks. Your existing code using Recompose will still work. Recompose is not compatible with RxJS version 6 and beyond. You can read more about the decision [here.](https://github.com/acdlite/recompose/issues/756#issuecomment-438674573)*** 


Loading data and handling events almost always introduces layers of complexity into React apps. Recompose and RxJS solve your async problems by using Streams to output components. This course walks you through combining the powers of React and RxJS to stream data into JSX with streaming patterns and pure React components.

Build React Components from Streams with RxJS and Recompose

In this course, you will be learn how to get your react app to load as quickly as possible to maximize user engagement—we need faster rendering speed and smaller network requests! 

You’ll learn how to both split code into lazily loaded bundles AND server-side render your page. 

This has not been possible until very recently—you had to choose either code-splitting or SSR. Sure you have Next.js which is awesome, but it’s a framework that you need to buy into. With react-universal-component you are getting a framework-less Next.js that is in your control!

The react-universal-component library does a great job making it as simple as can be, but there are still various specific configurations and practices that must be followed to get it working. So watch the videos to learn how it’s done!

Build a Server Rendered + Code Split App in React with React Universal Component

In React world, things are changing and they are changing rapidly.

If you'd like to get up to speed in what new APIs React has to offer and have literally 7 minutes to spare - this is a collection for you!

Learn React lazy, memo, useState and useEffect in 7 minutes

Once you’ve nailed the fundamentals of React, that’s when things get really fun.

This course teaches you advanced patterns in React that you can use to make components that are simple, flexible, and enjoyable to work with. 

You'll start with a simple `<Toggle />` component that you'll progressively refactor to each of the patterns. Throughout the course, you’ll see the benefits of each pattern and how they can be mixed-and-matched to make your components more useful (and simple for everyone who comes across them).

Kent C. Dodds has built and shipped components using each of these patterns. Along the way, he will help you understand and weigh the trade-offs of each pattern so you’ll intuitively know where to apply each of them in your own components. 

You’ll finish the course with a list of actionable things you can do, right away, to rework the components that you're building. You’ll complete the course more knowledgeable about React components and equipped to make your components more simple.

Note: This course covers **class component patterns** and is still interesting and valuable for the serious React developer, but for most current apps you'll probably want to use [React Hooks](httsp://next.egghead.io/q/q=hooks).

React Class Component Patterns

No matter what type of app you’re building, you're going to need to fetch data, display it to a user, and enable the user to interact with and update that data. This interaction and updating phase is often asynchronous by nature which presents you, the developer, an opportunity to provide a range of different experiences depending on the scenario.

In some instances, you can leverage what is known as optimistic UI updates for an improved, snappier user experience compared to a traditional “loading/waiting” experience. They aren’t suited for every use case, but selectively making use of optimistic UI updates throughout your application can have a significant impact on the quality of user experience for relatively little cost and complexity!

In this course, we’ll walk through implementing optimistic UI updates in the real world example of liking and unliking a tweet. We'll use React's built-in state and make use of extracting setState updater functions to help manage and better define our setState usages. 

Optimistic UI Updates in React

***Note: RxJS imports have changed since the publication of this course. Operators now must be passed into `.pipe` to be applied to an observable.***

In this course we will begin with nothing more than an empty directory & a text editor. Through small, focussed lessons we’ll learn how to setup a React project that uses Redux for state management and redux-observable for asynchronous actions. We’ll see how ‘epics’ are registered and how they each receive a ‘stream’ of actions from the store. 

With an understanding of how things work, we’ll move onto solving common problems such as Ajax cancellation, creating sequences of async actions, enabling code reuse through higher-order Observables and much more. 

## **UPDATE:** 
This course is outdated, view updated material here: [Asynchronous State Management with redux-observable v1](https://egghead.io/courses/asynchronous-state-management-with-redux-observable-v1)

Up and Running with redux-observable

Managing state in modern web applications is hard. As applications grows in complexity, keeping track of state changes and mapping those changes back to your UI becomes increasingly difficult.

One way data flow makes managing state more approachable and lightens the cognitive load required to follow the flow of data through your application. Using Redux takes this idea to the next level and moves the state and the state changes and centralizes them in a global store, managed with pure reducer functions.

In this course you will learn how to build a production quality React application using Redux. We will build up from using redux by itself, so we can understand the core API and how that interacts with a React application, then we’ll move on to introduce `react-redux` to abstract away some of the underlying details and clean up our code. We’ll use middleware and a mocked API server to understand how asynchronous code fits into the Redux model and we’ll even deploy our finished work so we can see it running live in the cloud. 

If you are brand new to React, you’ll want to read the documentation and watch our free [React Fundamentals](https://egghead.io/courses/start-using-react-to-build-web-applications) course and our [Build Your First Production Quality React App](https://egghead.io/courses/build-your-first-production-quality-react-app) course. To get up to speed on Redux, you should check out Dan Abramov’s [Getting Started With Redux](https://egghead.io/courses/getting-started-with-redux) course.

Build A React App With Redux

Lessons based on posts from my blog - https://kyleshevlin.com

Kyle Shevlin's Blog Lessons

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

tailwind

Migrate from Create-React-App to Gatsby - Start Project

In this course we will explore the possibilities to bring VR to the Web using React VR. Each lesson focuses on one specific concept or component that comes with React VR. This guide covers a large surface area of experiences like teleporting a user to a recorded 360° experience as well as placing them in virtual worlds. Even a combination of both is possible. Each lesson is independent, but some require knowledge explained in a previous lesson.

Build Virtual Reality Experiences Using React VR

D3, or Data Driven Documents, is the defacto standard for data visualization on the web. It's an incredibly powerful library that gives you all the tools you need to build just about visualization you can dream of.

D3 is not a collection of predefined charts. Instead, it's a robust set of utilities you can use to ingest and transform data, to map that data to screen values, and ultimately to manipulate the DOM to render your visuals.

When working with React, D3's desire to manipulate the DOM is at odds with React's goal of rendering the UI as a function of state. So how do we handle this? Simply put, we use D3 for everything up to the point where we want to render our output, and then we hand all that data to React for rendering.

In this course, we'll start from scratch and build out an SVG bar chart for some sample data. We'll lean on D3 for its tools and then hand that data off to React for rendering.

Create A Bar Chart with React and D3

In this course, we will incorporate [react-intl](https://github.com/yahoo/react-intl) into a project created with [create-react-app](https://github.com/facebookincubator/create-react-app) and [react-router](https://github.com/ReactTraining/react-router). The react-intl library makes complex tasks such as internationalization and formatting dates & currency incredibly simple. Another huge benefit of react-intl is that it gives you the ability to centralize the content across your application into language specific files. This creates a consistent place to find content and encourages reuse. If you’ve ever used language specific `yml` files in Rails, you’re already familiar with this pattern.

Starting with the entry point of the application, we will hit the ground running by adding the necessary components and data structures required for `react-intl` to function. From there, we will use `react-intl` components to format various types of data including strings, dates, and numbers. We will also work through writing tests for components that include `react-intl` components using Jest and enzyme.

Add Internationalization (i18n) to a React app using React Intl

Framer Motion is a production-ready animation and gesture library. With it you can create beautifully smooth animations with minimal effort, or compose together elaborate sequences of animations with low level APIs. 

These videos showcase some of Framer Motion's key features and how to get started implementing them.

Animating React Components with Framer Motion

In this course we will begin with nothing more than an empty directory & a text editor. Through small, focussed lessons we’ll learn how to setup our app with Webpack & Babel and how to configure these tools for use with Preact. Then we’ll move on to learning how to create components and how the Preact API mirrors that of React - highlighting the differences/additions along the way. Finally we’ll look at the interoperability with existing popular libraries in the React community such as Redux & React Router and with the popular development tools such as Redux Dev Tools & React Dev-Tools

Up and running with Preact

React 16 comes with some powerful new features, in this course we'll be exploring each of them. Each lesson is going to go over every individual new feature, one at a time.
From the new error boundaries that will save us many a headache to handling whether to update our state *within* our `setState` 

We won't just be learning the technical capabilities of the new features however, we'll *also* be going into best practices. 

Once you watch this course you'll be more than ready to leverage everything React 16 has to offer! 

Leverage New Features of React 16

In this course, you will learn to use many of the most powerful and convenient higher-order components within Recompose by coding several real-world examples. Using recompose looks very different from “vanilla” React; so you will also get comfortable with the look and feel of a “recomposed” component. The best part is no more need for class components! You’ll learn how to use Recompose to both modify components and also create your own higher-order components.

Higher Order Components with Functional Patterns Using Recompose

React 16.8.1 was just released, and hooks are finally stable! If you have literally 12 minutes to spare, you can learn how to use hooks (useState, useEffect and useMemo) as well as brand new React features such as React.lazy and React.memo.

Enjoy!

Search Results

Using `@reach/router` for navigation in React Apps