Structure

src/
├─ assets/
│  ├─ fonts/
│  ├─ images/
│  ├─ scss/
├─ components/
├─ config/
├─ containers/
├─ context/
├─ hooks/
├─ helpers/
├─ i18n/
│  ├─ en/
│  ├─ fr/
│  ├─ es/
├─ layouts/
├─ pages/
├─ services/
├─ validations/

📁 Assets

• Here we group all our multimedia files.
• Contains subfolders such as Images, Icons, Videos, Audios, etc.

📁 Components

• This folder contains all the presentation components of our application (Stateless Components).

  import React from 'react';
  
  const Stateless = () => {
    return <h1>Hello!</h1>;
  };
  
  export default Stateless;

📁 Containers

• In this folder, we have the Stateful (Smart component) components where we keep track of the state.

  import React, { Component, useState } from 'react';
  
  const Stateful = () => {
    const [state, setState] = useState({ hello: 'hello world' });
    return <h1>{state.hello}</h1>;
  };
  
  export default Stateful;
  
  // or
  
  class Stateful extends Component {
    constructor(props) {
      super(props);
      this.state = { hello: 'hello world' };
    }
  
    render() {
      return <h1>{this.state.hello}</h1>;
    }
  }
  
  export default Stateful;

📁 Constants

• In this file, we group all the constants like regex.

📁 Helpers

• Here we create and export functions that will be reused in different places of our application.

📁 Hooks

• A folder made for custom hooks.

📁 Layouts

• Contains layout files such as Navbar, Footer, Sidebar.
• Layouts are used to wrap a specific component.

📁 Pages

• This folder contains page components such as Home, Contact.
• Each page is wrapped with a **`Layout

`**.

📁 Validations

Here we write our form validations and rules using a library like Formik or react-hook-form.

📁 Services

• In this folder, we manage all the API requests by creating files for each service.

📁 Contexts

• This folder contains all the context files where we manage and globalize the state in our application, like theme styles.

📁 Config

• All the configuration of our application will be here in this folder.

📁 i18n

• This folder is made for multi-language support.
• You can create subfolders with a file for each language you want to translate. JSON
• Check out their Step by Step Guide HERE.