在前端开发中，我们经常需要将 React 组件展示给其他人或者进行技术分享。这时候，我们需要一个可靠的工具来预览 React 组件效果，以实现更加高效的开发和交流。oni-react-preview 就是这样一个工具。
oni-react-preview 是一个基于 Electron 的 npm 包，它可以将 React 组件以可视化的方式展示出来，并支持即时修改和预览。本文将详细介绍如何使用 oni-react-preview。
安装
首先，我们需要在项目中安装 oni-react-preview：
npm i oni-react-preview
使用
在项目中，我们可以通过命令行启动 oni-react-preview：
npx oni-react-preview
oni-react-preview 将会监听项目中所有 .js 文件，并在 Electron 应用中展示它们（当然，你也可以通过配置文件指定特定的文件夹或者文件）。
如下图所示，启动 oni-react-preview 后，我们可以看到它展示了项目中的一个 React 组件。
在 oni-react-preview 中，我们可以即时修改代码并观察效果。比如，我们可以在代码中添加一个按钮：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ----- -
------ -
-----
--------- ----------
------------- -----------
------
--
-
------ ------- ----然后，oni-react-preview 会立即展示新添加的按钮：
除了上述功能，oni-react-preview 还提供了更多的调试和预览功能，比如支持断点调试、热重载、事件调试等。
总结
oni-react-preview 是一个非常有用的工具，它可以帮助我们实现更加高效的 React 组件调试和预览。在学习 React 过程中，它也可以作为一个非常好的帮助工具，提高我们的学习效率。当然，在实际开发中，我们可能还需要更多的调试和预览工具，可以结合实际需求选择更适合的工具。
参考代码：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ----- -
------ -
-----
--------- ----------
------
--
-
------ ------- ----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066fb03d1de16d83a67367