// Tutorial //

How To Create Public Interfaces for React Modules with index.js Files

Published on July 25, 2017
Default avatar
By Conroy Whitney
Developer and author at DigitalOcean.
How To Create Public Interfaces for React Modules with index.js Files

This tutorial is out of date and no longer maintained.

Introduction

By using an index.js file in the root of each folder to re-export a subset of files, you can effectively create explicit public interfaces for your React modules.

React Modules

Organizing React projects into modules has been widely adopted by the React community. The core idea is that instead of organizing your projects files by type (“function first, feature second”):

BAD: Organizing files by type: function first, feature second
src/
    components/
        app/
        todos/
        users/
            user-details.js
            user-details.css
            users.js
            users.css
            user-list.js
            user-list.css
    actions/
        app-actions.js
        todo-actions.js
        user-actions.js
    reducers/
        app-reducer.js
        todo-reducer.js
        user-reducer.js
    constants/
    utils/

You flip that around and organize by modules (“feature first, function second”):

GOOD: Organizing by modules: feature first, function second
src/
    base/
    modules/
        app/
        todos/
        users/
            __tests__/
            components/
                UserDetails/
                Users/
                    __tests__/
                    index.js
                    styles.css
                UsersList/
                index.js
            actions.js
            actionTypes.js
            constants.js
            index.js
            reducer.js
            selectors.js
    shared/
    utils/
    index.css
    index.js

This method of organizing has a number of benefits:

  1. It decreases coupling and increases cohesion between the different sections of your apps, effectively reducing cognitive load while developing.
  2. Since related files are co-located, there is less jumping around while developing (i.e., when adding a feature that requires changing actions, reducers, and components, they are all right there together).
  3. You can use index.js to create a public interface for your different modules.

Using index.js

This last point is, in my opinion, one of the most subtle but useful benefits of this organizational structure. In ES6, having an index.js file in a folder lets you perform an import from the folder implicitly without specifying the index.js in the import statement – just like how web servers will serve up the index.html in a folder without you needing to explicitly put the index.html in the URL.

This gives you some semblance of control over what you export from the module and therefore what you can import and use from another section of your app. In other words, this allows you to create a public interface to expose certain files while keeping others “private”.

App Module: src/modules/app/index.js
export { default as App } from "./App";
export { default as Home } from "./Home";
export { default as Login } from "./Login";
export { default as Navigation } from "./Navigation";
export { default as NotFound } from "./NotFound";
export { default as Signup } from "./Signup";

In this example, since we are talking about src/modules/app/index.js, it is describing which files are publicly exported from the app module.

  1. It gives a clear picture of which components are used throughout the rest of the application.
  2. It communicates that the rest of the files inside the app folder are only ever used inside the app module.

When you want to import something from a module (e.g., for a <Route />), you can do so quite cleanly in a single import statement:

Routes: src/base/Routes.js
import { Home, Login, NotFound, Signup } from "../modules/app";
import { Todos } from "../modules/todos";
import { Users } from "../modules/users";

Conclusion

At the end of the day, this is all just syntactic sugar. It is still possible to disregard the guidelines and create files anywhere or import files by deep linking into the folder structure. However, by organizing your application into modules, and then using index.js to re-export files as a public interface, you can attempt to communicate about intended usage to both other developers and future-you.

For more information about this topic, I highly recommend reading Three Rules For Structuring (Redux) Applications by Jack Hsu as well as How to better Organize Your React Applications by Alexis Mangin.

If you’ve enjoyed this tutorial and our broader community, consider checking out our DigitalOcean products which can also help you achieve your development goals.

Learn more here


About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!