如何使用 React 编写自己的网站构建器
介绍
概览🔎
安装💻
演示🕹️
教程
存储库🗃️
补充说明📓
介绍
如果能用React开发一个网站搭建工具，那岂不是很酷？
你该如何开始呢？
如果能有一个库，让你可以基于它编写网站编辑器，并完全自由地实现任何符合你需求的功能，那就太好了。Build UI 正是为此而生的。🙌💪
概览🔎
Build-UI是一个专为 React 开发者设计的库，功能丰富，可让您轻松创建网站构建器。它自带拖放功能、撤销/重做逻辑、站点序列化和反序列化，以及其他一些实用工具。由于其独特的架构，它还支持其他功能，例如 SSR 和 SSG、组件动态加载、拖放功能的触摸支持等等，无需您进行任何复杂的修改。
安装💻
您可以使用以下命令通过 npm 安装：
npm install --save build-ui
演示🕹️
您可以去看看我们搭建的这个很棒的演示，它展示了您可以使用 Build UI 实现的一些功能。
教程
我们将创建一个非常简单的虚拟网站编辑器。如需更详细、更全面的教程，请参阅文档。（我仍然建议您先阅读文档中的教程，以便更好地理解“构建用户界面”功能。）
请看，这是我们即将建造的东西的预览：
看起来很简单，对吧？相信我，代码也会很简单。
如您所见，我们有一个小小的区域，可以把警报按钮从单按钮工具栏拖放到这里。虽然很简单，但这正是所有页面构建器的基本功能。
别说了，我们直接来看代码吧：
我们先从这个Alert组件开始：
const Alert = ({
message,
text,
...rest
}) => {
const handleAlert = () => {
alert(message);
}
return <button
onClick = {handleAlert}
{...rest}
>
{text}
</button>
}
一切都好，这里也没什么可看的。
现在，使用 Build UI，您可以创建一些名为“视图组件”的特殊组件，这些组件会封装您添加到页面（在本例中为我们的页面Alert）中的组件。让我们来看一个视图组件的示例：
import {DnDBuilder, useEditor} from 'build-ui';
import Alert from './Alert';
const AlertView = ({
id,
...props
}) => {
const editor = useEditor({
id: id
});
return <DnDBuilder
onDragStart = {editor.handleDragStart}
onDragEnd = {editor.handleDragEnd}
draggable = {true}
>
<Alert {...props} />
</DnDBuilder>
}
这是怎么回事？
如您所见，视图组件将被注入一些属性：一个 id 和一些组件Alert将接收的属性（暂时不必过于担心，我们稍后会详细介绍）。在视图组件中，我们添加了网站构建器所需的额外逻辑层。这非常棒，因为它利用了 React 的一个主要特性：组合。
Build UI 提供了一个名为 `dragable` 的特殊钩子useEditor，它接收组件中传入的 `id` 属性，并返回一系列可用于网站构建逻辑的实用函数。这里我们定义了一个可拖动的视图组件，这意味着您可以拖动该组件并将其放置在其他位置。我们还可以将视图组件定义为可放置组件，您可以使用从handleDrop编辑器接收到的函数将其放置在其他组件上。这正是我们在 `dragable` 组件中所做的，它SectionView使用`dropable` 组件Section渲染一个带有样式的 `div` 元素（顺便说一句，不建议使用内联样式）：
const Section = props => {
return <div
style = {{
width: 600,
height: 300,
backgroundColor: '#eeebf2'
}}
{...props}
/>
}
import {DnDBuilder, useEditor} from 'build-ui';
import Section from './Section';
const SectionView = ({
id,
...props
}) => {
const editor = useEditor({
id: id
});
return <DnDBuilder
onDrop = {editor.handleDrop}
>
<Section {...props} />
</DnDBuilder>
}
您可能也注意到了DnDBuilder我们用来包裹组件的组件Alert。这是一个用于接收拖放事件的组件。对我们来说，它看起来像一个普通的 div 元素。实际上，它的确渲染成一个 div 元素。但在内部，该组件DnDBuilder会处理所有拖放操作，包括触摸支持，而我们无需担心其具体实现。
现在，看看下面的工具栏按钮……它是怎么实现的？它使用了 Build UI 的useTools钩子。Build UI 支持拖放操作，因此您可以通过这种方式与网站构建器进行交互。我们来看一下AlertTools：
import {DnDBuilder, useTools, item, branch} from 'build-ui';
const AlertTools = () => {
const tools = useTools();
const handleDragTool = () => {
const alertProps = {
message: 'How is it going, folk?',
text: 'Greet me',
}
const alert = item({
type: 'Alert',
props: alertProps
});
const data = branch(alert);
tools.triggerDragStart({
data: data,
});
}
return <DnDBuilder
onDragStart = {handleDragTool}
onDragEnd = {tools.handleDragEnd}
draggable = {true}
as = 'button'
>
Alert
</DnDBuilder>
}
注意我们如何使用 `a`branch和item`functions` 函数吗？它们来自哪里，又有什么用途呢？它们是 Build-UI 自带的两个实用函数，允许您定义要添加到网站构建器中的元素结构。在这里，您可以定义要添加到构建器中的元素类型，该类型应始终为字符串（很可能是最终组件的名称，例如 Alert），以及视图组件初始时要接收的 props。请注意，我们还使用了 `triggerDragStart` 函数来启动Alert处理程序中的拖动操作。
现在我们来看一下真正将所有内容粘合在一起的部件。那就是Builder组件，我们将用它来封装我们的网站构建器。
我们将从之前定义的组件开始启动初始网站构建器，Section我们可以在其中拖放各种内容，例如数百个警报！
import {Builder, Workspace, item, branch} from "build-ui"
import AlertTools from "./ui/alert/AlertTools";
import AlertView from "./ui/alert/AlertView";
import SectionView from "./ui/section/SectionView";
const MyBuilder = () => {
const section = item({
type: 'Section',
props: {},
});
const tree = branch(section);
const view = {
Section: SectionView,
Alert: AlertView,
}
return <Builder initialTree = {tree}>
<Workspace view = {view} />
<AlertTools />
</Builder>
}
Alert还记得我们在创建视图时使用了类型字符串AlertTools吗？在这里，我们对初始树中的视图也使用了同样的类型字符串Section。正如你可能已经注意到的，上面的视图对象使用这些类型字符串作为键，以便知道要将其渲染到屏幕上。
瞧！我们已经完成了一个非常（非常）简单的页面编辑器，可以在页面上拖放无限量的提示信息。是不是很酷？嗯，其实也没那么酷😛😅。不过我们相信，你们一定能想出办法，并开始构建更有趣的页面编辑器。
还有……“你们承诺的重做、站点序列化和其他那些功能呢？”看看官方文档里的教程，你会发现这些功能也很容易使用。
存储库🗃️
访问代码仓库了解更多项目信息。非常欢迎你的加入😊。你可以在项目的 README.md 文件中找到文档链接。欢迎提出任何反馈意见。
补充说明📓
这是一个早期项目，欢迎任何反馈和建议。如果您想为项目做贡献，请与我联系。创建一个社区将会非常棒。
文章来源：https://dev.to/luismps/how-to-code-your-own-website-builder-with-react-37h7