Inspirational React.JS Project Structure!

Photo by Andrea Piacquadio

A project includes assets, services, stylesheets, reusable components, routes, test cases, custom hooks, multiple developers and much more. The project structure I am about to explain provides easier navigation, onboarding process and maintainability.

Design Pattern

We will be following Container/Component pattern. Basically separating the business logic from the presentation. This helps us in faster bug fixing, creating reusable UI components and keeping the codebase fairly light.

Component

A component is a building block of a React project. It is responsible for the presentation of data. Ideally it should not have any dependencies nor should it be managing state, and should render the same view if passed the same props.

Container

A container contains the business logic that includes managing states, events, calling services, consuming hooks and what not.

Building Blocks

We will split the functionality into building blocks based on the work they do. This is to improve development experience.

Note: Do not export anything as default but follow named exports.

`-- src/
  |-- atoms/
    `-- <atomName>.atom.ts
  |-- hooks/
    `-- use<HookName>.ts
  |-- services/
    `-- <serviceName>.service.ts
  |-- contexts/
    `-- <contextName>.context.ts
  |-- components/
    `-- <ComponentName>/
      |-- <ComponentName>.tsx
      |-- <ComponentName>.types.ts
      |-- <ComponentName>.styled.ts     # css in js (styled-components)
      |-- <ComponentName>.container.ts  # access atoms, contexts, callbacks etc.
      |-- hooks/     # follows src/hooks structure
      |-- atoms/     # follows src/atoms structure
      |-- services/  # follows src/services structure
      `-- contexts/  # follows src/contexts structure
  `-- routes/
    `-- <ComponentName>Route/
      |-- <ComponentName>Route.tsx        # extract route params, auth check etc.
      |-- <ComponentName>Route.types.ts   # i.e. route params structure/interface
      |-- <ComponentName>/    # follows src/components structure
      `-- routes/             # follows src/routes structure

Components

A component is a building block of a React project. It is responsible for the presentation of data. Ideally it should not have any dependencies nor should it be managing state, and should render the same view if passed the same props. For example: Button, Input etc.

Routes

A route is a React component, responsible for providing the component based on current URL/path. It is also responsible for extracting any route/query parameters and passing them to required component/container and/or managing nested routes.

Table for naming route components.

Services

A service is a wrapper for side-effects. This can be used outside the eco-system of react. For example, running mutations. As cache of Apollo GraphQL lives outside the eco-system, it can be mutated outside the React’s eco-system.

Hooks

Hooks are similar to services but can only be used inside the React eco-system. In most cases, a service would be sufficient but in some cases where reactivity is required, hooks are preferred. For example, fetching data from GraphQL because returned data is in sync with Apollo GraphQL’s cache and any changes to it will update the react update the react component too.

Project Structure

Now that we know the building blocks, where do we look for them; like where do they live. So, we have divided building block into two categories based on the scope.

Global

If anything building block is shared across the app, it usually lives inside src/<building-block-type>/<building-block>.

Local

If the building block is only used by one component, it is stored at **/<ParentComponent>/<building-block-type>/<building-block>/. A building-block is mostly created locally, as it is required by multiple components, it is moved to the nearest common parent component (up in the directory tree) shared by the components that require it.

Naming Convention

Pascal Case (PascalCase)

Types, interfaces, components, container-components, route-components, styled-components should follow "PascalCase".

Components

• Suffix "Route" to route-component. For example: NetworkTestRoute.
• Suffix "Container" to container-component. For example: NetworkTestContainer.

Types/Interfaces

• Prefix "I" to types and interfaces. For example: IWebinar.
• Suffix "Props" to types/interfaces to define component's props. For example: INetworkTestProps, INetworkTestContainerProps.

Camel Case (camelCase)

• Suffix "Service" to services.
• Prefix "use" to hooks.
• Suffix "Atom" to atoms.
• Suffix “Atom” to atoms.