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

Hello World 👋

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

Articles already published as a part of this section:

Javascript You Need To Know For React

Hello World 👋 Welcome to the second article of the My Review of Kent C. Dodds's EpicReact.Dev series which is based on the workshop material from EpicReact.Dev by Kent C. Dodds. In the previous article, you looked at the different topics that are go...

https://blog.bhanuteja.dev/epic-react-javascript-you-need-to-know-for-react

React Fundamentals: Intro to React Raw APIs

Hello World 👋 Welcome to the third article of the My Review of Kent C. Dodds's EpicReact.Dev Series which is based on the workshop material from EpicReact.Dev by Kent C. Dodds. If you haven't read the previous articles of the series yet, please go a...

https://blog.bhanuteja.dev/epic-react-react-fundamentals-part-1

React Fundamentals: Understanding JSX

Hello World 👋 Welcome to the 4th article of the series My Review of Kent C. Dodds's EpicReact.Dev. Please note that this blog post series is just my review of the EpicReact.Dev workshop material. I am just trying to explain what I learned and unders...

https://blog.bhanuteja.dev/react-fundamentals-understanding-jsx

React Fundamentals: Creating Custom Components

Hello World 👋 Welcome to the 5th article of the series My Review of Kent C. Dodds's EpicReact.Dev. Please note that this blog post series is just my review of the EpicReact.Dev workshop material. I am just trying to explain what I learned and unders...

https://blog.bhanuteja.dev/react-fundamentals-creating-custom-components

React Fundamentals: Styling And Handling Forms

Hello World 👋 This is the 6th article of the series My Review of Kent C. Dodds's EpicReact.Dev. Please note that this blog post series is just my review of the EpicReact.Dev workshop material. I am just trying to explain what I learned and understo...

https://blog.bhanuteja.dev/react-fundamentals-styling-and-handling-forms

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

Articles already published as a part of this section:

React Hooks: Managing State With useState Hook

Hello World 👋 Hooks are special types of functions in React that you can call inside React functional components. They let you store data, add interactivity, and perform some actions, otherwise known as side-effects. Below are the most common hooks ...

https://blog.bhanuteja.dev/react-hooks-managing-state-with-usestate-hook

How to Create a Reusable LocalStorage Hook

Hello World 👋 Hooks are special types of functions in React that you can call inside React functional components. They let you store data, add interactivity, and perform some actions, otherwise known as side-effects. The most common hooks are: useS...

https://blog.bhanuteja.dev/how-to-create-a-reusable-localstorage-hook

Easily Detect Outside Click Using useRef Hook

Hello World 👋 Hooks are special types of functions in React that you can call inside React functional components. They let you store data, add interactivity, and perform some actions, otherwise known as side-effects. The most common hooks are: useS...

https://blog.bhanuteja.dev/easily-detect-outside-click-using-useref-hook

The Lifecycle of React Hooks Component

In this article, we will see the order in which different useEffect callbacks and cleanups happen. We will also see how it differs when the app mounts, unmounts, updates. This image is taken from github.com/donavon/hook-flow. I took the example shown in this article from React Hooks workshop in EpicReact.Dev by Kent C.

https://blog.bhanuteja.dev/the-lifecycle-of-react-hooks-component

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

What’s Next

Until Next Time 👋