How to modularize code in ReactJS ? - GeeksforGeeks

08 Oct, 2021
Modularized code is divided 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, React provide the functionality to import and export the files.
Import and Export: It enables us to use code from one file into other locations across our projects, which becomes increasingly important as we build out larger applications. 
Export: 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
Example: Let us see it in the example below where we would use the import and export operations in several ways. Let there are three files, index.js, DefaultExport.js, and NamedExport.js. Let us see how to implement the import and export operations.  
Filename: index.js 
Javascript
import React from "react";import ReactDOM from "react-dom";  // Importing CSSimport "./index.css";  // Importing default exportimport File from "./DefaultExport";  // Importing named exportsimport { NamedExport } from "./NamedExport";ReactDOM.render(  <React.StrictMode>    <File />    <NamedExport />  </React.StrictMode>,  document.getElementById("root"));
Filename: DefaultExport.js
Javascript
import React from "react";  const DefaultExport = () => {  return (    <div>      <h1>This is from default export</h1>      <h2>Hello Coders</h2>    </div>  );};  // Default exportexport default DefaultExport;
Filename: NamedExport.js
Javascript
import React from "react";  const NamedExport = () => {  return (    <div>      <h1>This is from named export</h1>      <h2>Nice to see you</h2>    </div>  );};  // Named Exportexport { NamedExport };
Output:
Picked
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to set background images in ReactJS ?
How to create a table in ReactJS ?
How to navigate on path by button click in react router ?
How to create a multi-page website using React.js ?
How to build a basic CRUD app with Node.js and ReactJS ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript