如何调试 React 的 commonjs 样式模块

Question

全部：

我对 React 工作流程很陌生。现在，假设我有一个类似的模块：

var React = require("react");
var ReactDOM = require("react-dom");
var Todo = React.createClass({
    render: function() {
        return <div>Hello there </div>;
    }
});
ReactDOM.render(<Todo />, document.getElementById("div1"))

我想知道如何在 React 项目中使用它并调试它？大多数帖子都在谈论browserify和babel，谁能给我一个工作示例（从编译到调试，截图将不胜感激）这个简单的案例？

Answer 1

我建议您需要查看三个主要事项。

• Browserify
• Babel + Babelify
• React Dev Tools

作为简要指南，您需要执行以下操作。

安装你的依赖项

如果要使用 React 和 ReactDOM，则需要使用 NPM 安装它们。

# ignore first step if you already have a package.json
npm init -y

npm install --save react react-dom

您还需要用于实际构建的工具。

npm install --save-dev browserify babelify babel-preset-react

这将允许您从该项目内的文件中调用require('react')。

创建构建脚本

您需要运行一个 browserify 命令，它将您的 JSX 代码转换为普通的旧 Javascript。

打开您的package.json 并向脚本对象添加一个新属性。

{
  "build": "browserify input.js -o output.js -t [ babelify [ react ] ]"
}

如果您还希望 browserify 生成源映射，请使用包含调试标志 -d。

要运行此脚本，请在命令行中输入npm run build。

babelify readme 有更多关于这部分工作流程的示例。

安装 React 开发工具

将 React Dev Tools 扩展添加到您的浏览器。这为您提供了组件树的实时可编辑预览，以及展示道具和状态。

它使调试组件变得更加容易。

---

最后一句警告，您的示例包含以下代码。

ReactDOM.render(<Todo />, document.getElementById("div1"))

除非您确定 DOM 已加载，否则对 getElementById 的调用将返回 null，并且您的应用程序不会呈现。

通过将此代码放在侦听器中轻松解决。

window.addEventListener('load', function() {
  ReactDOM.render(<Todo />, document.getElementById("div1"))
});