ReactJS Tutorial for Beginners - 3 - Folder Structure

Author:
In the previous chapter, we have learned how to create a React app step by step. 
In this chapter, we are going to explore the project structure of the newly created React app using the "Create React App" CLI tool.
The "Create React App" is a CLI tool creating a react app that creates a sample app using react that can be used as a starting point to create a full-fledged react app. It has a dev server bundled by default for development. 
In the previous chapter, we have created React hello world app and now let's explore important files and folders of the React hello world project.

Folder Structure

After creation, your project should look like this:
my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg
Let's explore important files and folders of the react project.

Files must exist with exact filenames

For the project to build, these files must exist with exact filenames:
  • public/index.html is the page template;
  • src/index.js is the JavaScript entry point.
You can delete or rename the other files.
You may create subdirectories inside src folder. For faster rebuilds, only files inside src are processed by webpack. You need to put any JS and CSS files inside src, otherwise, webpack won’t see them.
Only files inside the public folder can be used from public/index.html.

package.json

The package.json file contains all the required dependencies for our React JS project. Most importantly, you can check the current version of the React that you are using. It has all the scripts to start, build, and eject our React app.
For example:
{
  "name": "react-helloworld-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

public folder

The public folder contains index.html. As react is used to build a single page application, we have this single HTML file to render all our components. Basically, it's an HTML template. It has a div element with id as root and all our components are rendered in this div with index.html as a single page for the complete react app.
For example:
my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

src folder

In this folder, we have all the global javascript and CSS files. All the different components that we will be building, sit here.
For example:
my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

index.js

This is the top renderer of your react app. In the index.js file, we import React, ReactDOM, and the CSS file. 
For example:
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'

node_modules

All the packages installed by NPM or Yarn will reside inside the node_modules folder.

App.js

The App.js file contains the definition of our App component which actually gets rendered in the browser and this is the root component.
For example:
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

What's next

In this chapter, we have explored the project structure of the newly created React app using the "Create React App" CLI tool. 

Comments

Post a Comment