 Resources from Kent C. Dodds in 2021

🚧 **SUSPENSE IS EXPERIMENTAL**

One of the biggest challenges to writing software for the web is dealing with asynchrony, but we have to deal with it all the time.

This leads to a bunch of boilerplate code for handling loading and error states just to get the data we need to show the user-- whether the data comes from a remote endpoint or from browser APIs like geolocation and Bluetooth.

The end result is countless spinners and the dreaded FOLC (flash of loading content).

React Suspense is the answer to these problems.

React Suspense is a primitive built-into React that drastically simplifies asynchronous state management in our applications, and helps you avoid FOLC out of the box.

It's a bit of a different approach to managing these problems and understanding how it works is key to taking advantage of what it has to offer.

In this workshop, you'll learn how Suspense works under the hood, preparing you for the future of asynchronous state management.

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

Use Suspense to Simplify Your Async UI

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.

The Beginner's Guide to React

Kent C. Dodds is an active egghead instructor and blogger. This is a collection of screencast versions of his blog posts. You can find his blog here: [kentcdodds.com/blog](https://kentcdodds.com/blog)

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Kent's Blog Posts as Screencasts


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 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 19-part course is a single index.html file. This keeps your focus on learning React, 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.

You'll come out of this course with a solid grasp on:

what problems React can solve
how React solves those problems under the hood
what JSX is and how it translates to regular JavaScript function calls and objects
You’ll build a solid understanding so when you come across JavaScript challenges down the road, you’ll know how to…react.

Bite-size video tutorials for badass web developers.

egghead

The Beginner's Guide to React V1 (2017)

With the massive improvements to function components in React via hooks and suspense, you may be interested in seeing how to refactor a typical class component to a simpler function component that uses React Hooks features. In this course, Kent will take [a modern React codebase](https://github.com/kentcdodds/react-github-profile) that uses classes and refactor the entire thing to use function components as much as possible. We’ll look at state, side effects, async code, caching, and more!

Want a primer on hooks and suspense? [Watch Kent's React Hooks and Suspense Playlist](https://egghead.io/playlists/react-hooks-and-suspense-650307f2)!



Simplify React Apps with React Hooks

Once you’ve nailed the fundamentals of React, that’s when things get really fun.

This course teaches you advanced patterns in React that you can use to make components that are simple, flexible, and enjoyable to work with. 

You'll start with a simple `<Toggle />` component that you'll progressively refactor to each of the patterns. Throughout the course, you’ll see the benefits of each pattern and how they can be mixed-and-matched to make your components more useful (and simple for everyone who comes across them).

Kent C. Dodds has built and shipped components using each of these patterns. Along the way, he will help you understand and weigh the trade-offs of each pattern so you’ll intuitively know where to apply each of them in your own components. 

You’ll finish the course with a list of actionable things you can do, right away, to rework the components that you're building. You’ll complete the course more knowledgeable about React components and equipped to make your components more simple.

Note: This course covers **class component patterns** and is still interesting and valuable for the serious React developer, but for most current apps you'll probably want to use [React Hooks](httsp://next.egghead.io/q/q=hooks).

React Class Component Patterns

React Suspense has been released in React 16.6.0 (React.lazy support only) and React Hooks is stable in 16.8.0! Let's see how we can use these and more features of React together to write simpler React components.

React Hooks and Suspense

Use React Suspense to Simplify Your Async UI with Kent C. Dodds

Live Workshop Recording

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).

GitHub fosters a fast, flexible, and collaborative development process that lets you work on your own or with others.

github

How to Write an Open Source JavaScript Library

Webpack is one of the most popular tools for bundling JavaScript applications and libraries, and it's growing more popular every day. It is so loaded with features that it's sometimes difficult to know what's even possible. 

In this course, Kent C. Dodds takes you through some of the most valuable features of the Webpack JavaScript module bundler. We'll learn a ton about what it takes to optimize your Webpack configuration and your application to make it as fast as it can possibly be. We'll also go over what it takes to setup and write tests with webpack, Karma, Mocha, and Chai.

This course covers Webpack 2, but should also be relevant for Webpack 1.x.

webpack is a tool to build JavaScript modules in your application. To start using webpack from its cli or api, follow the Installation instructions. webpack simplifies your workflow by quickly constructing a dependency graph of your application and bundling them in the right order. webpack can be configured to customise optimisations to your code, to split vendor/css/js code for production, run a development server that hot-reloads your code without page refresh and many such cool features.

webpack

Use Webpack 2 for Production JavaScript Applications

“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 series, 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!

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

How to Contribute to an Open Source Project on GitHub

How much work would it take for you to move all of your directives and their templates to several different new directories? You'd have to update the templateUrl, script tags, etc., etc. With webpack, this can be trivial. For example, you don't need to worry about loading your templates in the $templateCache ever again. Webpack will help you modularize your css and tests. All of these things and more in this series so you can start using webpack with Angular today.

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

AngularJS and Webpack for Modular Applications

The underpinnings of tools like Babel and ESLint, Abstract Syntax Trees (or ASTs) are not nearly as scary as you might think. This is a collection of all the egghead.io lessons I (Kent) have put out there.

Abstract Syntax Trees

Updating this playlist is too hard. Check out: http://kcd.im/advanced-react and http://kcd.im/beginner-react

React from Kent

Here are all the Egghead.io lessons about testing with Jest! http://facebook.github.io/jest (https://kcd.im/egghead-jest)

jest

Testing JavaScript with Jest

Some introductory lessons on Webpack (webpack.github.io). Not tied to any particular framework.

Intro to Webpack

JSON Web Tokens (JWT) are a more modern approach to authentication. As the web moves to a greater separation between the client and server, JWT provides a terrific alternative to traditional cookie based authentication models. For more information on JWT visit http://jwt.io/

In this series, we’ll be building a simple application to get random user information from a node server with an Angular client. We’ll then implement JWT to protect the random user resource on the server and then work through the frontend to get JWT authentication working.

By the end, we’ll have an application which has a single username/password combination (for simplicity) and uses tokens to authorize the client to see the random user information. You’ll be able to login, get random users, and logout.

AngularJS Authentication with JWT

These are some of my egghead.io lessons that are focused on JavaScript.

JavaScript from Kent

These are all of my egghead.io lessons that are about webpack.

webpack from Kent

We want to make sure that when we ship new code, our users can use the application. The best way we've found to do that is to write automated tests that run before we deploy a new version of the app. But if our tests aren't doing exactly what the user will do, then how do we really know that things will work when users interact with our apps?

Let's rethink what it means to ship applications with confidence and what it takes to get there. With improved tools and practices, we can be more certain that what we're shipping to our users will work the way it's intended. 

Additional resources: [Slides](http://kcd.im/confident-react), [react-testing-library](https://github.com/kentcdodds/react-testing-library), [Jest](https://facebook.github.io/jest/), [jsdom](https://github.com/jsdom/jsdom), [jest-dom](https://github.com/gnapse/jest-dom)

Confidently Ship Production React Apps

**NOTE:** React Suspense for data fetching is VERY ALPHA and this API is undocumented, unsupported, and will likely change.

Our `Counter` component has grown in complexity and we need to figure out how to get it tested. In this lesson, we'll learn how to test the effects that are generated with `useEffect`.
 
**We'll cover:**
- How React schedules callbacks after the component renders
- Keeping our tests isolated with `afterEach`



Topics

Instructors

Content Type

Kent C. Dodds