hey guys what’s going on it’s very nice
to have you back so we are December 30th
of 2017 which means that the new year is
just around the corner now what the new
year is gonna be a lot in your videos
series and courses and the very next one
that I’d like us to look into would be
the react library so I’m gonna be making
a series react it’s basically going to
be a course on the react basics
including you know managing state
passing props building components things
of that nature so we’re going to build
an application similar to the following
one so here we got basically a countdown
timer that calculates the number of days
hours minutes and seconds until the new
year now you can also see that we got a
few controls right there we got a stop
button as well as a resume button
basically you can stop it that’s gonna
stop the timer
and of course if you click on resume
that’s going to resume the flow of the
countdown timer now the other thing I
think we’re going to do is we’re also
going to add an input field with a
date/time picker so that you’ll be able
to actually select a custom date and
that’s going to be pretty useful back to
this page so as you can see here I am on
react.js org and that’s the official
website for the react library and
perhaps the best explanation for what
react or react giasses can be found on
the official website
so the websites years they said we act
as basically a JavaScript library for
building user interfaces now notice that
it doesn’t say that react is a framework
in fact even though we often would react
alongside other frameworks like angular
U or ember react really as you’re gonna
see is more of a library rather than a
framework now before we get into that
first of all some of the features of
react GIS is that it’s first of all
declarative meaning that react in itself
abstracts a lot of common functionality
that you typically have to do yourself
using pure JavaScript so here we’re
talking about making your pages dynamic
things like you know gathered an input
for me users validating input things of
that nature the larva that is already
attracted by the library itself and so
provides you a lot of useful
functionality yet you can use in your
projects so that you don’t have to would
be the same logic again and again
and the other thing is that because
react uses what’s known as a virtual Dom
the library will only update those parts
were those segments or your web page
that have actually been updated in terms
of State or data and of course we’re
going to get into more detail about that
throughout the series the other feature
is that we have this also component
based basically the philosophy behind
react is that your UI or user interface
basically built up from smaller reusable
and maintainable chunks or what’s known
in react as components this is the same
philosophy that I’m actually angular
adopted in its version two components
are basically building blocks of your UI
essentially they house HTML the Styles
as well as the behavior that’s
associated with that specific component
or element when you break down your
application into smaller segments that
basically makes your application or
website more manageable and more
maintainable and last but not least
react is also portable what that means
is that react can be easily imported
into an existing project so let’s say
you already have a legacy application
that you want to upgrade you can plug-in
react pretty easily and you can only use
those elements or components that you
wish so you don’t have to rebuild or
rewrite the whole thing and of course
it’s pretty useful for new applications
as well and react can be used for
multi-page applications or can be used
for signal page applications or SBA’s
and of course with react native we have
to also be used for mobile or native
mobile applications and progressive web
apps so that’s one of the other
advantages now a few things about react
history so react was first deployed
released on facebook.com in 2011 it was
then adopted by Instagram in 2012 and
shortly after that react was also open
sourced and 2013 so between those four
years we’re actually pretty much at the
end of 2017 there’s been quite some time
and the react community has been growing
and growing there’s been a lot of
different frameworks and projects and
repositories on get up so at this point
it’s fair to say that react is a very
mature framework that’s suitable for
production level applications
various scale and size in fact if you
look at github you can see that react is
one of the most popular repositories by
the number of stars you could also see
that UGS is sort of like a little bit
behind but still catching up pretty
quickly and then if you go to the second
page you’re gonna see angular one right
there which by now is pretty much
deprecated but that’s a different story
and the very last thing I’d like to
mention is recently actually in
September this year Facebook announced
that it was going to relicense its react
library from bsd to MIT license and it’s
really good for us as a community of
developers because it means that there’s
going to be less concerns when it comes
to licensing or applications and in fact
not only did facebook mention that it’s
react library is going to be updated but
also some of the other projects
including the just testing framework as
well as immutable GS and lastly if you
notice that I wanted to mention about
react like I said react is pretty mature
it’s been around for quite some time and
the community has developed quite a big
ecosystem around react so there’s a lot
of different UI frameworks including
material UI and as well as bootstrap you
are there’s really a lot of them of
course as you would expect as also react
router which is a library that’s used
for navigation besides we also have
libraries that aid us in managing data
as well as state so things like flux
reacts and reflux and last but not least
also testing so there’s two big players
one of them is just that’s a testing
framework developed by Facebook and
there’s also another one developed by
Airbnb that’s known as enzyme and of
course as usual you have your other you
know testing frameworks and utility
libraries like mocha chai Jasmine karma
there’s really a lot of different
choices that you could consider so
that’s pretty much it for the
introduction let’s move on to installation now
to have you back so we are December 30th
of 2017 which means that the new year is
just around the corner now what the new
year is gonna be a lot in your videos
series and courses and the very next one
that I’d like us to look into would be
the react library so I’m gonna be making
a series react it’s basically going to
be a course on the react basics
including you know managing state
passing props building components things
of that nature so we’re going to build
an application similar to the following
one so here we got basically a countdown
timer that calculates the number of days
hours minutes and seconds until the new
year now you can also see that we got a
few controls right there we got a stop
button as well as a resume button
basically you can stop it that’s gonna
stop the timer
and of course if you click on resume
that’s going to resume the flow of the
countdown timer now the other thing I
think we’re going to do is we’re also
going to add an input field with a
date/time picker so that you’ll be able
to actually select a custom date and
that’s going to be pretty useful back to
this page so as you can see here I am on
react.js org and that’s the official
website for the react library and
perhaps the best explanation for what
react or react giasses can be found on
the official website
so the websites years they said we act
as basically a JavaScript library for
building user interfaces now notice that
it doesn’t say that react is a framework
in fact even though we often would react
alongside other frameworks like angular
U or ember react really as you’re gonna
see is more of a library rather than a
framework now before we get into that
first of all some of the features of
react GIS is that it’s first of all
declarative meaning that react in itself
abstracts a lot of common functionality
that you typically have to do yourself
using pure JavaScript so here we’re
talking about making your pages dynamic
things like you know gathered an input
for me users validating input things of
that nature the larva that is already
attracted by the library itself and so
provides you a lot of useful
functionality yet you can use in your
projects so that you don’t have to would
be the same logic again and again
and the other thing is that because
react uses what’s known as a virtual Dom
the library will only update those parts
were those segments or your web page
that have actually been updated in terms
of State or data and of course we’re
going to get into more detail about that
throughout the series the other feature
is that we have this also component
based basically the philosophy behind
react is that your UI or user interface
basically built up from smaller reusable
and maintainable chunks or what’s known
in react as components this is the same
philosophy that I’m actually angular
adopted in its version two components
are basically building blocks of your UI
essentially they house HTML the Styles
as well as the behavior that’s
associated with that specific component
or element when you break down your
application into smaller segments that
basically makes your application or
website more manageable and more
maintainable and last but not least
react is also portable what that means
is that react can be easily imported
into an existing project so let’s say
you already have a legacy application
that you want to upgrade you can plug-in
react pretty easily and you can only use
those elements or components that you
wish so you don’t have to rebuild or
rewrite the whole thing and of course
it’s pretty useful for new applications
as well and react can be used for
multi-page applications or can be used
for signal page applications or SBA’s
and of course with react native we have
to also be used for mobile or native
mobile applications and progressive web
apps so that’s one of the other
advantages now a few things about react
history so react was first deployed
released on facebook.com in 2011 it was
then adopted by Instagram in 2012 and
shortly after that react was also open
sourced and 2013 so between those four
years we’re actually pretty much at the
end of 2017 there’s been quite some time
and the react community has been growing
and growing there’s been a lot of
different frameworks and projects and
repositories on get up so at this point
it’s fair to say that react is a very
mature framework that’s suitable for
production level applications
various scale and size in fact if you
look at github you can see that react is
one of the most popular repositories by
the number of stars you could also see
that UGS is sort of like a little bit
behind but still catching up pretty
quickly and then if you go to the second
page you’re gonna see angular one right
there which by now is pretty much
deprecated but that’s a different story
and the very last thing I’d like to
mention is recently actually in
September this year Facebook announced
that it was going to relicense its react
library from bsd to MIT license and it’s
really good for us as a community of
developers because it means that there’s
going to be less concerns when it comes
to licensing or applications and in fact
not only did facebook mention that it’s
react library is going to be updated but
also some of the other projects
including the just testing framework as
well as immutable GS and lastly if you
notice that I wanted to mention about
react like I said react is pretty mature
it’s been around for quite some time and
the community has developed quite a big
ecosystem around react so there’s a lot
of different UI frameworks including
material UI and as well as bootstrap you
are there’s really a lot of them of
course as you would expect as also react
router which is a library that’s used
for navigation besides we also have
libraries that aid us in managing data
as well as state so things like flux
reacts and reflux and last but not least
also testing so there’s two big players
one of them is just that’s a testing
framework developed by Facebook and
there’s also another one developed by
Airbnb that’s known as enzyme and of
course as usual you have your other you
know testing frameworks and utility
libraries like mocha chai Jasmine karma
there’s really a lot of different
choices that you could consider so
that’s pretty much it for the
introduction let’s move on to installation now
Please follow and like us: