DEV Community

Cover image for Don't Stress: REACTJS (Folder Structure)
Orion F.
Orion F.

Posted on

Don't Stress: REACTJS (Folder Structure)

Alt Text

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.

Top comments (0)