1
00:00:00,740 --> 00:00:05,390
I have generated my project, so I'm going to change into the new artist's directory that was created.

2
00:00:05,810 --> 00:00:07,750
I'll then start up my code editor inside there.

3
00:00:07,939 --> 00:00:11,010
We're going to take a look at some of the different files and folders that were generated for us.

4
00:00:11,630 --> 00:00:16,400
Now, at first glance, it appears that racked up has given us all the normal files and folders that

5
00:00:16,400 --> 00:00:17,480
we would expect to see.

6
00:00:17,840 --> 00:00:22,430
However, if you open up your SIRC directory, you might immediately notice a very small difference

7
00:00:22,790 --> 00:00:28,250
inside of here where we would normally have gess files or a normal crate react up project.

8
00:00:28,410 --> 00:00:32,630
In this case, we have some different files with an extension of DOT TSX.

9
00:00:33,170 --> 00:00:38,360
So first of all, a lesson that we see right away without even having to start up our project or anything

10
00:00:38,360 --> 00:00:38,930
like that.

11
00:00:39,500 --> 00:00:43,820
When we start to make use of TypeScript and react together, we're always going to start to think about

12
00:00:43,820 --> 00:00:46,670
the extensions that we apply to all of our different file names.

13
00:00:47,000 --> 00:00:52,820
If we ever create a new file and we wanted to contain a react component or really any kind of JSA at

14
00:00:52,820 --> 00:00:53,090
all.

15
00:00:53,320 --> 00:00:56,440
We're going to name that file with an extension TSX.

16
00:00:56,780 --> 00:01:01,100
This indicates that this is going to be a typescript file that contains, you guessed it, some amount

17
00:01:01,100 --> 00:01:02,090
of X.

18
00:01:02,750 --> 00:01:07,340
If we create a file inside of our project, that is not going to contain any jousts, but maybe it's

19
00:01:07,340 --> 00:01:13,250
a file for Redox or reducer or something like that will instead only use Dotty's.

20
00:01:13,910 --> 00:01:18,860
If you do not follow this rule, then TypeScript is going to start to complain inside of your editor

21
00:01:18,860 --> 00:01:19,550
very quickly.

22
00:01:19,880 --> 00:01:21,770
So let me show you a very quick example of that.

23
00:01:22,460 --> 00:01:25,070
I'm going to open up my file.

24
00:01:25,430 --> 00:01:27,650
Inside of here is the app component.

25
00:01:28,350 --> 00:01:29,870
I'll then rename that file.

26
00:01:31,370 --> 00:01:37,010
To just APTs, and then immediately we start to see a ton of different air messages appear on the screen,

27
00:01:37,670 --> 00:01:43,430
so very clearly if we want to create a react component, we must place it inside of a file with a file

28
00:01:43,430 --> 00:01:48,880
extension of DOT TSX and I just mess that up.

29
00:01:49,370 --> 00:01:49,940
There we go.

30
00:01:49,970 --> 00:01:50,480
Much better.

31
00:01:51,530 --> 00:01:55,250
All right, so that's simple enough, let's start to kind of dial things up here a little bit.

32
00:01:56,380 --> 00:02:01,210
We clearly got a lot of different files created for us whenever I make a new project, I don't really

33
00:02:01,210 --> 00:02:05,140
like to use these default files because there is essentially just a lot of code inside there.

34
00:02:05,260 --> 00:02:08,110
And I don't really necessarily know what any of that code does.

35
00:02:08,580 --> 00:02:13,390
So inside my Sarsae directory, I'm going to select all the different files inside there and then delete

36
00:02:13,390 --> 00:02:13,630
them.

37
00:02:16,130 --> 00:02:21,680
And then going to create a new index TSX file from scratch, and we'll get started inside that file

38
00:02:21,680 --> 00:02:25,900
by writing out a little bit of code, it's going to write out index, DOT, TSX.

39
00:02:27,130 --> 00:02:32,770
Then inside of here, I want to create a very simple component and displayed on the screen so the entire

40
00:02:32,770 --> 00:02:35,030
process for this is going to look very familiar.

41
00:02:35,260 --> 00:02:40,420
Not really anything new just because we were making use of typescript or anything like that at the very

42
00:02:40,420 --> 00:02:41,170
top of the file.

43
00:02:41,290 --> 00:02:46,360
I will import react from react, Dom.

44
00:02:47,410 --> 00:02:49,750
I'll then create a component that I will call up.

45
00:02:50,760 --> 00:02:54,360
And inside there, I will return about a Divx.

46
00:02:56,820 --> 00:02:58,290
Then one inside of it.

47
00:02:59,200 --> 00:03:00,400
That says hi there.

48
00:03:01,560 --> 00:03:05,970
And then at the bottom of the file, I'm going to try to use react Dom, to render that app component

49
00:03:05,970 --> 00:03:06,780
onto the screen.

50
00:03:06,930 --> 00:03:10,020
We'll do a very simple yardarm render.

51
00:03:10,840 --> 00:03:15,930
We'll show an instance of my app component, and then I'm going to select that HTML element that we

52
00:03:15,930 --> 00:03:16,470
always get.

53
00:03:16,470 --> 00:03:18,120
Whenever we use, create, react app.

54
00:03:18,660 --> 00:03:20,010
We're going to do a document.

55
00:03:21,020 --> 00:03:21,860
Where are you, selecter?

56
00:03:22,810 --> 00:03:24,010
Pound root.

57
00:03:26,390 --> 00:03:31,430
A notice right away that just because we're using typescript, well, nothing necessarily has to change.

58
00:03:31,970 --> 00:03:36,170
This is the first real kind of big realization I want you to have around react.

59
00:03:36,170 --> 00:03:41,090
And TypeScript, working together just because you are introducing TypeScript into a project doesn't

60
00:03:41,090 --> 00:03:46,590
necessarily mean you need to start adding in a ton of fancy new syntax, TypeScript, and react by itself.

61
00:03:46,730 --> 00:03:48,410
They worked together fantastically.

62
00:03:48,620 --> 00:03:53,210
And so even though you might not see it, TypeScript really is working behind the scenes here and making

63
00:03:53,210 --> 00:03:56,360
sure that you have applied some different appropriate types to your code.

64
00:03:57,020 --> 00:04:01,490
Let's try starting up our project at our terminal and just make sure that this code actually works as

65
00:04:01,490 --> 00:04:02,030
expected.

66
00:04:02,900 --> 00:04:04,010
So back at my terminal.

67
00:04:05,390 --> 00:04:12,710
I'll do an NPM run start that should open up a new browser window at localhost three thousand and you

68
00:04:12,710 --> 00:04:15,580
should see some content like this appear on the screen.

69
00:04:16,100 --> 00:04:19,910
And at present, I do not have any warnings or any errors or anything like that.

70
00:04:20,950 --> 00:04:24,940
All right, so a good start, but obviously just saying, hey, we don't necessarily have to add in

71
00:04:24,940 --> 00:04:26,650
any special code isn't super helpful.

72
00:04:26,950 --> 00:04:31,390
So let's start to investigate some different features and some different things we can do with reactant.

73
00:04:31,390 --> 00:04:33,280
TypeScript, together in the next video.