React & Webpack 4 From Scratch - No CLI

[Music] coding dojo is a programming school that turns beginners into developers in only 14 weeks over 90% of their grads land jobs within three months of graduating often making over seventy K per year to learn more visit coding dojo com or click the link in the description below hey what's going on guys so a lot of you know that I've been working with the react framework lately and I'm almost done with a full stack application for my myrn course which is MongoDB Express to react and nodejs and of course we'll be using Redux and it should be released within 2 or 3 weeks give or take I am moving so it's it's delayed things a little bit but it will be a small social network it'll be full stack will be using JWT authentication so it'll be a pretty in-depth course probably my most in-depth and it will be just one application because it's a good-sized application but anyways aside from that I had a request from one of my patrons named Vita and he said if it's possible could you make a short video from scratch about how to create a react app and web pack or parcel without using create react app and if those of you that don't know create react app is a CLI where it just kind of just sets up your whole boilerplate for your react application with one command so he goes on to say I know that create react app is very useful but in my opinion is it's created a lot of things that I don't know why and how they work I tried googling it found some articles on medium some are very useful but I'm still having problems creating the app alright so I always like to answer my patrons and fulfill their requests if if they're doable and it's something that's you know not gonna take me forever so in this video what we're gonna do is create a react application from scratch we're going to be using webpack 4 which is the latest version there's some changes with the config file and so on so we're gonna do that we're going to create a script to run a dev server using webpack dev server it'll have hot reload we'll also create a build script so that we can quickly build out our application for deployment basically all the really useful stuff that the CLI gives us but we'll be doing it from scratch ok I'll be I'll also be pushing it to github so that if you want you can use that instead of create react app and you can customize it and do whatever you want with it alright so hopefully you guys enjoy this video let's get started alright guys so I have vyas code open here I have a completely blank folder called react web pack starter so that's what I'm gonna call it and I will push it to github under that name so I'm gonna be using my vyas code integrated terminal to do everything here and we're gonna need to install quite a few things and I'm gonna go over everything that we need to install the first thing we want to do is run NPM in it and create a package dot JSON file alright so go just go through this description I'm just gonna say boilerplate for react apps and just enter through the rest of this I'll put my name you can put yours if you want this is completely open source we'll give it an MIT license and that will create our package dot JSON file alright so what do we want to install next now react actually has two parts okay it has react which is the main library and then it has react Dom now prior to I believe it was 0.14 it was all included in the react library but now that react is used in many other environments that don't include the document object model react itself has nothing to do with browsers or the Dom and web apps that's the job of the react Dom library which is why we need both for a web app hopefully that makes sense so let's go ahead and install both of those so we want to install react and we want to install react - Dom and those will get added to our dependencies right here all right so I'm gonna clear this out now everything else that we're going to be installing is going to be a dev dependency okay react and react on there they're the only dependencies we actually need for production so next thing we want is web pack now the reason we need web pack is because all of our react code our components everything has to be compiled and bundled into one javascript file and that's where web pack comes in that's what web pack does it bundles your assets together and it doesn't even it doesn't have anything to do with react you can use it with react or without and then we also want to install a dev server to work with and there's something called web pack dev server that works really well that includes live reload and stuff like that so let's get those two things installed now these are dev dependencies so we're gonna say - - save - dev or you can do - capital D and then we want to install web pack web pack - dev server and then one other thing I want to install is the web pack - CLI which allows you to run web pack commands and we're actually gonna use this for our build script alright so let's install those things alright so now that those are installed the last I guess bundle of things that we need to install have to do with babble so babble we need because react uses es6 classes import stuff like that so we need to transpile that code down to browser friendly code depending on which browsers being used so we need babel along with two plugins or presets one is actually called babel preset react and then the other one is called babel preset env which takes the place of babel preset es2015 which is what we used to use because what the env preset does is it doesn't only compile es6 but also later versions and it can actually look at what browser being used and then and then go compile what whatever needs to be compiled for that browser so it's it's a much more intelligent plug-in or preset okay we also need a loader about the babel loader because we need to be able to compile JSX which is basically what react uses for templating and then we're also going to be using something called the HTML web pack plugin which will generate our our build HTML file alright so let's go ahead and get that stuff installed so we're gonna say - - save - dev and we want quite a few things here we want Babel core which is the core transpiler we want babble - loader we want the two presets so that would be babble - preset - E&V to compile es6 and beyond we also want babble - preset - react and finally we want the HTML - web pack - plugin ok and I know it seems like a lot but once you get this stuff installed it's it's it's really easy and obviously if you pull if you clone this from the git repository all you have to do is run npm install and all this stuff will get setup for you alright so now we have everything we need installed to setup a react application so let's go ahead and let's see should we add our scripts now let's setup our web pack config first so whenever you use webpack you need to have a config file okay so that is going to be called ok it's gonna be in the root and it's gonna be called web pack web pack dot config dot J s okay so there's a few things we need to do here all we need to bring in is we're gonna bring in the path module which is just a core nodejs module just to manipulate file paths and stuff like that and then we also want to bring in that plugin that we installed that HTML web pack plugin so I'm gonna say HTML web pack plug-in set that to require HTML - web pack - plug-in alright those are the only two things we need to bring in then we want to export so we want to say module dot exports we're using the common j/s syntax and we want to specify an entry file ok so the entry is basically our react entry file and it's going to be inside of a source folder because sources where we want to put all of our react stuff and we're gonna have index dot JSON inside here we'll create a file called index dot JSP our entry file next thing is we need the output alright so the output is where we want our compiled code to go which is going to be just one JavaScript file it's going to be a bundled file so we need to specify two things a path so for this I'm just gonna do path dot join we're gonna use that path module that I brought in and we want to join let's say the current directory and then let's put it in a folder called dist like that all right so what's again what's happening is our entry file the index J s is going to be compiled and this can include imported components and basically our entire react structure will go in here and then it'll get compiled into a file in this dist:4 door now we have to specify that file name so we're gonna say file name and we're gonna call this index underscore bundle dot J s whoops bundle dot J s and you can call this anything you want really so that's it for this part now we're gonna put a comma under the output and then here is where we want to specify our loader and it's going to go inside of a module object and then in here we want a rules object I'm sorry rules is actually an array but in this array we want to put an object okay we're gonna say test and then this takes a regular expression basically we want to look for anything that is dot J s any and then a money sign so basically it'll look at J s files or in j sx files and that's the stuff that we basically want babble to compile so we want to exclude we want to make sure we exclude the node modules folder so this takes in a regular expression and we're just gonna put a literal of node underscore modules that way you know nothing nothing happens to any files inside that folder and then we just want to say we want to use the loader of babel loader okay and that's it now in order to use this HTML web pack plugin and again I don't know if I if I clearly explained what that does but basically it creates our index.html file for us in fact let me bring that up here just so you guys know what this is let's see web pack plug-in spelt plug-in wrong that's fine now it's this isn't necessarily just for react if we go down here let's see what it actually is plug-in that that simplifies creation of HTML files to serve your bundles okay so we could manually create the the HTML file in the dist folder but I don't even want to have to create the dist folder I want to just run the build command and have the dist folder be created with the index.html file so that's what why we're using this so we already did this stuff the entry the output now we have to specify it as a plug-in now I do want to have a template okay if we go if if we just do this it'll generate the entire HTML for us I want to have kind of a temp that we can use in case we wanted to bring in a script or something like that and there are ways to do that without using a template that you can see there's a lot of different options but it's it's easy enough all you have to do is just create a an HTML file and include it as a template okay inside of an object basically inside these options okay so let's do that I'm gonna create my template inside the source of course so index start HTML any files that you are going to edit for your react application are going to be in here and then all I'm gonna do is put in a boilerplate we can put in a title here we'll just say my react app and then the way that react works is react Dom will look for a specific element to insert all your react stuff so we're just going to have an ID a div with the idea of app and that's where it's going to be inserted okay now we don't even have to worry about including the bundle file in here inside of a script tag the HTML plug-in the web pack plugin will do that for us so this is all we need here literally so we'll save this and then we'll go back to our web pack config and we'll go down let's see we want to go under this and then just specify plugins which is an array and we're going to say new HTML web pack plug-in okay and we could just do this and it'll create just an HTML file from scratch but we want to use our template so we're gonna specify in here an object of options and we just want one value of template and we're going to specify that we want that to be in our source folder and index dot HTML just like that so it'll look at that file as our template okay and that's it that's all we need for our configuration so we can now save this file and then one other thing I forgot to do in order to use the presets okay remember we installed the the env preset to compile es6 and so on and the react preset we need to create a file in the root not in the source but in the root called dot babel RC okay and all this is is going to be an object where we specify presets okay a JSON object and we specify presets which is going to be an array of the presets we want to use which is env we don't need babble - env or anything like that just env and react oops okay and it'll know to use those presets so let's save that and that's all we have to do to that file okay so we're just about there now let's just add a little bit of react code so in the index J s what we're gonna do is import react from okay and we're using import now because remember we're using babel which compiles es6 and that's what this is this is es6 modules syntax so we can use this now so we're gonna say import react from react let's also do import react Dom from react - Dom all right now we could create a compare a pony in here but I'm going actually gonna put that in a different file so we're gonna say import app from and then we're gonna have a folder called components and a component called app all right now we need one more line and that's just to call react Dom dot render and this takes in two things it's gonna take in what we want to render is the the main app component which of course is the app component we're bringing in and then a placeholder or wherever we want it to output which is going to be that active so we're going to say document dot get element by D and we want the ID of app okay because if we look at our index.html that's where we want it to output so let's say we'll go back to index J ass and save that and now we just need to create our components folder and we need to create our main app dot J s file since the since it's a component I give it an uppercase first letter here and for the app component this could be either a functional or or a class component but we're just going to do a class so we're going to say import react and component from react like to put spaces here all right and then we'll create our class app and that has to extends component and we'll just put in a render okay this is just regular react stuff and we'll render a div and we'll just say we'll put an h1 in here and we'll see my react app and then we just need to export it so export default app and that's it alright so our structure is done now we just need to add the two scripts to the package dot Jason one is to run the web pack dev server one is to actually build it out into the distal der so under scripts we can get rid of tests let's replace it with start so this will be to run the dev server and it's gonna be web pack - dev - server and we're gonna say we want the mode to be development and we want to do - - open so that it opens automatically when we run the command and we also want hot reloading so when we save something at Auto reloads so that's our server and then we want to be able to build so we'll have a command called build and then here we're just going to use the web pack mod web pack CLI actually allows us to run web pack and then we just want to specify the mode is going to be production ok and that's just gonna basically bring everything out into our dist:4 it'll create the folder itself as well so hopefully I did everything correctly and it should be able to work so what I'm gonna do now is just run NPM start you may have an issue may have an error but we'll fix it okay so looks like nothing's being displayed so let's open up our console nothing was returned from render this usually means a return statement was missing which I think it is and it is you guys probably noticed that a while ago so we have to actually return this and let's save that and we get compiled successfully let's go back and there it is my react app okay and just to show you if I were to let's see let's snap this over and where are we just sit yeah so if I were to let's close this up if I were to change something and like app J s let's take a what's oh this is the wrong damn it that's the wrong window alright so if I were to add an exclamation mark here and save there it is so we got hot reloading we have all the important stuff that create react app gives us we have except we don't have the extra junk that we don't need so if you want to just clone this and use this to start off your applications that's fine let's see last thing I want to show you is to how we can actually build out and compile the application so I'm going to stop the dev server with ctrl C and we're gonna run NPM run build and what that does is it's going to create a dist folder it should pop up over here so here it is and it created our index bundle J s which is everything so if we create ten components in our source in our components it'll all be compiled into this one file okay and then if we look at the index.html this is created because we use that HTML web pack plug-in and basically it's just it's our template that we used plus its it insert it inserted the script right here which is our bundle file so if I were to now go and just open this file up so let's go into see react web pack starter dist and let's just open up index.html there we go so we could just throw this up on any web server okay so that I think that's gonna be it guys hopefully you enjoyed this in and it was explained clearly like I said I will have the github repo in the description so if you want to use this if you want to study it more if you want to add on to it maybe you want to add some extra web pack plugins and you know just use it to build a react app you can add Redux to it whatever you want so thanks for watching guys now if you're not subscribed to the channel and you like this type of content please do so if you are subscribed please go ahead and click on the bell so that you get notifications when I release a new video because YouTube has been having some issues with notifying people of new videos apparently you have to click the bell and you have to be more interactive and leave comments or like the video so if you guys can do that that that'd be great I'd appreciate it but that's it so thanks for watching and I will see you next time coding dojo is a programming school that turns beginners into developers and only 14 weeks if you're serious about landing a career in tech and black the formal education or background coding dojo will get you there in no time with over 3,000 graduates to date over 90% of their grads land jobs within 3 months of graduating often making over 70 K per year at tech firms of all sizes from companies like Google to local startups to learn more visit coding dojo com or click the link in the description below

Channel: Traversy Media

Views: 138,976

Rating: 4.9595022 out of 5

Keywords: react, react webpack, create-react-app, react without cli, react setup, weact webpack 4, webpack 4, react from scratch, react babel

Id: deyxI-6C2u4

Length: 24min 44sec (1484 seconds)

Published: Thu Mar 29 2018