Epic React v2 Tour

[00:00] Hello everyone, my name is Kent C. Dodds and you're on EpicReact.dev where you're going to get freaking good at React. I am so excited that you're here because this is version 2 of EpicReact.dev. Years ago I launched Epic React and it became such a huge hit. So many people loved it and continued to use it for years and years.

[00:23] But React has evolved and the ecosystem around it has evolved. And so I've created a version 2 of Epic React that improves not only the material itself, upgrading everything to TypeScript and using the latest and greatest practices and APIs from React 19, but also I have added a completely new learning environment that is going to just knock your socks off. I promise, you've never seen anything like this before. So whether you're just barely getting into React and you wanna make sure that you're using the best practices and just getting off on the right foot, or you've been developing with React for a really long time and you wanna get yourself upgraded to React 19, this is the course for you because it's going to help solidify in your mind the fundamentals of React all the way to the most advanced features of React. In fact, we even build a framework based on React so that you can really understand how React works.

[01:22] Now, I'm getting ahead of myself, so let's go ahead and take a tour. We have React Fundamentals. This is going to get you started from the very, very beginning of React. In fact, we start without any React at all. It is just an index.html file.

[01:36] You're creating a DOM node the way that React does, and you're rendering that to the screen. This is really important because it helps you establish and understand React's role in the whole application on the web. And so we start by creating a DOM node and then we add in a little bit of React and we add a little bit more and a little bit more and over time your mental model for what React is and its role in building a user interface gets a lot more clear. So, starting with an HTML file, and then we get into simple scripts, and then we can jump into the TypeScript and doing a lot more complicated things, all part of React fundamentals. We even get into error handling and declarative error handling, the way that React does it in forums and all of that stuff.

[02:23] Then we get into React hooks. And this is the primitive for React components is a hook that allows you to hook into React's lifecycle for a component and add some state to a component, add references that persist through the lifetime of the component, add side effects, and all sorts of things. So lots of really cool things that we learn about in React Hooks. And we actually have a little bit of some performance stuff in here too to teach you why does the useEffectCleanup function matter so much and we've got a lot of really cool things that you can look forward to in the React Hooks Workshop. Then we have the Advanced React APIs Workshop.

[03:03] This actually originally was called the Advanced React Hooks Workshop, but then I started adding a bunch of things because React 19 adds a bunch of useful functions that are not necessarily hooks. And so in here we also have Flesh Sync and various other things as well. And so lots of really good lessons in here about some of the more advanced APIs that you're going to be using as you progress on your journey to getting freaking good at React. So this one's really awesome, this is going to take you plenty of time and thought on understanding how contextual state management and context is working throughout your application, focus management, a bunch of other things. Advanced React APIs is really cool.

[03:47] React Suspense used to be an experimental thing in Epic React. So in version one, this was like a big experimental warning, hey, this isn't a thing yet. In version two, React Suspense is an official part of React and it's awesome. And we get beyond just the suspense part, but also use deferred value and transitions and things. And it's very, very cool.

[04:08] This is how we manage asynchrony in React. And I am really, really jazzed about what the React team has put together for us with React Suspense. So we actually build our own implementation of the React use hook so that you really understand how that hook is consuming a promise and resolving to that promise the way that use hook works. So we build it from scratch and then we use the actual hook itself. We have a whole bunch of other really cool things that we're doing in here with use deferred value and various other hooks related to these concurrent features that React has added.

[04:44] And then we go from there into advanced React patterns. So now we're gonna start putting our library developer hat on, or maybe we're building our own reusable components at our company. And not only reusable components, but also we're product engineers, and we want to make sure we have nice lines dividing our different pieces of our application. So we have lots of really good patterns that I either developed or learned in my process of writing my own libraries and things. And also some really good patterns around like how you structure your applications.

[05:20] And in fact, in a world with React Server Components, spoiler alert, some of the patterns that we learn in here are going to be very critical for you using server components efficiently as well. So I'm very excited about advanced React patterns. And then React Performance. This one is actually interesting. This used to be a workshop that showed up before some of these others, but because React Suspense added a lot of really cool things, Now we need some of that knowledge for some of the performance optimizations that we do.

[05:50] So I bumped it down and it has a whole bunch of really cool things that are going to allow you to really understand what's going on in the browser, what is making this thing slow. And some of the fixes that we have are not necessarily fixes in React. There are fixes in other things, and then we use React to take advantage of those improvements. And so I would say that this is probably the workshop where we make the fewest number of changes to the code, but we see like really, really big improvements in the performance. And to be able to see those improvements, we actually spend a lot of time in the browser developer tools and the React developer tools, so that you can really understand what is going on under the hood here, why is it slow, and why are these performance optimizations I'm doing improving that performance?

