ReactJS Tutorial - 3 - Folder Structure

in the last video we saw how simple it is to create and run a basic react application using create react app now at the same time it is also really important to understand the files and folders involved and how the control flows when you run the application let's take a look at that in this video I have opened the hello world project in Mia's code and you can see that at the root level we have three folders and four files to begin with let's start with package dot JSON this file contains the dependencies and the scripts required for the project you can see that we are using react version sixteen point five and that is listed as a dependency we also have a few scripts to run the application build the application or even run tests now based on whether you have just NPM or yarn as a package manager you are going to see yarn lock or package lock files they simply ensure consistent installation of your dependencies and you don't really have to worry about them we also have a git ignore and a readme file next let's talk about the folders the first one is node modules and this is the folder in which all the dependencies are installed it is generated when you run the create react app command or when you run NPM install the next folder is the public folder this folder contains three files out of the three manifest dot JSON is concerned with progressive web apps which is out of scope for our discussion we have the Fame icon which you see in the browser tab and this is nothing react specific so as a beginner you only have to concentrate on the index dot HTML file the index dot HTML is the only HTML file you are going to have in your application we are building single page applications and this is said the view might dynamically change in the browser but it is this HTML file that gets served up typically you are not going to add any code in this file maybe some changes in the head tag but definitely not in the body tag you want react to control the UI and for that purpose we have one div tag with ID is equal to root at runtime the react application takes over this div tag and is ultimately responsible for the UI please make a note of this div tag and we will come back to it shortly the next folder we have is the source folder which is the folder you will be working with the most during development the starting point for a react application is index dot J's in index dodgers we specify the root component which is AB component and the Dom element which will be controlled by react the Dom element in our example is an element with an ID of root and if you can recollect this is the element in our index dot HTML file we call this div element as the root Dom node because everything inside it will be controlled by react for the hello world application the app component is rendered inside the root Dom node that brings us to the app component which is present in app dot J's this is also the file we edited in the last video and is responsible for the HTML displayed in the browser in other words the app component represents the view which we see in the browser with ab Dodgers create react app also generates the CSS file for styling and a test dot J's file for unit tests the CSS file contains classes which are applied in the app component and the test file contains a simple test case we also have an index dot CSS file which apply styles to the body tag and the logo SVG which is referenced in the app component finally we have service worker which is again concerned with progressive web apps and can be ignored as a beginner so that is the folder structure of a react application created using Create react app when you run the command NPM start index dot HTML file is served in the browser index dot HTML contains the root Dom node next the control enters index Dodgers react done when there's the app component on to the root Dom node the app component contains the HTML which is ultimately displayed in the browser now then I have mentioned the word component several times already but what exactly is the component let's understand that in the next video thank you guys for watching feel free to subscribe I'll see you guys in the next one

Channel: Codevolution

Views: 1,164,897

Keywords: Codevolution, React, React Tutorial, React Tutorial for Beginners, React Basics, React Fundamentals, Reactjs, Reactjs Tutorial, Reactjs Tutorial for Beginners, React.js, React js

Id: 9VIiLJL0H4Y

Length: 5min 35sec (335 seconds)

Published: Mon Oct 29 2018