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

 Courses from Kent C. Dodds

In React 19, managing script tags efficiently within components can lead to performance enhancements and simpler code structures.

Originally, using script tags directly in a React component involved complex setups, like using `useEffect` to dynamically add JavaScript code. For instance, a component might dynamically inject script tags to load external widgets. This approach, while functional, resulted in multiple script tags and duplicate iframe elements. This duplication not only cluttered the output but also negatively impacted performance by loading scripts multiple times.

The workaround for this would be to manually hoist any common scripts and maybe load them when they weren't needed by any components.

With React 19 we now have a more effective method. This involves directly placing the script tag within the React component's return statement. This approach ensures that React handles the script loading, avoiding the duplication of script tags.

By implementing the script tags this way, the loading initiator becomes React DOM, which efficiently manages script loading and deduplication. This setup prevents multiple requests for the same script when the component is rendered multiple times, enhancing the overall application performance.

Furthermore, directly embedding the script tag simplifies the code, making the component cleaner and more maintainable.

Efficiently Render Script Tags in React 19 Components

Learn how to efficiently render script tags in React 19 components to improve performance by avoiding duplicate script loads and simplifying your code.

Let's learn how to dynamically manage title tags in React 19 applications. Rendering `<title>` dynamically is simple enough, however, a challenge arises when multiple title tags are present in the document, which can lead to issues with screen readers and search engine optimization (SEO). The solution presented involves ensuring that only one title tag is rendered at a time by using conditional rendering.

Also we need to make sure to have a single string within the title tag using a template literal, ensuring our HTML remains valid and optimized.


Deduplicate Title tags with React 19

Learn to manage multiple title tags in React 19 dynamically. Ensure accessibility and SEO by preventing duplicate title tags with clear examples.

In React 19, we can easily add a title tag like "Starship Deets" which then appears in the head section of the HTML even when we render it inside our components. This method also applies to meta tags such as character set and viewport settings, which are also lifted to the head section automatically.

This is an awesome feature because it maintains the same composition style we are familiar with in React components. It simplifies the handling of HTML head elements without needing extra setups like `useEffect` for accessing the head section. Even in situations where our components are rendering within a body element, like within a div, we can manage our head content directly within our components. React takes care of hoisting these elements where they need to go.


Hoist Title and Meta tags in React 19

Hoisting title and meta tags directly in React 19 components allows for simpler composition, similar to other React elements. Manage meta and title tags.

Bite-size video tutorials for badass web developers.

egghead

Testing JavaScript 2020 update

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

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

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

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

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

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

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

A Beginners Guide to React Outro

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

When comparing two visually similar websites, it can often be challenging to precisely identify the subtle differences between them. To facilitate a rapid analysis of these discrepancies, a practical technique involves leveraging Chrome's integrated developer tools to capture full-page screenshots of each site. Subsequently, these screenshots can be uploaded to a platform like AI Studio. There, the AI can analyze the images and generate a report detailing the variations. This entire process, leveraging a few quick shortcuts, can be completed in under a minute, delivering a comprehensive breakdown of the differences for efficient comparison and analysis.

Quickly Compare Two Sites Using AI Studio with Chrome Full Page Screenshots

It's fairly trivial to create a React project, but there's always a big hurdle between creating it locally and making it shareable so that someone else can run it. This lesson walks you through the process of automating creating a React project locally, creating the repository where it's going to be hosted, and creating shareable links where it can be run so that you can quickly and easily create single one-off demos and shoot them over to your friends and coworkers for sharing your code ideas in a working environment.


```bash
share-react-project() {
  if [[ -z "$1" ]]; then
    echo "Usage: share-react-project <project_name>"
    return 1
  fi

  local project_name="$1"
  local github_username=$(gh api /user --jq '.login')

  echo "Creating Vite project: $project_name"
  pnpm create vite "$project_name" --template react

  cd "$project_name"

  echo "Initializing Git repository"
  git init

  echo "Adding all files to Git"
  git add .

  echo "Creating initial commit"
  git commit -m "Initial commit"

  local codesandbox_link="https://codesandbox.io/p/github/${github_username}/${project_name}"

  echo "Adding CodeSandbox link to README.md"
  echo "" >> README.md
  echo "## CodeSandbox" >> README.md
  echo "[![Open in CodeSandbox](https://assets.codesandbox.io/github/button-edit-blue.svg)](${codesandbox_link})" >> README.md

  echo "Adding README.md to Git"
  git add README.md

  echo "Committing README.md changes"
  git commit -m "Add CodeSandbox link"

  echo "Creating GitHub repository: $github_username/$project_name"
  gh repo create "$github_username/$project_name" --public

  echo "Pushing to remote 'origin'"
  git push -u origin main

  echo "Project '$project_name' created successfully!"
  echo "GitHub repository: https://github.com/$github_username/$project_name"
  echo "CodeSandbox link: $codesandbox_link"
}
```

Automate Creating a Local React Project, GitHub Repository, and Live Hosted Demo in a Single Command

