Exploring the App Structure

Open the "hello-world" directory in a code editor of your choice 

Let's go through important directory and files one by one - 

1. node_modules - This directory contains all the packages that essential to run the react application as well as the extra packages that you will install whenever you want to include a ready made library for your use case. Packages can be imported directly inside your application. 

2. public - This directory includes the index.html file. ReactJS is actually just a library which translates JavaScript into markup and injects inside the index.html file. There is just a single file which is actually "rendered" by the ReactJS application which when you visit and all the other routes and everything else visible on the page are actually JavaScript elements which are injected on the webpage by react. This is the reason ReactJS applications are also called "Single Page Applications" or SPA as only 1 page that is "index.js" is actually visited by the user, rest of the components are dynamically injected using JavaScript. 

3. src - This is THE BOSS directory where all the application's logic goes. you can make subdirectories and files inside those directories but they all should be inside the src directory.

4. package.json - package.json contains all the meta information about your application. The author, the name, running scripts and most importantly the installed packages. Since the size of all the packages inside the "node_modules" directory is HUGE, so the node_modules directory is never included with the application. Instead, wherever the app is moved, say a server, the package.json file is used to install the node_modules again at the new location. 

 

Try this - delete the "node_modules" directory from your workspace and then run npm install inside the terminal at the same location.

Discussion
Santosh Mishra

Santosh Mishra 11:38 AM, Friday 4th Dec, 2020

Thanks, This is a very well organized online teaching technology skill