CodePen 是一个非常流行的在线代码编辑器，它允许用户在浏览器中编写 HTML、CSS 和 JavaScript 代码，并立即看到结果。在这篇文章中，我们将介绍如何使用 React 和 Redux 实现一个简单的 CodePen。
技术栈
在开始之前，让我们先了解一下本文所使用的技术栈：
- React：一个用于构建用户界面的 JavaScript 库。
- Redux：一个用于管理应用程序状态的 JavaScript 库。
- Babel：一个 JavaScript 编译器，用于将 ES6+ 代码转换为向后兼容的 JavaScript 代码。
- Webpack：一个模块打包器，用于将 JavaScript、CSS、图片等文件打包成一个或多个文件。
实现步骤
1. 创建项目
首先，我们需要创建一个新的项目。在命令行中运行以下命令：
mkdir react-codepen cd react-codepen npm init -y
这将创建一个新的项目文件夹，并在其中初始化一个新的 npm 项目。接下来，我们需要安装一些必要的依赖项：
npm install --save react react-dom redux react-redux babel-loader @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli
2. 配置 Webpack
在项目根目录下创建一个名为 webpack.config.js 的文件，并添加以下内容：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- -------------------- --------
--------- -----------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------------------- ----------------------
-
-
-
-
-
--这是一个非常基本的 Webpack 配置，它告诉 Webpack 如何将我们的代码打包成一个 JavaScript 文件。我们将 src/index.js 文件作为入口点，并将打包后的文件输出到 dist/bundle.js。
3. 编写代码
现在，我们可以开始编写我们的 React 和 Redux 代码了。在 src 文件夹下创建一个名为 index.js 的文件，并添加以下内容：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ --- ---- -------------------
------ ------- ---- -------------
----- ----- - ---------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--这里我们导入了 React、ReactDOM、Redux 和 React-Redux 库，并创建了一个 Redux store。然后，我们使用 <Provider> 组件将我们的应用程序包装起来，以便在整个应用程序中使用 Redux store。最后，我们使用 ReactDOM.render() 将我们的应用程序渲染到页面上。
接下来，在 src/components 文件夹中创建一个名为 App.js 的文件，并添加以下内容：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ ---------- ---- ---------------
----- --- ------- --------- -
-------- -
----- - ----- ---- -- - - -----------
------ -
-----
----------- --------------- ------------ --
----------- -------------- ----------- --
----------- --------------------- ---------- --
-------
--------------
------------------------------------------------------------------- - -----------------------------------
--
------
--
-
-
----- --------------- - ----- -- -
----- - ----- ---- -- - - ------
------ - ----- ---- -- --
--
------ ------- ------------------------------这里我们创建了一个名为 App 的 React 组件，并使用 connect() 函数将它连接到 Redux store。在 render() 方法中，我们渲染了三个 CodeEditor 组件和一个 <iframe>，用于显示用户的代码和输出结果。
最后，在 src/components 文件夹中创建一个名为 CodeEditor.js 的文件，并添加以下内容：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------- ---- ------------
------ --------------------------------------
------ -------------------------------------
------ --------------------------------------------
------ ------------------------------------------
----- ---------- ------- --------- -
-------- - ----- -- -
----- - -------- - - -----------
-- ---------- -
----------------
-
--
-------- -
----- - --------- ----- - - -----------
------ -
----------
---------------
---------------
-------------
------------------------
---------------------------
-------------- ---------------- ---- --
------------- ---------- ----- --
------------
--------------
--
--
-
-
------ ------- -----------这里我们创建了一个名为 CodeEditor 的 React 组件，并使用 Ace Editor 库来实现代码编辑器。我们支持 HTML、CSS 和 JavaScript 三种语言，并允许用户在编辑器中输入和修改代码。
4. 添加 Redux
现在，我们已经编写了一些 React 组件，但是我们还没有使用 Redux 来管理应用程序状态。在 src 文件夹下创建一个名为 reducers.js 的文件，并添加以下内容：
-- -------------------- ---- -------
----- ------------ - -
----- ---
---- ---
--- --
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- --------------
------ - --------- ----- -------------- --
---- -------------
------ - --------- ---- -------------- --
---- ------------
------ - --------- --- -------------- --
--------
------ ------
-
--
------ ------- --------这里我们定义了一个初始状态对象，它包含三个属性：html、css 和 js。然后，我们编写了一个简单的 reducer 函数来处理三种不同的 action 类型：CHANGE_HTML、CHANGE_CSS 和 CHANGE_JS。每个 action 都包含一个 payload 属性，它代表用户输入的新代码。
接下来，在 src/components 文件夹中的 CodeEditor.js 文件中添加以下代码：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ----------- ---------- -------- - ---- -------------
----- ------------------ - ---------- --------- -- -
----- - -------- - - ---------
----- -------- - -------- --- ------ - ---------- - -------- --- ----- - --------- - ---------
------ -
--------- ----- -- -
--------------------------
-
--
--
------ ------- ------------- --------------------------------这里我们使用 connect() 函数将 CodeEditor 组件连接到 Redux store，并将 onChange 方法映射到 changeHtml、changeCss 或 changeJs action 中。这样，每当用户在编辑器中输入新代码时，Redux store 中的状态就会被更新。
最后，在 src/actions 文件夹中创建一个名为 index.js 的文件，并添加以下内容：
export const changeHtml = html => ({ type: 'CHANGE_HTML', payload: html });
export const changeCss = css => ({ type: 'CHANGE_CSS', payload: css });
export const changeJs = js => ({ type: 'CHANGE_JS', payload: js });这里我们定义了三个 action 创建函数，它们分别返回一个带有 payload 属性的 action 对象。当用户在编辑器中输入新的 HTML、CSS 或 JavaScript 代码时，我们将调用这些 action。
运行项目
现在，我们已经完成了所有的代码编写工作。在命令行中运行以下命令来启动项目：
npm run build
这将使用 Webpack 将我们的代码打包成一个 JavaScript 文件，并将其输出到 dist/bundle.js。然后，我们可以在浏览器中打开 index.html 文件来查看我们的应用程序。
结论
在本文中，我们已经介绍了如何使用 React 和 Redux 实现一个简单的 CodePen。我们从创建项目开始，一步步地编写了 React 组件和 Redux reducer，并使用 Webpack 将它们打包成一个 JavaScript 文件。最后，我们使用浏览器来查看我们的应用程序，并测试了它的功能。
这个项目虽然很简单，但它包含了很多有用的技术和概念。通过学习这个项目，我们可以更好地理解 React 和 Redux 的工作原理，并了解如何在实际项目中使用它们。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6743de76f3dd6530329abf40