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, ReactJS 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:
