Study React
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.
Courses
- Basic JS "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.
Courses
- 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.
Courses
- 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.
Courses
- 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.
Courses
- React Performance Welcome
- Code Splitting
- useMemo for Expensive Calculations
- React.memo for Reducing 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.
Courses
- 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
- Context and 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.
Courses
- React Suspense Welcome
- Concurrent Mode
- Simple Data-Fetching
- Render as You Fetch
- useTransition
- 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.
Courses
- Build an Epic React App Welcome
- Walkthrough of Project Setup
- Render a React App
- Add Styles
- 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
- Build an Epic React App Outro
Epic React Expert Interviews
Kent Interviews experts on various topics
Interviews
- 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