Articles → REACT.JS → Different Files And Folders In React

Different Files And Folders In React

In this article, we will discuss different files and folders in react.js

Files And Folders In React.Js

Once the project is created, the following folders are created.

Picture showing the list of files and folders created in the react.js application

Click to Enlarge

Let us discuss the files and folders

Node_Modules

This module contains third-party libraries. For example, npm module, react module, etc.

Click to Enlarge

Public

This folder contains the public assets.

Click to Enlarge

Src

This folder contains the components and CSS files.

Picture showing the list of files inside the src folder

Click to Enlarge

Public\Index.Html File

This file contains the div with an id root which acts as the container for the react application.

Picture showing the content of the index.html file

Click to Enlarge

Src\App.Js

This is the application component that is responsible for rendering the UI. The code written inside the file is in JSX (JavaScript XML) format.

React.js uses Babel JavaScript compiler to convert the JSX to plain JavaScript code.

Picture showing the content of the app.js file

Click to Enlarge

You can use an online babel converter to check the JSX to JavaScript code conversion. For that, go to https://babeljs.io/repl

On the left-hand side, paste the JSX code. On the right-hand side, you can see the corresponding JavaScript code.

Picture showing the online babel convertor for converting the JSX into JavaScript

Click to Enlarge

Src\Index.Js

This file is the entry point of the application.

Picture showing the content of the index.js file

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Tuesday, July 27, 2021

Query/Feedback

Your Email Id

Subject

Query/Feedback	Characters remaining 250