[06:41] Really, really awesome stuff here. I'm excited for you to try that out. And then we have React Server Components. This is the wonderful new feature in React 19, probably the biggest one that is making a lot of news and people are excited about. In React 19, we have React Server Components and Form Actions and Server Actions.

[07:01] And so we're going to be talking about those at length and the way that we do this though is we build our own framework out of react server components so we're it's it's just like node and react packages and then like I think React error boundary is the only non-React package, and then that's it. That's it. The browser, node, and React stuff. And we build our own framework that supports React server components. And this is going to really help you understand how RSCs and form actions and server actions work because you will have built your own framework and then whatever framework you end up going to, you will be able to use RSCs much more efficiently.

[07:41] So it doesn't matter for all of these, which framework you end up using alongside React, you're going to understand React so deeply that you will be able to use that framework more effectively. And then finally as a bonus for those of you who grabbed the pro tier, you're going to get interviews with experts. I interviewed 16 really awesome people and it's less of an interview and more of a chat between two web developers who just really, really love React and are very excited about what we're talking about. So these people, some of them will be familiar to you, others will be familiar once you're finished listening, but very awesome and impressive individuals as well. Not just React DOM stuff, but we've got some React Native stuff that we talk about in here.

[08:25] We talk with some of the React team, we talk about accessibility, we talk about community building, lots of really awesome conversations going on in here, open source, yeah, and we talk with framework authors and some real-time stuff. There's, man, it's really cool, some of these conversations that we have here. So I'm excited about that. Now, I understand that not everybody is super like, I'm not sure this is gonna work for me. I feel like I put together a really awesome learning experience, but I wanna make sure that people can appreciate that and try it out.

[08:58] And so I have the Get Started with React tutorial. It's a free tutorial. Just sign up for an account and you can access all of this. And you have the entire experience. You have access to the videos, you have the progress tracking, and it'll help you get back to where you're supposed to be.

[09:14] All of that, the diffing, the testing, everything. And this is actually the first four exercises of the first workshop. And so this will give you an idea of what the experience is like. And I think that you should really definitely try this out either way because it will help you get a good mental model of React. So it's going to be awesome.

[09:34] I'm so excited to have you here and join the 30, 000 plus other developers who have gotten really freaking good at React from Epic React. Scroll down a little further, you'll be able to find some frequently asked questions and other really cool things. And the last thing I want to leave you with before I leave you is I want to talk a little bit about the Workshop App experience because this is probably unlike anything you've ever done before unless you've taken one of my workshops before, because the workshop application is one of the secret sauces to how you're really going to retain the knowledge that I share with you. Now, you can get all of this knowledge that I share on Epic React, you can get that anywhere, all over the internet, that's like obvious, right? This is, there's no secrets that I'm sharing here, this is all open source, so you can find it in the comments of GitHub issues and in YouTube videos and whatever.

[10:28] But What Epic React offers is this learning environment that will give you a learning path so that you're not trying to become your own instructor and facilitator of your learning. This will give you a solid path to go down and the workshop app experience will help you stay on that path and not get distracted by all the busy work. So this workshop app experience you run locally on your machine is awesome. You have all of the available applications for each one of the workshops as well as the tutorials. You can look at the deployed version on the internet if you want to just reference things really quickly, but you really should be setting this up locally on your machine because then you can use your own editor.

[11:10] You can, there are links to open up specific files in your editor so you know exactly where you're working in. You'll have a really cool diff tab that will show you the difference between your work in progress and the solution, so if you get stuck, you're like, I'm pretty sure this is exactly the same, the diff tab will tell you whether it is. And we also have a test tab that will kind of guide you to make sure that you actually accomplish the tasks. The instructions are all going to be in here that will tell you, okay, I'm the project manager, here's what our project needs you to do. And then we also have even a co-worker that says, hey, this is what I did, go ahead and take a look at the diff to see what I did, now you're going to pick up from where I left off.

[11:50] So lots of really cool things. I'm not going to go too much more in detail than this because you can watch this video yourself to get an idea of what the Workshop app has to offer for you. But there is a lot And I think that you're really gonna dig this. This is why I think it's really important for you to just take the time, try Epic React for free today, and get an idea of what this experience is like. Get using React 19 right now because there's a lot available for you.

[12:22] So that's EpicReact.dev. Thank you so much for coming and getting a preview of what this is all about. I'm so excited to see you in the Discord with the community answering and asking questions and seeing you go through the workshops and everything. I hope you have a really awesome time and I really want to hear about the awesome things that you build from what you learned in Epic React. So let me know, hit me up on the social medias and stuff.

[12:47] Thanks so much for coming. We'll see you around the internet.