Understanding React folder Structure

React folder structure will teach you about the folder structure of react and what it contains.When we install create_react_app from https://github.com/facebook/create-react-app  using npm following things happen

1. it download the structure for react
2. public/index.html is the page template
3. src/index.js is the JavaScript entry point.

Understanding React folder Structure

React folder Structure

node_modules:

  • Holds all the dependencies and sub-dependencies
  • React related dependencies are present in this folder like react,react-dom,react-scripts and react script related other dependencies.

Public folder:

  • favicon.ico: it is favicon icon file.
  • index.HTML : It is single page served by react at the end.Hence due to this file public folder is called root folder.
  • manifest.json: It stores the information like name, icons, start_url, display, metadata etc of the application.

src:

  • It is container of source code
  • This is place where all developer code is written
  • We can create our own subdirectories inside this directory.
  • Webpack rebuilds what it does for faster rebuilds it process only files within this folder

Some already exist files inside the src folder

  • App.css : Which contains the css classes used by App.js
  • App.js : Which is sample react componentc.
  • App.test.js: Basically allow us to create unit test cases for different components
  • index.css: Base styling for the application
  • index.js: index.js has render call which imports App.js component which tells react where to render it.
  • logo.svg : logo.svg is react logo
  • registerServiceWorker.js : It is important for registering service,necessary for mobile React native apps

Package.json

 

React package.json

React package.json

1.It has information like project name,version and dependencies.

Leave a Reply

Your email address will not be published. Required fields are marked *