Create a React App Without Using npx create react app command

God explains says hi today we're going to talk about how to create react app without using npx Create react app so what do we need to create react app we need node.js Babel webpack and face code so I'm going to talk a little bit about each one of these so for node.js it's a JavaScript runtime and this means that you can run JavaScript on your machine without the need of using a web browser also when you install node.js this comes with the node package manager in PM that we use to install all the dependencies that we need for our project now for Babel it's a transpiler or a trans compiler and this means simply a converts a type of source code to another type of source code so for example when creating react app we use react and we use the newer ecmascript features we can use typescript Etc and all of these is not supported by all the browsers for example when you create a react component use GSX and GSX here is Javascript and HTML both in the same file and the browsers doesn't understand that code so we need to use Babel to transpile or to transcompile that code into JavaScript also we transpile this code here into all JavaScript so we can make sure that all the old browsers can also understand our code and now for webpack which is a bandler so when we need we pack so when we create a react app we don't put all the app code in a single file but we put them in separate files let's say we need to create react applications so we're going to create this app.js file and we're not going to put all the code inside that file so we're going to create other components and that's the whole idea behind react GS so we're going to create the home navbar footer components and then we're going to use the ecmascript module system or we're going to use import to import these files these modules into the app.js and also these components can use Imports in both other components well not all the browsers understand or support the import system so what we need to do here we need to use the webpack to combine these files here all the files into one single file that's going to work in all the browsers and last for the code editor I'm going to use vescode and now before we go and start creating our react app from scratch I want to suggest a very useful channel the channel name is Tech in five minutes and as the name suggests they make five minutes length videos about tech they bring insights to the world of technology Internet of Things software development and more so don't forget guys to check it out I'll leave the link down in the description well without further Ado let's start with the first step in creating our react app now let's go and see that react so first I need to create a folder here so I'm going to call this react app and then I'm going to open this code and drag and drop the folder now I need to initialize a node project so I'm going to open a new terminal here and then I'm going to run npm in it then Dash y so this will create a package.json with the all the information needed for our app now I'm going to go and create some react files so I'm going to create a folder called public and inside we're going to need a index.html file also I'm going to create a search file so this is where I'm going to create my components so I'm going to create a component called app.gs and you can see it starts with a capitalized so this is a react component now in root of my folder or inside the source I'm going to create an index.js file now inside my index.js file I will need to go and import react and also I'm going to import from react Dom I'm going to import the method a method called create root and this will initialize a react app on the client now I didn't install yet react and react Dom so let's go and open our terminal and then run npm install and dash dash save I'm going to install reacts and react Dom I'm gonna hit save well now you can see we have here a node modules folder and also we have in our package.json a some dependencies react and react Dom so now I can use them here well the first thing I need to do is I'm going to create a container for my app so I'm going to go to my public folder then inside my index.html I'm going to create a basic HTML code I'm going to change the title to react app and then here I'm going to add a Dev with the class or with the ID root and then I'm gonna hit save then go back to my index.js then select this Dev here so I'm going to use document dot get element by ID and then I'm gonna pass in the ID root here to this method now I'm going to create a root and then use and create root here and I'm gonna pass in the container here and now I'm going to use the root render method to render my app so the app here is the component inside my source folder so I need to First go and import that so I'm going to go inside my search folder and then up and I shall call this app and now I'm going to go to app.gs to create my app and I'm going to use rfce here hit enter and this will create my component so I'm just going to go and change this to react react up then without npx create react app and this is what we'll see when we run our app so we can't do that yet because this is GSX the browser doesn't understand this code here so we need to use payable to transpile this code here and also we need to put all these files here into one single to combine them which means to create a bundle of these files and that's where we need to use the webpack so let's move on to the next step now it's time to go and install all the people dependencies I'm going to need for our react app so I'm just going to go here and close these files then I'm going to open a new terminal now I'm going to run npm install we're going to need Babel core so this is the main package that we need for uh to use Babel and then we need Babel slash preset Dash e and V and this is what we need to use to transpile igma script sex JavaScript to all JavaScript that's going to be supported by other browsers then we're going to install at payable then slash press set Dash react so this is what we're going to use to transpile react code GSX code into JavaScript it's going to be supported by other browsers and now I'm going to need to install Babel Dash loader so this is what we're going to use when we set up webpack so when we set up webpack we need to use Babel to transpile the code before we bandlit with webpack and now the last package is optional so you don't need to install this so you just want to install Babel slash cell I if you want to transpile your code using the command line so you don't need to install this when using when creating a react app now I'm just gonna go and say dash dash say live Dash Dev to install these dependencies as Dev dependencies so I'm going to hit enter now after the install of the dependencies has finished now let's go and take a look on the package.json file so you can see here that now we have these Dev dependencies and we have all the Babel dependencies or packages we need for our react app now let's move on to the next step and now it's time to install the webpack dependencies so I'm going to close this file here then open a terminal and then use npm install and I'm going to install the webpack package this is the main package that we need to install in order to use webpack and then I need to install web pack CLI to run webpack Commons on the command line and also I need to install the web pack Dev server and this is the webpack server that we need to use as a server in development if you are familiar with nodemon or live server that's gonna be the same now I'm going to install these as the dependencies so save Dash Dev or just Dash capital D and then I'm gonna hit save foreign pack packages it's time to go and configure webpack now it's time to configure webpack so I'm going to root of my uh application and I'm going to create a file called Web pack Dot config.gs and I'm going to export the configuration as an object so I'm going to use here module that exports equals that object and the first thing we're going to set here is the mode so this could be this could be a development or production so because we are in development I'm going to set this to development and now we need to tell we pack the entry pound so we need to give it the file from where it starts to look for all the files it needs to bundle so in this case it's going to be the index.js and it's going to look for all the imports from there to like look for the files that it needs to bundle so I'm going to use here the index.js now I'm going to go and set the output so what I want to save the files so I'm going to use here a path or to set a path and to do that I'm going to use the built-in module node module path so I'm going to go and say const path equals so I want to import that using require path so we don't need to install this so path that resolve and then I'm going to choose the directory name so this directory here and then I want to save these in a folder called test and that's it now before we bundle the files we need to tell we pack to use Babel to transpile the code so I'm going to use here module it's going to be an object then inside I need to add a property called rules which is an array so you can add as many rows as you want so I'm going to add a rule for JavaScript and jsx file so I'm going to look for those files using this test which is going to be a regex so I'm going to look for all the files that that ends with Js or GSX ends means a dollar sign in regex so all the files that ends with JS or jsx must be transpiled then bundled so now I'm going to exclude some files because node modules folder here has JavaScript files so I need to exclude that so I need to say nodes modules this must be excluded and here I must say what is the loader I want to use which is Babel loader here so this is going to be a an object and I'm gonna set this a property loader to Babel loader which we have already installed and then I need to also mention the presets so I'm going to use options here it's going to be an object with a presets property so this process prop is going to be an array now I'm going to use the Babel slash press set Dash a and v this is for transpiling as sex and later to all JavaScript that is support by older browsers now I also need to use the preset to transpile GSX files so they will preset Dash react and we are done with a transparent decode using Babel now I'm going here to the output and once the once the files are bundled I want the file name to be index bundle dot JS if you don't set this a random name is going to be generated so I want to bundle the name or the files and the name of the band Loop must be in expanded.js now what is the use of this and expand lag GS after it span after all the files have been bundled so the index band.gs for our application to work we need to put this JavaScript in this index.h demo that it resides inside our public folder so if I go to index.html I need to add a script tag here that and the source must be the index the index Dash bundle dot GS so I don't need to do this manually we need to go and use a plugin so that plugin is going to be so I need to use plugins here it's going to be an array and I need to set a new HTML webpack plugin so HTML webpack plugin will check in this index.html as a template and it will add to it a script tag just like we did manually and the search is going to be this and expand.gs so here I need to add an object and then I need to set a template here and it's going to be set to path again dot join and I'm going to use the chair name then the a public folder so the index.html is inside our public folder and then the name of the file which is index.html and I'm gonna hit save now I need of course to go and import this here so I'm just gonna go here it's imported automatically so HTML pack plugin require HTML webpack plugin now we need to go and install this using npm so I'm gonna go here and open the terminal and then use npm install I'm going to install this as a Dev dependency and then the name of the package now I'm gonna hit enter and now that this has been completed and we have configured webpack now it's time to run the server to run the webpack server we need to go and like say npm run Dev and this will run the server but first we need to go into our package.json here and under the scripts we need to add these scripts here so Dev it's going to be equal to width back then serve and I need also to add another script to build my application for production it's going to be set to webpack now I'm going to hit save now if I came here and hit enter I hope we did we don't face any problems here yeah and it says the project is running at localhost 880 so which means everything is compiled successfully and we should just go and hit Ctrl click to open our app now you can see here that it says react up without impacts create react app which is this file here which is our app so I'm going to just change this to hello and you can see that the page has been refreshed automatically and the changes has been applied and that's how you can create a react app without using npx Create react app well I still have the last path in this tutorial which is set up in the uh the server here so what if you want to use a different port than 8080 so that's what we need to do next now let's go and change our webpack server Port so I'm going to go to our webpack config.js and somewhere here I'm going to use the dev server Dev server I'm going to use here ports and set it to like 5 000. I'm going to hit save now let's open our terminal let's go and stop this one here using Ctrl c y now let's go and run npm run Dev and you can see now that the port has been changed to 5 000. now if I click on this Ctrl click you can see now that our app is served at localhost 5000 and that's it for this tutorial I hope you liked it don't forget to like comment share and subscribe see you in another tutorial thank you

Channel: Code Explained

Views: 2,483

Keywords: how to, create react app, without, npx create-react-app, setup, react app, webpack, babel, transpiler, bundler, webpack cli, webpack dev server, webpack configuration, webpack server configuration, babel loader, setup webpack with babel, babel for react, babel for ES6, node project, react project, javascript, tutorial, code, command line

Id: a8DOdSdeZEE

Length: 23min 8sec (1388 seconds)

Published: Sun Nov 20 2022