React got that name for a reason. It’s a component-based JavaScript library that renders smartly and can seriously simplify your work.

This course is for [React](/q/react) newbies and anyone looking to build a solid foundation. It’s designed to teach you everything you need to start building web applications in React right away.

Each lesson in this 28-part course is a single `index.html` file. This keeps your focus on learning React, with no distractions. We’ll start with a blank file and add more complexity as we go along, wrapping the course with a lesson on how to move into a more production-ready development environment—and even deploy your app to a great service like [Netlify](/q/netlify).

You’ll build a solid understanding so when you come across [JavaScript](/q/javascript) challenges down the road, you’ll know how to…react.

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

You can create a simple user interface on the web using HTML and CSS. But as soon as you want to make your application interactive, you need to use JavaScript to manipulate the DOM (Document Object Model) to listen to user events and make updates to the user interface. In this lesson we'll learn how to create a `<div>` element using raw JavaScript and browser APIs.

Create a User Interface with Vanilla JavaScript and DOM

React uses the same APIs to control and update the DOM that we did in the previous lesson. But it offers so much to the table that we’re going to introduce it into the project and rewrite what we’ve written to React code. Instead of creating DOM elements, we’ll create React elements and then hand those off to `react-dom` to handle turning those into DOM elements and putting them into the page.

If you’ve ever learned or used React before, you’re probably more familiar with JSX than React’s `createElement` API, but it’s important to understand the `createElement` API first so you understand the magic and can become a code magician yourself. Not to worry, we’ll get to JSX soon enough!

Create a User Interface with React’s createElement API

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

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

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

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

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

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


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


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

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

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

Forms are a basic building block of the web. Every web application uses form elements as a way to accept input from the user. There are a few things to keep in mind with how forms work on the web and in this lesson we’ll learn about those as well as various ways you can retrieve values from elements in the form as well as a few best practices you should consider when working with form elements on the web.

You can learn more about basic forms in the React documentation about [Uncontrolled Components](https://reactjs.org/docs/uncontrolled-components.html).

Make Basic Forms with React

Often, it can be useful to know what the user’s input is as they’re typing it and use that information to change what is rendered. This can be good for dynamic search or filter inputs, or triggering changes when a user checks a checkbox, or a myriad of other use cases. In this example, we’re going to dynamically show an error message if the user types something invalid so they don’t have to wait until they submit the form to know they’re doing something wrong.

To do this we’ll store the input’s value in state and then use that state to derive an error message which will be displayed if there is an error.

Make Dynamic Forms with React

There are many situations where you want to programmatically control the value of a form field. Maybe you want to set the value of one field based on the user’s interactions with another element. Or maybe you want to change the user’s input as they’re typing it. In this example, we’ll be preventing the user from typing upper case characters into our field by turning our input from an “Uncontrolled field” to a “Controlled field.”

You can learn more about Controlled fields and components from [the React documentation](https://reactjs.org/docs/forms.html#controlled-components).

Controlling Form Values with React

No matter how hard you try, eventually your app code just isn’t going to behave the way you expect it to and you’ll need to handle those exceptions. If a render is thrown and unhandled, your application will be removed from the page, leaving the user with a blank screen... Kind of awkward... 

Luckily for us, there’s a simple way to handle errors in your application using a special kind of component called an [Error Boundary](https://reactjs.org/docs/error-boundaries.html). Unfortunately, there is currently no way to create an Error Boundary component with a function and you have to use a class component instead, but we got another lucky break because there’s a terrific open source library we can use called [`react-error-boundary`](https://www.npmjs.com/package/react-error-boundary).

In this lesson, we’ll learn how to write our own simple error boundary and then how to use `react-error-boundary` instead. We’ll also learn the implications of where we place our Error Boundaries in our React component tree.

Using React Error Boundaries to handle errors in React Components

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

A common question from React beginners is how to share state between two sibling components. The answer is to [Lift the state](https://reactjs.org/docs/lifting-state-up.html) which basically amounts to finding the lowest common parent shared between the two components and placing the state management there, and then passing the state and a mechanism for updating that state down into the components that need it.

As a community we’re pretty good at doing this and it becomes natural over time. One thing that we typically have trouble remembering to do is to push state back down (or [colocate state](https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster)). In this lesson we’ll learn how to lift state up and push state back down.

Lifting and colocating React State

Most useful React applications involve interacting with a server to load and persist data. To do this on the web, we use HTTP requests with [the browser’s built-in fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) (or you may use some other open source library that’s built on top of this API). HTTP requests like this are inherently asynchronous in nature and they’re also side-effects so we’ll need to manage not only starting the request, but also what we should show the user while the request is “in flight.”

In this lesson we’ll use a public GraphQL server that serves up pokemon data to load information for a given pokemon name. We’ll learn how to fetch that data inside a `React.useEffect` callback and display the results when the request completes.

Make HTTP Requests with React

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

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.

Install and use React DevTools

I’ve built and deployed several applications without downloading or editing a single line of code to my local computer, and I did it with [Codesandbox](https://codesandbox.io), [GitHub](https://github.com), and [Netlify](https://www.netlify.com) ([learn more](https://kentcdodds.com/blog/building-production-apps-100-in-the-browser)). In this lesson I’ll show you around some of these tools, and I can’t wait to see what you do with these amazing tools and your new found knowledge of React.

The Beginner's Guide to React

Instructor

🌱 This is a Fresh Course

What you'll learn

🌱 This is a Fresh Course

Course Content