Create React Project Step by Step using Vite | Vite is Faster Alternative to Create-React-App

hey there everyone let me share back a unit on the video in this video I'm going to show you how to create a react application using wheat tool well earlier we were using Create react app tool to create a react application but alternative to create a react app we have one more tool that is wheat well nowadays react developers prefer using wheat tool to create the react project so in this video I am going to show you how to use wheat to create a react project well wheat is a build tool that aims to provide a faster and learner development experience for modern Web projects while using wheat we can create the react application faster and basically with bundles the react application you know very very faster all right so let's go ahead and let's see how to create a react project using wheat build tool well here you can see wheat supports two templates one is Javascript 9 another is apps script so using wheat we can create different applications like we can create JavaScript vanilla project view project react project and so on and we can use view to create a different typescript applications like vanilla typescript view type script react typescript and so on in this video I am going to show you how to create a react application with JavaScript template using wheat tool so let's go to Visual Studio code ID so here I have created wheat workspace folder and I have opened this Visual Studio code ID in this folder all right next let us use Visual Studio code ID built-in terminal to you know execute the commands so here we have a terminal so click on new terminal over here next here just type the command npm so make sure that you have installed node.js and npn your machine because in order to create the react application using with we have to use the npm command so here npm followed by create and then read so we are going to use a latest version of width so here at latest and Then followed by the project name so here let us say read react app something like that so this is the command that we can use to create a react application using wheat build tool next go ahead and hit enter and notice here it prompts select a framework so here we have vanilla view react so we are going to use react so here let us select the react and hit enter and here we need to choose the template so we are going to use JavaScript so here let us select the JavaScript and hit enter and now you can able to see here the project is created so if you can see here within a with workspace folder with react App application is created so just expand and you can see here this is the project structure next here you can see couple of commands so just follow these commands and just run this application so here just type CD and Then followed by the project name that is wheat react app and then hit enter now we are in a with reject App application next just type the command npm install so just follow these three commands Okay and then hit enter so this will install all the dependencies for our react application so just wait a couple of seconds now we have installed all the dependencies next in order to run the react application just type the command npm run Dev and hit enter and there we go our react application is deployed in a local development server which which is running on Port 5173 so just copy this URL now go to browser in a new tab just paste it and hit enter and there we go our react application is up and running next let us go ahead and let's quickly understand the project structure for our let application so here we have package.json file So within a package.json file you can see all the dependencies for example here you can see dependency section and within that we have a react and react Dom dependencies next here we have scripts section and within that we have different scripts to build the react application to run the react application and to preview the react application and here we have Dev dependency section all right and whenever we you know execute npm install command then npm install command will download all the dependencies as per the dependency section and it will create node underscore modules folder and it will keep all the downloaded JavaScript differences within the node underscore modules folder next we have index.html file well this is the single page react application so in this react application we have only one HTML file that is index.html file and if you can notice here within this HTML file we have body within that we have a due with the ID root so whatever the components that we are going to create in a react application that components will be rendered within this due all right next expand SRC folder within that we have main dot jsx file so within a main.jsx file you can see we have react Dom dot create root and here document dot get element by ID and then we have passed the root as a ID well in index.html file you can see we have a due with ID root right and in main.js file you can see document.getelement by ID and then this is the root so whatever the components that we are going to create in a react application that components will be rendered within this due by using this statement okay right now you can see we have only one component that is app component so basically app component is a root component and we import the other components within an app component just remember this statement is responsible to render the components within a due it has ID root next we have app.js jsx file so this file contains app component so app component is basically a root component and this is the default generated code so we can simply remove this code and we can write our own code all right next let me remove this import as well this is the unused import [Music] next we have app.css file so this file basically contains all the you know CSS tiles so right now we can remove all this because we are not going to use it next we have index.css so this file also contains all the CSS styles so let me remove this as well next we have our sets folder So within assets folder we keep all the images and other static files next we have public folder within a public folder we can keep the static files such as images SVG files videos and Etc all right so this is a very simple project structure of our act application next we have one more important file that is with Not config.js So within this file we can configure all the wheat related configuration for example right now the development server is running on Port 5173 but we can configure different port as well for example here let us have a server section and here we can change the port by using Port attribute Port 3000 next let's go to browser and here you can see this site is can't be reached because we have changed the port so here let me give the port 3000 and now you can see we can access the react application so we don't have any content to display that so you can see the blank next let's create one component so go to SRC folder right click on it a new file and let's give file name as hello world Dot jsx so make sure that you provide the extension for this file as a jsx because we are going to write a jsx code within this file next here let's use a functional component to create a react component so here export default and then function let's give component name as hello word so make sure that the first letter of the component name should be a capital and then just return some HTML code so here H1 and then hello world [Music] perfect now we have created Hello World functional component next let us import this component in a app component so go to app.json file and here go to return statement and this is basically fragment using a fragment just use hello world component and make sure that you import this allowed component adapter all right perfect next save this file and go to browser and here you can see Hello edit displayiner you know web page so this is how we create a react application using width and this is how we create a functional component in object you know project and we import and use in an app component all right great I hope you understood how to create a react application step by step using wheat build tool all right so wheat is basically faster and it improves the development experience so no one else you can go ahead and use wheat tool to create the direct application all right great I will see you in the next video

Channel: Java Guides

Views: 5,507

Keywords: react js, react, vite

Id: I2iCRAONZCU

Length: 10min 30sec (630 seconds)

Published: Tue May 23 2023