React Webpack Babel Setup From Scatch - 2020 React.js Tutorial

hey guys in today's video i want to teach you how to set up a complete react project using webpack and babel so in case you guys aren't familiar with what webpack and people do so webpack specifically is used to bundle your source files so it takes in your source files so that could be your javascript it could be your images your stylings or your css it gives those to loaders so it relies heavily on loaders those loaders do things to those files for example compile it maybe or transpile it and then it returns it back to webpack which can which bundles it all and gives you a build folder that build folder contains all of your um your code your images your css that have been processed by the loaders and the purpose of babel is to actually transpire our javascript code okay so let's get started by just initializing a project so npm init it's going to ask us a bunch of questions i'm just going to ignore them all and skip them you can always change this later so this will give us a package.json it's pretty empty now so let's start off by adding in some dependencies so npm i d to specify that these are dev dependencies uh the first one we want is webpack this is just webpack itself then we want the webpack cli so we can use it in the command line we next want babel so remember this is a at sign here so babel call we next want babel presets and preset enveis to allow for a wide range of browsers to be compatible with our javascript code so it's going to transfer our javascript code to bu so that as many browsers as possible can actually run that code so this just transpiles that code so that it can actually run on a wide range of browsers the next dependency one is the babel preset react so this is so there understands our jsx code from our components and then finally we want the babel loader the babel loader is actually for webpack so they so that webpack gives um people our javascript files okay so now that we have everything installed i just want to get the babel configuration out of the way the reason i'm doing this first because it's actually really simple so you want to create a new file called dot babel rc and it's important that you name this exactly.rc because when we pass our javascript files to babel it's going to look it doesn't know exactly what configuration or what presets we want it's going to look for the dotable rc file and then it's going to look there to see exactly what we specified as the presets and the if you if you you could add things like plugins as well and this is where you would specify those plugins but i'm just going to look at the presets so presets which is an array and if you remember those two presets we added so babel preset and this is for the wide range of wide range of browser compatibility and babel preset react so this to inter interpret our jsx code so that's actually it for now we are later on going to be adding in one more preset a typescript but just for now i want to leave it how it is okay so now let's actually create our source folder and our source folder is going to contain our react code so i'm going to call this.src and then create a index.js so it's important that you create a folder called dot src so source and you create a file called index.js the reason why this is important is because by default webpack will actually work packs entry point so the point where it starts it first starts taking your files is actually this specific um this specific uh path so your source folder then index.js you can configure that yourself um i actually like it like this i'm going to leave it like this um i just realized we also need react so let's do mpmi d react and react dom so while that's installing i'm just going to set up the basic just create a basic component so let's first import react from react and it's also import react dom from react dom i'm just going to create a basic component called app which is just going to return a div and let's just say h1 hello world so for those of you who have always used create react app what we have to do first is actually hook in our our our parent component so the component that's going to wrap our entire react app into a dom node so that we also need a html file so i'm going to create one called index.html i'm just going to use a basic basic setup just a basic html template so in the body i'm going to create a div give this a id of root you can call this whatever you want i just like to call it root uh this is going to be empty and this is where we're going to hook in all of our react code so all of our components and everything is going to be hooked in right here so what we're going to do is to react dom dot render so render the first parameter is our our parent component that's going to wrap our entire app so this is just going to be app like this the second one is actually the dom node that we want to render this to so like i said it's going to be this root div here so we're going to document dot get element by id root so this is how you hook in a react app into um into the html one thing i want to point out here is you can see i'm not actually importing any um i'm not actually importing that index.js file the reason i'm not doing this is because the webpack search is going to take care of it for me so that's why i'm not yeah i'm not doing like a script and then source or anything like that webpack is going to take care of that for me so we can actually close out this index.html file let's actually start off by doing the the webpack config now so i'm going to create a new file call it webpack.config.js and it is important that you name this exactly webpack.config. otherwise you're going to have to specify what you named it when we run the command to actually stop that to actually build off project so in here all we have to do is do module.exports so we're going to export this object and this has a couple of properties so the first one is model module sorry and inside module we have rules so i'm going to get into what rules are in a moment but i'm also just going to create what's going to put plugins and leave this as an empty array for now so what are these rules so forwards is how we're going to handle certain file types and i think the best way for me to really explain this is with an example so so this is an array and i'm going to put object in here so i want this rule to determine how we handle javascript files so dot js files so the way that we specify this is only for javascript files is with a test so this is going to be a regular expression so i'm just going to copy and paste in this regular expression so this says only js and jsx files so only you files that end in js or jsx will this rule apply this will apply to i'm going to exclude the node modules so node modules so just so we don't have to worry about the modules folder i'm going to say i want to use a loader the the load i want to use is that babel loader so a quick note we actually aren't importing this at the top or requiring this at the top we're just specifying that we want to use the bevel loader and this is a so remember we install this at the start so now when when dealing with js and jsx files uh webpack's gonna look here it's gonna see which rule it fits if it sees that it fits this one it's gonna if it's part of the node modules folder it's not gonna it's not gonna worry about it so it won't look at it but if it is then it's going to use the webpack loader and that webpack load is going to use the configuration that we've set up here in our babel rc so now i'm going to just um create a basic build uh script so if we go to our scripts on our package.json and i say build and all this is going to do is run webpack so you'll see this will actually not work correctly so npm run build there will be a slight issue this will transpile our javascript code using webpack using babel sorry and uh return to us a dist folder so here you can see there's a test folder so this is our build we get a main.js file and if i open this up it's very difficult to read but this is what this has been transpiled by um by babel so this is our this is actually this code here along with the imports transpiled and bundled together by webpack one thing you might notice is that there's in this this folder there's actually no index.html so we have to specify to webpack that we actually want to do we actually use at index.html so the way that we do this is we first need a plugin to handle the html files and we also need html loader so let's do npmi it's another dev dependency we do html webpack plugin this is the plugin for the html files and we also need the html loader so now i want to do is just require the plugin so const html plugin is equal to require html webpack plugin it's now down in our plugins where we have this array i'm going to say new html plugin and we have to set up some initial options so the first one is the file name and i'm just going to leave this as index.html the second one is the template so what template do we want to use and we've already actually got a template here so this index.html created in our source file source folder we want to use this so this is going to be our template um and we just want to specify that so let's go back to our webpack config we say templates dot slash source slash index.html so we're just specifying this template here i'm just going to close that and now we also need to add a rule for this so let's say so the test for this is going to be a regular expression so i'm just going to copy and paste it so as you can see these regular expressions are pretty easy to read so this is anything that ends with a dot html uh i'm not going to exclude anything from this i'm just going to say use which is an array and i'm going to say the load i want to use that html loader that we that we just imported so now that we have the html loader and the html plugin which is going to take this this template here let's test this out and see what happens now when we build so now you can see in our dist folder we actually have a html file so if we look at this we have the root div here we also have this main.js import so that's that's that's what i was saying before we don't have to worry about importing ourselves webpack will take care of it for us if we actually open up the disk folder here and we go to the index.html and open that up you can see we actually do get hello world so it is actually working correctly so one current problem that we have is every time we make a change let's say i just say changes we have to do you have to build it again and then open it up so this is really irritating and i actually just want it to update every time i save uh save my changes so to do this we can use a dev server so let's do mpmi d so it's another dev dependency webpack dev server and then if we go to our package.json we can create another script let's call this start and all this is going to do is do webpack it's going to run webpack dev server so now if we do npm on the start so this script here and i just run this it will start up a development server on localhost 8080 so if we open this up you can see we have our file here so it's got changes let's make a change so let's go back to hello world we save it and then you can see instantly the change is reflected so it compiles everything and builds it again and it serves it directly on this on localhost 8080 one thing that we actually have to do for this is if you're using something like react router so when in a react app everything it's a single page application so everything actually should be redirecting back to the index route so everything should redirect back to index.html so even if you're on a page like slash blog posts one this should still redirect back to this page although it should still say this in the url but behind the scenes it should always redirect back to your index.html route so the way that we do this is we say dev server then we have api history full back and you just want to set this to true and i just realized this is not api history fallback this is actually history api for back so just make sure it's history api fullback and so what this will do is it will always redirect no matter what path is always redirect it back to um your index.html so if you're ever running into issues with um something like react router make sure that you have this set to true another thing we can do here is change the ports let's say so if we wanted port 5000 we could just specify here so now if we run this again we should be on localhost port 5000 so here you can see uh project is running at localhost port 5000 and you can also see here uh 404s will redirect will fall back to index.html so this because of this line here so now you can see uh we have it running here and it's on port 5000 so that is the very simple setup for wii u for webpack and paypal one thing one small thing that i'm just going to do is actually change the um the output so i don't like it being called this and i also want and i also don't like it being called main.js this is just something that's personal preference for me um you can change a lot of these things for example the entry point is actually a source index uh source and then index.js so you could also change that i actually prefer it that way so i'm going to leave it um but the the dist i don't want it to be called this i want it to be called um build and i also want main.js to instead be called bundle.js let's first one thing we need is path so import path let's require this um the reason we need this is because we actually need an absolute path to the output it says a path is going to be path dot resolve you get the urn name which is the directory name and we say build so this just creates the absolute path to um build which we don't have but this will create that build folder for us as this is instead of this so by default it's actually this i'm just saying build instead and then our file name so this is the name of this so instead of main.js i want this to be bundled.js so now if i do npm run build you can see here we get a build folder and inside here we have bundle.js and if i open up the index.html it does actually import bundle.js so you don't have to worry about this still remaining as main.js webpack will take care of it and rename it to bundle.js as well okay so this is very bare burns and basic two things i want to add the first one is the ability to load files so i'm just going to grab an image okay so i just went and grabbed an image so this is the image and i put it in the source folder so in our index.js file i want to actually be able to import the image let's call the image from dot slash image and then i want to have an image tag and just specify the image as uh this image right here i'm just gonna ignore the alt so this won't actually work so if i do npm run start you'll see that we will run into an error and the reason for this is we have no way of handling uh dot jpgs so if i scroll up here you can see unable to so module pass field unexpected character and then you may need an appropriate loader to handle this file type so that's true we do need a file loader so let's do mpmi this is another dev dependency file loader so while that's installing let's go back to our webpack.config and let's add in another rule for for these files so for images specifically so scroll down here say a new rule the test for this is going to be this regular expression right here so this includes pngs jpegs and gifs then i just want to use the loader file loader um so this is just use the file loader when we encounter one of these types of files so now if i do npm run start and if i open up the server so here you can see we actually do have this image so you can see it was really easy for us to add in that loader so we noticed that we weren't handling the this extension right here the jpegs so we found the appropriate file loader the appropriate loader for this which happens to be file loader uh we set up the test for this so not only will this work with jpegs but also work for pngs and gifs and then we specified that the loader we want to use for these files is the file loader so next up i actually want to show you guys how to add a support for sas so we have to actually add in a couple of loaders for this so we're going to type mpmi dash d and then the loaders so first we need node sas so this is actually not a loader oh and this should be sas not scss so that's one of the dependencies we also need sas loader we need a css loader and we also want this so this is mini css extract plugin so this is so that our css actually gets converted into a file rather rather than being part of our bundle uh so i'll explain that in a bit more detail once we um once we actually build it okay so now that we have that installed let's import that plug-in so let's call it mini css extract plug-in so we're gonna have to require that from any css extract plugin so the plugins you actually do have to import but the file loaders or any of the loaders you don't have to import you just specify their name here so we go to our plugins we say new and then mini css extract plugin there is some configuration some options you can do for this i i'm just going to leave it how it is right now i don't actually want to add in any configuration now let's do the rules for this so it's going to be a new object and the test for this is going to be this regular expression here so css files uh sas files i'm going to say that i want to use a couple of loaders so the first one is actually the from the plugin we want to use that one's loader then we also want to use the css loader and then we also want to use the the sas loader so here in this case you can actually see we use multiple loaders to handle sas files so let's test this out let's create a sas folder a sas file let's say styles dot sas let's say let's just make sure let's say color red and let's say paragraph tags are going to be color color so this is specific to sas so you can't do this in regular css and let's go to our index file here let's actually create a paragraph tag saying hello and let's import that that the style so styles.css let's start up our development server and let's hope that everything's working so as you can see here we have hello and it's actually in red so the styles from our sas firewall was actually applied uh one more thing i want to point out so if i do npm run build so we actually get the build then the build folder here so when we look here the first thing you might notice is the we have the image here so there's the image that we have here and you also might notice that we have the main.css file the reason we're getting this main.css file is because we are using the so we're using this plugin and we're using its loader normally it would actually be part of your js bundle your styling so this is just so that your styling is actually not part of your bundle but instead it's part of your is actually its own separate file and if we look here you can see we have color red so it was actually so it was able to correctly uh correctly compile the sas into css okay so i want to do next is have the ability to create builds for specific environments and here's what i mean by that sometimes when we're developing we have multiple environments so we have our beta environment we might have our development our uats our staging environment and then our production environment and so all these environments you have different environment variables so we want our builds to be different depending on which environment we're in to do this what i'm going to use is cross and so this is another dev dependencies we're going to add okay so the way that we use cross sound is we're going to go to our package.json we're going to say cross end and we're going to say node underscore end is equal to and then whatever environment we want this to be so for now i'm just going to have this say prod and we can do the same thing for the build but have this or actually we can change this to development and leave this as production so what we can do is actually get access to these variables in our in our react code but before we do that one more thing we have to do is actually come down here so first we have to require webpack so webpack is equal to require webpack and the reason we have to do this is because we have to actually use a use a um a plugin so here's what i mean so we say new webpack dot define plugin and then here we say process dot n and then we specify this and we say node n so this is the name of your um so this is this right here nodenf and we do json.stringify our process dot n dot node n so the reason that we do this is because without this we actually can't get access to our um to our node and environment variable in our react code so that's the reason that we're doing this extra step here where we create this plugin to provide node and to our process dot end so now what i actually want to do is say const n is equal to process dot n dot node n and i'm just going to put this as the title so end so if i save this and do npm run build run start sorry you can see we should get so here the start we specify the end as development if we refresh this we get development now i'm going to change this to let's say beta and then restart our development server and hopefully and now you can see it says beta so here we actually have access to these variables so the reason you might want to do this is let's say you have build production and then let's say here you have build build beta and the reason you might want to have this is because let's say you're connecting to an api and one of the api has a endpoint which looks like this so www.beta.com v1 and your other one has an endpoint of i don't know production.com or whatever so you have different endpoints for different environments so therefore one of the uses for this you might want to do something like a switch kit switch statement for the environment and then use and then set your endpoint url to be different things so you want to maybe so if there's a production you set it to you might want to set it to this endpoint here and in case this is not production so the default you probably just want to set this to your beta so beta so this is just an example of why we use um crossover to have to to set environment variables and then we pass down those environment variables here to our index to our actual app then here a good use case for this would be to set different and api endpoints according to your environment okay so now that we have that done we've actually gone through quite a bit so we've added the ability to to to set environment variables and pass that down to our to our actual project using the webpack to find plugin we've added the ability to set up a development server we've added in a quite a few loaders so so we've added in a loader so the babel loader to transpire and compile our javascript code we've added in the html loader for the html file um image the image loader so the file loader handle or images and a sas loader for a css loader a sas loader and this plug-in here so these this is to handle our styling files or css files and also to create a separate css file in the final build so to finish off this video i actually want to show you guys how to add typescript to this so i'm just going to clear this i'm going to do mpmi add in another dev dependency so this is going to be babel typescript and we also want typescript itself oh and this should actually be preset typescript okay so now that we have the preset the babble preset we want to go back to our to our babble rc file and add that in so bible preset type script so this is just so that babel knows that some of the the files that we're going to give it are typescript and it understands how to transpire that type typescript into javascript so i'm just going to change this index.js file to a to a tsx file i'm also going to have to import the types for that so npmi d type slash react and type slash react dom so i'm going to change this to a functional component to specify that it's a functional component so we're going to import fc from um from react so this is from the react types and we also have to add in the ts config dot json file so let's do tsconfig.json i'm just going to copy and paste them the the rules that i've i always use i'm not going to go through all of these do um you could check the typescript documentation but see exactly what these do this will be in the description below so you guys can just copy and paste everything and so will all of the um the tests here so all of these regular expressions so you can just check the description for all of this so now one more thing we have to add in our webpack.config is we have to say resolve and we have to say which extensions we want to resolve so we want to add in the typescript the tsx and the dot and we also want to have dot json.jsx in case we want to use both typescript and javascript although i don't recommend using birth typescript and javascript this just this is you have the option to do so okay so now if we go back to our index.tsx file you can see we have this slight error here um a small workaround for this would just be to create an images folder move your image into there and then just create images uh definitions and then here we can just declare a module and this is going to be for all of our dot jpegs so that should get rid of that error and now we have this error which i think if we just do const values of type any and then export default value now that yeah now that error should be gone as well now if we do npm run start so this is now running with our index.tsx file so when we ran that we actually ran into an error the reason for this is because i've got to add our ts and tsx files into to be used by the bubble loader so we just do ts and tsx so now the index.tsx file will be run by the bubble loader so now if i do npm run start our index.dsx file should now run through the bubble loader and when we open up it does indeed run here let's just make a change to it so hello world and you can see it runs here so now we have typescript with react so you can see it was pretty simple to add then we just added it added in the preset install typescript itself store typescript itself here set up the config which uh you can just find the description we added in the extensions for this so by default um the extensions are actually just js and jsx so we had to manually add in ts and tsx and we also had to add those into the test so that the uh so that they go through the bubble loader all right that's it for this video guys i hope you enjoyed it um i will leave a link in the description of this video to the github repository for this so you can check out all the code if you guys enjoyed this video i'd appreciate a like um you can check out my channel i've got lots of videos on react and if you if you're looking to learn more about react then i'd recommend subscribing thanks for watching guys bye [Music] you

Channel: LetsCode

Views: 6,558

Rating: 4.9495797 out of 5

Keywords: webpack tutorial, react babel, react setup, web development, react tutorial, react webpack, babel tutorial, reactjs tutorial, webpack 4, reactjs tutorial 2020, webpack tutorial for beginners, webpack tutorial 2020, webpack tutorial for beginners 2020, react webpack babel 2020, react webpack babel typescript, webpack 4 babel 7 react, Setup react project with webpack and babel

Id: ihhPyqfdbjo

Length: 32min 22sec (1942 seconds)

Published: Thu Sep 10 2020