[Verdaccio](https://verdaccio.org/) is a fully featured NPM registry that you can run locally on your machine. It’s a great tool for testing your release process, running end-to-end tests, and simulating real-world scenarios like deploying packages, installing them, and verifying functionality as an end user would.

Nx includes a [generator](https://nx.dev/features/generate-code) that simplifies setting up Verdaccio. To configure it, run:

```shell
npx nx g @nx/js:setup-verdaccio   
```

This command installs the necessary NPM packages and creates a `project.json` file with a `local-registry` target. To start the local registry, open a new terminal window and run:

```shell
npx nx local-registry
```

This will:
- Launch the Verdaccio registry.
- Configure NPM to point to the local Verdaccio server at `http://localhost:4873`.

> **Note:** A `project.json` file provides an advanced way to define scripts, offering more flexibility than a traditional `package.json` for managing complex targets.

Setup local Verdaccio server to release NPM packages

Learn how to spin up a local NPM registry powered by Verdaccio to test deploy your NPM packages.

In TypeScript, developers often begin by defining the structure of their data using type definitions or interfaces, which is a powerful way to ensure type safety. However, as applications grow and become more complex, simply defining the shape of an object might not be enough to guarantee its consistent creation and behavior throughout the codebase. This often leads to situations where objects that are intended to be of a certain "type" might be missing crucial properties or have incorrect data, which can be difficult to track down and debug.

This lesson tackles the question of when and why to move beyond basic type definitions and embrace classes in TypeScript. It demonstrates how classes provide a more robust mechanism for defining object structure, enforcing type constraints, and ensuring consistent object creation. By establishing a clear blueprint for objects, classes not only improve compile-time type safety but also offer runtime benefits and better code organization, ultimately helping developers avoid common pitfalls associated with loosely structured objects in larger TypeScript projects.

Stop Avoiding Classes in TypeScript

Karabiner isn't only for your keyboard. It can also hijack your mouse buttons and enable them to be similar to layers on your keyboard, where holding down a mouse button can allow you to tap keys on your keyboard to trigger commands and macros that can completely revolutionize your workflows. For example, you can hold down the right mouse button and tap on R to go to references in VS Code. Or hold down the right mouse button and tap the left mouse button to chop up videos and Screenflow.

This completely unlocks a whole new world of possibilities and use cases for your mouse as you can hover your mouse over anywhere on the page. And just tapping keys on your keyboard allows you to trigger mouse actions, to trigger keyboard actions, or to trigger macros and applications and terminal commands. and anything that your imagination can come up with. 

Karabiner: Rethinking Right-Click as a Macro Command Center

Make an HTML table more readable on mobile devices by using the ::before pseudo-element. We add labels to each cell, so they appear like cards when the table is viewed on smaller screens. The ::before content is set using a data-label attribute for each cell to enhance mobile viewability without horizontal scrolling.



Create a mobile friendly table with the before pseudo-element

Learn to use CSS ::before pseudo-element for mobile-friendly HTML tables. Add labels to cells for enhanced readability on mobile, avoiding horizontal scroll.

Any app of a decent size has event flows and messages being passed around. At a certain point it becomes complicated to explain it through prose and you want to turn towards diagrams. Now setting aside the time to create diagrams that accurately describe what's happening in your codebase can be quite time consuming. Luckily, with today's AI tools, we can now just do basic walkthroughs with rough recordings over codebase dictating what's going on along the way and then upload that to tools like AI Studio and then ask it to generate diagrams in a text-based format such as Mermaid that will then generate the flowcharts and diagrams for us. So this video walks us through this process of recording a rough video, uploading it to AI Studio and then asking AI Studio to generate the proper Mermaid diagram syntax.

Generate Mermaid Flow Chart Diagrams with Gemini 2.0 from Rough Screen Recordings

I'm a diehard Karabiner user and anytime I start doing something repetitively I always move it into my Karabiner configuration. Sometimes I'll fall into scenarios where I want to trigger a command, but I also want to know if that command succeeded or failed. Since Karabiner can trigger any command, setting up the command is fairly straightforward, but knowing whether it succeeded or failed became much more difficult. Luckily for me there is a package called terminal-notifier that you can install from homebrew and you can pipe the output of your command to terminal-notifier. And have a seamless way of triggering your keyboard shortcut which runs a command and you can be notified of the results.

Use Karabiner to Trigger a Terminal Command and Get Notified of the Results

There are a lot of scenarios when inspecting a site in Chrome where you don't want any click events to fire and you don't want any scripts to run. Or maybe something is animating in and out of the page and you want to capture it at a certain moment. This is a great use case for pausing script execution, which is kind of using the debugger manually by going into the Chrome DevTools and the Sources tab and clicking the pause button to essentially pause the entire page. This will give you a chance to inspect any of the elements and styles you want to inspect. And you don't have to worry about fire and click events or anything that might interrupt your investigation into the elements and styles that you want to find.

Pause Script Execution in Chrome to Easily Inspect Elements

Gemini 2.0 has a context window of a million tokens, and this means that you can upload hundreds of files and allow it to inspect and analyze massive refactors across entire code bases. 

This lesson demonstrates concatenating an entire code base into a single file and then uploading it to AI Studio. Once within AI Studio, we ask it to find the types of tasks that it can evaluate for us. Then we select one of the tasks and ask it to generate instructions for that task. Once those instructions are complete, we then turn them over to Windsurf's Cascade agent, and we allow Windsurf's Cascade to do all of the work for us as we sit back, relax, and let the AI do our jobs.