hey guys welcome back to cold room my
name is Alex and in this video I’m going
to show you how to set up a react
project from scratch now up to this
point in my videos I’ve been using a
tool known as create react app and it’s
a useful tool for quickly scaffolding
react applications
well the production already set up now
there are quite a few disadvantages and
create react out first of all it’s quite
opinionated it’s tailored towards
Facebook products so for instance for
its testing framework it’s using just
instead of something like mocha or even
Ava and it’s also using eeeh Slynt
instead of standard G s for example
apart from being opinionated it’s also
bloated with quite a few packages in
libraries that you might not necessarily
need for your project and on the other
hand it also lacks support for some of
the es next features like decorators and
it also doesn’t have support for
server-side rendering just to name a few
things now of course you could eject
your wetback setup and your create react
app but if you do that the setup is
fairly sophisticated and even though
it’s well documented it may not
necessarily be useful or easy to follow
for a beginner so what I thought I’m
gonna do in this video is a walk you
through setting up a react project with
only the basic necessary tooling to get
you started and of course you could use
that setup to build on top of it to add
more features that you need for your
project so what I’m gonna do is I’ll
switch to my terminal over here I’m
gonna create a new directory for a
project I’m gonna call it react app I’m
going to switch to that directory
afterwards in this case the dollar sign
underscore syntax refers to react app
I’m going to open the project in Visual
Studio code I’m gonna create an entry
file we’ll call it index yes what we
want to do in the end in this file is we
want to render an app component that
we’re about to create we’re gonna mount
that component to a Dom element so we’re
gonna do document.getelementbyid e and
we’re gonna call it app it’s also very
common to call it root but in this case
I’m gonna leave it a tap for now so if I
were to be a JavaScript compiler first
of all I would immediately complain
about the render method because it’s not
defined in the scope of this file so the
render method of course refers to the
render export out of react DOM and
that’s the package you needed to render
react components and react elements to
the Dom of a browser and for this gsx
syntax over here we’re going to need to
import react so I’ll do import
act from react like that and lastly the
app component itself also needs to be
imported we’re gonna create it in just a
second so let it from the root of the
project let’s create a new file I’ll
call it app J s in that file I’ll create
an app constant this will be a
functional component for now I’m just
gonna have an h1 inside we’re gonna have
a hello message I’m gonna do an export
default of the app component and then
lastly we’re gonna need to import react
from react now you might be asking
yourself why do we need to import react
in this file the JSX syntax you see over
here is actually not supported by the
browsers and when we import babel to a
project Babel is gonna transform this
piece of code to something like react
create element it’s gonna pass in the h1
as the node type it’s gonna have null
because we don’t have any properties and
finally we don’t have any child nodes so
the last argument is also gonna be null
so the JSX element you saw before it’s
gonna be transformed to this create
element method call like so now I’ll
bring it back to JSX for a second and
we’re gonna leave it at that so next i’m
gonna create a new file let’s call it
index.html in this index.html I’m gonna
do HTML calling 5 this will quickly
scaffold an HTML file in there I will
create a div element this is gonna refer
to the app root element that we
referenced an index yes over here
it’ll be this element right there and
then I’m also gonna have a script tag
it’s very common for single page
applications to have a single bundle
file so this bundle file is basically
going to contain all the code for our
application now how do we get our code
in index GS as well as the app component
to go to the bundle GS file because the
problem right now is that the import
syntax is not gonna be recognized by the
browser’s so what we need in this
project in the end is actually a module
bundler one of the popular brand lawyers
is known as web pack web pack allows you
to bundle multiple modules like we have
over here at the index.js file the app
component all of the other components
that you’re gonna create in your own
project web pack is gonna allow you to
bundle all those files into a single
bundle and it also allows for multiple
optimizations like minification
uglification and even more advanced
features like code splitting the reason
for using something like webpack is not
only so that you’re gonna be able to use
modules so the es6 modules we talked
about but it’s also performance because
instead of having multiple script tags
you’re gonna have a single script tag
and this will allow the client browser
to only make a single request to your
server instead of making multiple
requests to all the different JavaScript
files so let’s cut through the chase I’m
gonna go back to the terminal
first of all we’re gonna have to set up
a project so I’ll do yarn in it – why
and of course you could also do NPM in
it with the Y flag if you wanted to I’m
gonna next install web pack itself and
we’re also gonna have to install wetback
CLI at the moment of recording this is
gonna install web pack version 4 version
4 is the latest version of web pack some
of the advantages that it has is
performance so it’s actually quite
faster than version 3 it also has two
default modes
developed and in production it has a
zero configuration setup it also has
very nice default settings to run web
pack you could actually use an TX which
is a package runner available from NPM
5.2 upwards so you could do npx web pack
and this will actually fail now first of
all we see that the mode option has not
been set the thing about web pack four
is it comes with two default modes one
of them is development and it’s actually
optimized for build time so it’s
actually tailored for fast compilation
of your assets and providing useful
debugging messages as well now the
production mode is actually tailored for
production so it’s gonna reduce the
bundle size make your code as fast as
possible at runtime and it’s also gonna
optimize your assets so I’m gonna modify
the command that we ran I’m gonna
provide the mode development for now and
the second error that we get is that
webpack cannot resolve dot SRC so
without the configuration file web pack
is actually gonna look for an entry file
and in this case it expects to have a
source directory so let’s do exactly
that I’ll do make directory source let’s
see if that fixes the error and actually
it doesn’t because the entry file is
still not found so I’ll switch back to
Visual Studio code what I’ll do is I’ll
move index.js file to source directory
and I’ll do the same for the app
components so that it can be resolved
properly I’ll go back to the terminal
and I’ll run the command again and let’s
see what next error we get the error it
doesn’t have to do
with the import syntax as you might
think because webpack is actually
agnostic to the module system that
you’re using so you might be using es6
modules you might be using common GS
with the required statements or you
might even be using AMD web pack
actually supports all those but the air
we get has to do with this syntax over
here
so what pack doesn’t recognize the JSX
syntax we’re trying to use so in this
case we can actually use a tool known as
Babel what I’ll do is I’ll go back to
our browser and I’m gonna switch to
Babel JSI oh and this is the official
website for Babel if you’d like to set
up Babel you can go to uni setup and
then click on web pack in this case what
you need to do first is you need to
install a couple of dependencies first
of all you need Babel loader as well as
Babel core and then afterwards you can
install some of the presets you’d like
to use
so copy those two dependencies let’s go
back to the terminal
I’ll do yarn add these two are also
gonna be def dependency it’s just a
Quebec and webpack CLI but this item
also can install babel preset react the
react preset is going to allow us to
transform a JSX syntax that web bag does
not recognize so I will run that command
I’m gonna next to create a file we’ll
call it babel or see this file can be
used to specify the presets that you
want to use in your project so using
json syntax i’ll create a key called
presets in this case we’ll just have one
we’ll call it react so let’s once again
run in DX web pack without the mode
option it’s actually going to default to
production but we get the same error as
before and that’s really because we
haven’t told web back to use battle
loader
now instead of creating a configuration
file for web pack what we can do for the
time being is we can do npx web back and
we can pass in a special flag known as
module vine and for javascript files
we’re gonna bind this to babel loader so
this tells web back to use babel water
as well as apply the babel or c file
that we’ve set up over here with the
react preset now this will actually fail
because we don’t have the react as well
as react down dependencies so let’s fix
that I’m gonna do yarn add react as well
as react dumb you might be asking
yourself why do we need two packages
well the first one react is actually
used for building user interfaces and
those interfaces Iraq
the agnostic of the environment in which
they’re gonna be used because those
projects can be used in web environments
such as browsers they can also be built
as native apps so for environments like
iOS or Android and even for environments
that support virtual reality the second
package we’re pulling in is actually
react on and this one is targeted
towards browsers so in this case we’re
gonna run our project in a web
environment that’s why we need the
second package so let’s run the same
command like we did before and hopefully
it’s gonna succeed this time we’re gonna
get the same warning like before that’s
because we didn’t supply the option but
it looks like the bundle has been
finally generated and if you go to
visual studio code you’re gonna see a
dist file with the main GS bundle in
this case it’s tailored towards
production now in your index.html file
you can actually modify the path for the
time being so I can set it to dist slash
main ge’ez and if I save that I might
actually copy the path of this file I’m
gonna go back to the browser I’ll open
the new tab and I’ll actually paste that
path and as you can see here it actually
worked so we can see our hello element
over here
it’s an h1 tag nested inside a div with
the idea of app but if you look at me
and is a bit closer let’s search for
hello you’re actually gonna see that
this function over here and of course
you can see so far it’s been magnified
and uglify it that’s because the web
pack mode has been set to production but
either way you could see that this
function over here that refers to the
app component is actually still an arrow
function and everything else inside this
file is gonna use es5 syntax this es6
syntax is not gonna work in browsers
like ie 11 that’s because those older
browsers do not support es6 features so
if you do want to enable cross browser
support you’re gonna need to import
another preset this preset is known as
babel preset and we’re gonna install it
as a dab dependency this one is babel
preset and like this and i’m gonna go
back to our project I’ll go to Babel or
C file I’m gonna paste in the
environment presets like this so let’s
go back to the terminal
once it successfully finishes in stolen
I’ll call the same command as before and
this will create a new bundle for us so
in this case the main J’s file is gonna
be generated and if we look for hello
once
again you’re gonna see that now it’s
actually an es5 function this app
component in the end has been
transformed to a regular function and
now this bundle is actually suitable for
just about any browser you can imagine
so this is actually gonna work on ie 11
as well so let’s say for our index.html
file instead of main GS I wanted the
bundle to be called bundle GS so how can
we tell web pack to have our output file
called bundle GS instead of main GS well
this can actually be done through CLI
options so we can call web pack once
again and I’ll also specify the output
option and in this case it’s actually
very common for index.html files to be
placed in a directory called public so
if you set up an actual project if you
deploy it to a host you might also tell
your hosts to point to the public folder
this way anything that’s inside of the
public folder is gonna be visible to all
to the public but everything outside of
it so all the source code and other
files are not going to be visible and
the same thing goes for the bundle file
so we can actually move it to the public
directory so I’m gonna delete dist and
our disk is actually gonna be moved to
public so back in our terminal once
again I’m gonna set the output to public
bundle GS let’s wait till it finishes
I’ll go back to a project and you can
see that over here it created a bundle
J’s file so I’ll delete main GS for the
time being hey lastly what Abel wanted
to customize the entry file so instead
of index GS for instance what if you had
something like bootstrap J s right so
again this can be customized from any
CLI it’s actually gonna be the second
argument that you pass to your web pack
command so in this case we’re gonna call
it source and you can have your
bootstrap and the GS extension is
actually optional in this case so let’s
call that command once again it’s gonna
recreate the same bundle so now the
bundle J’s file is actually on the same
level as index.html so you can remove
the dist slash prefix from there if you
save this file you can actually copy the
path of the index.html file I’ll go back
to the browser and I’ll open it again
and you can see that the project loads
successfully now passing all these
options from the command line might
actually be quite tedious so it’s often
useful to create a configuration
while instead with the config file we’re
gonna create weapon config yes and
basically this file only does an export
of an object and this object often has
three main keys so first of all it has
the entry
it also has output and finally module
the entry key is actually used to
specify the entry file in this case it’s
going to be source bootstrap as far as
the output this will specify the output
file so we need to provide the path this
one actually has to be an absolute path
so it’s common for people to use the
path module from nodejs
but in this case what I’ll do is I’ll
provide a template string I’m gonna
reference dur name I’ll put it slash and
finally we’ll go to public this will be
the path for a bundle and then the file
name itself needs to be bundle is I’ll
put in a comma and lastly the module key
is actually used to set up loaders so if
you go to the Babel documentation for a
second you’re gonna see this section
over here actually tells you how to set
up the loader for web pack so copy that
same thing I’ll go back to your project
and I’ll paste it in so what this rule
actually does is it targets all the
JavaScript files excluding any of those
and node modules and it applies a Babel
loader to them so this is kind of
analogous to what we’ve been doing
through the CLI bypassing module bind
with Babel loader it’s actually more
convenient to do it from the
configuration file of course so now what
we have to do is we need to run NTX
web pack so this should be able to pick
up the configuration file or created
over here and if we go back to our
browser I’m gonna switch back to our tab
with the project I’ll do a hard refresh
and you can see that we get a message
and this one shows up because we chose
the development mode of course now let’s
see if we had an error in our code so
for instance I might go back to our app
component so what I’ll actually do is
I’ll throw in a new error let’s say
something went wrong okay if we
regenerate the bundle once again I’m
gonna do a hard refresh and as you can
see here we get an error which is pretty
much expected but if you click on the
App J’s file over here you’re gonna see
that the file doesn’t really resemble
the code that we actually have in our
project so it doesn’t look
the same as this content over here so to
make those sources resemble the code
that we actually have in our project
we’re gonna need to use the e source map
so going back to our web pack config
over here web pack by default uses the
eval source map but you can tell it to
use a different source map so in this
case you might set it to source map this
is actually the name of the source map
it’s gonna use and this one is useful
for development as well as production
and for the stack trace it’s actually
going to use the exact same code as you
have in your project so let’s regenerate
the bundle once again this time it’s
gonna create a new file in the public
directory it’s gonna be called bundle
Jaya’s dot map and this one of course
refers to the source map so if we
refresh over here you’re gonna see that
the file that we’re inspecting over here
has the same code as our source code so
it’s actually more useful for debugging
purposes now you might also have reasons
not to use the source map in production
if you wanted to distinguish between
development and production modes in your
backpack config file instead of
exporting an object like this you could
actually export a function now this
function is gonna expect two arguments
one of them is gonna be environment this
one refers to the environment options
you set from the command line the other
one refers to all the other options you
also set from the CLI in this case I’ll
pass in an arrow function now the reason
this is actually gonna work is because
I’m using node 10 and my version of node
is actually supporting all the es6
features in fact you might be using
something like node 8 or even node 6 you
still should be able to use things like
arrow functions in this case so in this
case what you can do is you could say
well let’s see if the art v argument
contains the mode set to development in
this case we’re gonna be using a source
map otherwise oh you might be tempted to
set it to false for example even though
it might not necessarily be the best
option but this is gonna work actually
so let’s go back to the terminal I’ll
run the same command like before and
this will actually generate the same
exact bundle so we’re still gonna have
our source map but if I were to delete
bundle GS so let’s do remove public
bundle let’s actually move all the files
that begin with bundle so do LS dash L
on the public folder we’ll still have
index.html I’m gonna run the same web
packing
this time I’m gonna set it to production
so this should not generate any source
map so let’s see if this works as you
can see here it did not generate the
source map and that’s because we set it
to false
now we’ll actually regenerate the bundle
once again let’s have a development
bundle like we did before and let’s see
an arab component will still have an
error so this is gonna throw in a
fictional error but if i refresh it as
you can see we still get the same source
map like before this way for development
you can see exactly where the error is
happening the other thing is that for
your project it’s also very common to
use more advanced es next features to
show you the concept I’m actually gonna
switch from a functional components to a
class-based component and I doing Stan’s
react component let’s create a quick
class we’re gonna have a render method
with the return over Trani button let’s
call it click and then when you click on
the button it’s going to invoke a method
so let’s call handle clicked I’ll create
a new method that accepts an event and
does a simple console log of clicked in
this case I’m using class properties and
the syntax is actually preferable to
work around the scope of the this
keyword in JavaScript and the syntax is
actually not supported with the env
preset and that’s because the syntax is
still at stage 2 in ACMA script so if I
were to run the bundle once again it’s
actually going to fail and that’s
because it doesn’t recognize this syntax
so let me explain what’s going on over
here let’s search for tc39 proposals
let’s go to that link the first one in
the search results and let’s go to that
website over here now this one actually
outlines the different proposals for the
atma script specification so as you can
see here there actually go by number
starting at 0 all the way to 4 now 4 are
the ones that are actually finished and
those ones are actually already part of
ACMA script there’s also other ones like
candidate then we also have draft we
have a proposal and finally strawman if
you go back to the previous link it
actually has a useful list in this case
you could see which feature belongs to
which stage now like I said the feature
that we’re interested in is actually
class properties syntax and this one
belongs to stage 2 so if I were to look
for babel preset stage 2
this one will actually give us some
information as to what’s included in
that preset to install this preset all
we have to do is we have to go back to
your command line I’m gonna do your ad a
developing dependency of battle preset
stage two this one besides the class
property syntax is also gonna support
the dynamic import and it’s actually
gonna have decorators that we might be
interested in using as well so once
that’s installed we can actually go to
our babel RC file and we can add stage
two to the list of presets once we do
that we can actually run web pack once
again this time the syntax will be
recognized so if I go back to the
browser I’ll do a hard refresh and you
can see that the button over here is
being displayed so if I click on it you
could see that we get a console message
over there
now to wrap this up of course it’s kind
of tedious to be calling web back from
the command line it’s also very useful
to have a list of scripts that you can
run so I’m going to package.json I’m
gonna create a script section over here
let’s have a dev script and this one
will generate a develop and build so we
can call web pack with the mode of
development we can also pass in an
option on his progress this will show
you the progress of this command it’ll
create another one we can call it build
this one will build a production build
so we can pass an a mode set to
production we can also have progress for
debugging purposes and lastly we can
also create a watch script so webpack
out-of-the-box supports hot module
reloading so we can call the same mo
development command and we can pass in –
– watch or for sure we can also specify
– W and this is gonna watch all the
files in your project and every time you
make a change to any of your files it’s
gonna regenerate the bundle for you back
in our terminal we can do yarn def this
will create a one-time build as you can
see it also includes the progress for
that command we could of course do a
yarn build for the production build or
we could also do yard watch and this is
actually gonna watch all of the files
like I said if I go to the app component
I’ll change this to a div for now inside
of that dev I can actually have a button
let’s say and on top we can have an h1
let’s say click the
button or something like that if I go
back to the browser I’m gonna have to
refresh the page manually but once I do
you could see that the heading actually
shows up that’s because the web pack
command that we’re on is actually still
watching or changes and it has rebuilt
the bundle file once again but it’s kind
of tedious to be doing this manually so
oftentimes what people do is they
install web pack
dabbe server this one allows you to
watch the changes that you make in your
project and then also reload the web
page in your browser automatically now
for this example I’m gonna install a
different dependency this one is called
reload and this one is kind of similar
to web pack dev server in that it also
refreshes the page for you once you make
those changes to your project so back
over here in our package JSON file aside
from the web pack command we can chain
another command we can call reload we’ll
tell it to open up the browser tab
automatically we’re also gonna tell it
to watch the public directory and
finally the dev server is also going to
be open and port 4,000 so let me go back
to your terminal I’m gonna do yarn watch
once again and as you can see here it
automatically opens up a new tab this
time if I change the text let’s say in
the app component click this beautiful
button if I go back you could see that
the web page has been refreshed so
that’s about it guys now the last thing
I’ll say is it’s very comments you have
the entry point file called index GS I
really just use bootstrap as an example
but in this case I’ll switch it back to
index because it’s more common to be
called that way bundle is pretty
standard as well you could still call it
main if you want to but it’s up to you
now the source map typically in
production it’s not set to false because
if you have bugs in production it’s
gonna be really difficult to debug them
because all your code is gonna be
minified and uglify so in this case you
might actually explore some of the
source map options that web pack
provides and choose the one that suits
your project best finally I’ll mention
this one thing if you want to practice
more on your own I suggest that you
check out HTML wetback plugin this one
is useful for water generating your
index.html file from a template and you
can even explore CSS options so you
might look into setting up a CSS loader
with web pack it’s actually not that
difficult you would also add it to the
same module key
in your wetback config file right guys
so let me know if you thought mr. troll
useful my name is Alex and I’ll see you next time Cheers
name is Alex and in this video I’m going
to show you how to set up a react
project from scratch now up to this
point in my videos I’ve been using a
tool known as create react app and it’s
a useful tool for quickly scaffolding
react applications
well the production already set up now
there are quite a few disadvantages and
create react out first of all it’s quite
opinionated it’s tailored towards
Facebook products so for instance for
its testing framework it’s using just
instead of something like mocha or even
Ava and it’s also using eeeh Slynt
instead of standard G s for example
apart from being opinionated it’s also
bloated with quite a few packages in
libraries that you might not necessarily
need for your project and on the other
hand it also lacks support for some of
the es next features like decorators and
it also doesn’t have support for
server-side rendering just to name a few
things now of course you could eject
your wetback setup and your create react
app but if you do that the setup is
fairly sophisticated and even though
it’s well documented it may not
necessarily be useful or easy to follow
for a beginner so what I thought I’m
gonna do in this video is a walk you
through setting up a react project with
only the basic necessary tooling to get
you started and of course you could use
that setup to build on top of it to add
more features that you need for your
project so what I’m gonna do is I’ll
switch to my terminal over here I’m
gonna create a new directory for a
project I’m gonna call it react app I’m
going to switch to that directory
afterwards in this case the dollar sign
underscore syntax refers to react app
I’m going to open the project in Visual
Studio code I’m gonna create an entry
file we’ll call it index yes what we
want to do in the end in this file is we
want to render an app component that
we’re about to create we’re gonna mount
that component to a Dom element so we’re
gonna do document.getelementbyid e and
we’re gonna call it app it’s also very
common to call it root but in this case
I’m gonna leave it a tap for now so if I
were to be a JavaScript compiler first
of all I would immediately complain
about the render method because it’s not
defined in the scope of this file so the
render method of course refers to the
render export out of react DOM and
that’s the package you needed to render
react components and react elements to
the Dom of a browser and for this gsx
syntax over here we’re going to need to
import react so I’ll do import
act from react like that and lastly the
app component itself also needs to be
imported we’re gonna create it in just a
second so let it from the root of the
project let’s create a new file I’ll
call it app J s in that file I’ll create
an app constant this will be a
functional component for now I’m just
gonna have an h1 inside we’re gonna have
a hello message I’m gonna do an export
default of the app component and then
lastly we’re gonna need to import react
from react now you might be asking
yourself why do we need to import react
in this file the JSX syntax you see over
here is actually not supported by the
browsers and when we import babel to a
project Babel is gonna transform this
piece of code to something like react
create element it’s gonna pass in the h1
as the node type it’s gonna have null
because we don’t have any properties and
finally we don’t have any child nodes so
the last argument is also gonna be null
so the JSX element you saw before it’s
gonna be transformed to this create
element method call like so now I’ll
bring it back to JSX for a second and
we’re gonna leave it at that so next i’m
gonna create a new file let’s call it
index.html in this index.html I’m gonna
do HTML calling 5 this will quickly
scaffold an HTML file in there I will
create a div element this is gonna refer
to the app root element that we
referenced an index yes over here
it’ll be this element right there and
then I’m also gonna have a script tag
it’s very common for single page
applications to have a single bundle
file so this bundle file is basically
going to contain all the code for our
application now how do we get our code
in index GS as well as the app component
to go to the bundle GS file because the
problem right now is that the import
syntax is not gonna be recognized by the
browser’s so what we need in this
project in the end is actually a module
bundler one of the popular brand lawyers
is known as web pack web pack allows you
to bundle multiple modules like we have
over here at the index.js file the app
component all of the other components
that you’re gonna create in your own
project web pack is gonna allow you to
bundle all those files into a single
bundle and it also allows for multiple
optimizations like minification
uglification and even more advanced
features like code splitting the reason
for using something like webpack is not
only so that you’re gonna be able to use
modules so the es6 modules we talked
about but it’s also performance because
instead of having multiple script tags
you’re gonna have a single script tag
and this will allow the client browser
to only make a single request to your
server instead of making multiple
requests to all the different JavaScript
files so let’s cut through the chase I’m
gonna go back to the terminal
first of all we’re gonna have to set up
a project so I’ll do yarn in it – why
and of course you could also do NPM in
it with the Y flag if you wanted to I’m
gonna next install web pack itself and
we’re also gonna have to install wetback
CLI at the moment of recording this is
gonna install web pack version 4 version
4 is the latest version of web pack some
of the advantages that it has is
performance so it’s actually quite
faster than version 3 it also has two
default modes
developed and in production it has a
zero configuration setup it also has
very nice default settings to run web
pack you could actually use an TX which
is a package runner available from NPM
5.2 upwards so you could do npx web pack
and this will actually fail now first of
all we see that the mode option has not
been set the thing about web pack four
is it comes with two default modes one
of them is development and it’s actually
optimized for build time so it’s
actually tailored for fast compilation
of your assets and providing useful
debugging messages as well now the
production mode is actually tailored for
production so it’s gonna reduce the
bundle size make your code as fast as
possible at runtime and it’s also gonna
optimize your assets so I’m gonna modify
the command that we ran I’m gonna
provide the mode development for now and
the second error that we get is that
webpack cannot resolve dot SRC so
without the configuration file web pack
is actually gonna look for an entry file
and in this case it expects to have a
source directory so let’s do exactly
that I’ll do make directory source let’s
see if that fixes the error and actually
it doesn’t because the entry file is
still not found so I’ll switch back to
Visual Studio code what I’ll do is I’ll
move index.js file to source directory
and I’ll do the same for the app
components so that it can be resolved
properly I’ll go back to the terminal
and I’ll run the command again and let’s
see what next error we get the error it
doesn’t have to do
with the import syntax as you might
think because webpack is actually
agnostic to the module system that
you’re using so you might be using es6
modules you might be using common GS
with the required statements or you
might even be using AMD web pack
actually supports all those but the air
we get has to do with this syntax over
here
so what pack doesn’t recognize the JSX
syntax we’re trying to use so in this
case we can actually use a tool known as
Babel what I’ll do is I’ll go back to
our browser and I’m gonna switch to
Babel JSI oh and this is the official
website for Babel if you’d like to set
up Babel you can go to uni setup and
then click on web pack in this case what
you need to do first is you need to
install a couple of dependencies first
of all you need Babel loader as well as
Babel core and then afterwards you can
install some of the presets you’d like
to use
so copy those two dependencies let’s go
back to the terminal
I’ll do yarn add these two are also
gonna be def dependency it’s just a
Quebec and webpack CLI but this item
also can install babel preset react the
react preset is going to allow us to
transform a JSX syntax that web bag does
not recognize so I will run that command
I’m gonna next to create a file we’ll
call it babel or see this file can be
used to specify the presets that you
want to use in your project so using
json syntax i’ll create a key called
presets in this case we’ll just have one
we’ll call it react so let’s once again
run in DX web pack without the mode
option it’s actually going to default to
production but we get the same error as
before and that’s really because we
haven’t told web back to use battle
loader
now instead of creating a configuration
file for web pack what we can do for the
time being is we can do npx web back and
we can pass in a special flag known as
module vine and for javascript files
we’re gonna bind this to babel loader so
this tells web back to use babel water
as well as apply the babel or c file
that we’ve set up over here with the
react preset now this will actually fail
because we don’t have the react as well
as react down dependencies so let’s fix
that I’m gonna do yarn add react as well
as react dumb you might be asking
yourself why do we need two packages
well the first one react is actually
used for building user interfaces and
those interfaces Iraq
the agnostic of the environment in which
they’re gonna be used because those
projects can be used in web environments
such as browsers they can also be built
as native apps so for environments like
iOS or Android and even for environments
that support virtual reality the second
package we’re pulling in is actually
react on and this one is targeted
towards browsers so in this case we’re
gonna run our project in a web
environment that’s why we need the
second package so let’s run the same
command like we did before and hopefully
it’s gonna succeed this time we’re gonna
get the same warning like before that’s
because we didn’t supply the option but
it looks like the bundle has been
finally generated and if you go to
visual studio code you’re gonna see a
dist file with the main GS bundle in
this case it’s tailored towards
production now in your index.html file
you can actually modify the path for the
time being so I can set it to dist slash
main ge’ez and if I save that I might
actually copy the path of this file I’m
gonna go back to the browser I’ll open
the new tab and I’ll actually paste that
path and as you can see here it actually
worked so we can see our hello element
over here
it’s an h1 tag nested inside a div with
the idea of app but if you look at me
and is a bit closer let’s search for
hello you’re actually gonna see that
this function over here and of course
you can see so far it’s been magnified
and uglify it that’s because the web
pack mode has been set to production but
either way you could see that this
function over here that refers to the
app component is actually still an arrow
function and everything else inside this
file is gonna use es5 syntax this es6
syntax is not gonna work in browsers
like ie 11 that’s because those older
browsers do not support es6 features so
if you do want to enable cross browser
support you’re gonna need to import
another preset this preset is known as
babel preset and we’re gonna install it
as a dab dependency this one is babel
preset and like this and i’m gonna go
back to our project I’ll go to Babel or
C file I’m gonna paste in the
environment presets like this so let’s
go back to the terminal
once it successfully finishes in stolen
I’ll call the same command as before and
this will create a new bundle for us so
in this case the main J’s file is gonna
be generated and if we look for hello
once
again you’re gonna see that now it’s
actually an es5 function this app
component in the end has been
transformed to a regular function and
now this bundle is actually suitable for
just about any browser you can imagine
so this is actually gonna work on ie 11
as well so let’s say for our index.html
file instead of main GS I wanted the
bundle to be called bundle GS so how can
we tell web pack to have our output file
called bundle GS instead of main GS well
this can actually be done through CLI
options so we can call web pack once
again and I’ll also specify the output
option and in this case it’s actually
very common for index.html files to be
placed in a directory called public so
if you set up an actual project if you
deploy it to a host you might also tell
your hosts to point to the public folder
this way anything that’s inside of the
public folder is gonna be visible to all
to the public but everything outside of
it so all the source code and other
files are not going to be visible and
the same thing goes for the bundle file
so we can actually move it to the public
directory so I’m gonna delete dist and
our disk is actually gonna be moved to
public so back in our terminal once
again I’m gonna set the output to public
bundle GS let’s wait till it finishes
I’ll go back to a project and you can
see that over here it created a bundle
J’s file so I’ll delete main GS for the
time being hey lastly what Abel wanted
to customize the entry file so instead
of index GS for instance what if you had
something like bootstrap J s right so
again this can be customized from any
CLI it’s actually gonna be the second
argument that you pass to your web pack
command so in this case we’re gonna call
it source and you can have your
bootstrap and the GS extension is
actually optional in this case so let’s
call that command once again it’s gonna
recreate the same bundle so now the
bundle J’s file is actually on the same
level as index.html so you can remove
the dist slash prefix from there if you
save this file you can actually copy the
path of the index.html file I’ll go back
to the browser and I’ll open it again
and you can see that the project loads
successfully now passing all these
options from the command line might
actually be quite tedious so it’s often
useful to create a configuration
while instead with the config file we’re
gonna create weapon config yes and
basically this file only does an export
of an object and this object often has
three main keys so first of all it has
the entry
it also has output and finally module
the entry key is actually used to
specify the entry file in this case it’s
going to be source bootstrap as far as
the output this will specify the output
file so we need to provide the path this
one actually has to be an absolute path
so it’s common for people to use the
path module from nodejs
but in this case what I’ll do is I’ll
provide a template string I’m gonna
reference dur name I’ll put it slash and
finally we’ll go to public this will be
the path for a bundle and then the file
name itself needs to be bundle is I’ll
put in a comma and lastly the module key
is actually used to set up loaders so if
you go to the Babel documentation for a
second you’re gonna see this section
over here actually tells you how to set
up the loader for web pack so copy that
same thing I’ll go back to your project
and I’ll paste it in so what this rule
actually does is it targets all the
JavaScript files excluding any of those
and node modules and it applies a Babel
loader to them so this is kind of
analogous to what we’ve been doing
through the CLI bypassing module bind
with Babel loader it’s actually more
convenient to do it from the
configuration file of course so now what
we have to do is we need to run NTX
web pack so this should be able to pick
up the configuration file or created
over here and if we go back to our
browser I’m gonna switch back to our tab
with the project I’ll do a hard refresh
and you can see that we get a message
and this one shows up because we chose
the development mode of course now let’s
see if we had an error in our code so
for instance I might go back to our app
component so what I’ll actually do is
I’ll throw in a new error let’s say
something went wrong okay if we
regenerate the bundle once again I’m
gonna do a hard refresh and as you can
see here we get an error which is pretty
much expected but if you click on the
App J’s file over here you’re gonna see
that the file doesn’t really resemble
the code that we actually have in our
project so it doesn’t look
the same as this content over here so to
make those sources resemble the code
that we actually have in our project
we’re gonna need to use the e source map
so going back to our web pack config
over here web pack by default uses the
eval source map but you can tell it to
use a different source map so in this
case you might set it to source map this
is actually the name of the source map
it’s gonna use and this one is useful
for development as well as production
and for the stack trace it’s actually
going to use the exact same code as you
have in your project so let’s regenerate
the bundle once again this time it’s
gonna create a new file in the public
directory it’s gonna be called bundle
Jaya’s dot map and this one of course
refers to the source map so if we
refresh over here you’re gonna see that
the file that we’re inspecting over here
has the same code as our source code so
it’s actually more useful for debugging
purposes now you might also have reasons
not to use the source map in production
if you wanted to distinguish between
development and production modes in your
backpack config file instead of
exporting an object like this you could
actually export a function now this
function is gonna expect two arguments
one of them is gonna be environment this
one refers to the environment options
you set from the command line the other
one refers to all the other options you
also set from the CLI in this case I’ll
pass in an arrow function now the reason
this is actually gonna work is because
I’m using node 10 and my version of node
is actually supporting all the es6
features in fact you might be using
something like node 8 or even node 6 you
still should be able to use things like
arrow functions in this case so in this
case what you can do is you could say
well let’s see if the art v argument
contains the mode set to development in
this case we’re gonna be using a source
map otherwise oh you might be tempted to
set it to false for example even though
it might not necessarily be the best
option but this is gonna work actually
so let’s go back to the terminal I’ll
run the same command like before and
this will actually generate the same
exact bundle so we’re still gonna have
our source map but if I were to delete
bundle GS so let’s do remove public
bundle let’s actually move all the files
that begin with bundle so do LS dash L
on the public folder we’ll still have
index.html I’m gonna run the same web
packing
this time I’m gonna set it to production
so this should not generate any source
map so let’s see if this works as you
can see here it did not generate the
source map and that’s because we set it
to false
now we’ll actually regenerate the bundle
once again let’s have a development
bundle like we did before and let’s see
an arab component will still have an
error so this is gonna throw in a
fictional error but if i refresh it as
you can see we still get the same source
map like before this way for development
you can see exactly where the error is
happening the other thing is that for
your project it’s also very common to
use more advanced es next features to
show you the concept I’m actually gonna
switch from a functional components to a
class-based component and I doing Stan’s
react component let’s create a quick
class we’re gonna have a render method
with the return over Trani button let’s
call it click and then when you click on
the button it’s going to invoke a method
so let’s call handle clicked I’ll create
a new method that accepts an event and
does a simple console log of clicked in
this case I’m using class properties and
the syntax is actually preferable to
work around the scope of the this
keyword in JavaScript and the syntax is
actually not supported with the env
preset and that’s because the syntax is
still at stage 2 in ACMA script so if I
were to run the bundle once again it’s
actually going to fail and that’s
because it doesn’t recognize this syntax
so let me explain what’s going on over
here let’s search for tc39 proposals
let’s go to that link the first one in
the search results and let’s go to that
website over here now this one actually
outlines the different proposals for the
atma script specification so as you can
see here there actually go by number
starting at 0 all the way to 4 now 4 are
the ones that are actually finished and
those ones are actually already part of
ACMA script there’s also other ones like
candidate then we also have draft we
have a proposal and finally strawman if
you go back to the previous link it
actually has a useful list in this case
you could see which feature belongs to
which stage now like I said the feature
that we’re interested in is actually
class properties syntax and this one
belongs to stage 2 so if I were to look
for babel preset stage 2
this one will actually give us some
information as to what’s included in
that preset to install this preset all
we have to do is we have to go back to
your command line I’m gonna do your ad a
developing dependency of battle preset
stage two this one besides the class
property syntax is also gonna support
the dynamic import and it’s actually
gonna have decorators that we might be
interested in using as well so once
that’s installed we can actually go to
our babel RC file and we can add stage
two to the list of presets once we do
that we can actually run web pack once
again this time the syntax will be
recognized so if I go back to the
browser I’ll do a hard refresh and you
can see that the button over here is
being displayed so if I click on it you
could see that we get a console message
over there
now to wrap this up of course it’s kind
of tedious to be calling web back from
the command line it’s also very useful
to have a list of scripts that you can
run so I’m going to package.json I’m
gonna create a script section over here
let’s have a dev script and this one
will generate a develop and build so we
can call web pack with the mode of
development we can also pass in an
option on his progress this will show
you the progress of this command it’ll
create another one we can call it build
this one will build a production build
so we can pass an a mode set to
production we can also have progress for
debugging purposes and lastly we can
also create a watch script so webpack
out-of-the-box supports hot module
reloading so we can call the same mo
development command and we can pass in –
– watch or for sure we can also specify
– W and this is gonna watch all the
files in your project and every time you
make a change to any of your files it’s
gonna regenerate the bundle for you back
in our terminal we can do yarn def this
will create a one-time build as you can
see it also includes the progress for
that command we could of course do a
yarn build for the production build or
we could also do yard watch and this is
actually gonna watch all of the files
like I said if I go to the app component
I’ll change this to a div for now inside
of that dev I can actually have a button
let’s say and on top we can have an h1
let’s say click the
button or something like that if I go
back to the browser I’m gonna have to
refresh the page manually but once I do
you could see that the heading actually
shows up that’s because the web pack
command that we’re on is actually still
watching or changes and it has rebuilt
the bundle file once again but it’s kind
of tedious to be doing this manually so
oftentimes what people do is they
install web pack
dabbe server this one allows you to
watch the changes that you make in your
project and then also reload the web
page in your browser automatically now
for this example I’m gonna install a
different dependency this one is called
reload and this one is kind of similar
to web pack dev server in that it also
refreshes the page for you once you make
those changes to your project so back
over here in our package JSON file aside
from the web pack command we can chain
another command we can call reload we’ll
tell it to open up the browser tab
automatically we’re also gonna tell it
to watch the public directory and
finally the dev server is also going to
be open and port 4,000 so let me go back
to your terminal I’m gonna do yarn watch
once again and as you can see here it
automatically opens up a new tab this
time if I change the text let’s say in
the app component click this beautiful
button if I go back you could see that
the web page has been refreshed so
that’s about it guys now the last thing
I’ll say is it’s very comments you have
the entry point file called index GS I
really just use bootstrap as an example
but in this case I’ll switch it back to
index because it’s more common to be
called that way bundle is pretty
standard as well you could still call it
main if you want to but it’s up to you
now the source map typically in
production it’s not set to false because
if you have bugs in production it’s
gonna be really difficult to debug them
because all your code is gonna be
minified and uglify so in this case you
might actually explore some of the
source map options that web pack
provides and choose the one that suits
your project best finally I’ll mention
this one thing if you want to practice
more on your own I suggest that you
check out HTML wetback plugin this one
is useful for water generating your
index.html file from a template and you
can even explore CSS options so you
might look into setting up a CSS loader
with web pack it’s actually not that
difficult you would also add it to the
same module key
in your wetback config file right guys
so let me know if you thought mr. troll
useful my name is Alex and I’ll see you next time Cheers
Please follow and like us: