Create a React App WITHOUT Create React App

hey everyone and welcome to waco where in this video i'm going to teach you how to build a react web application using webpack babble react and react dom you will not be using the create react app tool from facebook so before we start what is create react app well create react app is a command line tool from facebook that allows us to create a react application without worrying about configuration and setup the main reason behind create react app is there is less to learn developing a react application can be very intimidating to newcomers as there are extra steps including transpiling code code bundling assets and so on and create react app comes with a code transpiler and a module bundler already configured saving lots of time and in fact with create react app running one command will set up all the tools needed to start a react application but so why not use your create react app well create react app of course comes with its disadvantages specifically using create react app makes it difficult to add custom build configurations we could eject the application which essentially means stop hiding what is installed under the hood but that defeats the point of create react app create react app also adds a lot of abstraction and it is important to understand what is required to create and run a react application but so what do we really need to create a react app well technically we can create a react application with just the react react dom and babel libraries for example if i create a file let's just call it um index.js and if i add these cdns that i found online say this is an html or sorry let's create index.html and let's say create some boiler plate and we just placed in these cdn libraries right here you can see we have one for react one for react dom and react one for react or for babel we could create a react application just like this and actually writing react code like this is fine for small projects or testing purposes but for a production level web application we should create a react application by setting up a react environment and a react environment consists of a javascript transpiler and a module bundler but so what is a transpiler and why do we need one well react recommends to use the latest version of javascript such as arrow functions class syntax and things like that and most browsers don't understand this new syntax which is why we need a transpiler a transpiler converts code from one form of code to another form of code we need a javascript transpiler which converts one form javascript code to another form of javascript code specifically we need a transpiler that converts es5 and es6 code to code the browsers understand and so we now we know about transpilers but what is a module bundler and why do we need one well a module bundler takes a bunch of files of different types such as javascript files images style sheets things like that and bundles them into a smaller group of files and module bundlers are used with the react because they help us manage dependency relationships including loading modules in the correct order because when you have a really big application loading up your modules in the correct order can become very cumbersome and so now the question is what transpiler will we be using to set up our react environment well the react the javascript transpiler that we will be using is called babel and babel is a javascript compiler transpiler that converts ecma script 2015 and plus code into backwards compatible versions of javascript in current and older browser environments and then what module bundler will we be using the module bundler we will be using is a webpack and webpack takes files of different types such as javascript and front-end asset files aka html css images things like that and packages them into a group of smaller files and webpack also creates a dependency graph to import modules that are dependent on one another in the correct order and we could use alternatives such as browserify or gulp but webpack is the most widely used module bundler for react so of course it makes sense to use that one but now before we begin let me actually delete these here and before we begin what we should do is let's initialize our project as an mpm project so i'm going to do npm init and y and so what this command does here is it will create a package.json file to keep track of our dependencies development dependencies metadata and more and the dash y argument that we provided provided here is just a shortcut for providing all the defaults which you can see it provided all these defaults when creating this initializing this npm project but now let's first of course install react with just npm install react and so react is just a library so of course we can just install it with npm and now we're going to need to install react dom and so react dom is a package that basically acts as a glue between react and the dom and we're just going to install it with npm install react dom and so dom real quick stands for document object model and the dom treats the html document as a tree structure where each node is an object representing a part of the document and when a web page is loaded the browser creates a dom of that page and also react dom provides specific methods that can be used at the top level of a web application let me also just open this file so we can see our dependencies coming in here and now let's install our module bundler webpack and so we install this package as a dev dependency because it isn't needed for production so we're going to do npm install webpack and to install it as a dev dependency we do save dev and so what this basically means is webpack is only needed for when we are developing our application not when we have it in production mode and there are quite a few um packages that we're going to have to install right right now so just bear along with me but the next package is webpack cli or webpack command line interface and this provides a set of commands to increase speed and efficiency when studying setting up a custom webpack project so we're going to do npm install webpack cli we're also going to save this as development dependency and an example of its um utilities is it provides commands to initialize a new webpack project run webpack watch for file changes and things such as that and now let's install another um package called webpack dev server and this is another command line interface tool but we're going to install it by mpm install webpack dev server and this will also be a development dependency but so this package will give us a single command to start a server with live reload and live reload means that when we change the code and save the server will automatically reload the page with those changes and now let's start working on we're installing some babel functionality and so the first thing we're going to install is a package called babel or core and it's from the babel mpm group i'm going to do at babel dash core and we're also going to save this as a development dependency and so this is essentially this core file is our code transpiler and next what we want to install is something called babel loader which is npm install babel loader like this and um so this package or essentially what it is is a loader and loaders are what webpack uses to handle and process different file types and loaders dictate how certain file types should be pre-processed as they are imported or loaded and as there are different file types there are different loaders for example babar loader babble loader specifically transpiles javascript code sas loader compiles sas files to css style loader adds css to the dom using style tags and there are many more loaders that you can use and actually i don't think i installed that as a we want to install this as a dev dependency 2. so make sure to tag on save dev suite and it just automatically switched it to a devensey but now what we want to install next is something called it's from the babel group again but it is called so it's from babel npm group and it's called preset react and we also want to save this as development dependency and so what this does or the package preset react contains presets for all react plugins and in babel a preset is a set of plugins that support language features and by default babel has the preset es 2015 which adds support for es6 javascript and the preset react which adds support for jsx and jsx stands for javascript xml and it allows us to write html in javascript which if you're familiar with react is something that we do frequently and now the next thing we want to install is at babel and this is preset env and this will also be a development dependency and this package is a preset that allows us to use the latest javascript code without having to manage which syntax transforms are needed by our target environments such as a browser and this package will also make our javascript bundles smaller and this will of course increase efficiency and things like that and now we've made it to the end so the final package we just got one more and that's the html webpack plugin so i'm going to do mpm install html webpack plugin and we're going to save this as a development dependency and this essentially um simplifies html file creation to serve our webpack bundles so in other words this um this library will assist with adding our bundled files to our index.html file but so now that we've installed our packages this is what our pakis.json file should look like after installing all these dependencies the version might be different depending on time of download you might have a newer version if you're doing this at a later date but now let's get started with i'm going to close this but we're going to start by the next thing we're going to do is we're going to configure webpack so one of the great things about webpack is that is very configurable and we will create a file called webpack.config.js to put all our configuration loaders and other build information and the top of our so at the top of our project structure create the file webpack config.js and so what we want to do is we want this everything in this file to be exported so we are going to use module.exports and everything we write in here will be within these braces so we need to export everything from this file so we're going to wrap all the contents of it with module.exports and the first thing we want to do in here is we want to tell webpack where the entry point of our application is and the entry point of our application is essentially where our application begins and we want the entry point of our application to be a file called index.js inside a folder called source we can do that by specifying dot dash source dash index.js and so this key entry here tells webpack which file it should use to create a dependency graph and a dependency graph is used to resolve modules that are dependent on one another which also while also building the modules that are required by other modules first and we need to create this file actually so let's create a folder called source at the root of our project and then let's add a file called index.js inside of it so source and then index.js so webpack will see this file here as the starting point of our application and now since webpack expects the starting point of our application to be index.js let's add some react code to it so i'm going to go inside this index file and first we're going to import react from the react library next we're going to import react dom from not from react but from react dom and also we just we don't use any object deconstruction when it's from that package so it's just react on and then we want to import app from something we're going to be making in the future which is going to be dash lowercase dash components dash app and so if you're familiar with react of course this is going to be just a component we're going to make and then we're going to use the react dom render method and we're going to render this app component that we're going to build inside an element with the id root which you might see commonly inside a create react app application so essentially we're going to be loading our app component into an html element with the id root and this html element will be present in our index.html file that we will create very soon but now let's create a that app component that we put here and that we imported into this file so remember we placed it inside a folder called components and then we made a file called app or a component called app.js and here what we want to import is react and also we want to destructure component from the react library and we want to do this because we're going to create a class called app and we're going to extend the component so that we can obtain all its um utilities and what we're going to do is we're just going to call this render method and all we're going to do from here is just return and we're using these parentheses so that we can return something over multiple lines and all we're going to return and also real quick this is our jsx code that i was talking about but we're just going to return hello world so we're just going to return hello world like this and then finally let me get rid of some white space and then finally we just need to use export default app to make this file essentially available to other files so specifically though extending the react component class gives us access to the component lifecycle methods and one of these functions is render and this render method will of course render our component and we then use export default export default here which is used to export a single class function or primitive from a javascript file and now let's tell react or let's go back to i'm configuring webpack and we want to tell webpack now the name and location of our bundled file that will be generated when we produce a production build and this is done with the key output and then we pass in an object so remember webpack is a module bundler meaning it takes a group of files and bundles them into a smaller group of files and here we're going to be turning all our javascript files into one file called bundle.js when we make a production build of our react application and to tell webpack to do this we use the key file name and we pass in bundle.js and so when this bundle.js file is generated we want it to be placed in a folder named dist or dist and to make this happen we pass our output object the key path so above here actually i'm going to specify path like this and then what we're going to want to make use of is the built-in node path module so we're going to do the global module or the core module path and then we use that and the method join pass in dur name and then dash dist and essentially this is just to specify the output location of to be a folder called dist in our project and it's good to use this path module because we hard coded this location it could change based on where we you know put our production build and now what we want to do next is we want to make it so our bundled javascript file will be loaded into an html file and to do this we need to make use of the html webpack plugin that we downloaded so to add this plugin to webpack we first need to require it at the top of our configuration file so i'm going to do html webpack plugin equals require html webpack plugin and then let's register this um plugin as a plugin in our webpack configuration file and this can be done with the key plugins and then we pass it is an array of plugins and what we want to do is we want to create a new html webpack plugin and pass it an object which takes the option template and then we're going to pass in dot dash source dash index dot html and what this essentially does is it tells webpack to inject the bundled files it generates into an html file called index.html inside our source folder and we need to make we need to make sure that we create this file so and we also need to create and div with an id of root so that our react component will be loaded because remember inside here we are looking for root so let's go into source and now let's create index dot html a shortcut is an exclamation mark to um get this boilerplate and then all we're going to do is have a div here with the id of root and now let's go back to our configuration file and let's inform webpack about the loader that we'll be using specifically remember we're going to be using the babel loader and to do this we use the key module and we pass it an object and what we pass into this module object determines how different types of modules in our project will be treated and we then use the rules key to specify for how the module is created so we use rules and we pass an array of rules and so of course rules is an array of objects where each object is a rule and our one and only rule here that we're going to be making is that we're going to use babel to transfile all files that end in dot js and to do that we use the key test and we have to pass in some some regex which will be js dollar dash um where is it dash like this or sorry i was getting the wrong slash dot js dollar dash like this so this is regex that's saying essentially um transpile all fault files that end in js sorry this should be a dollar and this is just a regex expression saying which is in between these two dashes and then we have dot js and a money sign which means it has to end in dot js so for example tom.js would would fit inside here this would not because there's an extra s and yeah so something like that just a little bit of regex and then what we also what we want to make sure babel doesn't do is transpile folders or javascript files that are located in node modules that are located in the folder node modules and this is of course because these will be our libraries and we don't really need to transpile those and now we need to specify what we want to do this with and we want to do this and to do that we use the key use and we specify the loader we want to do you do this with and it's babel loader and then we also specify some options for it as an object and what we want to do is we want to use babel loader to transpile our javascript files using the preset env and preset react presets that we installed so in our options we pass presets and then we pass at babel dash preset env and the other one was at babel dash preset react like this so now webpack is completely configured to run our react application and all we need to do now is create a couple npm scripts to run our application if you remember like when you're using webpack you do npm start to get up your dev environment npm run build to create a production build so of course what we're going to do is we're going to use our package.json file here and we're going to have let's delete something don't want to do that and so what we're going to do is we're going to make some scripts that will load up our application in development mode with a live reload server while the other will create a production ready build and so our first script that we will make is our npm script is going to be npm start so let's get rid of this and let's pass in the key start here and what this will do is run our web back development server or webpack dev server in development mode so to run that command which is remember what we installed a webpack dev server down here we're going to run that command and we specify the argument mode and then development so adding webpack dev server will run a live reload server and specifying mode as development will compile our code in development mode and when this development environment starts we want it to display our application in a new tab and we can do this by specifying an open option and something else we want to add on is hot module replacement or hmr to our development environment and hmr exchanges adds or removes modules while the application is running without requiring a full reload and this makes our development environment more efficient and to do that we just tag on the key hot like this dash dash hot and now let's save this and this is going to be a moment of truth right here we're just going to run mpm start and hopefully we get something that works and actually we did make an error so if we go down here we can see that we did not can't find this and this is because we didn't put it we put our components at a top level when they really should be inside our source folder so now if we do this we see everything's run again and let me pull this up here if i can actually sorry about this i can get this in here cool and then we can see hello world sorry that's really bright but then because we have live reload what we could do now is let's change this to hello world subscribe to whitcode and let's save it and if we go back we can see we live reloaded so that's great now let me get this back over here and now let's work on our production or getting our production environment set up and so to get our production environment set up what we're going to be wanting to use is a build key and we do a comma separation here because remember we run mpm run build and so now that our development development environment setup is working correctly this will create a production ready bundle of our application and so the command that will run when we run npm run build we want to run webpack and we want to run it in production mode now when we run npm run build all our javascript files will be minified and bundled into a file called bundle.js located in a folder called dist because of what we specified here for output but anyway let's go back in here let's save this and now another moment of truth is coming up if we close this and we run npm run build what i should do is minify create a bundle of our application that we could easily deploy and we can see compiled successfully here's this dist folder that i was talking about and we have bundle.js which is from this here it output it into our dist folder and then we have our template that this bundle.js file is going to be placed inside so here's our index.html and if we go in here we can see it's minified which is why there's no like it's kind of ugly there's no white space or anything but if we scroll over we can see here source equals bundle.js which is our bundle.js here which has some webpack magic and some um and some other functionalities such as um what was used to make a dependency graph minified it's you know there's no white space and stuff and then we just have some kind of licensing information copyright facebook not sure if that should be meta anymore or whatever but so we've got all this in here but yeah this looks good but so there we have it so we've created our own react environment and personally i uh i always feel a lot better taking away as much abstraction as possible from a project i'm working on and so if this was this tutorial was helpful please leave a like consider subscribing to my channel whitcode and i will see you in the next video also if you want a blog version of this i'll leave a link in the description to my website where i essentially went over the same thing and you can check out there you can download the code there as well but besides that thank you for watching i'll see you next time

Channel: WittCode

Views: 38,695

Keywords: WittCode, wittcode, create-react-app, Create React App, create react app, create a react app without create react app, react app from scratch

Id: h3LpsM42s5o

Length: 26min 21sec (1581 seconds)

Published: Mon Jan 17 2022