0
1
00:00:00,000 --> 00:00:02,941
Alright so in this video we're
going to set up our project our
1

2
00:00:02,941 --> 00:00:10,261
react plus Typescript project
using vite so we can go on the
2

3
00:00:10,261 --> 00:00:17,341
official documentation going
guide probably and if I scroll
3

4
00:00:17,341 --> 00:00:24,221
a little bit they say that we
can use NPM create vite@latest so
4

5
00:00:24,221 --> 00:00:26,861
I'm going to move on my desktop
that's where I want to create
5

6
00:00:26,861 --> 00:00:32,041
my project and I'm going to run
this command. So first you need
6

7
00:00:32,041 --> 00:00:37,321
create vite so I'm going to accept
and install it. Now I'm going
7

8
00:00:37,321 --> 00:00:41,241
to give a name to my project so
I'm going to call it a react,
8

9
00:00:41,241 --> 00:00:43,961
Typescript
9

10
00:00:44,761 --> 00:00:51,621
quiz now you can select using
your arrow the language or the
10

11
00:00:51,621 --> 00:00:56,021
library so I'm going to choose
react and I'm going to choose
11

12
00:00:56,021 --> 00:01:03,141
Typescript plus SWC SWC is
basically super web competitor
12

13
00:01:03,141 --> 00:01:06,021
I think something like this
super fast web compiler
13

14
00:01:06,021 --> 00:01:09,741
something like this it is going
to be faster than the regular
14

15
00:01:09,741 --> 00:01:15,141
project so I'm going to choose
this one and we are good the
15

16
00:01:15,141 --> 00:01:20,621
project has been created and I
can move into it and type NPM
16

17
00:01:20,621 --> 00:01:25,421
install to install all the
libraries and once it's done we
17

18
00:01:25,421 --> 00:01:30,461
can run NPM run Dev and we
should be good and it's going
18

19
00:01:30,461 --> 00:01:34,541
to start on this port you can
open it and it should be
19

20
00:01:34,541 --> 00:01:40,141
working you can then go in the
visual studio and open your
20

21
00:01:40,141 --> 00:01:47,041
project so I'm going to move on
my desktop open it and I'm just
21

22
00:01:47,041 --> 00:01:50,961
going to do a slight
modification here in vite config
22

23
00:01:50,961 --> 00:01:53,601
I'm just going to change the
part because I like to have the
23

24
00:01:53,601 --> 00:01:59,361
port 3000, I'm used to it so
you can add server and then
24

25
00:01:59,361 --> 00:02:06,001
port 3000 and we're just
going to add another key that
25

26
00:02:06,001 --> 00:02:10,081
is going to be resolve and
inside we're going to create an
26

27
00:02:10,081 --> 00:02:14,621
alias this way we'll be able to
import components and files
27

28
00:02:14,621 --> 00:02:19,501
relatively to the source folder
using a symbol for example
28

29
00:02:19,501 --> 00:02:25,341
hashtag or the @. So
I'm going to do that and so
29

30
00:02:25,341 --> 00:02:29,781
when I will import from
@ then I'm going to
30

31
00:02:29,781 --> 00:02:38,941
path dot resolve dash dash dir
name and it's going to be slash
31

32
00:02:38,941 --> 00:02:42,381
source. So basically by writing
that we're saying that the path
32

33
00:02:42,381 --> 00:02:46,541
to source is equal to the
commercial A symbol. Okay? We
33

34
00:02:46,541 --> 00:02:53,501
also need to impart as from
path like this oh yeah and so
34

35
00:02:53,501 --> 00:02:58,061
this is a variable coming from
the node environment so we need
35

36
00:02:58,061 --> 00:03:01,901
to add some typing into our
project so we're going to stop
36

37
00:03:01,901 --> 00:03:09,981
the project and do an NPM
install @ types slash node and
37

38
00:03:09,981 --> 00:03:14,941
technically once it will be
installed yes as you can see
38

39
00:03:14,941 --> 00:03:22,741
now it's working and here oh
it's their name without E Okay.
39

40
00:03:22,741 --> 00:03:28,101
Uh so technically now if I
restart my project MPM run
40

41
00:03:28,101 --> 00:03:31,861
there, it should start on the
part three thousand. Yep. Okay
41

42
00:03:31,861 --> 00:03:35,061
and technically now let's make
sure that everything is working
42

43
00:03:35,061 --> 00:03:38,941
fine. So if I go in app. TSX
for example and change that
43

44
00:03:38,941 --> 00:03:43,221
reactttt and save. Okay everything
is working fine. So what are we
44

45
00:03:43,221 --> 00:03:49,141
going to do is we are going to
remove the app. CSS we are
45

46
00:03:49,141 --> 00:03:55,161
going to well remove that we
have in the app. TSX and we're
46

47
00:03:55,161 --> 00:04:02,521
just going to create an empty
component like this I'm going
47

48
00:04:02,521 --> 00:04:08,281
to remove the index.CSS we're
going to keep the main. TSX I'm
48

49
00:04:08,281 --> 00:04:13,081
just going to change that and
add brackets here because I not
49

50
00:04:13,081 --> 00:04:17,481
using a default export in my
app. TSX and finally I'm going
50

51
00:04:17,481 --> 00:04:20,121
to remove the street mode you
can keep it I'm just going to
51

52
00:04:20,121 --> 00:04:23,161
remove it this way if I log
things it will be easier for
52

53
00:04:23,161 --> 00:04:27,921
you to understand what is going
on going to remove the index.
53

54
00:04:27,921 --> 00:04:33,041
CSS we don't need the react
part at the top and I think
54

55
00:04:33,041 --> 00:04:39,761
that we are good to start we
just have here this little
55

56
00:04:39,761 --> 00:04:42,721
image we're going to remove it
because we don't need it
56

57
00:04:42,721 --> 00:04:46,641
anymore all right so
technically we are ready to
57

58
00:04:46,641 --> 00:04:50,881
start working in the app
component so technically here
58

59
00:04:50,881 --> 00:04:54,001
I'm just going to write hello
and yeah everything is working
59

60
00:04:54,001 --> 00:04:58,561
fine so in the next video we
are going to look at the API
60

61
00:04:58,561 --> 00:05:02,521
documentation try to understand
where the data are going to come
61

62
00:05:02,521 --> 00:05:06,681
from and how we're going to
fetch them. Okay? So see you in
62

63
00:05:06,681 --> 00:05:09,321
the next one.