right and back here looks like it all
finished let’s do CD countdown let’s go
to that repository that project let’s do
atom dot so that’s basically going to
open up the project for us to see all
the files they’ve got installed the
other thing I’m going to do is I’m going
to do NPM start basically what that’s
going to do that’s going to open up the
project for us and the browser so we can
see what it looks like
we’re then also gonna open up the dev
tools in chrome so this is basically
what it looks like you have a logo a
title and a sentence right there and if
you go back to Adam we have quite a few
files install already so the very first
thing you’re gonna see is node modules
that’s that’s very typical that’s the
folder that contains all of your
dependencies that got installed once you
ran the create react app command if you
open the package JSON file you’re gonna
see it already has a few commands for
you like the one that will just use NPM
start there’s also one for building up
and bombing your project basically NPM
run build is one for testing and one for
exacting now which acting is being used
when you want to Def out let’s say the
web pack configuration files if you want
to make changes or you want to customize
the web pack configuration that’s
basically one of the use case why you
would want to do that but typically
react already comes with we have scripts
that contain a default setup for you so
you don’t have to worry about setting up
your project yourself and this setup is
suitable for most you know simple to
medium-size applications right so
besides that we got our gate ignore file
we got baggage lock JSON that has to do
with the package.json file and we’re not
gonna look into that it also a quick
Whitney file and then we got our public
folder now this public folder contains a
favicon so that I can that you see right
there
but also go back to Adam we’ve got our
index.html so this is the single index
HTML template or file it’s being
displayed to the Dom so this is the only
HTML file you’re gonna have in your
project all the other files are going to
be JavaScript files so
with the extension GS or they could also
be files with the Deus Ex extension are
we going to talk a lot jxx
and the next videos as well the
important thing to note for now is this
div with the idea of route this is where
the application is going to be mounted
to now if you go to index GS under is
the source file in fact I’m going to do
is I’m going to clear up the structure a
little bit so that it becomes simpler
for us to use so I’m gonna remove these
Styles is really don’t need them remove
that serviceworker also the semicolons
because I really don’t like to use them
you’re gonna say that we don’t need a
new logo and the serviceworker is gonna
go as well so let’s see there’s some CSS
in here you might use it eventually but
for now I’m just gonna kill it
the same goes for tests we don’t really
need any tests for the application
component so here in app GS we got our
first component so remove the CSS so as
the logo in fact I mentioned the favicon
the favicon is of course the favicon
that you see right there in the top the
actual logo was the file we delete a
couple of seconds ago from source folder
sorry about that
but anyways back to this app GS we’ve
got our component essentially this is
one of the examples of how you would
typically create a component I’m gonna
delete all this market here because it
really don’t need it so let’s have a tow
here
welcome to the react crash course just
semicolon really don’t like semicolons
that’s just a personal preference
anyways you’ve got that and you also got
our last X CSS file which you also want
to kill okay so we simplified it quite a
bit and so in this fgs file as you can
see we have our es6 class here so by
defining a class we basically define a
component and that’s one of the ways to
create components in react as you can
see this class the speciality of this
class is that it extends a component
that’s basically an internal class in
react essentially your app component is
represented by the app class and then
what you do at the end of file is you
export the app class and then back in
index es your app class or your app
component is being imported and then
here as you can see we do we have Dom
render with that app component and in
fact we can even simplify this just a
little bit I’m gonna do in named imports
I’m gonna do render from react Dom and
I’m just gonna call that method directly
just to simplify it a little bit and
then we don’t need the react Service
Worker okay so that should be good and
back here in the browser we see our
title and if you open it up with the dev
tools you’re gonna see our div with the
idea of route that comes from the
index.html template right here and then
you also see our title that we have
inside of our component and here okay so
hope that makes sense we simplify the
structure just a little bit so that we
begin with a simple clean slave and in
the next video we’re gonna get into
building the actual project so hope you stick around and I’ll see you next time
finished let’s do CD countdown let’s go
to that repository that project let’s do
atom dot so that’s basically going to
open up the project for us to see all
the files they’ve got installed the
other thing I’m going to do is I’m going
to do NPM start basically what that’s
going to do that’s going to open up the
project for us and the browser so we can
see what it looks like
we’re then also gonna open up the dev
tools in chrome so this is basically
what it looks like you have a logo a
title and a sentence right there and if
you go back to Adam we have quite a few
files install already so the very first
thing you’re gonna see is node modules
that’s that’s very typical that’s the
folder that contains all of your
dependencies that got installed once you
ran the create react app command if you
open the package JSON file you’re gonna
see it already has a few commands for
you like the one that will just use NPM
start there’s also one for building up
and bombing your project basically NPM
run build is one for testing and one for
exacting now which acting is being used
when you want to Def out let’s say the
web pack configuration files if you want
to make changes or you want to customize
the web pack configuration that’s
basically one of the use case why you
would want to do that but typically
react already comes with we have scripts
that contain a default setup for you so
you don’t have to worry about setting up
your project yourself and this setup is
suitable for most you know simple to
medium-size applications right so
besides that we got our gate ignore file
we got baggage lock JSON that has to do
with the package.json file and we’re not
gonna look into that it also a quick
Whitney file and then we got our public
folder now this public folder contains a
favicon so that I can that you see right
there
but also go back to Adam we’ve got our
index.html so this is the single index
HTML template or file it’s being
displayed to the Dom so this is the only
HTML file you’re gonna have in your
project all the other files are going to
be JavaScript files so
with the extension GS or they could also
be files with the Deus Ex extension are
we going to talk a lot jxx
and the next videos as well the
important thing to note for now is this
div with the idea of route this is where
the application is going to be mounted
to now if you go to index GS under is
the source file in fact I’m going to do
is I’m going to clear up the structure a
little bit so that it becomes simpler
for us to use so I’m gonna remove these
Styles is really don’t need them remove
that serviceworker also the semicolons
because I really don’t like to use them
you’re gonna say that we don’t need a
new logo and the serviceworker is gonna
go as well so let’s see there’s some CSS
in here you might use it eventually but
for now I’m just gonna kill it
the same goes for tests we don’t really
need any tests for the application
component so here in app GS we got our
first component so remove the CSS so as
the logo in fact I mentioned the favicon
the favicon is of course the favicon
that you see right there in the top the
actual logo was the file we delete a
couple of seconds ago from source folder
sorry about that
but anyways back to this app GS we’ve
got our component essentially this is
one of the examples of how you would
typically create a component I’m gonna
delete all this market here because it
really don’t need it so let’s have a tow
here
welcome to the react crash course just
semicolon really don’t like semicolons
that’s just a personal preference
anyways you’ve got that and you also got
our last X CSS file which you also want
to kill okay so we simplified it quite a
bit and so in this fgs file as you can
see we have our es6 class here so by
defining a class we basically define a
component and that’s one of the ways to
create components in react as you can
see this class the speciality of this
class is that it extends a component
that’s basically an internal class in
react essentially your app component is
represented by the app class and then
what you do at the end of file is you
export the app class and then back in
index es your app class or your app
component is being imported and then
here as you can see we do we have Dom
render with that app component and in
fact we can even simplify this just a
little bit I’m gonna do in named imports
I’m gonna do render from react Dom and
I’m just gonna call that method directly
just to simplify it a little bit and
then we don’t need the react Service
Worker okay so that should be good and
back here in the browser we see our
title and if you open it up with the dev
tools you’re gonna see our div with the
idea of route that comes from the
index.html template right here and then
you also see our title that we have
inside of our component and here okay so
hope that makes sense we simplify the
structure just a little bit so that we
begin with a simple clean slave and in
the next video we’re gonna get into
building the actual project so hope you stick around and I’ll see you next time
Please follow and like us: