Modules in React

Table Of Contents

• Introduction
• React Modules
• In-App Example
• Named Imports vs. Default Imports
• Conclusion

Introduction

The organization of your apps is one of the most effortless quality of life improvements you can make. Recently I’ve been deep-diving into React for a work project, and I was able to get a crash course in how you organize one such app. Including how React treats its files and how we’re importing them. So today, I’d like to get into how React handles modules and how importing is done.

React Modules

React has no opinions on how you organize your code. This is fine as engineers usually have plenty of views on this, and the subject matter expert we’re working with was no exception. After talking it through, we decided to organize our app where each feature was organized into its own directory. This also gives us a choice to utilize index.js files to handle exports.

The most straightforward analogy coming from Python was that React lets you put your files into a directory and then create an index.js file that exports everything. This is similar to how Python will utilize an __init__.py file to export everything into the main logic files.

So if I have one or more modules I need to import into the App.js file for a feature, I can utilize the index.js file to import all of them and serve as one export point for your App.js or wherever you are utilizing said feature.

In-App Example

Let’s go through a quick example. I created a small React application to demonstrate what I am talking about. I organized it as such.

• Src
  • App Feature
    • Hello.js
    • Worlds.js
    • Index.js
  • App.js

I created a directory named AppFeature to hold the modules I want to organize under there. The Hello and World modules look similar; they are only components that render a new div tag with some words. See the code below.

The AppFeature directory will have an index.js file that will handle exporting. This file will be used as a “central hub” where we can export all our modules into different parts of the application. You can see the code below.

In the code above I put in two export statements. From here is where our modules will be exported from. This makes for cleaner imports into our App.js file. As seen below.

At the top, you can see a clean import statement where we import a list of modules from the AppFeature directory. After that, we can apply them right into our application. It comes out looking like this.

Named Imports vs. Default Imports

The above example details what are referred to as Named Imports, but that is not the only way to handle exporting and importing. There are other ways to export/import your needed modules. For example, suppose we are building components with multiple modules that do not need to be imported into the main application files. In that case, we can organize them so our main module can import all it needs and serve as the main component or class module to be exported. As demonstrated below.

If we organize our code such that we want to keep internal modules internal, we can explore this type of organization. Using Default Imports, we’re still doing the same thing: we use our index.js file to handle our exports. The difference is that we’re organizing everything into one module and only exporting that one module. This makes everything even cleaner.

Conclusion

One of the goals for the application we are building is to optimize our workflow. Organizing your code by utilizing modules in React is just one way in which we are meeting that goal. There are many things to consider, but I believe we are headed in the right direction. I hope this helps someone looking to organize their React projects.

-George