How to export modules with sub-modules in ReactJS ?

One of the key features of React is its modular structure, which allows developers to break down their code into reusable components. In many cases, these components are organized into modules and submodules, which can be exported and imported into other parts of the application.

Prerequisites:

• NPM & Node.js
• React JS
• React JS Modules

What are Modules and Submodules in React JS ?

In ReactJS, a module is a collection of related components that are grouped together for a specific purpose. A submodule, on the other hand, is a smaller subset of components that are related to each other and belong to a larger module. In other words, a submodule is a module within a module.

For example, suppose you are building a web application that includes a dashboard. The dashboard may contain several modules, such as a sidebar, a header, a footer, and a main content area. Within the main content area, you may have submodules such as a graph, a table, and a form.

Steps to export modules with submodules in React JS :

There are mainly 3 steps to export and successfully import the modules in React JS.

Exporting a Module in ReactJS:

To export a module in ReactJS, you need to create a file that contains the module and its components. Let’s say we have a module called Dashboard that contains a header, a sidebar, a main content area, and a footer. We can create a file called Dashboard.js and export the module as follows:

import React from 'react';
import Header from './Header';
import Sidebar from './Sidebar';
import Content from './Content';
import Footer from './Footer';

const Dashboard = () => {
    return (
        <div>
            <Header />
            <Sidebar />
            <Content />
            <Footer />
        </div>
    );
};

export default Dashboard;

In this code, we have imported the four components that make up the Dashboard module and defined a function that returns the JSX code for the module. We have also exported the Dashboard module using the export default statement.

Exporting a Submodule in ReactJS:

To export a submodule in ReactJS, you need to create a file that contains the submodule and its components. Let’s say we have a submodule called Graph that contains a bar chart and a line chart. We can create a file called Graph.js and export the submodule as follows:

import React from 'react';
import BarChart from './BarChart';
import LineChart from './LineChart';

const Graph = () => {
    return (
        <div>
            <BarChart />
            <LineChart />
        </div>
    );
};

export default Graph;

In this code, we have imported the two components that make up the Graph submodule and defined a function that returns the JSX code for the submodule. We have also exported the Graph submodule using the export default statement.

Importing a Module with Submodules in ReactJS:

To import a module with submodules in ReactJS, you need to import the module and its submodules separately. Let’s say we want to import the Dashboard module and the Graph submodule into a file called App.js. We can do this as follows:

import React from 'react';
import Dashboard from './Dashboard';
import Graph from './Graph';

const App = () => {
    return (
        <div>
            <Dashboard />
            <Graph />
        </div>
    );
};

export default App;

In this code, we have imported the Dashboard module and the Graph submodule using their respective file paths. We have also defined a function that returns the JSX code for the App component, which includes the Dashboard