Bhanu Teja Pachipulusu

Posted on Oct 5, 2020 • Edited on Oct 29, 2020 • Originally published at blog.bhanuteja.dev

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

#react #javascript #codenewbie #epicreact

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.

React Fundamentals
React Hooks
Advanced React Hooks
Advanced React Patterns
React Performance
Testing React Apps
React Suspense
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:

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.