Folder Structure

Hi readers,

In this post, I wanted to give insight about the folder structure of a ReactJs App. I wanted to create separate post the so you can get insight in a gradual way. Again, I try not to be lengthy on the steps, but get right to the info. Hope you enjoy!

Folder Structure Breakdown

• package.json: Includes the dependencies and the scripts used to create a project.

• package-lock.json: Ensure the installation of the dependencies.

• .gitignore & readme: Don't worry about these files.

• node_modules: All the dependencies are installed in the folder. It's generated when you run the "create-react-app" command.

• public folder

  • manifest.json: Used for Progressive Web Apps (PWA's)
  • favicon.ico: Nothing specific, just the icon for the title.
  • index.html:Typically you won't change anything in the body. Maybe the head tag but that's all. This contains the root DOM node.

• src folder: The folder you will work with the most for the development.

  • index.js: specify the 'root' element which is controlled by React.
  • app.js: Responsible for showing the UI (view) within the browser.
  • app.css: Used for styling the app UI.
  • app.test.js: Used for testing
  • index.css: applies styling to the body tag.
  • logo.svg: refrenced in the app component.
  • serviceWorker: used for PWA's only.