This is where we left by creating fresh React application.
So let's make our hands dirty by creating our first React component.
Well, we've talked about the folder structure before.
So this.
How are you going to do?
Don't worry if you didn't see this color here, because I'm keeping track using this extension called
Main Gate.
So don't worry if you see this, I mean, color symbol here.
So the way we are going to start to create our component is that I want to start from scratch.
So because of that, we are going to delete the folder.
This is a folder where all our logic and files are being kept.
So let me delete that.
Making some housekeeping.
Now, let's see.
React is crying because we have deleted the actual folder.
The reason why I'm going by this way, is that I just want to know how to start react application and
how the files come together to make your React application up and running.
So after you go the the flow of hurry act application works.
Any time you start to create fresh right application, you don't need to delete the Z folder anymore
because you know how the files are being used and why they are there.
So the two most important files we need is before that let's create a folder called C, make sure you
name it as if you name it.
Whatever.
React will never know this folder where to locate the files that we are about to create.
So inside we need to files.
One is app dot js.
This is a convention.
Well, how how can we create a component?
Remember, we have two ways of creating react component.
One is using the functional component and then a class based component.
But we are going to create using functional component in this video.
The next video we are going to create react application using class based component.
Well, so what are the things we need to consider when creating a component?
Well, first of all, a component name might start with uppercase.
If you name it, something like this one React will never know that this is a component right now.
The first step.
The next step is if a component is a function.
So I'm going to create a normal function if you know how to create a normal function.
Right.
So let me comment here and call it as functional.
Component.
All right.
So let me clock this one so we know how to create a function, right?
But every functional component of this type of mistake here react component, always retain JC X and
we get back into JESSI'S.
Don't worry about what I'm going to do.
So in a normal functions in JavaScript, a function always returns some data, a value or a result,
right?
But in react, the component with a function I going to create is just going to retain some HTML called
G6.
So the first step is we can create a functional component using the normal I mean functional syntax
or arrow function.
So let's stick to the arrow function console and the app.
The name here must be uppercase equal to and then cons app is equal to and then my arrow function here
and my arrow like that.
So here we need to return something from here and what you are going to return is just a normal HTML.
So we add components, returns, what is HTML and what is called G6.
So we can return, let's say each one here and say that we're calm to react and that is it.
How finished creating my first component.
So all this component is doing this just I mean displaying where come to react the next step is that
I need to require this I mean this component into the entry point of my application.
So I need to export this means of exports.
Default.
And then the name of my component API, meaning that this file can be accessible or accessed by any
file in my application.
So now I have finished creating my first React component.
Next is I need to mount my component so that I be able to see on the screen.
So where can we mount it?
Where we need to create another file called index dot js.
Dot JS.
See that the name of this one is different from this one because it is not a component, just like a
normal function here.
Okay, cool.
So the first step here is that because we are going to mount our component inside the index, we need
to require the React APIs.
So first we import React, uppercase, react from React the first step and then we need the DOM the
DOM element.
So import.
These are the steps that are going to fill in time.
So you need to be familiar with that react.
Dom Make sure it type exactly as it is from React Dom slash client.
And there we go.
So the next step is what I need to require this app, because I want to mount the app inside here because
the index file here, JS file is going to inject the whole function into our public folder that is our
index or HTML and place it inside our div here as we discussed before.
Great.
So now let's continue on.
So the next step is we need to get the root element.
And the root element here is what we want to target here.
So here we need to create a variable count and called as root and equal to react.
Dom dot create root.
Then I need to select my element using document dot get element by ID because here is an ID.
We can change this one to class and can make use of what mixes of get elements.
I mean query selector and you can use the class.
So let's stick to the ID here.
So now you're going to select that by ID and the name of the name of my ID is called root, which is
this.
So we just this one.
Okay.
All right.
So not I've selected my element.
The next step is that on the root, I need to render that so dot render and then as a function.
And this function takes in our component, right?
So here we open as that and then we can provide a Dave and then first of all, let's require our app
component.
So inside my index, let's require the app of app up like this one from code dot slash and the app.
So now how can we call a component we don't quite as a function like this one like as you thinking in
this way but because it's a component, we have a different syntax of calling a component.
So it's I'm going to call it.
So here you bring.
Your anchor like that.
And then the app and like opening and closing like that.
So save it.
And now let's check our browser.
And now we're come to react.
And this is my first component.
So like I say that anytime we start right application and to start from scratch by creating the folder
here but just be aware of the most important files that goes on here, how to do it and how and when
to to use it and when to do it.
Okay, guys, now that you're able to create our first React component using class based, I mean,
use functional component in this video, let's go ahead and start with, let's say, using mean class
based component.