All right, and once we've got a clear idea what we're going to be working on, we're going to navigate
to my.
I'm looking for Project 16.
It is marked down preview.
Of course, I'm looking for a set of folder.
So I'm going to open up my integrated terminal.
I'm going to navigate back to the route.
And then I'm going to say that I would like to navigate to report number 16.
And then, of course, the setup folder here.
And once we're here, as always, we just install all dependencies and then right away spin up the deficit
ever so close to final one.
That, of course, is where we have the final source code.
And if you want to double check with the code that will be typing in this project to do that.
But in my case, I don't need it.
And if we check out of the app J.S..
We should simply find one import from react marked down lumber, which we're going to cover in the next
video, but apart from that, we should just have this heading to and I would want to start by navigating
to a bigger browser window online.
I'm going to open up localhost three thousand here, and then we're just going to make sure that we
put them side by side.
So this is my complete one.
And then, of course, this is our star.
And I simply would want to set up the general structure where we're going to have one extra.
So this is where all type our markdown.
And then, of course, I also want to display the result.
So for the time being, we're not going to work with react markdown.
We're just going to set everything up.
So I'll close my integrated terminal and I'll start by setting up some kind of state value.
And of course, we can call it whatever we want.
But in my case, I'm going to go with Mark down and set Mark down.
So this is going to be the value that we're going to be typing.
And of course, we would also want to display it.
So let's go here with use state.
And as far as default value, I'm going to go with hashtag hashtag meaning heading to and then I'm going
to call it markdown preview.
Now, as you can see at the moment, I don't see anything, and that's because I haven't opened up the
localhost.
Three thousand I might have once I have my state value now, I would want to work on my RSX.
So start by setting up the main tags and lines are the main tags.
We're going to go with a section with a class of Margon, so let's go with section and then class of
Magnon.
So online we're going to have one text area and one article where we'll display the result.
So here we go.
Text area.
Now we don't care about the name columns, the rows because we'll set everything up using CFS so you
can remove all that.
Just add a class name of input.
And then as far as the value for the text area, I would want it to be this markdown because at the
moment, notice, this is just an empty text area.
But since I would want to make it as a controlled input, meaning as I'm typing anything in the text
area, I will be invoking, said Makhdoom.
So the value and also has a value, I will display that markdown over here and the same will work with
a result.
However, of course, the result will pipe through the react markdown because the value here is going
to be a bit different.
So just like with the regular input, we just set up a value and that one will be equal to my model.
So whatever I'm typing.
And then the second thing is that won't change.
So as we're typing something in this area, which I would want to invoke my set markdown, so I would
want to change that that value and I'll need the event target value.
And of course, we'll pass the Senate and to set Makhdoom, that's our function.
So we go here with E Target and then value and I think we're done with our text letter.
So whatever we'll type over here, of course will be displayed in a text letter and we can add whatever
we want as well.
So for example, in this case I have marked down and if I want heading through.
Can go with hello, people.
Of course, nothing is being displayed, but at least I can see that as I'm typing something and the
text area, while I'm changing my state value of Martineau and then side by side with the text area,
we're going to go with article and then we'll have to add a class name result instead of the result.
Eventually I will pipe my mark down through the Ariake Magnum.
However, for the time being, we're just going to say mark down.
And of course, as you're looking at your local business, it makes sense.
We have one more now and then the second one again.
Eventually this will get piped through the markdown and then, of course, we'll see the result.
But that should be our general setup.
So as I'm typing something here in text area, of course, I'm displaying also in Myersville.