In the previous video, we saw how to the air component industry, you will see the next step of that
that is building this a cleared area component.
So first, we are going to go to the conference and create the new component criteria area.
Fear not, yes.
So once this is created now, we have to do with like the boilerplate coding that you do for every component
that is import react from react.
And then you have to create a function for the create area.
Created a company function.
Create media.
Now it will return.
Was going to do it.
Some text like.
The Bay Area company.
Now you have to export the component.
Export.
Before.
In India.
Once you are done with this boat and not just an important component of cleared area.
And bought.
Create area.
Companies that created so this is like this is why the reason.
Many of the developers using Visual Studio Port, it gives like it has so many what is its snippets
and function like the extensions that it becomes very handy for the developers, such as auto filling
or sometimes auto filling the class names out of language, HTML element of link, some lines of code
and everything.
So this is the reason why Visual Studio code is better for like.
You can also use other other ideas such as ATM and everything.
But I would prefer Visual Studio Port if you start if you are a basic, basic developer.
Yes, just getting started with the basics.
OK, now let's go into this medium.
So here, after inputting the criteria now variable, we have to use off the hand that we need to have
this clear data component type.
Appeared.
So, yeah, so once this is done now, if you open, you can see like we have got the creative component
that we have in the created at the that.
So now we don't want the pics like we want a form that takes the title that takes the content and everything
so that we build here and remove this.
And now from Class Glassman should be create not.
OK, so no need of action.
No, it's not so fun.
It will be a class name will be.
It's not.
And then if we need to have input inside, there's a.
Farm, right?
So we'll have the input.
And what type will be next?
The name will be title.
The name of the college told the title of the note that we are making on change.
So this will see in the coming few minutes.
So place holder should be Typekit.
I do some indentation so that it knocks the cord looks for me.
So, yeah, so this is then now offer their input.
We need to have the text in.
Xperia.
Everything should be monitored, so let me Typekit exterior exterior name will be content, the content
of the novel and then it knows and everything.
No need to specify columns means press federal should be.
So once this is done.
We just invented.
It is a pulling back, so you can simply use this.
So, yeah.
OK, so those are a lot of strong.
Yeah.
So now after we finish the important exterior.
We'll have the text directed all to have a placeholder.
The big unknown.
As you can see here in our episode, we're having taken place on.
So now, once you open this door, you can see we ought be having a Typekit that having a take note,
this can be expanded, but the default will be three rows.
If you're going to expand it, you can and then rows and columns are going to expand it using this,
you know, add over.
But once you're different, the default, when the page loads by default, it will have three rows.
But it looks like to me like it looks to be honest, it looks very bad or something like many of the
developers won't like.
This kind of bait should be very neat.
As you can see here, it should be very proper.
But that really is styling in a short period of time.
But before that, we want to see like.
We want to show the value that we are typing into the title and take a note so that we can store the
note object like to some edit or kind of stuff.
So for that, we need to use that books.
Now the concept of books comes.
So.
Function.
And they'll change.
This will take a moment.
First, let me finish writing the code, and then I'll explain line by line what that does.
Concert.
Name, common value.
Even not.
Said not.
We'll be taking the previous note.
And then when need done the new object?
This is the spirit operator will discuss, like waterboarding, this ferry operator, why I'd be using
this.
Carl, what does even target written everything with?
See everything after I finish writing the code?
That's right, accord with me.
Parallels with that.
Once you also finish like we can discuss what happened.
Previous not.
Name.
Would be like.
There's no change and no.
Is equals to use a state that in the state took.
It will have to approve to properties likely will be in default and then.
Content will be.
So one more like before we finish, you know?
On change.
We have to call the function and then change.
The same thing over here.
Don Change really called the change, and also the value will be.
No doubt, Typekit.
The same thing here.
Just copy this lengthy.
And then, Jane, there's a Bible no doctor on.
So we have to import the EU's debt and import that.
Well, it's not the.
So.
What?
So we cannot simply import react and hooks in a single line itself.
Because everything is from reactor only to.
Use multiple lines.
So some now what we have done is.
Until now, what we did, we just today created a big studio.
But how to track the changes happening inside them?
For example, if I'm typing something, for example, if I type in some random thing, the value should
keep punching whenever something is changing into text.
So that is why we are introducing the concept of books here.
What is basically the meaning of this sentence is we are creating a variable.
You know, as in programming, there are variables that can bend some value.
So this note is a variable and set note is a function that is used to change the value of this variable.
OK.
That we are defining using this use, Jacob.
So initially you started contents.
What does this note contain?
This is a variable, but what it contains?
This contains a JavaScript object that like this content, for example, if you will give inside your
straight book and set off for all of this, if you give up simple, empty audit, not contents and be
added.
But as of now, your giving object object with two properties, one title and content.
So this note is a variable that contains a JavaScript object with two properties title and content.
By default, this the title ambitions.
And now, whenever you want to change this node value, you can use that.
You can change that by using the set.
Not so this is what the user is doing, basically on change.
So whenever they input, the user is typing something on the input, for example, if I am typing something
over it, that means on change.
That means it is changing rapidly.
Whenever I type a new key or in a new letter, then it is changing the input.
So on changing moves, whenever the input is changing inside this input element, then we are we are
calling.
Basically, you handle change function since handwriting is a JavaScript function without specifying
that exactly basis.
So instead of double whenever we want to use Dallas script as you normally would be using calibrates.
So now what does this handle change function?
Missouri is staking it even.
What is the even even that is triggering that this function?
So basically, what is the event that is triggering the function that is typing some text by some use
that that is though it can be kind of the server use that somebody is typing detection is a triggering
thing.
Even this even has a target.
This target has full value properties.
One is name and address value, so if you want to pin them, you can bring the console.
Not long.
Even got target, so now I'll show you in our developer council.
You've been the.
And then you find out something you can see whenever I'm typing a new letter entering a new letter.
I see an example.
I'll clear this.
OK, so now.
Whenever I type a new, for example, at Typekit, when I type it, then you can send, you know, some
something is console.log.
So when you are selecting this, this put this input as a baby's, as a name, as a placeholder.
This has a value.
But out of this, everything we want naming value.
So that is why we are distributing them.
Restructuring means even though Target is an object that contains many, many properties like name,
value, place, then everything out of that.
We want domain name and value.
So we have to use those names to be structure the same names.
But when we are using like when we want to, you know, take information from our area, then no need
to use these brackets.
We can simply use square brackets and the name can be anything but object B structuring it should be
the name of the property owner, so name the rating from the human target name.
It is a starting and said this name variable and value the same.
So name and value basically out of even target name and even target dog value.
So now.
Here, Signal, we are using signal that means we are changing, they're, you know, they're not,
as I said before this, not content stable and content with different ambition.
So we're calling the signal.
Well, basically previous means previous, not content.
This is the parameter that we are sending to set, not this content.
The value of the previous note that previously value.
That means, for example, I'm having something, you know, text messages, the value currently.
Now I'm typing a new letter called one when I typed one.
That was the change that something changed.
So on it will call.
This had a change function.
It would take name and value from the target.
Now the previous model with the previous year, and that is the best test.
And then it will call this function and it will return the previous date.
Not best.
And also extra name value.
That is one.
OK.
This gives that extra thing that has added newly.
So one basically we are giving the previous value and then also concatenating with the new value.
OK.
This we are basically taking in all, you know, the previous.
So we have like start saving it and said they're not variable.
And we are returning it.
So every time we are changing the input, this change the note value chain and the note that island,
not the content, we are giving it to the value of the input because it should be saying write an input.
What is the value dissolving?
It should be the same as the note or title of content.
This is basically good programming.
This is what we are doing, basically.
We are handling the changes, right?
Why this is important.
This is important because whenever we are clicking on enter, that means the data is now we are having
that, we are getting hold of the data.
The note what that what the user want to give, like want to have to do the blue note so that we can
add to our order.
So this note object, we can add to our idea and it said, and then we can say it again as a b empty
object.
So that is why it is very important.
And also books are used so that it does not depend.
It does not disturb the Boulder web page, for example, of another type, as you saw in console.log.
Like when I type a word here, only that, you know, the consolidated log is up, nothing is getting
refreshed.
So that is the beauty of it.
It works on books and the components.
But I believe the required components and the required things on the web page gets reloaded or refreshed,
but not the pitch.
So these are basic understanding of of books and, you know, previous values, shipping quotes and
this is a separate operator.
Split operator means to get hold back, to get hold of all the previous note like, you know, copy
and paste in the previous value privacy notice, a variable the contents of information, the copy and
paste that will be using the spread operator.
So this is what we have done in this video.
The next reader will see like adding, like creating a new warrior for that, you know, to keep the
hold of all the true items.
And whenever the user clicks on submit to add that node inside it and also deleting that note that two
items from that it.
This and the styling part of the scene now it's looks somewhat ugly.
So we'll do the styling and everything in the next in the coming weeks.