Epic React Workshop Series

If you're looking for a job in web development, there's a good chance you've noticed most of them are looking for React experience.

Over the last decade, React has continued to evolve and as a result has remained dominate in the full stack web app landscape and it's only innovating more to maintain its growing lead.

While React cares a great deal about backward compatibility, the innovations of React and the ecosystem around it mean you're likely missing important quality of life improvements for yourself and your users.

This workshop series will give you the knowledge you need whether you're a seasoned React expert or a complete novice. That knowledge will enable you to deliver better user experiences more efficiently and will make you more attractive to employers.

This workshop series will give you a solid foundation on React fundamentals so you're more efficient using React. You'll find yourself fighting React less and working with it more.

To top it off, you'll finally understand what the heck React Server Components and Server Actions are. You'll understand how they're a revolutionary new piece of technology that will enable a UX and DX that was not possible before.

This workshop series will get you up to speed and even ahead of the game with React, the most widely used UI framework in the world. I'm excited for you to join us!

Hey, I'm Kent C. Dodds

Over my years as a web developer, I've built applications at every scale, enterprise apps, startups with dozens of users, internal tools, and consumer-facing giant tech co. apps with millions of users. I've managed to stay on top of what users have come to expect from applications. You know the feeling you get when an app gives you a modern user experience that just works™️? I know how to get your app there with React. And that’s what you’re going to learn in this series.

I couldn't be more excited to have you join me for this experience. I've reached well over half a million software developers with my educational content and open source software over the years. I get really jazzed hearing back from developers who apply my ideas to their apps and get jobs, promotions, improved sales, and reduced shipping stress. 💪

Workshops with me are intense in the best way. You’re expected to learn and learning is hard work. But that doesn’t mean it should be frustrating or impractical. The workshop learning environment I’ve developed will have you in your own familiar development environment with a well structured series of exercise steps based on examples that build on top of each other.

I’ve been teaching web development workshops for over a decade and I’ve solicited over 25,000 bits of feedback on my exercises. I know what works and what doesn’t and I’m constantly improving my teaching method and exercises so I can give you a first class education based on research and experienced.

This five-week workshop series covers the React side of web applications, using modern techniques and offering modern user experiences in a way that gears you up with React so you can use it effectively with full stack frameworks.

What's included

React Fundamentals

March 5th & 7th, 8am-2pm (Pacific)

React itself is relatively simple, but if you skip over the fundamentals (as many people do), then you’ll find yourself confused and lost and ultimately working around your gaps in knowledge.

As we are busy building applications, we often find ourselves bumping into the edge of our understanding. But we’re so busy with the pressures of deadlines that we fumble around until we get it working then move on without truly understanding why and how it works. No shame, this is the reality for all of us under pressure and deadlines. This workshop will fill in the gaps you may not even know you have with the core fundamentals of React and expand your knowledge so you stop fumbling around.

If you’ve never used React before, this will be the perfect introduction for you because you’ll be able to start your React journey without those gaps in the first place. You’ll have a complete understanding of what React is doing under the hood when you describe your UI with JSX, create custom components, handle rendering errors, and more.

In this workshop we will cover:

• Rendering React-generated UI in the browser
• Using JSX
• Custom Components
• TypeScript with React
• Styling with React
• Building forms with React
• Handling rendering errors with Error Boundaries
• Using React’s key prop for rendering Arrays

Prerequisites:

• Read through "JavaScript to Know for React"
• Some basic TypeScript experience (you can go through “Beginner’s TypeScript” and that should be enough)

React Hooks

March 12th, 8am-2pm (Pacific)

You’ve heard of React components. React’s component model changed the landscape of UI development on the web and beyond. It has evolved over time up to now where a component is literally just a function that returns something that renders (like React elements). However, components aren’t the atomic unit of React. There’s a lower level primitive and that is React hooks. React hooks make your components truly interactive. Hooks make it possible to create powerful abstractions in the form of components and even custom hooks.

In this workshop you’ll get introduced to the concepts of React Hooks and dive deep in the most common use cases for the most common hooks you’ll use in any React application. We’ll have practical examples that are focused for your learning and exploration of how to use these hooks in the best way (yes, you can use hooks the wrong way and we’ll talk about how to avoid that).

In this workshop we will cover:

• Managing UI State
• Subscribing to events and cleanup
• Refactoring state properly
• Avoid state synchronization issues
• Interacting with the DOM and integrating with third party libraries

Prerequisites:

• Watch my talk Why React Hooks

Advanced React Hooks

March 14th, 8am-2pm (Pacific)

Every application needs more than the basic React hooks offer. You need to build more generic abstractions that you and your team can use throughout the application. You need to handle more complex use cases. This is where the advanced React hooks come into play.

When building generic abstractions, you often need to handle more edge cases. The dependency array in the useEffect hook relies on referential stability, so you need to add React’s memoization hooks to accomplish this. useState works most of the time, but sometimes you run into more complex state interactions where multiple elements of state affect the state changes in one another. And sometimes you really just need to have an imperative API for the user experience you’re trying to build.

