REACT JS TUTORIAL #1 - Reactjs Javascript Introduction & Workspace Setup Video Lecture | Learn React JS: Fundamentals for Front-End Developers - Front-End Programming

I am really excited about this series on
react I've been wanting to do it for a
year I've been coding react 40 hours a
week working on react apps for at least
a year now and I'm loving the tool
loving the frameworks you build with
react and it just changes the way that
you think there's several concepts that
react introduces that drastically
changes the way you approach building
web apps and building stable web apps so
I really like it I think you'll love it
as well like I said changes the way you
think for the better so let's get into
it
only prerequisites for watching this is
you need to know a little bit of web
pack which I just did a web pack video
so you can get up to speed and you want
to know es6 I have a few videos on es6
as well you don't have to master es6 you
just have to kind of generally know what
the concepts are so go to watch those
videos if you haven't seen them and then
let's get into react so all my code will
be in a github repo for this whole
series we're going to start off in the
basic react folder and I did a little
bit to add on to where we picked we left
off with the web pack video I've
installed some babel stuff babel is a
great tool for transpiling our react
code which is JSX and then it'll also
transpile our es6 code at the same time
and then this will go all the way back
to at least ie8 support my company
supports IE 8 so i can tell you that all
the code we're doing here does work in
IE 8 so that's great
and we got those installed and here's
what the web pack config looks like the
biggest change is you see I've added a
loader here so anything that's a j/s
file gets run through the babel loader
with the exception of node modules and
bower components should we have those
and then they'll basically transpile
react JSX transpile es6 code and we're
also going to do some bleeding edge
features that might not be fully
incorporated yet into es 2015 just in
case you want to use those we probably
won't get into those in this video we're
going to convert some react to HTML
attributes we're going to add class
properties D S 6 which is a great
feature we're also going to be able to
use decorators so there we go that's a
that's our transpiling
and now we just have to run way
pack to build our code you can see we're
basically taking client J s up here and
we're transpiling it down to be client
min j s which is all of our code which
is right there so here's our index.html
we simply have an active div id app
that's it our entire app is going to
render into there and then our client
Minjae s is of course we're loading that
so let's go and run an NPM install get
all that going that's good oh yeah I
already ran NPM install and we should
just be able to run web pack there we go
it transpile we could also run web pack
watch and that will watch our code for
changes and as we save it'll continue to
reach ange so I'll take the client J s
you can see that it will well there were
no changes there so it didn't read it
didn't reach reinstall a add an S you
can see there we go
re transpiled everything so we're going
let's go and look at this client J s now
start breaking down the extreme basics
of react app we're going to import react
we're going to port react Dom which is
our rendering engine now react is great
in that you don't have to render it to
HTML you can render to a whole bunch of
stuff you can render to a string you can
render it to the Dom which is our active
web page is what we're using here and
the actual rendering engine is separate
from the react syntax which is very cool
concept that makes it the code you write
extremely versatile even towards native
apps and things like that so the first
thing we're going to do is we're going
to create a layout component or layout
class we're extending the react
component the core of react is
everything is a component if you were
looking in index dot HTML everything is
an element in HTML it's a body element
with a div element and that's kind of
the concept Beach went behind react
components everything is a component
instead of an element so in this case we
have a layout component and the very
basic you need a render method for a
component so the render method is a what
are we spitting out and here's the JSX
part of it which will freak you out at
first is anything wrapped in per
can convert HTML to JavaScript created
elements so in JavaScript you can do
document create elements up you know now
I just made a div and then I can do you
know Verde of equals then I can go div
dot inner HTML equals some content so
this is basically going to transpile
down to stuff like that but that's a
real pain to type so JSX allows you to
type something that's much more familiar
you can get great syntax highlighting on
it if you install a JSX plugin to
whatever text editor you're using atom
or sublime and it'll transpile it down
so at first it feels very awkward
because you're kind of thinking aren't
eye blending HTML with JavaScript and
then you finally realize no JavaScript
creates HTML elements all the time this
is just an easy way to do it day in day
out it makes it easy for the developer
and then if you ever want to render a
component you use it as if it were an
HTML tag so just like this
I'm telling now here's my component for
my whole layout I'm going to go get the
app element which is this guy right here
my ID of app and I'm going to render my
layout into app and that's my react app
okay web pack is running and then let's
go ahead open up my file here my HTML
file and there you go it works so I can
again go it's working transpiled it it's
working ok great
so let's wrap up our workspace in our
workflow here obviously we'll want to
get some kind of live reload happening
and web pack dev server is kind of the
standard way of doing that so let's go
ahead and go npm install web pack Deb
server
let's go ahead and get it maybe an NPM
run dev command going so web pack dev
server is running
and let's go so now we could actually
run let me install this globally as well
which I won't be using but I'll do it
for now let's get web pack dev server
installed globally so I have the web
pack dev server command actually I need
to give it a content base so since I
don't want to serve this folder that I'm
in right now I want to serve the source
folder so I'm just going to go content
base is source it's that way it's going
to serve index.html will be the root of
that so now I can actually go to
localhost 8080 and there we go I have
localhost 8080 working let me go ahead
and get a split screen going on now but
I don't have live reload up yet you can
do two things by default you can go the
iframe mode which is just web pack dev
server and that's index.html and you'll
see this loader bar up there and it will
automatically load your app into a brand
new iframe every time so let's go to
working it's going to recompile reload
so that's kind of smooth if that works
for you straight out of the bag that's
great
another thing you can do is you can add
the inline flag and hot flag hot will
help it do inline a little bit better so
if you had inline in hot then you're not
going to have that top and it's just
going to automatically do it inline
which is basically live reload so we're
going to go ahead go ahead and take that
command we're going to just go ahead and
make that's kind of a mouthful to type
every time so let's go ahead and add
that to our package.json let's go to our
scripts let's make a dev there we go npm
run dev now we'll run this command for
us excellence
MPM run dev gets our full web pack dev
server running and we're up and rolling
only other thing I'm going to change is
I don't want to have all my developers
have to do an NPM install global of web
pack dev server so I'm actually going to
reference what the node modules been you
can see that it installs a command of
web pack depths or installs a an
executable web pack dev server as well
so I can actually execute this command
with dot slash so I'm going to go dot
slash node modules dot bin slash web
pack dev server and that's taken care of
by my package now so now I can actually
uninstall G web pack dev server going to
uninstall that one and now NPM run dev
will still work because I'm referencing
the one that's in my repository so
that's a little bit of a cleaner way at
first with no js' we always had
everybody install a global for
everything and now I just think it's
much cleaner to install it with your
package install it locally to your app
that way the the exact version you need
for your app is installed in your app
folder and then you run it with a node
script npm run dev or npm start is kind
of the standard choices that you would
pick so there we go that's running
that's our setup for react let's
actually in the next video get into all
these components and how to work with
them