Alright so in this video we're going to set up our project our 1
react plus Typescript project using vite so we can go on the 2
official documentation going guide probably and if I scroll 3
a little bit they say that we can use NPM create vite@latest so 4
I'm going to move on my desktop that's where I want to create 5
my project and I'm going to run this command. So first you need 6
create vite so I'm going to accept and install it. Now I'm going 7
to give a name to my project so I'm going to call it a react, 8
Typescript 9
quiz now you can select using your arrow the language or the 10
library so I'm going to choose react and I'm going to choose 11
Typescript plus SWC SWC is basically super web competitor 12
I think something like this super fast web compiler 13
something like this it is going to be faster than the regular 14
project so I'm going to choose this one and we are good the 15
project has been created and I can move into it and type NPM 16
install to install all the libraries and once it's done we 17
can run NPM run Dev and we should be good and it's going 18
to start on this port you can open it and it should be 19
working you can then go in the visual studio and open your 20
project so I'm going to move on my desktop open it and I'm just 21
going to do a slight modification here in vite config 22
I'm just going to change the part because I like to have the 23
port 3000, I'm used to it so you can add server and then 24
port 3000 and we're just going to add another key that 25
is going to be resolve and inside we're going to create an 26
alias this way we'll be able to import components and files 27
relatively to the source folder using a symbol for example 28
hashtag or the @. So I'm going to do that and so 29
when I will import from @ then I'm going to 30
path dot resolve dash dash dir name and it's going to be slash 31
source. So basically by writing that we're saying that the path 32
to source is equal to the commercial A symbol. Okay? We 33
also need to impart as from path like this oh yeah and so 34
this is a variable coming from the node environment so we need 35
to add some typing into our project so we're going to stop 36
the project and do an NPM install @ types slash node and 37
technically once it will be installed yes as you can see 38
now it's working and here oh it's their name without E Okay. 39
Uh so technically now if I restart my project MPM run 40
there, it should start on the part three thousand. Yep. Okay 41
and technically now let's make sure that everything is working 42
fine. So if I go in app. TSX for example and change that 43
reactttt and save. Okay everything is working fine. So what are we 44
going to do is we are going to remove the app. CSS we are 45
going to well remove that we have in the app. TSX and we're 46
just going to create an empty component like this I'm going 47
to remove the index.CSS we're going to keep the main. TSX I'm 48
just going to change that and add brackets here because I not 49
using a default export in my app. TSX and finally I'm going 50
to remove the street mode you can keep it I'm just going to 51
remove it this way if I log things it will be easier for 52
you to understand what is going on going to remove the index. 53
CSS we don't need the react part at the top and I think 54
that we are good to start we just have here this little 55
image we're going to remove it because we don't need it 56
anymore all right so technically we are ready to 57
start working in the app component so technically here 58
I'm just going to write hello and yeah everything is working 59
fine so in the next video we are going to look at the API 60
documentation try to understand where the data are going to come 61
from and how we're going to fetch them. Okay? So see you in 62
the next one.