And everyone and welcome.
So now that we're done with generating and installing the required software and packages, let's start
with the coding bug.
For that, you need to open Visual Studio Code, which is your code editor.
And after opening the just to record, you need to go to the library and click on the terminal and then
the new terminal.
So this will open up the new terminal, and now you need to create a real project since you have not
created an new project.
So now you have to create a bigger project for this particular section.
So if you're new to react, let me just explain you how you have to create.
Let me disclose this another terminal, OK?
So if you're new to react, let me just explaining how to create a React project and if you are a beginner
or intermediate level, no problem with that.
You just brought up with this information.
So you need to tap this command and wherever you are.
So you have to just be at as this like and be X. If you just take this A and B space, create Python,
React Hyphen App space and the name of the project and any name like you can provide any name here.
This is purely a string and any name which you desire to like create the product so you can add that
name and you need to, for example.
But then you need to press and Tony, you just return and then you will be able to create your product.
So after everything and done, this will take at least five to 10 minutes to create the product.
So don't panic.
It will install so many packages and modules.
So this takes around five to 10 minutes.
Ah, depending upon the processing power of your PC.
For me, it takes around five to 10, so it will take for you.
All saw this much only.
Don't worry, and it needs an internet connection.
So before installing this, before running this command, make sure your PC is connected to internet
or Wi-Fi.
OK, so this will take up to five 10 minutes and after you get a message in the terminal, which is
happy hacking.
And if you see that message, that means you have successfully installed or connected your project.
So after that project disclosure, you can just open it with a visual studio code.
And after opening it, you need to just you will able to see something like that.
Some familiar structures like that.
OK, so so you have freshly installed the React project.
You have to first freshly created products, so you will be seeing some more files here, some extra
files here because I have deleted some of the unnecessary files like they are not necessary for, but
for us, they are not.
So I'm going to get those files.
So you will also have to build those files since you've installed and you've created a new product,
new product.
So you'll be having some more extra files here, for example, like an important web, vitals or test
or something like that.
So you need to delete all of them and you need to keep only these files, which up in India.
So let me show you from the beginning, you will have a new audience.
You don't need to touch this folder at all.
Next, we will have a public folder.
You do need to take this folder at all.
And next, we have a sazi or the source for.
So you need to open this folder and you will have such files here.
So you do need.
Just keep this like says he will keep a GST, will keep it next door to see if it's required.
If you don't feel anything like wrong and that you can just keep it or you can just delete it, there's
no need an index or did.
This is very, very important.
Either all these files like baggage or some package lock, Jason, all you need to keep other old files
new to delete, and there's no need to keep them at all.
OK, so once you have deleted all the files and just cleaning up after finishing, cleaning up everything
you need to come to this, which is a.j.'s and your app drawer just to look something like this should
look something like this.
And there will be lot of things like report by vitals on importing the logo and all some logo like logo
dot as we do.
So you need to delete all that and your app drawer just to look like this like simple, cleaner and
crispy.
So it should look like this.
And after your a.j.'s is cleaning finished you with the cleaning?
So let me just check if this app is running on order to also check it like the way I'm checking it.
So provide any testing value here, for example.
Hello, world, and then you need to save it, and then you need to open the terminal so you can open
the terminal with the shortcut, which is a control plus metrics.
OK, so this is the previous command.
Let me just delete it and then.
OK.
Wait.
Uh, let me just clean it.
OK, now you need to go to the folder in which our product is operating.
So after creating the project with and be screened to your tap, you will get a folder in which all
your files and these files will be present to you need to go to was followed up by Sunni.
And for me, this project and then better and hit enter and let me see what are the components in the
folder.
So it is all these files which are here, I can see done.
I can see those files.
And one more thing I am using WCL here, which is Windows Subsystem for Linux.
So basically, this is a Ubuntu terminal.
So chances are high that you might be using a like command prompt or PowerShell, something like that.
So that doesn't affect anything because all the commands which I will be using are exactly the same.
So and then installing the packages running the process and all those commands and everything will be
the same.
So you don't need to worry about that.
And once you are here, you need to just like type this command, which is npm space start and then
start, and then you need to just hit downtown.
So it will take a couple of seconds to start the service.
So this will start start over on relegated port, where you will be able to see all the changes which
you may have made here.
So all the changes will be reflected on that port.
So that search for this.
And let us see what are the what are the things can see on the board?
And this basically you'll see this and OK.
So it shows that compile successfully and we are provided with the port and we have to go to this website
and this you are all basically this is a local host, basically who you really just go to the browser
and you just open.
We just need to just open the.
Open the website.
OK, so it's loaded, and if I refresh it.
This is Halloween, so that was a preview that was the like previous page, which I was demonstrating
in the introduction review.
So this is what we need to see.
Hello, world, because when we go to the Lake View School and after, yes, we have dived, hello world.
So here we are seeing a lowered.
OK, now we have made sure that our app is running and everything is perfect.
So if you have any errors, why?
Because while deleting, there might be some imports which are missed out.
So we just figured it out in the in the terminal only available to see like this import is missing and
this is not defined and that so you need to just tackle it out and everything should look like this.
So after that, you will not have any of the so last minute.
So let me just play this dominant.
And now we have to create components, so as you as we have seen in the introduction, we knew we had
a search component, a surge button and below that we had many of the things like temperature and icons.
And on before that, let me just create a folder that will be components.
Components in the components for another will create a file, which will be that will create two components.
What one will be the third component and the next will be the the component, which will be providing
us all the information.
So here we'll write.
Anything contrived search, I mean, dark?
Yes.
OK, so here we use a cool trick to import our boilerplate code.
So if you haven't started that extension, well, well enough, and if you're not, so let me just take
you to the extension page and come contortion next.
OK.
And you will be able to see this this extension right here.
You need to install this S1 redux.
And this is this will provide you with all the snippets right to react so up and just press control
plus speak.
Or if you are just type R FC and if you get the boilerplate code well enough.
And if you don't, for me, it doesn't work.
I don't know for what reason.
For some reason, it doesn't work.
So let me just press control shift copy.
Then I will get this E7 snippet first.
Then I have to click it and then I have to press R F C and OK.
Well, so we have got the boilerplate code.
So this is the default code.
Inside this, we will write all the code and basically all the GSX and all like based upon the logical
part.
Let's start creating the search component.
So what does a search component generally has?
It has input field in which you type down what you need to be searched and you have a search button
which gets clicked and then all the data we get.
So that's what we are going to create.
So I have already created a CSIS file for this and let me just create the file here and put the coordinate.
So we are not going to like deep dive deep into the CSC because if you go in like the today will be
like five to six hours long and I don't want that.
So let me just paste prosecutions, which I have already created.
And so basically this season's present like in these files, that presents the default, which we'll
be using, and this is the Syrian linked to the icons which we'll be using.
So make sure you have this and you will have it in the C in the C, because you you'll be getting the
code.
So, OK, so we'll be having this and this is all the users, and I'll be explaining it time to time,
but you need to just take a look at this.
So this will be useful for like this.
We are only creating one since Australia, and this one sees us file only.
That will be everything which we need.
OK.
So let me just hit Controller Steve and let me just go to the third main component here and now we will
import that file.
So then if I show you what happens, if I don't import that so mean it would be disruptive and we have
to create our own do.
So our day will be, let me just name it, any class names like rap or wrapper, anything you can name
it completely.
Any class name, which I'm providing here is according like on, according to the CSIS files.
So don't think that these are by default or these only we have to like, provide nor you can provide
anything.
And these are just according to because in this season's files, I've named according to them.
So that is why I am providing this.
You can write anything and make the modifications.
Industriousness?
Nobody.
OK.
So we have tried this frap.
And next we'll be providing a search component.
So search inside this will be providing an input tag.
So and then put back the type will be taxed also.
But we can provide search also because the nation will find they are providing that they have provided
a new value to the recorder to search.
So type in search.
Next, we'll be having a placeholder.
So this will have value of maybe like like type 30 name.
Or something like that.
Next, we'll be having an idea of search.
And excerpt that we provided back last name and everything.
So this is then what will next?
We'll be having Biden.
So we'll be having a button so that will have an hourglass team of search.
Bottom of cable and then will be have having button.
So.
And like if you don't put also it into a day, so it it works, OK, if you don't put into it.
Also, this will cause you to just give a name class name to the button.
So that will also work.
So we'll provide some sort.
Barton.
OK, again, I'm going to the same mistake, I don't know why I'm doing this.
OK?
And they have to provide.
First of all, you need to provide a button.
What is wrong with the internet?
Okay.
And you have to give the class name that will be the last name.
Then you'll provide the name here and you will provide a search button.
OK.
So this will be the button and inside the button you can write search.
But could be or that if you just say and let me check star stories on it.
Yeah, it's stunning and let me just go to the browser and.
What are the things which we see, we see nothing, we see nothing.
So do you know the reason behind this?
Do you know the reason why we are not seeing anything?
So that reason, I tell you in the next, what do you see in the next, do you?