如何在chrome中解决jsx预编译和React dev-tool

Question

我尝试学习如何编写反应。
但是当我用 chrome 编写第一个组件时，Chrome 的开发者工具会显示消息

Download the React DevTools for a better development experience

我已经从 Chrome 的应用商店安装了 React DevTools。
我的代码有效，我只想知道如何解决这些消息。
我的 chrome 设置错了吗？

请有人帮我解决这个问题。

Answer 1

应该修复“下载 React DevTools 以获得更好的开发体验”的警告in React 0.12.0 and above when using the latest React DevTools extension。如果您使用的是早于 0.12 的 React 版本，或者您有旧版本的扩展，则会继续弹出该消息。

关于使用浏览器内 JSX 转换的警告就是这样——它告诉您正在将 JSX 语法转换为浏览器中的 JS 函数调用，这比较慢并且需要相对较大的 JSX 转换器。如果您点击警告中的链接，您将成为taken to a page that explains further：

注意：

浏览器内的 JSX 转换器相当大，并且会导致可以避免的无关计算客户端。不要在生产环境中使用它——请参阅下一节。

生产化：预编译的 JSX

如果你有 npm，你可以简单地运行 npm install -g react-tools 来安装我们的命令行 jsx 工具。该工具会将使用 JSX 语法的文件转换为可以直接在浏览器中运行的纯 JavaScript 文件。它还会为您监视目录并在文件更改时自动转换文件；例如：jsx --watch src/ build/。

默认情况下，扩展名为 .js 的 JSX 文件会被转换。使用jsx --extension jsx src/ build/ 转换带有.jsx 扩展名的文件。

运行jsx --help 以获取有关如何使用此工具的更多信息。