如何在 ReactJS 中模块化代码？

模块化代码被划分为段或模块，其中每个文件负责一个特性或特定功能。通过使用组件结构，React 代码可以很容易地模块化。方法是将每个组件定义到不同的文件中。将每个组件分成不同的文件后，我们所要做的就是弄清楚如何在另一个文件中访问一个文件中定义的代码。要将一个文件访问到另一个文件，React 提供了导入和导出文件的功能。

导入和导出：它使我们能够将一个文件中的代码用于我们项目的其他位置，随着我们构建更大的应用程序，这一点变得越来越重要。

导出：导出一个组件或代码模块，允许我们在其他文件中调用该导出，并在其他模块中使用嵌入的代码。

react中导出代码有两种方式：

• 导出默认值：我们可以使用导出默认语法。
• 命名导出：我们可以明确命名我们的导出。

导出默认值：每个文件只能使用一次导出默认值。当我们想要导入给定的模块时，语法允许我们给出任何名称。

句法：

export default COMPONENT_NAME

命名导出：使用命名导出，我们可以从一个文件中导出多段代码，允许我们在导入时显式调用它们。对于多个此类导出，我们可以使用逗号分隔花括号内的两个参数名称。

句法：

export {CODE1, CODE2}

Import： import 关键字使我们能够调用已导出的模块，并在整个应用程序的其他文件中使用它们。在 React 中有很多方法可以导入模块，我们使用的方法取决于我们如何导出它。

导入默认导出：为了从文件中导入默认导出，我们可以只使用地址并在其前面使用关键字import，或者我们可以为导入指定任何名称。

句法：

import ANY_NAME from ADDRESS

导入命名导出：命名导出代码可以通过在花括号内给出该模块的名称，后跟包含该模块的该文件的地址来导入。对于多个模块，我们可以使用逗号分隔花括号内的两个参数名称。

句法：

import {Code1, Code2} from ADDRESS

示例：让我们在下面的示例中看到它，我们将以多种方式使用导入和导出操作。让有三个文件， index.js ， DefaultExport.js ， 和NamedExport.js 。让我们看看如何实现导入和导出操作。

文件名：index.js

Javascript

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(
  
    
    
  ,
  document.getElementById("root")
);

文件名：DefaultExport.js

Javascript

import React from "react";
  
const DefaultExport = () => {
  return (
    

      
This is from default export
      
Hello Coders
    
  );
};
  
// Default export
export default DefaultExport;

文件名：NamedExport.js

Javascript

import React from "react";
  
const NamedExport = () => {
  return (
    

      
This is from named export
      
Nice to see you
    
  );
};
  
// Named Export
export { NamedExport };

输出：