1
00:00:01,330 --> 00:00:05,320
Let's start to put together the absolute basics of this application, so for right now, I just want

2
00:00:05,320 --> 00:00:06,790
to add in a text area.

3
00:00:07,060 --> 00:00:10,950
I want to make sure we've got a piece of state that tracks whatever user is typing inside there.

4
00:00:11,410 --> 00:00:16,210
I want to add in a button and a click event handler to it and then eventually so shows some kind of

5
00:00:16,210 --> 00:00:17,350
text out here at the bottom.

6
00:00:17,590 --> 00:00:22,120
And whatever text we show down here, I want to kind of somewhat formatted as code.

7
00:00:22,360 --> 00:00:24,610
So we should figure out some way of handling that.

8
00:00:25,240 --> 00:00:27,620
We're not going to worry about Eskild at all just yet.

9
00:00:27,670 --> 00:00:30,730
Let's just get these very simple elements visible on the screen.

10
00:00:31,840 --> 00:00:37,480
Back inside of my inducts file will first begin by replacing that one with a div.

11
00:00:40,120 --> 00:00:42,730
Inside there, I'm going to add a text area.

12
00:00:45,470 --> 00:00:46,970
After that allowed a div.

13
00:00:48,620 --> 00:00:50,030
With a button inside of it.

14
00:00:52,530 --> 00:00:55,080
And we'll give the buttons some text of submit.

15
00:00:56,700 --> 00:01:02,460
And then after that, we're going to eventually show the transpired and bundled code inside of a pre

16
00:01:02,460 --> 00:01:04,890
element, we're not familiar with Apria element.

17
00:01:05,040 --> 00:01:08,550
This is going to nicely format the code and just essentially make it look like code.

18
00:01:08,610 --> 00:01:09,330
That's pretty much it.

19
00:01:10,340 --> 00:01:14,990
OK, so we've got the raw elements we need, let's now start to add in a couple of pieces of state.

20
00:01:15,470 --> 00:01:17,300
We're going to use some react hooks for this.

21
00:01:17,540 --> 00:01:22,610
And I think we really just need one piece of state right now maybe to want to track the value in the

22
00:01:22,610 --> 00:01:23,320
text area.

23
00:01:23,330 --> 00:01:28,610
We will eventually also need another piece of state to track the transpired code and essentially be

24
00:01:28,610 --> 00:01:30,140
displayed inside that element.

25
00:01:31,320 --> 00:01:35,490
Well, first begin by importing U.S. states from react.

26
00:01:38,980 --> 00:01:41,590
I'm going to add in a new piece of state that I'll call input.

27
00:01:43,810 --> 00:01:46,380
So this will be the code that the user writes into the text area.

28
00:01:47,770 --> 00:01:49,570
I'll initialize it to be an empty string.

29
00:01:51,040 --> 00:01:55,120
I'll then create a second piece of state that I'll call about code.

30
00:01:57,450 --> 00:02:03,170
And initialize that to an empty string as well, code is going to be the output from our build tool,

31
00:02:03,180 --> 00:02:07,740
so that should be the piled and bundled code that we eventually want to show inside the element.

32
00:02:08,460 --> 00:02:12,570
So since we know we want to show that code inside of the element, let's just take care of that right

33
00:02:12,570 --> 00:02:12,870
away.

34
00:02:13,190 --> 00:02:15,750
It's all put code right there like so.

35
00:02:17,270 --> 00:02:22,280
Next up, let's wire up this input piece of state to our text area and make sure that whenever user

36
00:02:22,280 --> 00:02:25,450
types inside that text area we update that input piece of state.

37
00:02:26,120 --> 00:02:27,410
I'm going to add in.

38
00:02:28,950 --> 00:02:31,110
An unchanged event handler.

39
00:02:34,200 --> 00:02:38,220
I receive an event object, I'm just going to abbreviate as E very quickly.

40
00:02:39,760 --> 00:02:47,350
And then we'll call set input with a target value, so nothing too crazy here whenever user types inside

41
00:02:47,350 --> 00:02:49,890
there, we're just going to update our input piece of state.

42
00:02:49,990 --> 00:02:50,680
Nothing crazy.

43
00:02:51,800 --> 00:02:56,030
We'll also make sure that we push the updated input value.

44
00:02:56,940 --> 00:03:02,610
Back into that text area, so essentially just wire the thing up as a controlled element of Paddon value

45
00:03:02,850 --> 00:03:03,900
will be input.

46
00:03:06,090 --> 00:03:07,850
OK, that looks good, Leslie.

47
00:03:07,950 --> 00:03:12,030
I think we need to take care of right now is make sure that whenever a user clicks on this button,

48
00:03:12,030 --> 00:03:16,140
we should run some kind of event handler, because that's going to be when we want to actually take

49
00:03:16,140 --> 00:03:22,470
this input that the users typed and run is build on it and do that transpiring plus build process.

50
00:03:25,070 --> 00:03:28,100
I'm going to add in an event handler that I'll call unclick.

51
00:03:31,280 --> 00:03:36,740
Whenever we run this for right now, I'll do a council log of the input that the user has typed into

52
00:03:36,740 --> 00:03:37,470
that text area.

53
00:03:37,850 --> 00:03:39,230
We're going to very quickly replace that.

54
00:03:39,230 --> 00:03:43,040
But I just have it here for right now to make sure that this click event handler is going to work correctly.

55
00:03:44,050 --> 00:03:49,900
Then finally on the button element, we'll say whenever a user clicks, this runby on click function.

56
00:03:51,370 --> 00:03:52,320
And that's pretty much it.

57
00:03:53,820 --> 00:03:56,970
So this is a very basic and simple little component we put together.

58
00:03:57,690 --> 00:04:01,050
Let's go back over to the browser really quick and just make sure it works as expected.

59
00:04:02,220 --> 00:04:07,890
There's my text area, there's the button I should be able to type inside there, and then if I submit,

60
00:04:08,130 --> 00:04:10,830
I should see a log of whatever text I had entered.

61
00:04:11,870 --> 00:04:17,329
OK, now we've got the very basics here put together, I now want to make sure that we can do something

62
00:04:17,329 --> 00:04:17,829
like this.

63
00:04:17,839 --> 00:04:20,720
I want to be able to write some amount of JavaScript.

64
00:04:21,910 --> 00:04:23,760
That has some gas inside of it.

65
00:04:25,680 --> 00:04:31,590
And then if I click on Submit, I want to use is built to transport and bundle this and show the result

66
00:04:31,590 --> 00:04:34,680
down here inside that element, that's pretty much it.

67
00:04:35,100 --> 00:04:41,160
It's all we should really have to do is probably add in some code to unclick right here to do this actually

68
00:04:41,160 --> 00:04:43,280
actual transpiring for us.

69
00:04:43,620 --> 00:04:47,250
Now, of course, the code we have to write is going to be just a little bit more complicated than that.

70
00:04:47,460 --> 00:04:49,200
But more or less, that's what we need to do.

71
00:04:49,860 --> 00:04:52,540
So let's take a pause right here and start working with us.

72
00:04:52,560 --> 00:04:53,820
Build in just a moment.