Okay, now it's time to start thinking about the client side of our application, the part that's going
to provide the user interface aspect of our application to the end user.
Now we're going to be using react for our client side application.
But we're going to use a tool to create the react application.
And the current favorite way to do this by developers is to use vite.
The react team did actually used to have their own tools for creating react projects, but they quite
correctly decided that others were doing this better and their tools were faster than the Create React
app that we used to use to create a react project.
And in fact, the react team have now discontinued that and leave it to others.
But vite is good and it's fine, and it is extremely fast when it comes to hot reloading our react application.
So if we take a look at get started for vite, and if we take a look at the overview The French word
for quick is pronounced vite.
Something like that.
There's a French woman that pronounces it better than I can do if you click the little volume button
there.
But it's designed to provide faster and leaner development experience for modern web projects.
Now, it's not just for react this, it is for other languages or frameworks or libraries as well.
But we'll of course be using it for a react project, and it gives us a development server, which is
useful, of course, to be able to start and test our application as we go along.
And it also comes with extremely fast hot module replacement, which means that as we make code changes
to our application, if we've got our browser side by side as we're writing the code, then we're going
to see the change pretty much instantly inside the browser.
So that is great.
So this is what we're going to install.
And the version of react we're going to use.
I'm just going to talk about this very briefly.
If we look at the version number for the current version of react is 18 .3.1.
Now react is coming to the end.
Or not react I should say react 18 is coming to its end, soon to be replaced with react 19.
Now just a little bit of history.
Recent history.
React 19 release candidates.
This was released in April 25th of 2024.
But they've hit some kind of snag and the release candidate has never made it into released and stable.
So we can use react 19, but it isn't production ready yet.
So what I'm going to do for this project, just to try and make it a little bit future proof, but kind
of sort of future proofed just so that we can guarantee that the latest features that I'm using to demonstrate
are guaranteed to work in the next version of react regardless.
So we're going to use react 19 release candidate.
And even though it's technically not released, we'll still use this.
But if you want to stick with the stable version of react 18, I'm going to stick with using the latest
features of react for this version.
But just to make doubly sure that they work in the next version of react, I'm actually going to use
react 19.
So that's the approach we'll take.
So we're going to go ahead and use vite to create our project.
And if we take a look at the manual installation and we don't want to install vite or we don't need
to install vite, I should say if we just come up a bit in the documentation and scaffolding our first
vite project, then we can use this command to create it.
So I'm just going to copy this into my clipboard.
And let's first of all take a look at the compatibility note, which requires Node.js version 18 plus
or 20 plus.
However, some templates require higher node version to work.
Please upgrade if your package manager warns about it.
So let's first of all check which version of node we have installed.
Now, I would have covered this in the earlier lesson about setting up our developer environment, but
let's just double check which version which we can get by typing in node dash dash version.
And this is going to output whatever version I'm currently on.
Now this is version 20 which meets the compatibility requirements.
And please make sure you're on version 18 point something or version 20 point something.
Do try and follow and abide by the documentation when it comes to this.
There will be a later version of node available, but I would really recommend as far as possible sticking
to what they suggest inside here, just to give yourself the best maximum opportunity of success.
So I'm just going to copy this command, head back to the terminal and we want to be inside the solution
folder here.
Please do not be inside your API folder.
We need to be at the solution level.
So I'm just going to paste in that command and press return.
And then it's going to ask us some questions.
Are we okay to proceed.
Yes.
And press return.
And we need to give our project a name.
So I'm going to just go for really simple names on this and tell it what its purpose is.
As the name it's the client.
So I'm going to call it client and press return.
And then we get to select a framework and we've got various options.
But of course we're creating a react project.
So we're going to select react.
And I'm going to choose that one.
And then we can select a variant.
And I'm going to go for well we're going to use TypeScript for sure.
But there's an option here for TypeScript plus SWC.
And what is SWC.
I hear you ask?
Well, I'm glad you asked because that's the speedy web compiler.
And basically it's just going to be slightly faster, I guess, than what is already very, very fast.
I doubt if you'd be able to tell the difference between them, but we'll go for this one because why
not?
Let's just choose that.
And there we go.
Now we've got our new project created, and it's given us some instructions about what to do next.
We need to CD into the new client folder that would have been created.
Then we run npm install and then we run npm run dev.
But before we get to the npm install, we're just going to check a few things first as well.
So I'm going to clear this window.
I'm going to CD into the client anyway.
And if I just list the contents well we can see we've got the files and folders that it provided.
But what I do want to double check, because currently there isn't a way to use it so that we can get
react 19 release candidate just by using the vite tooling.
So if we go to the File Explorer view not Solution Explorer, we will not be able to load up our client
project.
Inside the dotnet Solution Explorer view, we have to use the file and folder system.
But we have a client folder inside here now.
And if we go and take a look at the package.json, this is the list of the dependencies for this project.
And we can see that it depends on react because that's what we selected.
And react Dom the domain object model.
We're going to be using the web browser version of react.
There's also React Native which is for mobile applications.
But we're not going to look at that in this course.
Now I want to get this up to react 19 release candidate.
So I need to effectively update these dependencies.
And the rest of them are developer dependencies.
We're not worried about these, but we do want to update these so that we're using react 19.
Obviously if you're from the future and react 19 has been released, you will not need to do what I'm
about to demonstrate, because I'm just going to make sure that I get the react 19 release candidate
installed.
So please be inside the client folder before running this next command, and we'll just execute npm
install react at rc for release candidates and react dom at rc.
And we'll press return to go ahead and get this added to our project.
So what we should see if we go back and check our package.json, we should find that we have the react
19 release candidates available now.
So we'll go ahead and just clear this window again.
I'm just going to run npm install and make sure that still works just fine.
Of course it does.
And then we can execute npm run dev just to make sure our project is running as we want it to.
And we can see that we've got something going on that's listening on localhost 5173.
And if I just copy that URL and paste it into a spare tab in Chrome, then we can see that we get the
default page being displayed here.
Now I don't particularly want to use that port number.
There's nothing wrong with using that port number.
But react always used to start on port 3000.
I guess I'm just used to it.
And before we move on, I just want to make that small change.
So if we go to the configuration file, which is v dot conflicts, we'll come back to this soon anyway
for further configuration.
But for the short term we just want to adjust the port that this is running on.
So I'm going to specify server and then add a colon.
Open curly brackets.
Add a comma below that final closing curly bracket.
And then we can specify a port number of where we want our application to run on.
And now it's changed to port 3000.
And that change has been picked up immediately.
So now it's running on port 3000.
If we go back and I change this to localhost 3000, then we've got our application up and running.
So now we've got a react application.
Next we'll take a look at what's inside that and what's responsible for displaying what we see in our
browser here.