Learn how Kent started working with egghead.

Kent's Instructor Journey

Open source is an excellent way to level up your skills as a developer. You don't need to be an expert to start contributing to open source. Learn how Kent recommends starting in open source.

“Feel free to submit a PR!” - words often found in GitHub issues, but met with confusion and fear by many. Getting started with contributing open source is not always straightforward and can be tricky. With this course, you’ll be equipped with the the tools, knowledge, and understanding you need to be productive and contribute to the wonderful world of open source projects. Much of this series speaks about GitHub, but most of the concepts are generally applicable to contributing to any open source project, regardless of where it’s hosted.

So enjoy the course and start contributing to the projects you use and love today!

Kent C. Dodds

How to Contribute to an Open Source Project on GitHub

Publishing a JavaScript library for public use requires some extra steps. You need to think about how people will use the library. From end users, to contributors your library now has a variety of people outside of yourself potentially making use of the code that you've released into the wild.

From Github and npm, to releasing beta versions, semantic versioning, code coverage, continuous integration, and providing your library with a solid set of unit tests, there are a ton of things to learn.

This series will guide you through a set of steps to publish a JavaScript open source library.

You might also enjoy [this article about contributing to open source](https://egghead.io/articles/get-started-contributing-to-javascript-open-source).

How to Write an Open Source JavaScript Library

What open source project should I contribute to?

Becoming an Open Source Project Maintainer

Get into Open Source

This course is for React newbies and anyone looking to build a solid foundation. It’s designed to teach you everything you need to start building web apps in React right away.

The Beginner's Guide to React

Learn Hooks by taking a modern React codebase that uses classes and refactor the entire thing to use function components as much as possible.

Simplify React Apps with React Hooks

Use Suspense to Simplify Your Async UI

Launching Epic React

Kent C. Dodds chats with developers about life, career, and code.

Chats with Kent

Kent C. Dodds Landing Page

 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

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

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

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.

Build and deploy a React Application with Codesandbox, GitHub, and Netlify

A Beginners Guide to React Outro

Kent is working on an update to the course material, and will be joining us for an hour long live stream to give a sneak peek at the work in progress.  Whether you’re just getting started or a seasoned vet, this is sure to be a great time.

Beginners Guide to React Live Workshop Recording

Bite-size video tutorials for badass web developers.

Topics

Instructors

Content Type

Free or Pro