3- Packaging Structure of your react app (textformat)

 

 In our textformat react app packaging  structure consists:

 

-->   node_modules

-->   public

-->   src

-->  .gitignore

-->   package-lock.json

-->   package.json

-->  README.md

Image 1

node_modules

In the node_modules folder, 

You  get various folders of all the required dependencies & packages that may be used for building you react app.

For example – Webpack, Babel, JSX, Jest & more.

Managed by IDE and npm package

NOTE-  If node_modules folder do not exist write npm install in your terminal and computer system with the help of package-lock.json and package.json will create node_modules package again

public

Files applicable to public  like logo of ReactApp and more

A file that remains in the public folder, will be accessible by %PUBLIC_URL%.

Also contains index.html(root file of the react app).

src

In the src folder, You can put all the js, CSS, images, components file & other assets of your projects.

You can create your own files according to these files for developing your projects.

.gitignore

When we push our file to Github what needs to be ignored is managed by this file.

package-lock.json

package-lock.json file maintains a version of installed dependencies.

package.json

All the dependencies are defined in this file. 

 It maintains which dependencies are necessary for our application

README.md

Basic instructions about your react-app.

Discuss inside structure of public folder

public

  -->  favicon.ico

  -->  index.html

  -->  logo192.png 

  -->  logo512.png

  -->  manifest.json

  -->  robots.txt

Image 2

favicon.ico

This the default react icon that always remains in the public folder.

You can remove favicon.ico when you place a new favicon for your project/website.

index.html

This is the index file that displays when the react app opens in the web browser. It contains the HTML template of the react application.

index.html file is the root file of the react app. Everything will be rendered through it on the front end. So, Don’t try to change & remove this file from the public folder.

Note – index.html must exist in the public folder and you must not delete it otherwise you will get an error.

logo192.png & logo512.png

These are the logo of react js. it is placed just for the initial view of react app. you can remove/leave it depends on you.

manifest.json

manifest.json provides the metadata like short_name, name & icons in the form of JSON for a react application. 

robots.txt

The robot.txt file is given just for SEO purposes.

 As a developer, you need not do anything with this file. This file is not related to development.

Discuss inside structure of src folder

src

   -->         App.css

   -->         App.js

   -->         App.test.js

   -->         index.css

   -->         index.js

   -->         logo.svg

   -->         reportWebVital.js

   -->         setupTest.js

Image 3

App.css

App.css file contains a default CSS code and import into the App.js file. 

App.js

App.js is a parent component file of your react app. 

It is imported into the index.js file to render content/HTML in the root element that remains in public/HTML.

App.test.js

App.test.js  gives us a testing environment. Basically, it’s written code to protect the react application to be crashed.

We also need not modify & remove this file from the react application.

index.css

index.css file contains some default css code for index.js

index.js

index.js file is an entry point of react app.

 Means that all the component renders through this file to the index.html.

logo.svg

This is the default logo of react js. You can remove it and place your project logo.

reportWebVital.js

reportWebVital.js is related to the speed of your application.  You also need not to do anything with this file.

setupTest.js

In this file, @testing-library/jest-dom is imported. You need not modify and remove it from the application