00:00 So far, everything that we've done in this workshop can be done without any client-side JavaScript whatsoever. Because Remix is focused on progressive enhancement, that means that a regular link click is going to do a full page refresh and it's going to do a server render of the next page. That works just fine.

00:18 A submission of a form, that also is going to do a full page refresh, but Remix is able to convert that post request to a regular request that we don't have to worry about whether it was made with JavaScript or not. And so we don't actually need to have JavaScript on the page for everything that we're doing so far.

00:38 And in fact, adding JavaScript can actually make things worse until we handle some specific cases. That said, adding JavaScript will make things way, way, way better. So I'm excited to talk about scripting. So a couple of things that adding scripts to the page makes better is navigations. Now you don't have full page refreshes

00:57 when you click on a link or submit a form. That's actually really nice. Like imagine if every time you'd like to post on social media, it did a full page refresh. No, thanks. No, no, no, no. I would like fewer posts. Also, pending UI, the ability to just add a little spinner in place, or the little bar that goes across the top,

01:16 that's pretty common in the custom pending UI experience. All that the browser can give us is a spinning favicon. So we want to add JavaScript for that sort of experience. Also, accessibility. There are a lot of UI components that our users are expecting that are impossible

01:36 to make accessible without client-side JavaScript. In fact, lots of them are impossible without client-side JavaScript at all. But even if you are able to do something with just pure CSS, you probably can't make it accessible without JavaScript as well. And then prefetching stuff.

01:52 So like being able to make it so if I navigate to a page, I can preload all of the data so that it shows up in this prefetch cache. So regardless of how fast my network is, it can be really fast to get to that page. So those are a couple of the reasons

02:11 why we want to have JavaScript on the page, in addition to all of the other cool interactive things that you can do when you have JavaScript on the page. So to give you an idea of how scripting works in HTML, you have a script with a source and you give it the path to the script. That's it. There's definitely more to it, though.

02:31 You can also inline some JavaScript on the page that can be useful for some situations. And then in the modern day, we also have modules. And so you can say type is module. And then inside of here, you can specify, like do regular imports and all of that stuff. Pretty cool stuff that we can do these days.

02:50 And then you also can say type module and a path to some JavaScript module. One of the challenges with taking over as far as page navigations and stuff, preventing the full page refresh, is we have to say event prevent default. So there's a lot of things that the browser does for us, like handling race conditions

03:10 and making sure that if there's multiple submissions, what do you do with that? And if we go here and then we say, I wanna go here instead, the browser takes care of canceling things for us automatically. Luckily for us, Remix is going to emulate the browser's behavior. So you really don't have to worry about this very often at all.

03:29 But that is something that you do need to be aware of happening, is once you add scripts to the page and you start in a Remix app and you have the uppercase form and the link and everything, that's gonna prevent default, which is the desired behavior. But now all of a sudden, Remix is emulating the browser behavior for us. Another thing you're gonna need to know

03:49 for this exercise is, we have an entry file for our client. And I'm gonna tell you a little bit about how there are two bundles of our application, and one for the server and one for the client and stuff like that. But it's useful for you to know that we also have a place that's our entry for our client-side code.

04:09 So if you need to run some client-side code before or after we hydrate the browser and stuff like that, you can do that here. And then we also have some of these special components that we've got. We've already talked about the links and meta, but we also have scripts. And there are a couple other components

04:29 that we're gonna be using here as well. So you get, again, you're in charge of everything between HTML and closing HTML. So you get to control whether or not the scripts are loaded on the page. And you can even make this dynamic if you want to, which is pretty cool. And then finally, we will be doing some inline JavaScript. And in React,

04:46 we have some automatic cross-site scripting protection. And so to sidestep that or to get around that protection, we opt into dangerously set inner HTML, which allows us to specify our JavaScript code. This is very dangerous for sure, but it is only dangerous

05:04 if you actually are inputting user input into there. So we will be using this and it is totally legit and not a problem. But yeah, just don't ever use this dangerously set inner HTML with user submitted content. So with that, I think you should have enough to get going on the first step of this exercise. So have a good time with it.

05:24 And yeah, you rock.