How to modularize code in ReactJS ?
Last Updated : 10 Nov, 2023
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.
Javascript
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import File from "./DefaultExport";
import { NamedExport } from "./NamedExport";
ReactDOM.render(
<React.StrictMode>
<File />
<NamedExport />
</React.StrictMode>,
document.getElementById("root")
);
|
Javascript
import React from "react";
const DefaultExport = () => {
return (
<div>
<h1>This is from default export</h1>
<h2>Hello Coders</h2>
</div>
);
};
export default DefaultExport;
|
Javascript
import React from "react";
const NamedExport = () => {
return (
<div>
<h1>This is from named export</h1>
<h2>Nice to see you</h2>
</div>
);
};
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.
Similar Reads
How To Use Modal Component In ReactJS?
Modals are a popular UI component used to display content in a pop-up window like alerts, forms, or additional information. In ReactJS, there are multiple ways to implement a modal. In this article, we will discuss two common approaches: using reusable functional components and using the Material-UI
4 min read
How to use rxjs module in ReactJS ?
RXJS stands for Reactive Extensions for JavaScript. This module provides the implementation of observable type to work with reactive programming which is an asynchronous programming paradigm. We can use the following approach in ReactJS to use the rxjs module. Approach: We have used the Rxjs module
2 min read
How to Learn ReactJS in 2025?
npx create-react-app myapp npm start npm run build npm install Aren't all the above commands familiar to you? If yes, then you might be working on React, or you might have started working on this amazing JavaScript Library. If you're a passionate developer, then surely you might be aware of the popu
10 min read
How to combine multiple reducers in ReactJS ?
To combine multiple reducers in React JS we have a function called combineReducers in the redux. This basically helps to combine multiple reducers into a single unit and use them. Approach In React, to combine and implement multiple reducers combineReducers methods are used. It manages multiple redu
4 min read
React MUI How to customize
React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based o
4 min read
How to write ReactJS Code in Codepen.IO ?
Now everything is online, some people use VScode to write react.js code and face most of the difficulty. The VScode requires setting for writing React.js code and Many beginners faced difficulty to use VScode so, for them, it is good and easy to use codepen. The codepen provide you with an online pl
2 min read
How to add code input in React JS?
In this article, we are going to learn how we can add Code Input in React JS. React is a front-end JavaScript library for constructing user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. Approach to add code input: To incorporate our
2 min read
How to create Tabs in ReactJS ?
Tabs make it easy to explore and switch between different views. Material UI for React has this component available for us and it is very easy to integrate. We can use Tabs Component in ReactJS using the following approach. Prerequisites:NPM & Node.jsReact JSMaterial UIwe have these approaches t
4 min read
How to publish a ReactJS component to NPM ?
Follow these simple steps in order to publish your own ReactJS component to NPM. Step 1: Initial Setup In order to publish any ReactJS Component to npm (node package manager), first we have to create a React component in the React app. Following are the instructions for creating any react app. Creat
3 min read
How to write comments in ReactJS ?
When working with ReactJS or any other programming language, making the code easy to understand is essential. One of the best ways to do this is by using comments. Comments are simple notes within the code that help to explain what is happening or why something was done in a specific way. To write c
3 min read