1
00:00:01,240 --> 00:00:05,860
Let's start to get a better idea of how to work with states in typescript together to do so, we're

2
00:00:05,860 --> 00:00:07,990
going to build out a very small little application.

3
00:00:08,510 --> 00:00:10,240
So I want to build something that looks like this.

4
00:00:10,630 --> 00:00:13,750
We're going to show some kind of imaginary party guest list.

5
00:00:14,080 --> 00:00:18,560
This will list out a variety of different names of people who are invited to some imaginary party.

6
00:00:19,000 --> 00:00:23,830
So we're going to eventually collect a list of names and then render them out as a list onto the screen

7
00:00:24,400 --> 00:00:26,400
in order to add in more names to the list.

8
00:00:26,410 --> 00:00:30,130
We'll put a text input down here towards the bottom and a little button after it.

9
00:00:30,380 --> 00:00:34,450
So we're going to type in a name right there, click, add, and then expect to see the name added into

10
00:00:34,450 --> 00:00:34,960
that list.

11
00:00:35,710 --> 00:00:39,070
We're going to build this entire application inside of one single component.

12
00:00:40,340 --> 00:00:44,810
OK, so to get started, I'm going to go back over to my editor, I'm going to make a new folder inside

13
00:00:44,810 --> 00:00:46,850
my SC directory called State.

14
00:00:47,790 --> 00:00:52,530
Now, the reason I'm calling the state is just because it is an example of using state normally instead

15
00:00:52,530 --> 00:00:57,090
of a real Riak project, I would not build some folder called state or anything like that.

16
00:00:57,870 --> 00:01:03,140
Then inside that folder, I'm going to make a new file called Guest List TSX.

17
00:01:04,640 --> 00:01:07,730
All right, so we'll first begin by just writing out a very simple component.

18
00:01:09,520 --> 00:01:16,390
I'm going to annotate its type as react dot f c, I'm not going to put in any angle brackets here because

19
00:01:16,390 --> 00:01:21,280
we're not going to expect to receive any props to our guest list if we do not expect to receive any

20
00:01:21,280 --> 00:01:21,670
props.

21
00:01:21,670 --> 00:01:26,110
We do not have to add in those angle brackets right there or add in any kind of interface or anything

22
00:01:26,110 --> 00:01:26,640
like that.

23
00:01:28,250 --> 00:01:30,410
I'll then put in a very simple return.

24
00:01:32,980 --> 00:01:39,880
The Divx and I'll just print out guest list and then a simple export default guest list at the bottom.

25
00:01:41,400 --> 00:01:46,770
Once I've got that all put together, I'm going to try to show it inside of my index file, the back

26
00:01:46,770 --> 00:01:47,750
inside of index cards.

27
00:01:48,990 --> 00:01:51,150
I will import guest list.

28
00:01:52,350 --> 00:01:54,990
From state guest list.

29
00:01:55,840 --> 00:01:58,090
And then show that component in place that each one.

30
00:02:02,460 --> 00:02:06,620
All right, let's go back over to our browser and just make sure everything is showing up.

31
00:02:08,740 --> 00:02:09,550
Where's my browser?

32
00:02:09,580 --> 00:02:10,090
Here it is.

33
00:02:11,500 --> 00:02:16,300
All right, simple enough, let's go into that guest list component and start adding in a little bit

34
00:02:16,300 --> 00:02:18,190
of indentation or some implementation.

35
00:02:18,640 --> 00:02:22,370
So first, I probably don't really want to show just simply a guest list inside there.

36
00:02:22,370 --> 00:02:23,440
So I'm going to expand that div.

37
00:02:24,070 --> 00:02:26,710
I'm going to wrap guest list with an H three.

38
00:02:28,810 --> 00:02:33,310
We'll eventually put in a little bit of logic right here to render out our list of guests, but right

39
00:02:33,310 --> 00:02:36,190
now I'm going to first begin by adding an input.

40
00:02:38,290 --> 00:02:39,280
And a button.

41
00:02:42,000 --> 00:02:46,260
Right after it was the button, I'll give it the text add guest.

42
00:02:47,450 --> 00:02:49,970
And that's pretty much it for static content that we need.

43
00:02:50,680 --> 00:02:55,720
Let's now add in a piece of state to track first whatever user types into that input.

44
00:02:55,760 --> 00:02:58,310
So we're going to set up that input as a controlled input.

45
00:02:58,490 --> 00:03:03,260
Remember, a controlled input is one where we are going to designate an on change callback and a value

46
00:03:03,260 --> 00:03:04,070
prop as well.

47
00:03:06,480 --> 00:03:10,080
To do so, we first need to add in a piece of state to our application, something to track whatever

48
00:03:10,080 --> 00:03:11,090
user types inside there.

49
00:03:11,520 --> 00:03:17,130
So to add in a piece of state, we will import the U.S. state book from react.

50
00:03:18,280 --> 00:03:23,200
Then right above our return statement, I'll add in a new piece of state called name.

51
00:03:24,310 --> 00:03:25,030
Set name.

52
00:03:27,170 --> 00:03:31,550
Call you state now I'm going to provide an initial value of empty string.

53
00:03:32,740 --> 00:03:40,060
We can then start to wire up some props on the input element itself, we'll give it a value of name

54
00:03:40,480 --> 00:03:46,360
and an unchanged change on change will provide a callback function that will receive an event object.

55
00:03:47,550 --> 00:03:52,920
Whenever on change is called, we're going to update our set name piece of state, so we'll do a set

56
00:03:53,040 --> 00:03:58,500
name IX, which is short for event, that target value like so.

57
00:04:01,380 --> 00:04:06,120
Now, at this point in time, we have a fully functional component that makes use of some states, this

58
00:04:06,120 --> 00:04:08,370
absolutely works everything we have inside of here.

59
00:04:08,520 --> 00:04:13,530
And I just want you to note once again that outside of this little bit of type annotation right there,

60
00:04:13,740 --> 00:04:18,800
there's nothing inside of our component that looks special just because we are making use of typescript.

61
00:04:19,170 --> 00:04:24,900
So at the end of the day, you can really get pretty far with TypeScript and react put together without

62
00:04:24,900 --> 00:04:27,120
really obsessing over any additional details.

63
00:04:27,750 --> 00:04:31,710
We only need to start worrying about, TypeScript, if we want to add in a couple more checks to our

64
00:04:31,720 --> 00:04:32,520
different components.

65
00:04:33,000 --> 00:04:36,840
So let's take a look at how we might improve some of this code and also add in some more functionality

66
00:04:36,840 --> 00:04:40,830
to it, like the ability to actually truly add a guest in the next video.