Yet another way to structure React Project.

Ihor Maslov — Mon, 15 Mar 2021 20:05:32 +0000

I adopted the structure recommended by React and improved it a little bit. At least, I think it was improved :)

The improved structure.

./src
├── App.css
├── App.js
├── App.test.js
├── README.md
├── apps
│   └── account
│       ├── components
│       │   ├── SignInDialog
│       │   │   └── index.js
│       │   ├── SignInForm
│       │   │   └── index.js
│       ├── hooks
│       │   └── useCreateUserWithEmailAndPassword.js
│       ├── pages
│       │   ├── SingIn
│       │   │   ├── index.js
│       │   │   └── styles.js
│       │   └── User
│       │       └── index.js
│       └── routes.js
├── index.js
└── routes.js

I am going to locate together pages that are related to some entities in a project.
In the example above:

account - is the project entity
components - components that are common for pages in this entity
hook - custom hook for encapsulating some business logic
pages - components that are used in React Router Route
routes.js - route config for account entity.

The routes.js in the root ./src directory is the main URLs config containing all apps' routes. Read more details about URL config.

This structure will be easy to scale by adding new project entities in the apps directory.
The above structure does not represent the entire project structure. A project can contain a lot more directories for shared components, hooks, assets, and others.

Feedback is welcome!

Reverse patterns to URL. React router Config.

Ihor Maslov — Mon, 15 Mar 2021 20:04:55 +0000

In this post, I would like to introduce my approach to "Named URLs" for React Router.

Motivation

I used to use Django's URLs reverse function. This function is beneficial when you need to get an actual URL using a named URL pattern or callable view object.
I want to use a similar approach with React Router.

Problems

The problems I am trying to solve are:

Avoid hard-coded URLs. In the most examples I found, URLs hard-coded in Link. I feel like this can lead us to broken links during refactoring, etc.
Missing URL params. It is difficult to identify Hard-coded links with missed params until you click on them.

Solution

The project directories are structured this way.

The `Reverse` implementation.

// src/shared/utils/namedUrls.js

import { compile } from 'path-to-regexp';

export class RoutePath {
  reverse(params) {
    const reversed = compile(this.pattern);
    return reversed(params);
  }

  constructor(pattern, component) {
    if (!pattern || !component) throw new Error('`pattern` and `component` are required');
    this.pattern = pattern;
    this.component = component;
  }
}

This class helps us build a route that knows how to build a link using given parameters and patterns.

The usage.

In the app directory.

// src/apps/account/routes.js

import SignInPage from 'apps/account/pages/SignIn';
import UserPage from 'apps/account/pages/User';
import { RoutePath } from 'shared/utils/namedUrls';

const basePath = '/account/';
export default {
  signIn: new RoutePath(`${basePath}sign-in/`, SignInPage),
  user: new RoutePath(`${basePath}user/:id/`, UserPage),
};

In the main routes.js.

// src/routes.js

import { prepareRoutes } from 'shared/utils/namedUrls';

import accountRoutes from './apps/account/routes';

export const routes = {
  accountRoutes,
};

export const preparedRoutes = prepareRoutes(routes);

In components

import React from 'react';
import { Link } from 'react-router-dom';
import { routes } from 'routes';

const SomeComponent = () => (
  <>
    <Link to={routes.accountRoutes.signIn.reverse()}>Sign In</Link>
    <Link to={routes.accountRoutes.user.reverse({ id: 1 })}>User</Link>
  </>
);

export default SomeComponent;

Rendered links are:

<a href="/account/sign-in/">Sign In</a>
<a href="/account/user/1/">User</a>

Error handling

I didn't implement any additional error handling as I am satisfied with the path-to-regexp app's error handling.
If you miss some URL pattern parameters, you will find errors like the below in the browser console.

index.ts:337 Uncaught TypeError: Expected "id" to be a string
    at index.ts:337
    at RoutePath.reverse (namedUrls.js:12)
    at App (App.js:62)

I suppose this will be enough to warn developers that they missed the URL pattern's parameters. And I feel like these errors should be helpful during e2e testing.