Tutorial

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

Published on July 25, 2017
author

Conroy Whitney

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
Conroy Whitney

author

Still looking for an answer?

Ask a questionSearch for more help

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!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more