Welcome back.
Now it's time for us to get started with the front end part of our application.
And I have already created Fresh React application and it's running on Port 3000.
And I added a folder called Client Inside the Project folder.
Now this is my client folder and then this is my server folder.
All right, so let's go ahead and then install the packages that we need.
We are going to use pairing cases for the UI and then we're going to use React router down version six
for navigation.
So let's go ahead and then install tearing CSS.
So if you click on the documentation or docs for short, we have the installation guide and we are going
to use the framework guide.
So let's click on the framework and let's select the framework that we are going to use.
We are going to use a library but not a framework because React is a library.
So let's click on the Create React app and let's look at the installation.
First step is that we need to create Fresh React application and we have done it.
The next step is that we need to install tearing CSS and this is the command.
So let's click on this icon here to copied to clipboard and let's go to our project.
Let's open our terminal and I have open instance of my terminal.
So here is for installation.
So our paste that so for this installation is going to install tearing CSS processes and then auto prefix
and after that it's going to create a new file called tearing CSS and we are going to install this one
as dev dependency.
So let's hit enter.
Ain't finished installing.
If we check our folder, we can see a new file called tearing dot config dot js dns packet that we need
to install a react router dom.
If you go to the website, that is a re act router dot com and this is the page.
The next step is that let's click on New to React Router and let's look at the installation we are going
to install using John so we can use NPM to install or we can use John.
So let's copy this snippet and let's go ahead and then copy that.
So make sure that you add the same version as at version six and let's hit enter.
Now we are done with the installation, so let's finish up with the configuration of CSS.
So here we go.
After that, let's look at the steps here.
We need to include this file, so let's copy this one.
And now back to the file that is tearing dot config the JS.
Let's replace that one with this.
And there we go.
The next step is that we need to include this snippet inside our main CSS file.
So let's copy this one and now let's locate our index dot CSS file and it is inside of C and then index
dot C as S.
So for this one, let's move everything and let's paste the Haven CSS configuration code and now we
are done with the table in CSS.
So next step is that let's try to use a simple table in this class to make sure that everything is correct.
Let's give each one and our call this one as.
And let me add one class as class name is equal to text dash green and then 200.
So let's save it.
And now let's check it out.
And you can see that I have the green.
Let's change the opacity to 800.
So this means that access has been configured correctly.