all right so I'm really excited to start
this brand new series on react you guys
asked for it so I reacted with this
series and like anything in this life
when you start you need to have a setup
so that's what we're gonna do
installation setup understanding the
folder structure and building your first
project and welcome to takes it to
Torrio's alright before you get started
you need two things you need a computer
obviously and you need npm install on a
computer the latest version of node
package manager and then go to command
line and run this command npm install -
g create react now let's understand what
this is
so npm install is obviously a command to
install a package so create react app is
a package so it's like a command line
every act just like angular has it amber
has it react people created it and -
demons install it globally means means
you can access you can create project on
any directory and it will be available
to you
so it's installing globally on a
computer once you do that it will take
few minutes so wait and watch once you
have it you can use it by typing this
create react - app and then the name the
project so i'm going to name it my -
beautiful react react i can choose
whatever name I want and again it will
take a few minutes it might take more
than few minutes because it has to
grab all the files whatever it needs to
build his app from wherever he needs to
grab it from so just be patient all
right so it's done well it has built you
a beautiful react app for you
but before you execute it you need to
actually go into the project because it
built the folder and it copied all the
files and everything but you need to go
inside the folder so if you do CD and my
beautiful react app and enter now you
are inside so I use atom so I'm gonna
use my editor so I can say atom dot when
I do that it would open this project in
atom alright so I have this project but
let's just before get into the folder
structure let's just execute this thing
you know so we know what it produced so
I'll go back to the command line and I
would say NPM start and it will open in
a browser localhost colon 3000 so on the
three thousand port it opens and you can
see the Vulcan react and as its react
logo that is constantly keep moving so
voila you have your first project
alright so now that we know how what it
does let's look at how it does it so I
go back to the folder structure the
first thing I want to do is look at the
package Jason because that's where the
magic happens and again I want you to
not just look at this as hey I did
something rather just a I want to
understand every darn thing in this
project so you want to look at line by
line everything and how exactly it works
so if you're confused about something
then you should be curious why it does
what it does why this this line added
here and if you're not curious then it's
a problem so let's okay I may not go
through
but again you should do it whenever you
start this new project don't move it
without doing this exercise alright so
the package start Jason you have the
name of the app my beautiful react app
so it already has in there's a version
zero point you know you can call it
better or something alright then you
have dependencies you have it brought
three files basically with it it has a
major main react which is six point one
point zero it has react dome and it has
react script so it actually loaded three
files three packages should I say and it
has a bunch of shortcuts for script so
remember when we ran NPM start this is
where it's coming from
so you can run any script on that is
defined inside the package or Jason by
saying NPM and the script name so here
the script name is start so it ran that
and what actually it ran is react script
start which is coming from this react
script and you can build your project
using NPM build which would run NPM
script build actually so this is just a
short command NPM bill but ultimately it
runs the react script built and if you
want to run the test you can do the same
thing alright so now that we know what
happens in package Jason let's move on
to the main stuff when you have a
project you need to ask various my
index.html in the public here's my
index.html what does he have it has a
dark type it has bunch of meta set it
has some links but the main thing is
here ID equal to group this is the main
thing you need to know the another
important thing index rjs now it is a
small file what it does it imports those
packages that we looked at package
Jason so it imports the main react react
dome and it's also important CSS which
is coming from here index CSS and it
imports the the main app component which
is here and what it does it's this is
most important thing it says the react
dome which is this guy and it will
render wherever you have this ideal
remember we looked at the index.html has
this ID heart route so so in XO j s is
going to say there I find this ID I want
to render this app component now let's
look at the app component so app
component is nothing but this app J s so
let's understand a pious which is the
component that it renders and if I look
go back to my browser what it had render
is this logo welcome to react and it
says to get started at a source after
gist and save and reload right so that's
what I'm gonna do
so it has this header which has the logo
which is the image here app logo and it
says welcome to react so first thing I'm
going to do is insert if react I'm just
going to say welcome to my beautiful
react app and save it and as soon as I
save it it would auto load this project
and it would say welcome to my beautiful
V remember the objective is to play
around with it break stuff if you break
stuff and something doesn't work that's
fine just create another app but you
need to get your hands dirty break stuff
and understand in the process what is
happening and if as much as you break in
an early stage better you become an
solid your knowledge will be so don't
try to walk on a safe side by saying if
I touch here I don't know what's gonna
happen
so I
not touch okay so but we changed it but
let's understand what it is exactly what
exactly it's doing so in order to build
any component you would need this first
of all you wouldn't need to react and
you would need a component and then it
basically does two things it would
import it and in the end it would export
something so for what it's gonna export
his class app so that's the name of the
component that it's gonna export and
here you can see Explorer default app if
you know how the module import and
export works all right so the inside
this it has this function called the
render and which returns this HTML
looking code which is really not HTML
this is called JSX this is a special
react thing you won't see anywhere else
only react users that's why it doesn't
have template now angular has jasc JS
file and template file in react you have
JSX so it's like you were including
mixing javascript and HTML so you won't
write really a HTML you pretty much
write everything in JSF which looks like
HTML but it's not really HTML because of
you see here the class name which
actually gets converted into the normal
class so if and I should see class up
hair but here it says class name at
petter so what it does it takes this JSX
and it converts into it basically output
some HTML and it would convert class
name into classes and that's how it
works and we'll look at this in more
detail in subsequent tutorials all right
so the next thing we're gonna do is
we're gonna run some tests so for every
component you have to have a test which
is no Brenner if you work in a logic
project so app dog test argyus
it's automatically created created for
you and it's just a simple test
basically which make sure that it
renders without crashing it's no brainer
right so let's run it so if I go back
here and I can say NPM test and it ran
the test it says here renders without
crashing has passed one pass one total
I'm assuming everything passed
everything is green so all right so
that's about it it's a first tutorial so
let's keep it simple practice practice
practice break it fix it and in the next
tutorial we are going to learn about gsx
and I hope you learned something from
this tutorial and if you did please like
subscribe and don't forget to like like
like like ok like subscribe and provide
a constructive comment constructive
comment thank you
[Music]