My Review of Kent C. Dodds's EpicReact.Dev: Introduction

Hello World 👋

Welcome to the new series that I am starting on React called My Review of Kent C. Dodds's EpicReact.Dev. This is the first article in this series and I will start it off with the introduction to what this series will be about.

This series is based on the workshop content from EpicReact.Dev by Kent C Dodds. While I go through the workshops, I will write blog posts explaining what I understand from the content. Hope you are as excited as I am to be part of this epic journey.

In this article, I will list out all the things that will be covered in Epic React workshops. These workshops are also self-paced, and the content in it is open source. So, you can go through the content on your own if you like. But I highly recommend that you buy the license and watch the video explanations if you are planning on going through this content by yourself. I will most probably combine multiple lessons while writing a blog post or may write multiple blog posts for some of the lessons.

Workshops

Epic React is divided into 8 different workshops.

1. React Fundamentals
2. React Hooks
3. Advanced React Hooks
4. Advanced React Patterns
5. React Performance
6. Testing React Apps
7. React Suspense
8. Building an Epic React App

1. React Fundamentals

In this workshop, we will learn everything you need to be effective with the fundamental building blocks of React applications. When you’re finished, you’ll be prepared to create React components to build excellent experiences for your app's users.

➖ Summary Taken From EpicReact.Dev

• React Fundamentals Welcome
• Basic JS "Hello World"
• Intro to Raw React APIs
• Using JSX
• Creating Custom Components
• Styling
• Forms
• Rendering Arrays
• React Fundamentals Outro

2. 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.

➖ Summary Taken From EpicReact.Dev

• 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

3. 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.

➖ Summary Taken From EpicReact.Dev

• 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

4. 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.

➖ Summary Taken From EpicReact.Dev

• Advanced React Patterns Welcome
• Context Module Functions
• Compound Components
• Flexible Compound Components
• Prop Collections and Getters
• State Reducer
• Control Props
• Advanced React Patterns Outro

5. 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.

➖ Summary Taken From EpicReact.Dev

• React Performace 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

6. 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.

➖ Summary Taken From EpicReact.Dev

• 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

7. React Suspense

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

➖ Summary Taken From EpicReact.Dev

• 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

8. Building 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.

➖ Summary Taken From EpicReact.Dev

• 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

I previously wrote an article based on the first workshop (React Fundaments). It was received quite well. But many people were unable to go through it as it is too long. That's why I will be republishing that article too as a part of this series. I will be dividing it into multiple articles this time.

What's Next

In my next article, I will explain the javascript concepts that you need to get familiar with before you deep dive into React. Subscribe to my blog if you don't want to miss the next article in this series.

Until Next Time 👋

---

You might also like the following articles:

• React Fundamentals
• Create Your Own Super Simple URL Shortener
• Why you should start using HSL color format
• TIL: Hyphenate when you justify text
• Embed Youtube Videos into Your Markdown Editor
• Babel Plugin To Remove Console Logs In Production
• noopener, noreferrer, and nofollow - When to use them? How can these prevent Phishing Attacks?
• Create New CodePens and CodeSandboxes Instantly With ZERO clicks
• How to Import SVGs into your Next.js Project?
• Create Custom Markdown Parser
• Optimize Your Website For Social Media Platforms
• Add Typescript to your Next.js project

---

If this was helpful to you, Please Like and Share so that it reaches others as well. To get email notifications on my latest articles, please subscribe to my blog by hitting the Subscribe button at the top of the blog. You can also follow me on twitter @pbteja1998.