WEBVTT 00:00.290 --> 00:05.030 Okay, now it's time to start thinking about the client side of our application, the part that's going 00:05.060 --> 00:10.040 to provide the user interface aspect of our application to the end user. 00:10.070 --> 00:14.360 Now we're going to be using react for our client side application. 00:14.360 --> 00:18.320 But we're going to use a tool to create the react application. 00:18.320 --> 00:23.480 And the current favorite way to do this by developers is to use vite. 00:23.930 --> 00:30.830 The react team did actually used to have their own tools for creating react projects, but they quite 00:30.830 --> 00:38.330 correctly decided that others were doing this better and their tools were faster than the Create React 00:38.360 --> 00:41.090 app that we used to use to create a react project. 00:41.090 --> 00:46.190 And in fact, the react team have now discontinued that and leave it to others. 00:46.190 --> 00:54.620 But vite is good and it's fine, and it is extremely fast when it comes to hot reloading our react application. 00:54.620 --> 01:00.640 So if we take a look at get started for vite, and if we take a look at the overview The French word 01:00.640 --> 01:02.920 for quick is pronounced vite. 01:02.950 --> 01:04.120 Something like that. 01:04.120 --> 01:10.450 There's a French woman that pronounces it better than I can do if you click the little volume button 01:10.450 --> 01:10.930 there. 01:10.930 --> 01:15.610 But it's designed to provide faster and leaner development experience for modern web projects. 01:15.640 --> 01:21.610 Now, it's not just for react this, it is for other languages or frameworks or libraries as well. 01:21.610 --> 01:28.240 But we'll of course be using it for a react project, and it gives us a development server, which is 01:28.240 --> 01:32.920 useful, of course, to be able to start and test our application as we go along. 01:32.920 --> 01:39.580 And it also comes with extremely fast hot module replacement, which means that as we make code changes 01:39.580 --> 01:44.620 to our application, if we've got our browser side by side as we're writing the code, then we're going 01:44.650 --> 01:48.760 to see the change pretty much instantly inside the browser. 01:48.760 --> 01:50.380 So that is great. 01:50.380 --> 01:51.850 So this is what we're going to install. 01:51.850 --> 01:54.070 And the version of react we're going to use. 01:54.070 --> 01:56.350 I'm just going to talk about this very briefly. 01:56.530 --> 02:01.200 If we look at the version number for the current version of react is 18 .3.1. 02:01.200 --> 02:03.360 Now react is coming to the end. 02:03.390 --> 02:10.830 Or not react I should say react 18 is coming to its end, soon to be replaced with react 19. 02:10.860 --> 02:12.420 Now just a little bit of history. 02:12.420 --> 02:13.710 Recent history. 02:14.070 --> 02:17.340 React 19 release candidates. 02:17.370 --> 02:22.470 This was released in April 25th of 2024. 02:22.710 --> 02:30.420 But they've hit some kind of snag and the release candidate has never made it into released and stable. 02:30.420 --> 02:35.880 So we can use react 19, but it isn't production ready yet. 02:35.910 --> 02:41.970 So what I'm going to do for this project, just to try and make it a little bit future proof, but kind 02:41.970 --> 02:48.090 of sort of future proofed just so that we can guarantee that the latest features that I'm using to demonstrate 02:48.120 --> 02:52.320 are guaranteed to work in the next version of react regardless. 02:52.320 --> 02:56.220 So we're going to use react 19 release candidate. 02:56.550 --> 03:00.960 And even though it's technically not released, we'll still use this. 03:01.020 --> 03:07.200 But if you want to stick with the stable version of react 18, I'm going to stick with using the latest 03:07.200 --> 03:09.030 features of react for this version. 03:09.030 --> 03:13.620 But just to make doubly sure that they work in the next version of react, I'm actually going to use 03:13.620 --> 03:14.910 react 19. 03:15.150 --> 03:16.770 So that's the approach we'll take. 03:16.770 --> 03:22.110 So we're going to go ahead and use vite to create our project. 03:22.140 --> 03:28.380 And if we take a look at the manual installation and we don't want to install vite or we don't need 03:28.380 --> 03:34.260 to install vite, I should say if we just come up a bit in the documentation and scaffolding our first 03:34.260 --> 03:39.870 vite project, then we can use this command to create it. 03:39.870 --> 03:42.030 So I'm just going to copy this into my clipboard. 03:42.030 --> 03:49.410 And let's first of all take a look at the compatibility note, which requires Node.js version 18 plus 03:49.410 --> 03:51.270 or 20 plus. 03:51.660 --> 03:55.110 However, some templates require higher node version to work. 03:55.140 --> 03:57.830 Please upgrade if your package manager warns about it. 03:57.860 --> 04:02.540 So let's first of all check which version of node we have installed. 04:02.540 --> 04:07.910 Now, I would have covered this in the earlier lesson about setting up our developer environment, but 04:07.910 --> 04:13.040 let's just double check which version which we can get by typing in node dash dash version. 04:13.040 --> 04:16.040 And this is going to output whatever version I'm currently on. 04:16.040 --> 04:20.420 Now this is version 20 which meets the compatibility requirements. 04:20.420 --> 04:25.700 And please make sure you're on version 18 point something or version 20 point something. 04:25.730 --> 04:30.350 Do try and follow and abide by the documentation when it comes to this. 04:30.830 --> 04:35.960 There will be a later version of node available, but I would really recommend as far as possible sticking 04:35.990 --> 04:42.800 to what they suggest inside here, just to give yourself the best maximum opportunity of success. 04:42.800 --> 04:49.310 So I'm just going to copy this command, head back to the terminal and we want to be inside the solution 04:49.310 --> 04:49.910 folder here. 04:49.910 --> 04:52.130 Please do not be inside your API folder. 04:52.130 --> 04:54.200 We need to be at the solution level. 04:54.200 --> 04:57.010 So I'm just going to paste in that command and press return. 04:57.010 --> 04:59.050 And then it's going to ask us some questions. 04:59.080 --> 05:00.460 Are we okay to proceed. 05:00.460 --> 05:01.330 Yes. 05:01.450 --> 05:03.040 And press return. 05:03.040 --> 05:05.140 And we need to give our project a name. 05:05.140 --> 05:09.850 So I'm going to just go for really simple names on this and tell it what its purpose is. 05:09.880 --> 05:11.710 As the name it's the client. 05:11.710 --> 05:14.620 So I'm going to call it client and press return. 05:14.770 --> 05:18.010 And then we get to select a framework and we've got various options. 05:18.010 --> 05:20.440 But of course we're creating a react project. 05:20.440 --> 05:22.480 So we're going to select react. 05:22.480 --> 05:23.950 And I'm going to choose that one. 05:23.950 --> 05:26.290 And then we can select a variant. 05:26.290 --> 05:30.010 And I'm going to go for well we're going to use TypeScript for sure. 05:30.220 --> 05:33.520 But there's an option here for TypeScript plus SWC. 05:33.820 --> 05:36.190 And what is SWC. 05:36.220 --> 05:37.330 I hear you ask? 05:37.330 --> 05:41.650 Well, I'm glad you asked because that's the speedy web compiler. 05:41.680 --> 05:49.150 And basically it's just going to be slightly faster, I guess, than what is already very, very fast. 05:49.150 --> 05:55.060 I doubt if you'd be able to tell the difference between them, but we'll go for this one because why 05:55.060 --> 05:55.510 not? 05:55.540 --> 05:57.130 Let's just choose that. 05:57.130 --> 05:58.270 And there we go. 05:58.270 --> 06:03.640 Now we've got our new project created, and it's given us some instructions about what to do next. 06:03.640 --> 06:07.150 We need to CD into the new client folder that would have been created. 06:07.150 --> 06:11.200 Then we run npm install and then we run npm run dev. 06:11.290 --> 06:16.720 But before we get to the npm install, we're just going to check a few things first as well. 06:16.750 --> 06:18.700 So I'm going to clear this window. 06:18.700 --> 06:21.520 I'm going to CD into the client anyway. 06:21.520 --> 06:26.980 And if I just list the contents well we can see we've got the files and folders that it provided. 06:26.980 --> 06:33.550 But what I do want to double check, because currently there isn't a way to use it so that we can get 06:33.580 --> 06:38.620 react 19 release candidate just by using the vite tooling. 06:38.620 --> 06:43.780 So if we go to the File Explorer view not Solution Explorer, we will not be able to load up our client 06:43.780 --> 06:44.260 project. 06:44.260 --> 06:50.260 Inside the dotnet Solution Explorer view, we have to use the file and folder system. 06:50.260 --> 06:52.730 But we have a client folder inside here now. 06:52.760 --> 06:59.960 And if we go and take a look at the package.json, this is the list of the dependencies for this project. 06:59.960 --> 07:04.040 And we can see that it depends on react because that's what we selected. 07:04.040 --> 07:06.860 And react Dom the domain object model. 07:06.860 --> 07:10.010 We're going to be using the web browser version of react. 07:10.040 --> 07:14.450 There's also React Native which is for mobile applications. 07:14.450 --> 07:17.270 But we're not going to look at that in this course. 07:17.270 --> 07:22.070 Now I want to get this up to react 19 release candidate. 07:22.070 --> 07:25.940 So I need to effectively update these dependencies. 07:26.360 --> 07:28.490 And the rest of them are developer dependencies. 07:28.490 --> 07:34.670 We're not worried about these, but we do want to update these so that we're using react 19. 07:34.700 --> 07:39.740 Obviously if you're from the future and react 19 has been released, you will not need to do what I'm 07:39.740 --> 07:45.260 about to demonstrate, because I'm just going to make sure that I get the react 19 release candidate 07:45.260 --> 07:45.860 installed. 07:45.860 --> 07:52.670 So please be inside the client folder before running this next command, and we'll just execute npm 07:52.670 --> 08:00.800 install react at rc for release candidates and react dom at rc. 08:01.640 --> 08:06.410 And we'll press return to go ahead and get this added to our project. 08:06.410 --> 08:12.590 So what we should see if we go back and check our package.json, we should find that we have the react 08:12.620 --> 08:15.560 19 release candidates available now. 08:15.590 --> 08:18.410 So we'll go ahead and just clear this window again. 08:18.440 --> 08:22.760 I'm just going to run npm install and make sure that still works just fine. 08:22.790 --> 08:23.690 Of course it does. 08:23.720 --> 08:30.680 And then we can execute npm run dev just to make sure our project is running as we want it to. 08:30.710 --> 08:36.680 And we can see that we've got something going on that's listening on localhost 5173. 08:36.680 --> 08:43.550 And if I just copy that URL and paste it into a spare tab in Chrome, then we can see that we get the 08:43.550 --> 08:45.680 default page being displayed here. 08:45.710 --> 08:48.380 Now I don't particularly want to use that port number. 08:48.410 --> 08:50.500 There's nothing wrong with using that port number. 08:50.500 --> 08:53.260 But react always used to start on port 3000. 08:53.380 --> 08:54.910 I guess I'm just used to it. 08:54.910 --> 08:58.000 And before we move on, I just want to make that small change. 08:58.000 --> 09:06.460 So if we go to the configuration file, which is v dot conflicts, we'll come back to this soon anyway 09:06.460 --> 09:08.020 for further configuration. 09:08.020 --> 09:11.830 But for the short term we just want to adjust the port that this is running on. 09:11.830 --> 09:15.460 So I'm going to specify server and then add a colon. 09:15.460 --> 09:16.540 Open curly brackets. 09:16.570 --> 09:19.960 Add a comma below that final closing curly bracket. 09:19.960 --> 09:25.090 And then we can specify a port number of where we want our application to run on. 09:25.090 --> 09:28.060 And now it's changed to port 3000. 09:28.360 --> 09:30.970 And that change has been picked up immediately. 09:30.970 --> 09:32.860 So now it's running on port 3000. 09:32.860 --> 09:39.790 If we go back and I change this to localhost 3000, then we've got our application up and running. 09:39.790 --> 09:41.860 So now we've got a react application. 09:41.890 --> 09:47.410 Next we'll take a look at what's inside that and what's responsible for displaying what we see in our 09:47.410 --> 09:49.030 browser here.