How to modularize code in ReactJS ?

Modularize code in React JS refers to dividing it into segments or modules, where each file is responsible for a feature or specific functionality. React code can easily be modularized by using the component structure. The approach is to define each component into different files. With each component separated into different files, all we have to do is figure out how to access the code defined in one file within another file. To access one file into another file, ReactJS provides the functionality to import and export the files.

Module Import and Export in React JS:

It enables us to use code from one file in other locations across our projects, which becomes increasingly important as we build out larger applications. 

Export Module:

Exporting a component, or module of code, allows us to call that export in other files, and use the embedded code within other modules.

There are two ways to export code in React:

• Export Default: We can use the export default syntax.
• Named Exports: We can explicitly name our exports.

Export Default:

We can only use export default once per file. The syntax allows us to give any name when we want to import the given module. 

Syntax:

export default COMPONENT_NAME

Named Exports:

With named exports, we can export multiple pieces of code from a single file, allowing us to call on them explicitly when we import. And for multiple such exports, we can use a comma to separate two-parameter names within the curly braces. 

Syntax:

export {CODE1, CODE2}

Import:

The import keyword enables us to call the modules that we've exported and use them in other files throughout our applications. There are many ways to import the modules in React, and the method that we use depends on how we exported it.

Importing default export:

In order to import the default export from a file, we can use only the address and use the keyword import before it, or we can give any name to the import. 

Syntax:

import ANY_NAME from ADDRESS

Importing named exports:

Named export code can be imported by giving the name of that module inside curly braces followed by the address of that file containing that module. For multiple modules, we can use a comma to separate two-parameter names within the curly braces. 

Syntax:

import {Code1, Code2} from ADDRESS

Steps to Create React Application:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure:

Example: This example demonstrates different exports and imports to implement modularize code.  

// Filename: index.js 

import React from "react";
import ReactDOM from "react-dom";

// Importing CSS
import "./index.css";

// Importing default export
import File from "./DefaultExport";

// Importing named exports
import { NamedExport } from "./NamedExport";
ReactDOM.render(
    <React.StrictMode>
        <File />
        <NamedExport />
    </React.StrictMode>,
    document.getElementById("root")
);

// Filename: DefaultExport.js

import React from "react";

const DefaultExport = () => {
    return (
        <div>
            <h1>This is from default export</h1>
            <h2>Hello Coders</h2>
        </div>
    );
};

// Default export
export default DefaultExport;

// Filename: NamedExport.js

import React from "react";

const NamedExport = () => {
    return (
        <div>
            <h1>This is from named export</h1>
            <h2>Nice to see you</h2>
        </div>
    );
};

// Named Export
export { NamedExport };

Steps to Run the Application: Use this command in the terminal inside the project directory.

npm start

Output: This output will be visible on the http://localhost:3000/ on the browser window.