Back to Blog

How should I structure my React applications?

5 min read

basicbest-practisesstructure

January 16, 2022

How should I structure my React applications?

Contents


Overview

Projects within Curve should be built with a similar project structure in mind to ensure developers can switch focus with as little friction as possible.

Folder Structure

Folder structures within applications will vary based on their context, but for React applications, the following will apply in the majority of cases:

src
├── components
│   ├── button
│   │   ├── Button.tsx
│   │   ├── Button.stories.tsx (Design System)
│   │   ├── Button.test.tsx
│   │   └── index.ts
├── constants
│   └── index.ts
├── providers
│   ├── axios-provider
│   │   ├── AxiosProvider.tsx
│   │   ├── AxiosProvider.test.tsx
│   │   └── index.ts
├── hooks
│   ├── static (Gatsby)
│   │   └── use-static-layout
│   │       ├── useStaticLayout.tsx
│   │       ├── useStaticLayout.test.tsx
│   │       └── index.ts
│   ├── queries (React Query)
│   │   └── use-profile
│   │       ├── useProfile.tsx
│   │       ├── useProfile.test.tsx
│   │       └── index.ts
│   ├── mutations (React Query)
│   │   └── use-mutate-profile
│   │       ├── useMutateProfile.tsx
│   │       ├── useMutateProfile.test.tsx
│   │       └── index.ts
│   ├── use-is-mobile
│   │   ├── useIsMobile.tsx
│   │   ├── usIsMobile.test.tsx
│   │   └── index.ts
├── utils
│   ├── math.ts
│   ├── string.ts
├── pages (Gatsby)
├── templates (Gatsby)
└── static
    ├── icons
    └── images

Breakdown

Below is a breakdown of each section, including it's purpose and how it's used.

Components

All project-specific components will reside in the components folder. Here, components are stored under a folder of the same name as the component, written in snake-case. Within the folder, you will find the component itself in PascalCase, the unit test file associated with it (Button.test.tsx), and any storybook stories associated if within a design system.

Within the components folder itself, you will also find an index.ts file. Here you will export the components from their respective folders, allowing all usable components to be imported from the /components file path.

components
    └── button
        ├── Button.tsx
        ├── Button.stories.tsx (Design System)
        ├── Button.test.tsx
        └── index.ts

Constants

The constants folder will export all constants within the application. These will be separated into files which logically match the structure required from the application. These constants can then be exported from the index.ts via an export * as X in order to group the data when later importing.

constants
    └── index.ts

Hooks

The hooks folder will contain all hooks used within the application. These can be further separated depending on the packages used. For example, we have hooks/static for hooks that use Gatsby’s useStaticQuery hook, and hooks/queries and hooks/mutations for hooks making use of useQuery and useMutation from React Query.

All hooks are composed of a snake-case folder, with a camelCase file containing the hook. Tests follow the same pattern, with .test.tsx appended to the same file name.

hooks
   ├── static (Gatsby)
   │   └── use-static-layout
   │       ├── useStaticLayout.tsx
   │       ├── useStaticLayout.test.tsx
   │       └── index.ts
   ├── queries (React Query)
   │   └── use-profile
   │       ├── useProfile.tsx
   │       ├── useProfile.test.tsx
   │       └── index.ts
   ├── mutations (React Query)
   │   └── use-mutate-profile
   │       ├── useMutateProfile.tsx
   │       ├── useMutateProfile.test.tsx
   │       └── index.ts
   └── use-is-mobile
       ├── useIsMobile.tsx
       ├── usIsMobile.test.tsx
       └── index.ts

Utils

The utils folder contains all utility functions within the application, separated by what they concern. These utility functions can then be exported from the index.ts via an export * as X in order to group the utils when later importing.

utils
   ├── math.ts
   └── string.ts

Pages (Gatsby)

Within the pages folder will be all static pages for Gatsby to build. Next.js apps will have a similar structure, so please refer to their specific documentation.

Templates (Gatsby)

Within the templates folder will be all template pages for Gatsby to build from incoming data. Next.js apps will have a similar structure, so please refer to their specific documentation.

Static

The static folder will contain static images and assets, grouped into relevant sub-folders. These typically need to be configured to work with image processing pipelines such as gatsby-image, so please refer to your framework’s documentation for more info.

File Structure

React files should be built with the following constraints:

  1. Components are exported as a named export, not a default export (unless explicitly required).
  2. Interfaces for prop definitions, nested within the same file. The interface should be the name of the component, with Props appended to the end.
  3. Make use of React.FC or React.VFC to add suitable return types.
  4. Props should have relevant comments.

The code snippet below contains an example of the aforementioned constraints:

import React, {FC} from "react"

interface UserProfileProps {
  /**
    First name of the user.
  */
  name: string

  /**
    Image source of the user's profile picture.
  */
  profileSrc: string
}

export const UserProfile: FC<ProfileCardProps> = (props) => {
  const { name, profileSrc } = props

  return (
  <div>
    <img src={profileSrc} alt={name}/>
    <h2>{name}</h2>
  </div>)
}

Conclusion

While not a concrete way of structuing your applications, I hope this can give you some ideas in how you structure your software moving forwards. As always, free to reach out to me using the Q&A page with any questions or comments.

Discuss on Twitter
Share on Twitter

Written by Adam Young

Adam Young is a front-end engineer, who specializes in React and modern web technologies. He's working at Checkout.com as a front-end engineer. He currently lives in the the town of Darlington, with his two cats.


Related Articles


Stay up to date

Get the latest articles on web development, technology and best practices, straight to your inbox.


Socials

Contact

Q&AEmail

All rights reserved © Adam Young 2022

Source code on Github