 Resources from Kent C. Dodds in 2021

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

In React, you can’t render two React elements side-by-side (`<span>Hello</span><span>World</span>`). They have to be wrapped in another element (like a `<div>`). This may seem like an odd limitation, but when you think about the fact that JSX is compiled to `React.createElement` calls, it makes sense. In this lesson we’ll take a look at that and how to side-step this limitation with React Fragments.

Render two elements side-by-side with React Fragments

`useReducer` is definitely more powerful than `useState` (you can even [implement `useState` using `useReducer`](https://kentcdodds.com/blog/how-to-implement-usestate-with-usereducer)), but there's one scenario where `useState` is almost certainly better than `useReducer`:

> When it's just an independent element of state you're managing: `useState`

This is based on my blog post: [Should I useState or useReducer?](https://kentcdodds.com/blog/should-i-usestate-or-usereducer)

And don't miss [When to useReducer instead of useState](https://egghead.io/lessons/egghead-when-to-usereducer-instead-of-usestate?pl=kent-s-blog-posts-as-screencasts-eefa540c&af=5236ad)

When to useState instead of useReducer

One of the biggest paradigm shifts that React offered to the UI ecosystem was the component model. It allows you to package up all the logic, styling, and layout of a unit of UI into a box that you can easily move around and reuse without exposing any of the implementation details of the component. You don’t have to understand how a component works internally to use it effectively. With idiomatic component architecture, rendering a component in one place won’t impact other parts of your app.

In this lesson we’ll learn how to create a React component and how to use it. You’ll learn why things work the way they do and how to use this to your advantage.

Create a Simple Reusable React Component

Applications aren’t really applications if they don’t change over time to represent changes in the application over time. Normally in React you’ll use state to manage this, but before we get to that, we’ll just call ReactDOM.render on the same element so you get an understanding of what React is doing for you. So we’ll learn how React deals with the new elements you give it, compare it to the previous elements, and make surgical updates to the DOM to give you the fastest and best user experience possible (because updating the DOM is typically the slowest part in the whole process).

Rerender a React Application

It’s awesome that we can interact directly with React’s `createElement` API to create React elements and then hand those off to React DOM to get them to show up on the screen. But it’s not the most ergonomic API to write our UI code in. It’s hard to track when one element starts and the next one ends.

This is why the React team came up with JSX. It’s an extension to the JavaScript language to support syntax that looks similar to the HTML that you would write to create these DOM elements (there are [a handful of differences](https://reactjs.org/docs/dom-elements.html)). JSX gives us an expressive syntax for representing our UI, without losing the benefits and powers of writing our UI in JavaScript. The best way to take advantage of this is to learn how JSX is compiled to regular JavaScript calls, so we’ll look into that a bit as well.

Create a User Interface with React’s JSX syntax

JSX is not an entirely different language, but it is a bit of an extension to the language, so knowing how you would express certain JavaScript things within the JSX syntax is important to using JSX effectively. In this lesson we’ll explore a few different things you can do with JSX, like interpolation, composition, and spreading props. And we’ll compare these syntaxes with what is generated by babel so we have a good understanding of how this translates to regular JavaScript calls into `React.createElement`.

Use JSX effectively with React

When you create reusable React components, you want to make sure that people use them correctly. The best way to do this is to use TypeScript in your codebase to give you compile-time checking of your code. But if you’re not using TypeScript, you can still use PropTypes to get runtime validation. Between you and me, when I was still doing AngularJS work, I was so envious of this feature, that [I tried to build it into AngularJS](https://github.com/angular/angular.js/issues/11657).

In this lesson we’ll learn how PropTypes work, why they’re not enabled in production, and how to use the pre-built [prop-types](https://www.npmjs.com/package/prop-types) package from the React team.

Validate Custom React Component Props with PropTypes

Now that we have a good foundation on React elements, JSX, custom elements, and props, let’s write a React component that has some conditional logic in it to explore the interpolation characteristics of JSX syntax. We’ll learn that interpolation is not unique to JSX and we’ll learn the limitations and capabilities of interpolation in JSX. With this knowledge, we’ll be more productive using JSX.

Understand and Use Interpolation in JSX

Application’s can be laid out and styled pretty, but if they don’t respond to interactions from the user then they’re just web pages, not apps. Let’s get an introduction to event handlers with React. There are a ton of supported events that you can find [on the docs](https://reactjs.org/docs/events.html#supported-events). We still haven’t gotten to state yet, so we’ve implemented our own little way of managing state and re-rendering our component so we can play around with event handlers.

One thing you’ll want to know is that events with React are very similar to working with events in regular DOM. React does have an optimization implementation on top of the event system called [SyntheticEvents](https://reactjs.org/docs/events.html), but most of the time you won’t observe any difference with those events from regular DOM events (and you can always get access to the native event using the `nativeEvent` property).

Use Event Handlers with React


Application layout is only one part of the user interface equation. Another part is styling. In this lesson we’ll explore the `className` and `style` prop for styling our components. This lesson goes much deeper than that. We’ll learn why `className` is `className` and not `class` (like it is in HTML), and we’ll learn why the `style` prop accepts an object of camelCase styles rather than a string of css (like it does in HTML). We’ll take it even further by creating a reusable component that encapsulates these styles and composes the given `className` and `style` prop together. You’re going to love this one.

Finally, when you actually build a full application, a tool you’ll find invaluable is [Tailwind.css](https://tailwindcss.com/).

Style React Components with className and inline Styles


An application that responds to user input is valuable, but what do we do with that data the user has given us? This is where component state comes in. We need a place to put data that can change in our application, and we need to let React know when that state changes so it can update (or re-render) our app for us.

In React, state is associated to components and when the state changes, the component is updated. To get access to this state and to update it, we use what is called a “React Hook” which allows us to call into React from within our component and let it know that we need to manage some state. In this lesson, you’ll learn how to use the `useState` hook to do this.

Manage state in a React Component with the useState hook


Another piece to the web application puzzle is managing side-effects of our user’s interactions. In this lesson we’ll be interacting with the browser’s `localStorage` API, but this same thing would apply if we’re interacting with a backend server, or the geolocation API, or anything else that needs to happen when the state of our component changes.

You’ll learn how to use React’s `useEffect` hook to manage the side-effect of saving state into `localStorage`, and also how to re-synchronize our application with the stored value in `localStorage`. [Learn more about viewing `localStorage` in the Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/storage/localstorage).

Manage side-effects in a React Component with the useEffect hook


Something that’s important to recognize is that every time you call the state updater function (like the `setName` function in our component), that will trigger a re-render of the component that manages that state (the `Greeting` component in our example). This is exactly what we _want_ to have happen, but it _can_ be a problem in some situations and there are some optimizations we can apply for `useState` specifically in the event that it is a problem.

In our case, we’re reading into `localStorage` to initialize our state value for the first render of our `Greeting` component. But after that first render, we don’t need to read into `localStorage` anymore because we’re managing that state in memory now (specifically in that `name` variable that React gives us each render). So reading into `localStorage` every render after the first one is unnecessary. So React allows us to specify a function instead of an actual value, and then it will only call that function when it needs to–on the initial render.

In this lesson, I’ll show you how to do this and demonstrate how it works.

Use a lazy initializer with useState

It doesn’t take long working with React before you want to render a list of items and when you do, you’ll inevitably encounter this console warning: “Warning: Each child in a list should have a unique key prop.” This warning is pretty simple to silence by providing the bespoken `key` prop, but it is really useful to understand what that warning is about and the bugs that can happen if you do not address the warning properly.

In this lesson we’ll see a demo of this problem and understand a situation that can happen when we don’t handle it properly. We’re using inputs in this example, but the same thing can happen for your own components that maintain state. You definitely do not want to ignore this warning.

Use the key prop when Rendering a List with React

Something that’s really important to know about React’s `useEffect` hook is that it _eagerly_ attempts to synchronize the “state of the world” with the state of your application. That means that your effect callback will run every time your component is rendered. This normally won’t lead to bugs (in fact, it does a great job at preventing bugs that plagued React apps before `useEffect` was available), but it can definitely be sub-optimal (and in some cases can result in an infinite loop).

In this lesson we’ll observe that our effect callback is getting called more than it needs to be, and you’ll learn how to add a dependency array so it is updated only when the state it relies on changes. And in real applications, you’ll want to make sure you have and follow the rules from the [ESLint](https://eslint.org/) plugin: [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks) (many tools like Create React App have this installed and configured by default).

Manage the useEffect dependency array

One of the things we love about programming is the ability to take code, place it in a function, and reuse it in other places in the software. Let’s imagine a scenario where we want to share our `localStorage` code with other components so other components could synchronize state with `localStorage` (or we could even do it with different variables in the same component). Take a step back from React specifically and considering how code reuse works in JavaScript in general, we can simply make a function, put our relevant code in that function, and then call it from the original location. That process works exactly the same with React hooks code, so let’s do that!

In the process, we’ll learn a few of the conventions for doing this and we’ll learn about some additional challenges that come with generalizing our code. As always, follow [AHA programming practices](https://kcd.im/aha)!


Create reusable custom hooks

React is really good at creating and updating DOM elements, but sometimes you need to work with them yourself. A common use case for this is when you’re using a third party library that wasn’t built for or with React specifically. To do this, we need to have some value that’s associated with our component (like state) to store a reference to the DOM element, but doesn’t trigger re-renders when it’s updated (unlike state). React has something specifically for this and it’s called a `ref`.

You create a `ref` object with the `useRef` hook and that object’s `current` property is the current value of the `ref`. It can be anything, but if you pass that `ref` object to a component as a prop called `ref`, then React will set the `current` property to the DOM element it creates so you can reference it and manipulate it in your `useEffect` hook.

In this lesson we’ll get to see how that works with a cool library called [vanilla-tilt](https://www.npmjs.com/package/vanilla-tilt).

Manipulate the DOM with React refs

Unfortunately, sometimes a server request fails and we need to display a helpful error message to the user. In this lesson we’ll handle a promise rejection so we can collect that error information, and we’ll also learn how we can best display manage the state of our request so we have a deterministic render method to ensure we always show the user the proper information based on the current state of our React component.

A common mistake people make is to create a state variable called `isLoading` and set that to `true` or `false`. Instead, we’ll be using a `status` variable which can be set to `idle`, `pending`, `resolved`, or `rejected`. You can learn more about why this is important from [Stop using isLoading booleans](https://kentcdodds.com/blog/stop-using-isloading-booleans).

Handle HTTP Errors with React

Understanding the order in which React hooks are called can be really helpful in using React hooks effectively. [This chart](https://github.com/donavon/hook-flow) can be really helpful in understanding this, and in this lesson we’ll explore the lifecycle of a function component with hooks with colorful console log statements so we know when one phase starts and when it ends.

I recommend you watch this one slowly and watch it as many times as you need to. Also definitely play around with the code yourself until you feel relatively comfortable with this. Understanding all of this is **not** critical to your success with using React, and most of the time you won’t need to think about this at all, but understanding it can help you at times.

Understand the React Hook Flow

Welcome to The Beginner’s Guide to React! I’m happy you’re here. I recommend that you watch all of these videos through once without touching the keyboard. Just take notes. Then you can watch them a second time and follow along and change/break the code and review the bits that you need. I’ll show you how I get things up and running, but feel free to copy/paste the code to an environment where you feel comfortable.

A Beginners Guide to React Introduction

It’s dangerous to go alone. Here take this: [React DevTools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en). The React Developer Tools extension is extremely useful in developing and debugging React applications. In this lesson we’ll get it installed and play around with some of the features. Definitely take some time to play around with the DevTools on your own. You’ll be using these a lot.

Topics

Instructors

Content Type