File & Folder Structure of a React App

package.json


Most important file in a React project

It contains:

  1. Project name, version, and metadata
  2. Build commands and scripts
  3. Dependencies and devDependencies


Difference Between Dependencies and DevDependencies


Dependencies

Required for running the project (e.g., React, ReactDOM)


DevDependencies

Required only during development (e.g., ESLint, Vite, Babel)


These packages are downloaded and stored inside the node_modules folder.


package-lock.json


  1. It stores the exact version of each installed dependency.
  2. Contains a nested structure of dependencies.
  3. Helps ensure consistent installs across different machines.


README.md


  1. A documentation file about your project.
  2. Commonly includes:
  3. Project purpose
  4. How to install and run
  5. Author info, etc.


vite.config.js


  1. Contains configuration settings for Vite (the build tool).
  2. Used to set aliases, plugins, ports, etc.


eslint.config.js
  1. Contains ESLint rules (JavaScript code standards)
  2. Helps with code quality and linting


.gitignore
  1. Lists files and folders that should not be pushed to Git (e.g., node_modules, .env, dist, etc.)



Project Files Overview


index.html

Browser's entry point (root <div> is here)


main.jsx

React/JS entry point; renders the <App /> component


App.jsx

Main React component


App.css, index.css

Styling files for components and global styles


Best Practices

  1. Create React components inside the src/components folder
  2. If something is meant for public access (like images, favicon, etc.), use the public folder.
  3. For assets used internally (like logos, icons, CSS files), use an assets folder inside src.


node_modules
  1. Contains all installed libraries and packages
  2. Automatically created when you run npm install or yarn install


Why Should You Not Push node_modules to Git?

  1. It is very large in size
  2. Other developers can simply run npm install to recreate it from package.json