00:00 Super, let's go to our package JSON, and we're going to update our dev script to include that import. There we go. So we've got our dash dash import server register RSC loader. So let's actually go to that file, register RSC loader. Inside of here, we want to import

00:18 the registration API for Node, and then we're going to register the file RSC loader. So now we're going to go to the RSC loader file. Of course, let's save this file. We don't want to forget that. A lot of this is already built for us. You could feel free to mess around in here if you want to,

00:37 but we want to just focus on what does this thing actually do? What is its purpose? So to that end, we're going to uncomment this little block, which is going to say, hey, when we're importing the edit text module, then I want to console log the source code that we've converted it to. So it starts out with one thing,

00:57 and now what does it end up looking like? So let's go to our edit text module now. The one thing that we need to add here for it to get transformed is use client. In fact, I'm not going to touch this, and instead, I'm going to come over here to our logs. I'm going to restart the app,

01:13 and here, we're not actually importing anything yet. So we'll leave the use client directive off, but let's come over here to our ship details, and let's import the editable text module. Then I'm going to uncomment all of these logs as well, so we can see what is the editable text.

01:32 So we'll two-string it, and then we'll also log all of its properties as well. So saving that, come over here, and we're going to get a big honking error, and also the source code of our module. So because we didn't have the use client on there, this module is as it is. It didn't change. We didn't touch it with our node loader.

01:51 So for that reason, we are importing this FlushSync API from React DOM, and remember, we're running with conditions React server. Remember, that's what we added so that we could do RSCs, and so we're getting an error here because in the React server condition,

02:10 React DOM doesn't export a FlushSync export, and so that's why we're getting this particular error. So this will actually help us make sure that we don't have any client components that are missing the use client directive. Now, it's important to understand that you don't have to add

02:29 use client to every client component because use client is more of a door like Dan Abramoff said. It's a door into the client-side, and once you get into the client-side, you don't need a door for your couch and a door for the TV and a door. Once you're inside, then it's all client-side. But we haven't actually created that door yet.

02:47 We're still outside where it doesn't have FlushSync. So what we need to do now is come over to our edit text here and say use client, and this will tell our node loader, hey, I want you to transform me into a bunch of registrations.

03:04 So now, this re-evaluates, so it's restarting our server automatically. We have our import register client reference that we saw before. We have the call to register client reference for editable text, and then when we console log this, the editable text function is

03:24 literally just the function that was passed here. Then the properties include things that are typical on functions, but also the type of and the ID, which if we bump this up a bit, you'll see we have our file colon slash slash users, can't see that, yada, yada, yada,

03:43 all the way to our playground UI edit text.js with the editable text identifier or namespace export name. So this is how React identifies this as a client component or as a React component at all, and then this is how it converts

04:02 that particular spot in the React tree into a client reference. So that's as far as we're going to get in this step of the exercise. We've got some console logs and stuff. We'll clean some of this stuff up, and then we'll get into the next step of the exercise where we can actually put this in our RSC payload properly.

04:22 So let's get into that in the next one.