Overview

React is a library and not a framework, but the React-App template has many features out of the box that you may not be aware of, These features can help organize an application’s components and pages. By taking advantage of these features, you can have an folder structure that is easier to read and maintain.

Note: The React-App layout is similar to the Next.js framework. Next.js has many useful features, and offers a variety of server side rendering options. If you are looking for a solution that has a pattern to organize your source files, fast performance, better security by design, and SEO friendly, I highly recommend checking out Next.js.

Example Code

Get Example

Create an Application

npx create-react-app my-app
cd my-app

Configure Absolute File Paths

Create a file labeled jsconfig.json in the application root folder.

For TypeScript create a file labeled tsconfig.json in the application root folder.

In the jsconfig.json file add the following:

{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "include": ["src"]
}

Remember: Restart your application if it is running with npm start

Example

So instead of the having to write the following:

import styles from '../../../styles/home.module.css';
import styles from '../../../global/AxiosConn';

You can just use “styles/..” or “global/..” to import the style sheet and global connector.

import styles from 'styles/home.module.css';
import styles from 'global/AxiosConn';

CSS Modules

Styles can be put into a single folder and used as follows.

Each file can be labeled to a corresponding page.

The CSS Module for Home.module.css. Code snippet below.

.main {
    width: 95vw;
    height: 80vh;
}
#circle{
    width:200px;
    height:200px;
    border-radius:100px;    
    background-color:#363552;
}
...
...

This style is then imported and used like below.

import React from 'react'
import styles from 'styles/Home.module.css';

export default function Home() {
    return (
        <div className={styles.main}>
            <div id={styles["move"]}>
            <div id={styles["circle"]}><p>Home</p></div>
            <div id={styles["floatingTextBlock"]}>
                <h1>Home page using css style module</h1>
            </div>
            </div>
        </div>
    )
}

Example Folder Structure

Below is one of many folder structures I’ve seen with react applications. In a shop of several developers we can easily maintain and co-develop the UI portions of our applications using this file structure. The only difference is many of our legacy applications used JavaScript instead of TypeScript which is what we use now. The example included uses plain old JavaScript.

This folder layout is just one of many ways to organize the folder structure. But commonly we have seen a folder for pages, components, and styles. I have seen the global folder labeled as resources or shared etc.

• components
• global (optional)
• pages
• styles

The Pages have a single JS file and the Expanded the subfolders look like the following: