(#4) Basic Structure of a React JS Application | React Project Structure | React App Structure

hello guys how are you so in our previous video we have seen how to create the react.js application and in today's video we will just see what is the basic structure of any react.js application okay so I have already opened the project inside the vs code editor that we have created in our previous video so basically any reacts web application have these kind of uh folder structure we have the node modules folder and inside the node modules folder there are are the packages there are all the libraries uh installed I mean that we have to use for this application okay and then we have the public folder inside the public folder the most imported file is the index.html please keep in mind that with your only one index dot HTML file in the whole application okay so you have not read any other HTML file inside your application let's we see the structure of the index.html file here you can see that it's look like a basic HTML file here we have the header and here we have the body and inside the body we have a DVD ID root so please uh don't change the ID of this div as we are accessing the ID from our app.js file with uh with this ID I mean with the ID is equal to root okay so if if you want to directly import any kind of library then you can import here and you can also import inside your other um jsx files okay so it is the basic index.html file mostly you have not to write any kind of code inside these index.html file no I have to close the index.html file as I have shown that it is the most important file inside the public folder now I have to show you the SRC folder in the SSC folder there are two most important files the index.js and the app.js now let's be first show you the index.js file and here you can see that we have imported some imported packages um in the case we have to import any package by this index we have to write the keyword import and then the keyword and we are importing from the react okay uh like in C sharp we are using the using keyword for importing the name spaces so it's like uh the using in the C sharp right now here you can see that we are accessing the document.getelement by ID with the name root and here we are entering these and inside these we are pointing out two and to a component with the name app and it is this component okay m.js so inside the index.js it is the basic structure and we are creating I mean getting an element by ID and I will I have to show you again the index.html file there was a d with the ID root so we are accessing these div inside the index.js by its IID and then we are entering these uh and we are pointing out the app component uh at the start you can point out to any other component if you want from here okay now let me show you the app.js inside the app.js we have just a very basic htms structure now let me remove this and I have just to type here nh2 tag and let me capture Noor code Logics okay Ctrl s now see the result in the browser okay so you have to start your application structure basically from the app component of the rear case application there is also an app.css you can write here your CSS but the app.js and index.js are the most important file inside the SRC folder uh in the future let's suppose you want to build a complete application then you have to add your complete code inside the SRC folder you have to create your component your pages and other helpers kinds of files inside the SRC okay now let me close the SRC folder uh there is one uh the important file uh in the react yes application which is the package.jsl inside the package.json there are some Basics information about our application like the the project name the version and the most important is state or or packages that we are using inside the react are specified here now you can see that these are some of the default packages that we are using inside our application now let me add a library I mean the boot step toward project then I will show you how it is added inside the packet.json okay so the command for create for adding the bootstrap to any real case application is npm install bootstrap so let me copy the command and now I have to go to the terminal okay now I have to type npm install bootstrap this command will install the bootstrap inside my application and the package will be added here uh just the information will be added here but the package will be installed inside the node modules folder right now let me press enter just see the impact you can see that align bootstrap is added it is a package name and here is the version the bootstrap 5.3.1 version in Star inside JS application now we can easily use the Boost safe inside or vxjs application so my basic purpose was that if we add any package inside uh in uh inside our layer case application that the package information will be added here but the package will be installed inside the node modules folder okay you can see that there are already lots of package installed inside the node module folder okay so node module is basically a basic thing for running our red JS application uh I think it is enough in this video because we have just uh to show the reacts application structure in this video so for the next video we will come with a new topic uh thank you for watching the video goodbye

Channel: Noor Codelogics

Views: 153

Keywords: react folder structure, react project structure, react file structure, react folder structure best practices, react app structure, react folder structure best practices 2023, react app folder structure, folder structure react, react js project structure, react component folder structure, react js file structure, react folder, react folder system, react js file system, react organization, react js folder system, react js tutorial, learn react js, learning react js

Id: NkjIgvq7dtA

Length: 7min 54sec (474 seconds)

Published: Mon Sep 04 2023