How to modularize code in React

One of the concerns that software engineers face is the complexity of the codebase. When we deal with huge projects, it becomes difficult for the developers to understand and keep track of each code segment. This is due to the fact that the codebase can contain thousands of lines of code. The introduction of modularity allows developers to refactor code and makes it easier to read and test.

What is modular architecture?

Modularity helps in code organization by splitting the code into smaller parts. A modular architecture involves breaking down a program into sub-programs called modules.

Note: The module refers to a component or set of components that perform a specific task.

Each module has a particular responsibility to achieve certain functionality. Since the modules are separated, it makes it easier for developers to understand the code.

Let's assume we want to create a static website using React. We developed a component called NavBar that handles navigation. Instead of coding it directly into the index.js file, we can create a new file called NavBar.js, write the component there, and simply import it into index.js. Since a NavBar is used repeatedly, we can import it on every page.

Modularizing react code

React is one of the most popular front-end technology that uses the component structure for modularizing. React uses something called component structure, where each component has its own file. To access the code in the files, we use import and export.

Import and export

• Export: We can export a component from one file so it can be used in another file. The user just has to import it. There are two ways by which we can export code in React:

  • Export default: We can use export default once per module. It allows us to export a single function/component from a file. The import statement will not use destructuring syntax when this file is imported into another module.

  • Exports: It allows us to export almost anything from a file. If we want to export multiple things, we can create an object or an array and put the items we want to export there.

Let's consider our example from above. If we want to export our NavBar to our landing Page, which is the index.js file, in this case, we'll do the following:

Similarly, if we want to import and use our NavBar, we would do the following:

Note: To learn more about how to implement import and export in react.js, click here.

Directory structure

We can create files anywhere inside a React project, but it will not be modular. As a result, this will make code harder to understand. Therefore, a React project generally follows a directory structure that helps the developer understand which part of the code is located in which directory.

All the code is usually written inside the src directory. If we have to create multiple components, we can create a components directory inside src. Inside this directory, we can create multiple subdirectories for each component.

For instance, we can have separate folders for Navbar, Search, Button components, and so on. Inside each of these directories, there will be three files:

1. An index.js where we'll write the component code

2. A CSS file to style our component

3. A test file to write unit tests for the component

In the end, we can create an index.js file inside the components directory to import all the components inside it and export them from here. Later in the application, we can import it from this index.js file whenever we need to use a component. All this will highly modularize our codebase.

An example directory structure is as follows:

This directory structure is not just limited to components. We can implement it to modularize our application context, pages, scripts, configurations, and many more.