Part 4 : React Project structure

In previous article I have shown environment setup for react application and in this article, I will walk you through the folder structure of react application. But before download and install VS code, it is one of the powerful editor to open project, modify or manage code. Download VS code from here and install. Open project in VS code shown below.

React application gets opened in VS code successfully. Let’s understand folder structure of react application.

Manifest.json is Metadata file of you react application which gets created automatically while creating react application. Manifest file contains information like name of you project, description, images used in your application and theme color. Manifest is centralized location from where you can change look and feel of your application or multiple clients can have different-different look and feel just need to configure Manifest file accordingly.
Now move on to another file called index.html. This file is basically rendered on browser but again contents are referenced from multiple places like icon referenced from manifest file. You can also refer theme from manifest but it is hardcoded here for now. Reference of Manifest file is marked in red square and image icon which referred from manifest.

Box marked in white color is root element and responsible for loading react component. you can add more html element there is no restriction but usually avoid to add more html element and only one root element where component gets rendered. You can have few html elements if html page divided in 2 or three section like header, navigation, main content and footer. If you notice left side of above screen both logo image and index.html file is kept along with manifest under public folder.
All JavaScript, CSS files resides in src folder. Let's understand purpose of index.js file.
Underlined with red color are files imported, first two react and react-DOM are main JavaScript library used to build react application along with CSS, App.js and reportWebVitals.Js also referenced.
Highlighted inside ReactDom.render(….) method is actually loading react component and root is div id from index.html file.

Open App.js file, you can see HTML syntax written inside App function which is nothing but react component or virtual DOM. This file referenced under index.js file to access component from this file.
There are few more files available which I will cover in future article. Package.lock.Json keeps track of all dependency/versions of module installed from npm. Whereas package.json holds metadata information related to your project like, project name, author, version number. On release of your project, all versioning related to your project maintained in package.json file.
Index.CSS file is used for cascading style sheet for your applicaion/project. you can declare CSS at global level from here.

App.CSS is also CSS file and styles related to APP component can be created in this file.