let’s so let’s move on to installation
when it comes to installing the react
library for your project there’s quite a
few options that you might consider one
of them is to use clip and website so
you could go to cope nao they have a
sample band here on a documentation
website but basically as you can see
here you have a little snippet of code
that essentially renders a title to the
dom so if you open the settings and if
you go to the JavaScript tab you can see
that there’s two libraries that have
been imported for you already so one of
them is react
that’s the core react library but
there’s also react Dom which basically
allows you to mount the HTML or JSX that
you see here on the left to the actual
Dom but of course besides that if you
were to build an actual project you
would most likely have a bunch of
different files so you have a lot of
different components that are split
across the files and you would need a
way to you know tie up all those
components typically the way you do that
is with imports and in this case who
would need to use a an external library
that we mention already before that was
basically a preprocessor that allows you
to transform use five code to a six code
but besides that it also enables support
for features such as modules modules are
important because we need to be able to
combine or tie up all the different
split files that we have into a single
bundle and that bundle is only going to
be possible with webpack as well so as
you see it gets a little bit more
complicated as we move on to higher
levels of your application so really a
code that is the best option for just
playing around or experimenting with
react without really building an actual
application perhaps the better approach
be to use called sandbox
now that website is kind of new but
essentially the idea is that it provides
you with a way to create sort of like
files in the cloud where you already
have access to all of the NPM modules as
well as babel and web pack so all that
it’s bundled up and it’s already being
displayed as you can see on the right
here and you can modify the files let’s
uh
here we are okay until here as you can
see there’s also hot module reloading so
there’s a lot of different features and
it’s very useful because you can
download the whole thing to your local
file system but at the same time if you
wanted to have full control
having your application on the local
development environment is really the
best option and in order to do that the
very first thing that you would need to
do is you would need to install no GS no
GS is basically a runtime environment
for JavaScript the reason you need to
install it is because you would need
access to npm npm is basically node
package manager it’s a global repository
that contains a lot of different
projects related to javascript so if you
wanted to install no GS you might as
well have it but in order to verify you
could do no – we and by the way I’m
running Ubuntu 1710 Artful that’s really
one of the latest releases of that
operating system but you could do the
same type of command on your system
whether it’s Windows or Mac OS anyways
already have NPM install if you didn’t
just head over to no GS board make sure
you install no GS before you do anything
else
and one of the useful tools that I
really like to use for managing nodejs
versions is known as nvm nvm is
basically known as node version manager
and it’s really powerful package that
allows you to manage different versions
of nodejs local that so let’s say you
wanted to do NV FLS that’s basically
going to print out all the different
versions of no GS that are installed in
the system if you wanted to install a
specific version you could do NPM
install and then diversion let’s say I
want to install 93.0 I would just do
that nine-30 and they would basically
install that version of no GS to my
local system of course you could also
uninstall if you want to basically
uninstall it say an older version of
known GS that’s quite a versatile and
useful package manager right there for
you and so once you get nodejs installed
the other thing that we might want to
consider installing is a boilerplate
package or library that’s known
create react app now I already mentioned
there’s quite a few things that you need
in order to create a react application
so let’s say you wanted to create that
application locally of course there’s
two things that you need one of them as
every mention is react but there’s also
a react Dom library now besides that
it’s also very likely that you’re gonna
be working with es6 right and es6
features as you probably know are not
fully supported on all the browsers just
yet so it’s best to use a preprocessor
like babel so there’ll be the third
package that you would need and of
course like I already mentioned if you
have a lot of different files split
across the project and typically that’s
the use case you would also need a way
to bundle up all those files together
and besides you would also have you know
assets such as CSS assets or sass or
less assets there’s basically your
styles or style sheets and typically you
might also have images and of course
your templates write or HTML files okay
so every act is typically no HTML files
typically you have your HTML or more
properly known as GSX that’s already
embedded into your JavaScript files but
in either case you would need a butler
such as web pack in order to be able to
compile all those files together it’s
very common for a lot of different
projects to have a single javascript
file that basically contains all of your
code as well as our goal of the vendor
libraries minified and uglify and all of
that and last but not least it’s also
useful to have hot module reloading
which webpack server provides now of
course you can install all of those
different lenders yourself but again it
takes time and usually if you just want
to build an application you really don’t
want to care about all those external
dependencies yourself it’s really useful
if you have a boilerplate project that
contains all those libraries already it
contains all the web pack configuration
for you so that you don’t have to spend
time on that and this is really what
created react app provides now if you do
a quick Google search lets to create
react app there shows up so if you open
it up I think they have a repository in
github and if you scroll down you’re
gonna see the instructions for
installing it so it’s pretty simple once
you have an OG s installed just do npm
install dash G create
we have tap I think I already have it
installed so in this case I’m not gonna
do it but once you do that you’ll have
your creator react app command that you
just do create yeah and yep as you can
see it’s already installed in my system
so if you don’t have it make sure you
install it first and then go back to
this tutorial right so once we did that
let’s actually create an application
with that package I’m gonna go to my
workspace
I go to react and I’m going to create
react app let’s call it countdown okay
so it’s basically going to stole all the
external dependencies for you right I’m
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
when it comes to installing the react
library for your project there’s quite a
few options that you might consider one
of them is to use clip and website so
you could go to cope nao they have a
sample band here on a documentation
website but basically as you can see
here you have a little snippet of code
that essentially renders a title to the
dom so if you open the settings and if
you go to the JavaScript tab you can see
that there’s two libraries that have
been imported for you already so one of
them is react
that’s the core react library but
there’s also react Dom which basically
allows you to mount the HTML or JSX that
you see here on the left to the actual
Dom but of course besides that if you
were to build an actual project you
would most likely have a bunch of
different files so you have a lot of
different components that are split
across the files and you would need a
way to you know tie up all those
components typically the way you do that
is with imports and in this case who
would need to use a an external library
that we mention already before that was
basically a preprocessor that allows you
to transform use five code to a six code
but besides that it also enables support
for features such as modules modules are
important because we need to be able to
combine or tie up all the different
split files that we have into a single
bundle and that bundle is only going to
be possible with webpack as well so as
you see it gets a little bit more
complicated as we move on to higher
levels of your application so really a
code that is the best option for just
playing around or experimenting with
react without really building an actual
application perhaps the better approach
be to use called sandbox
now that website is kind of new but
essentially the idea is that it provides
you with a way to create sort of like
files in the cloud where you already
have access to all of the NPM modules as
well as babel and web pack so all that
it’s bundled up and it’s already being
displayed as you can see on the right
here and you can modify the files let’s
uh
here we are okay until here as you can
see there’s also hot module reloading so
there’s a lot of different features and
it’s very useful because you can
download the whole thing to your local
file system but at the same time if you
wanted to have full control
having your application on the local
development environment is really the
best option and in order to do that the
very first thing that you would need to
do is you would need to install no GS no
GS is basically a runtime environment
for JavaScript the reason you need to
install it is because you would need
access to npm npm is basically node
package manager it’s a global repository
that contains a lot of different
projects related to javascript so if you
wanted to install no GS you might as
well have it but in order to verify you
could do no – we and by the way I’m
running Ubuntu 1710 Artful that’s really
one of the latest releases of that
operating system but you could do the
same type of command on your system
whether it’s Windows or Mac OS anyways
already have NPM install if you didn’t
just head over to no GS board make sure
you install no GS before you do anything
else
and one of the useful tools that I
really like to use for managing nodejs
versions is known as nvm nvm is
basically known as node version manager
and it’s really powerful package that
allows you to manage different versions
of nodejs local that so let’s say you
wanted to do NV FLS that’s basically
going to print out all the different
versions of no GS that are installed in
the system if you wanted to install a
specific version you could do NPM
install and then diversion let’s say I
want to install 93.0 I would just do
that nine-30 and they would basically
install that version of no GS to my
local system of course you could also
uninstall if you want to basically
uninstall it say an older version of
known GS that’s quite a versatile and
useful package manager right there for
you and so once you get nodejs installed
the other thing that we might want to
consider installing is a boilerplate
package or library that’s known
create react app now I already mentioned
there’s quite a few things that you need
in order to create a react application
so let’s say you wanted to create that
application locally of course there’s
two things that you need one of them as
every mention is react but there’s also
a react Dom library now besides that
it’s also very likely that you’re gonna
be working with es6 right and es6
features as you probably know are not
fully supported on all the browsers just
yet so it’s best to use a preprocessor
like babel so there’ll be the third
package that you would need and of
course like I already mentioned if you
have a lot of different files split
across the project and typically that’s
the use case you would also need a way
to bundle up all those files together
and besides you would also have you know
assets such as CSS assets or sass or
less assets there’s basically your
styles or style sheets and typically you
might also have images and of course
your templates write or HTML files okay
so every act is typically no HTML files
typically you have your HTML or more
properly known as GSX that’s already
embedded into your JavaScript files but
in either case you would need a butler
such as web pack in order to be able to
compile all those files together it’s
very common for a lot of different
projects to have a single javascript
file that basically contains all of your
code as well as our goal of the vendor
libraries minified and uglify and all of
that and last but not least it’s also
useful to have hot module reloading
which webpack server provides now of
course you can install all of those
different lenders yourself but again it
takes time and usually if you just want
to build an application you really don’t
want to care about all those external
dependencies yourself it’s really useful
if you have a boilerplate project that
contains all those libraries already it
contains all the web pack configuration
for you so that you don’t have to spend
time on that and this is really what
created react app provides now if you do
a quick Google search lets to create
react app there shows up so if you open
it up I think they have a repository in
github and if you scroll down you’re
gonna see the instructions for
installing it so it’s pretty simple once
you have an OG s installed just do npm
install dash G create
we have tap I think I already have it
installed so in this case I’m not gonna
do it but once you do that you’ll have
your creator react app command that you
just do create yeah and yep as you can
see it’s already installed in my system
so if you don’t have it make sure you
install it first and then go back to
this tutorial right so once we did that
let’s actually create an application
with that package I’m gonna go to my
workspace
I go to react and I’m going to create
react app let’s call it countdown okay
so it’s basically going to stole all the
external dependencies for you right I’m
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
Please follow and like us: