• Welcome to Epic React

    Start here! This is where you will get oriented, set up your work environment, and get ready to succeed as a React developer. It's important not to skip this section! It applies to all lessons below.
    • Welcome to Epic React

    • Project READMEs and Pre Reqs

    • Clone and Setup

    • Running the Epic React Workshop App

    • File Structure

    • Running Tests

    • Example Runthrough

  • React Fundamentals

    Learn everything you need to be effective with the fundamental building block of React applications. When you’re finished, you’ll be prepared to create React components to build excellent experiences for your app's users.
    Repository
    • React Fundamentals Welcome

    • Basic JavaScript-rendered Hello World

    • Intro to raw React APIs

    • Using JSX

    • Creating custom components

    • Styling

    • Forms

    • Rendering Arrays

    • React Fundamentals Outro

  • React Hooks

    Learn the ins and outs of React Hooks. I will take you on a deep dive into React Hooks, and show you what you need to know to start using them in your applications right away.
    Repository
    • React Hooks Welcome

    • useState: greeting

    • useEffect: persistent state

    • Hooks Flow

    • Lifting state

    • useState: tic tac toe

    • useRef and useEffect: DOM interaction

    • useEffect: HTTP requests

    • React Hooks Outro

  • Advanced React Hooks

    We’ll look at some of the more advanced hooks and ways they can be used to optimize your components and custom hooks. We’ll also look at several patterns you can follow to make custom hooks that provide great APIs for developers to be productive building applications.
    Repository
    • Advanced React Hooks Welcome

    • useReducer: simple Counter

    • useCallback: custom hooks

    • useContext: simple Counter

    • useLayoutEffect: auto-growing textarea

    • useImperativeHandle: scroll to top/bottom

    • useDebugValue: useMedia

    • Advanced React Hooks Outro

  • Advanced React Patterns

    Not only learn great patterns you can use but also the strengths and weaknesses of each, so you know which to reach for to provide your custom hooks and components the flexibility and power you need.
    Repository
    • Advanced React Patterns Welcome

    • Context Module Functions

    • Compound Components

    • Flexible Compound Components

    • Prop Collections and Getters

    • State Reducer

    • Control Props

    • Advanced React Patterns Outro

  • React Performance

    Learn everything you need to diagnose, profile, and fix performance problems in your React application using the Browser Performance Profiler, React DevTools Profiler, and proven React optimization techniques.
    Repository
    • React Performance Welcome

    • Code splitting

    • useMemo for expensive calculations

    • React.memo for reducing unnecessary re-renders

    • Window large lists with react-virtual

    • Optimize context value

    • Fix "perf death by a thousand cuts"

    • Production performance monitoring

    • React Performance Outro

  • Testing React Apps

    In this hands-on workshop you'll learn everything you need to test React components and applications with ease and get the knowledge you need to ship your applications with confidence.
    Repository
    • Testing React Apps Welcome

    • Simple Test with ReactDOM

    • Simple Test with React Testing Library

    • Avoid Implementation Details

    • Form Testing

    • Mocking HTTP Requests

    • Mocking Browser APIs and Modules

    • Testing with Context and a Custom Render Method

    • Testing Custom Hooks

    • Testing React Apps Outro

  • React Suspense

    Learn how Suspense works under the hood, preparing you for the future of asynchronous state management.
    Repository
    • React Suspense Welcome

    • Concurrent Mode

    • Simple Data-Fetching

    • Render as You Fetch

    • useTransition for improved loading states

    • Cache Resources

    • Suspense Image

    • Suspense with a Custom Hook

    • Coordinate Suspending Components with SuspenseList

    • React Suspense Outro

  • Build an Epic React App

    The React and JavaScript ecosystem is full of tools and libraries to help you build your applications. In this (huge) workshop we’ll build an application from scratch using widely supported and proven tools and techniques. We’ll cover everything about building frontend React applications, from the absolute basics to the tricky parts you'll run into building real world React apps and how to create great abstractions.
    Repository
    • Build an Epic React App Welcome

    • Walkthrough of Project Setup

    • Render a React App

    • Style React Components

    • Make HTTP Requests

    • Authentication

    • Routing

    • Cache Management

    • Context

    • Compound Components

    • Performance

    • Render as You Fetch

    • Unit Testing

    • Testing Hooks and Components

    • Integration Testing

    • E2E Testing

  • Epic React v1 Expert Interviews

    Epic React v1 Expert Interviews

    Kent Interviews experts on various topics
    • Creating Open Source Libraries with Tanner Linsley

    • Animations and Interactions with Josh Comeau

    • Next.js and Vercel with Guillermo Rauch

    • Building React-based Design Systems with Ben Ilegbodu

    • The React Ecosystem with Tejas Kumar

    • Encapsulation and Styling with Michael Chan

    • 3D Animation in the Browser with Paul Henschel

    • Best Practices for Maintainers with Jenn Creighton

    • Breaking into Tech with Samantha Bretous

    • Best Practices of Server-Side Rendering with Monica Powell

    • Mock Service Worker (MSW) with Artem Zakharchenko

    • React and React Native documentation with Rachel Nabors

    • React Developer Tools with Brian Vaughn

Learn
  • Workshops
  • Free Tutorials
  • Articles
  • Podcast
  • Livestreams
  • Newsletter
  • React 19 Cheat Sheet
Contact
  • Contact Us
  • Email Support
About
  • FAQ
  • Credits
© EpicReact.devTerms & Conditions