前言
在前端开发过程中，我们经常会用到代码沙箱，可以让我们快速试验一些代码，而 resandbox 是一个基于 React 的非常好的代码沙箱，它提供了一些可视化的元素，让我们可以更加直观地查看代码运行状态，今天我们将学习如何使用 resandbox。
安装 resandbox
首先，我们需要在项目中安装 resandbox，可以通过以下命令来安装：
npm install resandbox
基础使用
安装完成后，我们可以在项目中引入和使用 resandbox，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------------- ---------------- - ---- ------------
----- --- ------- --------------- -
-------- -
------ -
----------------- ------------ ------------
------------------
------ -- -------------------
-------------------
-------------------
--
-
-在这个例子中，我们引入了 SandpackProvider 和 SandpackConsumer 组件，SandpackProvider 组件把一个值传递给所有的 SandpackConsumer 组件。
设置代码
我们可以使用 CodeEditor 组件来设置代码，演示代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------------- ----------------- ---------- - ---- ------------
----- --- ------- --------------- -
-------- -
------ -
----------------- ------------ ------------
------------------
------ -- -
-----------
-------------------------- ----------
---------------------
--------------- -- -------------------
--
--
-------------------
-------------------
--
-
-在这个例子中，我们使用了 CodeEditor 组件，设置了代码内容和语言类型，并做出了一个 onChange 回调函数。
设置预览
我们可以使用 Preview 组件来设置代码的预览效果，看下面的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------------- ----------------- ----------- ------- - ---- ------------
----- --- ------- --------------- -
-------- -
------ -
----------------- ------------ ------------
------------------
------ -- -
-----
-----------
-------------------------- ----------
---------------------
--------------- -- -------------------
--
-------- --
------
--
-------------------
-------------------
--
-
-在这个例子中，我们增加了 Preview 组件，它会显示代码运行后的结果。
代码共享和保存
通过 CodeEditor 和 Preview 组件，我们可以创建一个代码沙箱，并且通过浏览器的地址来共享它。我们也可以让用户保存这个代码沙箱到云端，这可以用 Publish 组件来实现，看下面的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------------- ----------------- ----------- -------- ------- - ---- ------------
----- --- ------- --------------- -
-------- -
------ -
----------------- ------------ ------------
------------------
------ -- -
-----
-----------
-------------------------- ----------
---------------------
--------------- -- -------------------
--
-------- --
-------- --
------
--
-------------------
-------------------
--
-
-在这个例子中，我们增加了 Publish 组件，点击它可以将这个代码沙箱保存到云端。
结尾
到这里我们就学会了如何使用 resandbox，它提供了很多有用的组件来帮助我们创建和处理代码沙箱。如果你想深入学习 resandbox 的更多细节，可以前往官方文档查看更多的内容。
示例代码
你也可以通过以下链接获取上述所有代码的完整示例：
https://codesandbox.io/s/resandbox-example-4j4m4
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cdc81e8991b448e68ca