如何构建一个带实时预览的React编辑器

前端

2023-12-23 06:19:00

身临其境，思考那些像CodeSandbox和Codepen这样的在线React编辑器的实现方式？您是否尝试使用Semantic React或React Styleguidist直接在浏览器中编辑示例，并实时预览更改？

这个周末，我终于将零散的概念汇总在一起并实现了它。

在开始动手之前，让我们先了解一下构建实时预览React编辑器所需的基础知识。

基础设施

Webpack ：一个模块打包器，用于将您的代码捆绑到可部署的资产中。
Babel ：一个编译器，用于将现代JavaScript代码转换为浏览器可以理解的代码。
Monaco Editor ：一个流行的代码编辑器，它提供了诸如语法高亮、自动完成和错误检查等功能。

步骤

1. 设置项目

使用create-react-app创建一个新的React项目。安装Webpack和Babel，并配置webpack.config.js以使用Babel。

2. 集成Monaco Editor

将Monaco Editor安装到您的项目中，并将其作为组件导入您的React应用程序。

3. 创建编辑器组件

创建一个编辑器组件，其中包含Monaco Editor实例。该组件将接受一个用于存储代码的prop。

4. 实时预览

使用useEffect钩子监听代码prop的变化。每当代码更改时，使用Babel将其编译为浏览器可以理解的代码。然后，将编译后的代码注入到iframe中，以进行实时预览。

5. 样式和交互

为编辑器组件添加样式并实现交互性，例如代码折叠、主题切换和错误突出显示。

示例代码

编辑器组件

import React, { useEffect, useState } from "react";
import MonacoEditor from "@monaco-editor/react";

const Editor = ({ code }) => {
  const [compiledCode, setCompiledCode] = useState("");

  useEffect(() => {
    const compileCode = async () => {
      const result = await babel.transformAsync(code);
      setCompiledCode(result.code);
    };
    compileCode();
  }, [code]);

  return (
    <MonacoEditor
      value={code}
      options={{
        theme: "vs-dark",
        language: "javascript",
      }}
      onChange={(newCode) => setCode(newCode)}
    />
  );
};

export default Editor;

实时预览

import React, { useEffect } from "react";

const Preview = ({ compiledCode }) => {
  useEffect(() => {
    const iframe = document.createElement("iframe");
    iframe.srcdoc = compiledCode;
    document.body.appendChild(iframe);

    return () => {
      document.body.removeChild(iframe);
    };
  }, [compiledCode]);

  return null;
};

export default Preview;