作为一位前端开发者，使用 React 进行应用程序开发并不陌生。而在开发 React 应用时，使用 ES6 模块也是相当重要的一方面，能够极大地提高应用程序的可读性和可维护性，并方便进行代码复用。
ES6 模块
ES6 模块是一种 JavaScript 模块系统的标准化，它大大简化了前端开发者在组织和管理 JavaScript 代码时的工作。ES6 模块通过 export 和 import 语句来导入和导出模块，使得模块之间的耦合度更低，代码组织更加灵活。
下面我们将会展示如何在 React 中使用 ES6 模块。
在 React 中使用 ES6 模块
在 React 应用中使用 ES6 模块非常容易，我们只需要使用 export 和 import 语句即可。在本文中，我们将以一个 TodoList 应用为例，来展示如何在 React 中使用 ES6 模块。
创建 TodoList 应用
首先，我们需要创建一个 React 应用。在命令行中输入以下命令：
npx create-react-app todo-list
然后进入应用目录，并启动应用：
cd todo-list npm start
现在，我们就已经成功创建了一个名为 todo-list 的 React 应用，并启动了本地服务器。在浏览器中访问 http://localhost:3000/，即可看到应用已经启动。
接下来，我们需要在应用中创建 TodoList 组件。
创建 TodoList 组件
在应用目录中，创建一个名为 TodoList.js 的文件，并输入以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
------ --
--
-
-------- -
------ -
-----
-------- ---------
----
-
--------------------------- ------ -- -
------ -
--- -----------------------
--
--
-
-----
------
--
-
-以上代码是一个简单的 TodoList 组件，它维护了一个 todos 状态，用于存储待完成事项。在 render 方法中，我们通过 map 函数遍历 todos 数组，并将每个元素渲染到列表项中。
在应用中使用 TodoList 组件
现在，我们需要在应用中使用 TodoList 组件。在 App.js 文件中，输入以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -------------
------ ------- ----- --- ------- --------------- -
-------- -
------ -
-----
--------- --
------
--
-
-以上代码通过 import 语句引入了 TodoList 组件，并将其渲染到 App 组件中。
运行应用，你将会看到以下结果：
至此，我们已经成功在应用中使用了 TodoList 组件。但是，我们的 TodoList 组件目前还无法添加待完成事项，下面我们将会给 TodoList 组件添加这个功能。
给 TodoList 组件添加添加待完成事项功能
在 TodoList.js 文件中，添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
------ ---
----------- --
--
---------------------- - ----------------------------------
---------------------- - ----------------------------------
-
------------------------ -
-------------------------- ---------------------
-
------------------- -
----- ------- - ----------------------
----- ----- - --------------------- ---------
---------------
------
----------- --
---
-
-------- -
------ -
-----
-------- ---------
------ ----------- ----------------------------- --------------------------------- --
------- ---------------------------------------------
----
-
--------------------------- ------ -- -
------ -
--- -----------------------
--
--
-
-----
------
--
-
-以上代码给 TodoList 组件添加了一个输入框和一个添加按钮，当用户输入待完成事项时，单击添加按钮，即可将待完成事项添加到列表中。
现在，我们已经成功给 TodoList 组件添加了添加待完成事项功能。
总结
在本文中，我们介绍了如何在 React 中使用 ES6 模块，以及如何在应用中创建和使用组件。通过本文的示例，我们可以轻松地使用 ES6 模块来组织和管理 React 应用中的代码，从而提高应用程序的可读性和可维护性。
完整示例代码：
-- -------------------- ---- -------
-- -----------
------ ----- ---- --------
------ ------- ----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
------ ---
----------- --
--
---------------------- - ----------------------------------
---------------------- - ----------------------------------
-
------------------------ -
-------------------------- ---------------------
-
------------------- -
----- ------- - ----------------------
----- ----- - --------------------- ---------
---------------
------
----------- --
---
-
-------- -
------ -
-----
-------- ---------
------ ----------- ----------------------------- --------------------------------- --
------- ---------------------------------------------
----
-
--------------------------- ------ -- -
------ -
--- -----------------------
--
--
-
-----
------
--
-
-
-- ------
------ ----- ---- --------
------ -------- ---- -------------
------ ------- ----- --- ------- --------------- -
-------- -
------ -
-----
--------- --
------
--
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a370bb48841e9894fc6ec7