1
00:00:00,780 --> 00:00:04,950
As I just mentioned, when we started making use of typescript and react together, not a lot of stuff

2
00:00:04,950 --> 00:00:05,760
is going to change.

3
00:00:06,090 --> 00:00:10,740
So we're going to really take a look at some very specific areas where we're going to massage our code

4
00:00:10,740 --> 00:00:13,100
just a little bit because we were making use of typescript.

5
00:00:13,500 --> 00:00:18,090
So in the coming videos, we're going to write out some very quick and very simple examples to examine

6
00:00:18,090 --> 00:00:23,220
how to work with TypeScript and react together for handling component props, for handling state event

7
00:00:23,220 --> 00:00:25,610
handlers and a couple of other topics as well.

8
00:00:26,160 --> 00:00:30,450
Once again, for each of these different areas, we're going to be writing out some very simple, straightforward

9
00:00:30,450 --> 00:00:33,770
code and we're barely even going to run it really directly instead of our browser.

10
00:00:34,020 --> 00:00:38,670
Instead, this is just going to give us some background and some further information on how these things

11
00:00:38,670 --> 00:00:39,210
work together.

12
00:00:39,990 --> 00:00:40,310
All right.

13
00:00:40,320 --> 00:00:45,240
So to get started, I'm going to go back over, find my SAAC directory and make a new folder inside.

14
00:00:45,240 --> 00:00:46,440
They're called Props.

15
00:00:47,310 --> 00:00:51,870
Then inside of that folder, I'll make a new file called Parent Dot TSX.

16
00:00:52,980 --> 00:00:56,490
And another called child, dot TSX.

17
00:00:57,650 --> 00:01:02,030
So we're going to create two separate component files in one, we're going to write in a parent component

18
00:01:02,240 --> 00:01:03,590
that attempts to show the child.

19
00:01:03,950 --> 00:01:07,040
We're then going to assign a couple of different props to this child.

20
00:01:07,160 --> 00:01:09,980
And once again, just see how it works with TypeScript.

21
00:01:10,920 --> 00:01:14,280
I'll first begin inside of parents inside of your.

22
00:01:15,650 --> 00:01:17,180
I'm going to write out parent.

23
00:01:19,700 --> 00:01:23,450
Inside of there, I'm going to return an instance of child.

24
00:01:25,070 --> 00:01:27,380
I'm going to export default.

25
00:01:28,780 --> 00:01:33,340
Parent at the bottom and will make sure that I import child.

26
00:01:34,230 --> 00:01:35,520
From child.

27
00:01:37,020 --> 00:01:42,510
Notice that I am currently importing child right here with curly braces, so we're going to define a

28
00:01:42,510 --> 00:01:45,910
couple of different versions of this child component inside the child file.

29
00:01:46,260 --> 00:01:50,280
So that's why we're adding in the curly braces right here, because we're going to use it as a named

30
00:01:50,280 --> 00:01:52,350
export rather than a default export.

31
00:01:53,440 --> 00:01:58,660
All right, once I've got that put together, I'll then go over to our child file and inside of here

32
00:01:58,810 --> 00:02:03,610
I'll do an export consed child and I'll listen to that.

33
00:02:04,120 --> 00:02:07,720
A very simple component, maybe just a very simple div.

34
00:02:08,759 --> 00:02:09,840
That says hi there.

35
00:02:11,320 --> 00:02:15,100
All right, so at this point in time, we now have these two separate files, one as a parent, one

36
00:02:15,100 --> 00:02:18,340
as a child, and I do not see any errors in either of them.

37
00:02:19,400 --> 00:02:23,660
Now we've got a little set up, put together, let's take a quick pause, come back to the next video.

38
00:02:23,810 --> 00:02:27,890
We're going to make sure that child receives a couple of different props and we're going to understand

39
00:02:27,890 --> 00:02:32,180
how to work with this prop system along with TypeScript to make sure that we're using these props in

40
00:02:32,180 --> 00:02:33,080
the correct fashion.