Create A React App Without Create-React-App

i know a lot of you have probably created react applications in the past but i bet that most of you have never actually tried creating one without using the create react app command and the reason for that is because it's just simple it's easier whenever you're just excited to create a new react application you never really want to waste time setting up stuff and creating the the basis for it when you can just run a simple one-line command on your terminal and just generate a whole application without actually doing anything but there are benefits to it you can customize your project more you can understand more how a react application works under the hood and more importantly you will be doing it from scratch and only pros in react can actually do this so my recommendation for this video is if you are a beginner react don't um watch this video um only watch this video if you at least know the basics of react because if not it will be pretty useless for you this is more for people who want to understand react more and i'm pretty sure that whenever if you don't know how react is built underneath itself this video can help you in some way so with that in mind this is how to create a react application without using create react tab [Music] [Applause] [Music] so first things first i'm gonna be quick in this video but the reason for that is because everything is pretty quick the thing that takes the most amount of time is understanding everything right and the first thing you actually need to do is check to see if you have node installed into your computer now i obviously have node installed um to see the version or if you have installed you just run node-v i'm pretty sure you have it installed because like i mentioned this video is for people who already know the basics of react and for react to run to even run create react app you need node.js in your computer so i'm not going to show you how to install node.js because i find it to be a waste of time but what you really need is you need to use npm or yarn to create a package.json now to create one automatically you just run the command npm init and you put dash y which will basically say yes to all of the different questions that the terminal will ask us and generate this package.json file right over here for us you can see there's a lot of stuff already implemented in it you can change them however you want but for now we'll keep it just like this which is fine like i mentioned a lot of the stuff we're going to be doing is just installing packages because um that's what we have to do we're creating a react application whenever we just run the command it usually installs everything for us but right now we need to do it from scratch so the first packages that we really want to install are all of the dependencies related to webpack so webpack is an open source javascript module bundler its main purpose is just to compile the javascript modules and since there will be a lot of different files it will basically generate a single file or it can generate a couple files as well but mostly like a very small amount of files which will be its purpose would be to actually run your app and how we're going to install this is by first installing it as a dependency as a like a developer dependency so i'm gonna say save dev then i'm gonna say webpack like this this is the first package we're gonna install which is just the webpack package then we're gonna install its cli so we're going to say webpack cli it will facilitate us using webpack and then we're going to install the webpack dev server which again will be very useful for us so i'm going to press enter and it will start installing and i'll be back in a second when it finishes as you can see it finished installing everything related to webpack and the next set of dependencies that we need to install are all the dependencies related to react so um when you install a react application using the create react type command it automatically installs two dependencies which are fundamental to react and you may notice them but a lot of you guys don't really think about it because you are using the command right those two packages are the react package there's an actual react dependency which is the library so we're installing the library by using the npm install command and we also need to install the react dom library so we'll press enter and as you can see it is actually pretty quick to install both of the packages and now we have to install everything related to babel and babo as many of you guys might know is another open source project in javascript which its main purpose is basically to convert javascript code into backwards compatible versions of javascript it'll just make everything work because you know that javascript updates itself like i don't know like a lot of times in a year um so there's like almost like 15 versions of javascript now so you need something like this to make it so that your application is compatible with all the different versions that are available so with babel we're gonna have to install a lot of stuff i'm gonna type out all of the actual packages we're gonna install and all of them are gonna be um like dev dependencies so uh when i put all of them i'll be back in a second not to mention all of them will be in the description so you can just copy them and paste it and it should be fine okay so as you can see this are all the packages we are installing they are a lot of them um if you want you can take a look at which like what each of them does like even i don't know a lot of like as much as i wish i could about babel um i wish i was better at it but basically all of them are extremely useful for making this work for example babel core i know it's the core package for babel i know that um babel eslint provides us with uh it's like a parser that will allow eslint to run inside of our inside of our project and all of them have their own purposes but to make it work in react because react naturally already has them installed we need to install all of them so just copy and paste and then just run i'm going to run it again and it should be fine now that we finished installing everything related to babel i'm going to actually start creating the files i'm going to give a stop on installing packages right now and i'm going to start creating the two files that are necessary for babel to work in our project first file that i'm gonna create is the dot babble rc file which you probably see in a lot of different projects out there and basically i'm just gonna copy and paste what we have to put inside of here okay so as you can see these are the two things we added into our um our file it is just um a json with first of all a presets key and its value it's an array containing the two different press sets we're gonna have in our project and if we want to add plugins like we did over here with the plug and transform runtime package um we can add it directly over here this file mainly is used as kind of like a configuration for buffer babble so um keep in mind with that and we need it in order for it to work in our application but the second package we need to install is one related to webpack which is actually the configuration file for webpack so both of them will have um its own configuration files we just created that one for babel and now we're creating the one for webpack so to create the one for webpack we're going to create a new file and say webpack.config.js like this so it is a javascript file but it's it's it knows that webpack it is a config for a webpack so that's why i have an icon right over here i'm going to paste the code again and let's go over what each of the stuff means okay so as you can see i just pasted everything and i want to go over exactly what a lot of this stuff means because i honestly feel like this is probably the most important file we've we've created so far basically its main purpose is to define a lot of the important aspects of the react application mainly its entry point as you can see over here we're creating an entry point as our index.js file where the output for the file will be so it will be on the public folder which is very common to exist in a react application also we're determining how our project will run so we're saying it will be targeted towards a web application which is what a react app usually is we're also setting up the information related to the dev development server so we definitely determine their port which usually when you run create erect app it runs on 3000 so i put that as 3000 as well now the static files which are basically the files that won't be changing um so mostly the files that are not react-based they will all exist inside of the public folder it will include like the index.html file that is that includes the the root div everything that we're going to create will be inside of this folder we can also set up a lot of other stuff like um if it's open if it's hot if it has a live reload now the resolve part over here you can set up a list of extensions for which if multiple files share the same name but have different extensions then um basically webpack will resolve the file for which has the extension listed first in this list which in our case will make the js files be first but then the jsx files because jsx would be also a method in which you you write react files but i usually use js so i put it first but we can add more stuff like we had a json over here we can also add an extension for typescript so we can say something like dot slash ts not slash just dot ts but basically this is the main purpose of this part over here now the last thing it's a bit more complicated so this part over here it's a bit different and it's the hardest part in my opinion out of the all the things we went over on the webpack file um its main purpose is to determine the rules um for which your your compiler will deal with different files and their extensions um i don't fully understand um how to develop this on my own i actually got this from somewhere else i already had this project set up so i'm just going over what i already did in the past um but this is what i usually would do when if i was setting up um a react application like i am right now so just keep in mind that this over here basically gives the rules for the compiler to to follow right so this is the end for our webpack.config file now that we have this done we actually are almost done we just need to focus on creating first our package.json file which as you can see it includes all of our dependencies everything that we've installed so far but we do need to make some changes um first we need to um specify how like with the scripts in which we're gonna use to start our application so for example um we're gonna have a start script right which is what happens when you run npm start and for us over here what we want to do is we want to run the the command webpack dev server so webpack already will allow us to create our development server if we run this command so instead of writing every time on the terminal webpack dev server dot we'll just run npm start and we'll follow the script then we also want to set up the build command and the build command is pretty simple whenever we want to build this application we'll just run webpack dot and it will know what to do now we can save this and this should be it for our package.json now all we have to do is actually create the folders that are going to include code so for example i'm going to create over here our public folder which will be used to generate our actual application will be the root of our application and we're actually going to generate our source folder which is actually where we're going to run our write our react code so for our public file or folder over here i'm just going to generate an index.html file which is where our html will start and this is basically what we're going to paste in this file it's a very simple html file it's only actual um the only actual thing that i see over here that would be will be different is the the root over here this is where our whole react application will exist inside so if you didn't know since react works in a way where it keeps updating itself it doesn't download more and more html pages whenever you move throughout your application it's actually a single html page which is this one over here everything was generated through javascript instead of this root div over here and we need it because that's where our whole project will live inside so this is kind of the idea of of how we generate a react application um but to actually make the html file make sense we also need to generate our index.js file inside of our source folder this file is also existent in almost every create react app project and it's very important we're also going to create a app.js file like this because it is the first component you create in react so um this is going to be the the entry point of our react app so we're going to put it right here it's very common again to have an app.js so keep in mind that we need it as well but for the index.js this is how our file will look i just pasted this over here it is basically the same as what would usually come in a create react type command all it does is it imports both react and react dom from from our project it also imports our app component and it tells react to render on the dom the app component inside of the div which they grab from the html page um and the div is the one with the id called root which is again the one that we created over here so we're basically just telling react to put everything it exists inside and below the app component inside of that div which is amazing because it means it will work then we'll close this and here we're actually going to generate our app component and it's pretty simple we're going to do it from scratch we're going to say const app equals to an arrow function and it creates a function which returns a div saying uh this was made from scratch like this also hello world because it's the first thing we usually do whenever we do something new so i'll just put this over here and at the end let's just export default our app component so that we can catch it inside of our index.js so now that we've done this we only have a few small changes that we need to make in order to actually make this work so the first thing is um when we run our webpack command over here to generate um to make webpack work you can see that it will generate an output file called main.js and it will put it inside of the public folder right now we don't have the file we only have the index.html file but this file will be generated when we run our command because it will kind of convert everything into a single file right all of the code into a single file now um the problem is as of right now our index.html file doesn't know that it needs to have access to this file so we're gonna paste over here a script um reference like making a reference to the main.js file which doesn't exist right now but will be generated when we run npm run build which is that one of the last things we're gonna do so we have to do this right here also um in our webpack.config over here you should see you should keep um the path exactly how it is right here now the reason why i'm saying this is because the index.js file it will be it will be recognized directly without having to put the the slashes for the actual path however for the package.json we do need to put um a dot source index.js file over here because that's technically where um our index.js file is right it's inside of the source folder and we need to access it directly like this so it won't work if you don't have this like this however although we don't have to put the source folder path directly over here we still need to put a dot slash because or if we don't um webpack will just give us errors and it won't work at all so i'm gonna save this right now uh let's close all of this it should be working um if you run our command we should be generating a react application which just shows this over here so in order to test this out we're just going to run npm run build and let's see if it's yeah it successfully generated everything we should see that now there's a main file inside of our public and this file it's full of things which is necessary to make our application run and now if we run the command npm start you should see that it will actually not work and i'll explain why so as of right now it's not actually working if we inspect element you should see it will say that you need to import react because it's not defined now although you're not using the react library directly on your app component you do need to import it over here at the top or else the code will just not run so when i import this and i save it it will automatically update itself and as you can see we are generating a react application which is exactly what we wanted it works perfectly like a normal react application we can import stuff like i'll just create a simple react program over here and just show you guys as you can see i just coded a very simple um counter app and like using use state using all the normal react features and if i come to my application and i click on increment it works perfectly meaning that the actual code is running a react app and that's amazing honestly um i would recommend doing this if you are comfortable setting up stuff even if you're not this is just a cool thing for you to know it's a cool thing a cool experience for you to actually learn more about react um and uh i would recommend still sticking with create react app because it just sets up stuff um a lot more optimized than what we did over here um it's faster because like wow like they made it in a way such that it's the best that they can do you know customizing it yourself obviously you can you can make it better for your specific project but it requires you to have a lot of knowledge on the topic so i would just do it once or twice to get the hang of it and then if you need it in the future at least you've learned this in the past so this is basically it if you want the code all the code will be in the description um i hope you enjoyed this video um if you enjoyed it please leave a like down below and comment what you want to see next subscribe because i'm posting twice a week and i would massively appreciate if you guys could help support the channel and yeah that's basically it really hope you guys enjoyed it and i see you guys next time [Music] [Applause] [Music] [Applause] [Music] [Applause] [Music]

Channel: PedroTech

Views: 23,466

Keywords: computer science, crud, css, javascript, learn reactjs, mysql, nodejs, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, create-react-app, create react app without create-react-app, babel, webpack tutorial, babel tutorial 2021, webpack 5, webpack react, javascript tutorial, reactjs tutorial for beginners

Id: mB1TKceLzh0

Length: 18min 47sec (1127 seconds)

Published: Thu Apr 07 2022