Let's start to put together the absolute basics of this application, so for right now, I just want
to add in a text area.
I want to make sure we've got a piece of state that tracks whatever user is typing inside there.
I want to add in a button and a click event handler to it and then eventually so shows some kind of
text out here at the bottom.
And whatever text we show down here, I want to kind of somewhat formatted as code.
So we should figure out some way of handling that.
We're not going to worry about Eskild at all just yet.
Let's just get these very simple elements visible on the screen.
Back inside of my inducts file will first begin by replacing that one with a div.
Inside there, I'm going to add a text area.
After that allowed a div.
With a button inside of it.
And we'll give the buttons some text of submit.
And then after that, we're going to eventually show the transpired and bundled code inside of a pre
element, we're not familiar with Apria element.
This is going to nicely format the code and just essentially make it look like code.
That's pretty much it.
OK, so we've got the raw elements we need, let's now start to add in a couple of pieces of state.
We're going to use some react hooks for this.
And I think we really just need one piece of state right now maybe to want to track the value in the
text area.
We will eventually also need another piece of state to track the transpired code and essentially be
displayed inside that element.
Well, first begin by importing U.S. states from react.
I'm going to add in a new piece of state that I'll call input.
So this will be the code that the user writes into the text area.
I'll initialize it to be an empty string.
I'll then create a second piece of state that I'll call about code.
And initialize that to an empty string as well, code is going to be the output from our build tool,
so that should be the piled and bundled code that we eventually want to show inside the element.
So since we know we want to show that code inside of the element, let's just take care of that right
away.
It's all put code right there like so.
Next up, let's wire up this input piece of state to our text area and make sure that whenever user
types inside that text area we update that input piece of state.
I'm going to add in.
An unchanged event handler.
I receive an event object, I'm just going to abbreviate as E very quickly.
And then we'll call set input with a target value, so nothing too crazy here whenever user types inside
there, we're just going to update our input piece of state.
Nothing crazy.
We'll also make sure that we push the updated input value.
Back into that text area, so essentially just wire the thing up as a controlled element of Paddon value
will be input.
OK, that looks good, Leslie.
I think we need to take care of right now is make sure that whenever a user clicks on this button,
we should run some kind of event handler, because that's going to be when we want to actually take
this input that the users typed and run is build on it and do that transpiring plus build process.
I'm going to add in an event handler that I'll call unclick.
Whenever we run this for right now, I'll do a council log of the input that the user has typed into
that text area.
We're going to very quickly replace that.
But I just have it here for right now to make sure that this click event handler is going to work correctly.
Then finally on the button element, we'll say whenever a user clicks, this runby on click function.
And that's pretty much it.
So this is a very basic and simple little component we put together.
Let's go back over to the browser really quick and just make sure it works as expected.
There's my text area, there's the button I should be able to type inside there, and then if I submit,
I should see a log of whatever text I had entered.
OK, now we've got the very basics here put together, I now want to make sure that we can do something
like this.
I want to be able to write some amount of JavaScript.
That has some gas inside of it.
And then if I click on Submit, I want to use is built to transport and bundle this and show the result
down here inside that element, that's pretty much it.
It's all we should really have to do is probably add in some code to unclick right here to do this actually
actual transpiring for us.
Now, of course, the code we have to write is going to be just a little bit more complicated than that.
But more or less, that's what we need to do.
So let's take a pause right here and start working with us.
Build in just a moment.