 Hello friends, I'm Jantastic and welcome back to my YouTube channel. I haven't posted here a lot recently But it's my favorite time of the year and we are going to go through react holiday now Let's react holiday react holiday is my 25 day course celebration of react and so this year we're gonna talk about react 18 and all the changes that you need to know about in order to get your app into ship shape for react 18 So without any further ado, let's dive into what we learned this week every week I want to do a YouTube recap of what we've covered in the newsletter. So what's the newsletter? Glad you asked Let's check it out So what we have over here is react dot holiday You can sign up for the email course right here. It looks like it's being the old version's being cashed for some reason I don't know inexplicable Gatsby was really aggressive about caching and so even locally. I'm seeing this this this old version, but It doesn't matter the email thing will go be the same It's just that I'm telling you that this is about react 18 up here You can sign up give me your email address. You'll get 18 lessons for videos and three I think quizzes to test what we've learned. So that's where you sign up That's what we're gonna be talking about and we'll talk specifically today about the first three emails That went out this week first is about the gradual adoption strategy What I want you to know here is is that everything that we cover is covered on the react 18? Working group repo. So you go to react WG you find that react 18 working group and go to Discussions and you'll see everything that we're talking about here now in this email course I've just broken it down for you. So it's a little bit more digestible step-by-step direct Now one specific Article that you'll be interested in is the introduction to react 18 where they specifically talk about the gradual adoption Strategy now what the gradual adoption strategy means is is that you can actually run your app as If it is running in react 17 So if you npm install react beta Then you'll get the latest version the working version of react 18 And if you change no code, it's going to work as if it is running react 17 really impressive But then there's a way to opt into react 18. So super cool. We're gonna cover that in just a second So that is this article you can read it in all the discussion here In day two we talked about versioning versioning is a very important topic to understand if dealing with react So if you go over to npm find the react package and hit versions You'll see these tag aliases that you can use to install various versions of react so if you just do npm install react it's gonna give you the latest version and Let's see what that is. So latest today is 17.0.2 with a grip of installs Now there's some additional tags that you can use to install react and these are what we're gonna explore today so Experimental is the most Experimental edgy they make no guarantees about any of the apis that are in this experimental branch Even making it into a release of react so Experimental means experimental. You never know what's gonna actually come into react from this Now the kind of next most experimental branch is next Okay, so next is whatever the next release is so that could be a beta that could be an alpha whatever the kind of like next version of What we think the next possible version of react is going to be however it can point to beta or alpha So it may be less stable at times depending on what the development cycle looks like now You'll notice right now that beta and next are actually the same version So 18.0.0 beta and then that hash at the end of it So if you use beta or next right now, then you'll get the same thing However, this safest version of these future versions is going to be beta so this is going to guarantee that you you're using a version that's actually intended for eventual release and so it's only gonna have features that are intended for release and have been really pretty well thought through discussed and You know communicated at this point by the community so those are your versions the version that we're going to focus on is beta as I'd mentioned already and That's what we'll use to actually install react 18 beta with all of the APIs in there kind of most stable iteration So we can close that and here you can see we have a react App running in react 17 not 18. So let me reorganize these pains just a little bit and we can update this So this is a repo that I will share to subscribers in the newsletter and right now It has a pretty conventional react 17 setup. So we import react. We import react Dom. We have an app Component and let's see we create a route and then react Dom render our app to the route. So Let's use what we've learned about react versions and update that now So we'll say npm actually this repo uses yarn. It's a create react app. So we say yarn add react at beta and react Dom at Beta So we can hit that and then I'm gonna open up our package Jason while that's running Okay, you saw that happen right away. So we had react 17.0.2 before and now it's react 18.0.0 Dash beta dash this shot and that's gonna change as they release, you know new versions So we have that let's save Well, actually we don't need to make any changes. So we're just gonna say yarn run again or yarn start again and Refresh our app perfect Open this up and see what happened now if everything worked We're gonna see a warning and so this is a new warning specifically for react 18 What does it say react Dom render is no longer supported in react 18 use create route instead Until you switch to the new API your app will behave as if it's running in react 17 learn more And so we can click this link and get sent to the article on how to replace Create route isn't loading for some reason. There we go. Okay, so here we have everything that we need to know to change From react 17 to react 18 now It's important that react 17 still works and you'll see in later lessons how we can use this to our advantage to incrementally migrate our applications But for now, let's just go through and run through the process of changing from the legacy create route API to the new route API We have this here and we're just gonna change something ever so slightly. We're gonna take our route We're gonna move it over here create routes use that new API and Put it there Okay, now once we've created a route with our route element Then we render our application to it So it goes from like a one stage to a two stage process now the cool thing is that we can actually create our route in isolation and then call render on it at different Stages, which is really interesting. So we hit save and then let's refresh our app and that error goes away pretty awesome So that's it. That's all that we did for this week was we talked about The gradual adoption strategy what it means and why it's important. We talked about versions right now We're gonna be using beta It's the safest version that you can be using to be testing out react 18 and we talked about this new create route API So that's really it for this week and if you're following along Thank you so much for following along if you're not yet following on go to react that holiday and Sign up. I'll be on the other side sending you emails and videos and quizzes So thanks so much for being here. You're awesome. Have an awesome holiday season And I hope to see you in those emails. If not, I'll catch you next week on another one of these recap videos See you later