This workshop will level you up in your react hooks experience so you’re prepared to dive deeper into building useful abstractions and handling complex use cases. In this workshop we’ll cover:

• Managing Complex UI State
• Creating generic Custom Hooks and utilities
• Sharing state throughout a React application
• Fine-tuning DOM interactions
• Providing an imperative API to your components and hooks

Prerequisites:

• Watch Getting Closure on React Hooks by Shawn Wang

Advanced React Patterns

March 19th & 21st, 8am-2pm (Pacific)

You’re at the stage in your React experience where people turn to you for the abstractions you need in your application. You’ve got a set of UI elements in your designs that are unique to your application and you either need to build it or customize an off the shelf UI library. You may think you’re free and clear if you just customize a UI library, but just like with everything, if you don’t understand how it works, you’re doomed to “hold it wrong.”

And if you can’t find something that fits your use case, I’m afraid to say you’re doomed to make a lot of mistakes without the right tools and patterns.

And you’ll likely have a chance to do a bit of both building and customizing in your apps. So this workshop will be invaluable to you.

Oh, and this isn’t just about abstractions either. We’ll also cover good patterns you can use in your regular app code as well.

In this workshop we’ll cover:

• Improve perf and reduce prop drilling with composition
• Managing user focus with flushSync
• Make components work together with compound components
• Handle common use cases for hooks with prop getters
• Invert control with state reducers and control props
• Granting ultimate layout flexibility and behavior reuse with slots

Prerequisites:

• Read my blog post Inversion of Control

React Performance

March 26th & 28th, 8am-2pm (Pacific)

One of the best ways to lose the trust of your users is to have a slow or unresponsive application. Sure your app may be fast on your souped up M2 MacBook Pro, but your users are using your application on low-end phones and in spotty network conditions. You need your app to perform well for these users too.

React is pretty darn fast as it is, but there are some user experiences we are required to build that can stress it out. In this workshop we’ll cover some of the most common scenarios you’ll run into as you build your React application and show you approaches to improve performance without sinking into tech debt.

In this workshop we’ll cover:

• Properly measuring performance issues (both in React and vanilla JS)
• Root cause analysis
• Lazy loading code
• Memoizing expensive derived state
• Reducing unnecessary rerenders with React.memo and externalizing state
• Windowing large lists to reduce the amount of DOM rendered

Prerequisites:

• Install the React DevTools for Chrome
• Read “Analyze runtime performance”
• Experience with React and all hooks

React Suspense

April 1st, 8am-2pm (Pacific)

Your web application has lots of asynchronous interactions. You don’t download all the data and code the user might view onto the device at once. That would cost you and the user dearly in performance and bandwidth. As a result, the user’s going to have to deal with loading data on demand and you’re going to have to deal with managing those loading states.

That’s where React suspense comes into play. Having a declarative, component-driven approach to managing pending UI is a great model for this kind of user experience. By the end of this workshop, you’ll feel confident using React suspense features to improve your code and the user experience your application offers around asynchrony.

In this workshop we’ll cover:

• How to properly render-as-you-fetch
• Load data with the use hook and manage pending UI with Suspense
• Using useTransition and useDeferredValue for improved loading states
• Integrate Suspense with Images

Prerequisites:

• Watch Dan Abramov's talk Beyond React 16 | JSConf Iceland 2018

React Future (Server Components and Actions)

April 3rd, 8am-2pm (Pacific)

You’re interested in how far React can take the component model. Everyone is. While React has not yet officially released server components and actions as features in a stable version of React, you want to understand how these features work because you’d like to use them within one of the frameworks built on top of React which has support for them.

In this workshop we won’t be using any frameworks. In fact you might say we’ll be building our own framework. It’s important for you to understand at least one or two layers below where you typically operate to be able to use your abstractions effectively. So we’ll be working with the raw/unreleased/experimental/futuristic APIs for React Server Components and React Server Actions.

Once you finish this workshop, you’ll finally have the proper mental model for what server components and actions will do for you as an every day React app developer. Whatever kind of React app you’re building (and whatever architecture you have), you’ll find ways to apply these future features to your application eventually and after this workshop you’ll be eager to do so for the DX and UX improvements they provide.

In this workshop we’ll cover:

• The relationship between client and server components and their respective module graphs
• Streaming serialized React elements
• Submitting forms to server actions
• Managing pending state for server actions
• Providing great loading UX with optimistic UI

Prerequisites:

• Currently working on this (stay tuned).

I couldn’t be more excited to have you join me on this journey. This is going to be a killer workshop series that I’m sure will get you to your goals of becoming an epic web developer building React applications. And it’s a critical step on your journey to be able to build full stack web applications.

So what are you waiting for?

Let’s go! 🚀

Important Note

Depending on the questions asked during the workshop, or necessary changes in the material, the actual content of the workshop could differ from the above-mentioned topics.