javascript - Chrome 浏览器中的 JSX 转换

标签 javascript reactjs

我正在尝试遵循 Mastering React 这本书,有一个示例,其代码如下

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Hello React</title>
    <script src="https://<fb shortened url>/react-with-addons-0.14.0.js"></script>
    <script src="https://<fb shortened url>/react-dom-0.14.0.js"></script>
    <script src="http://<fb shortened url>/JSXTransformer-0.13.1.js"></script>
</head>

<body>
    <div id="view" />
    <script>
        var HelloReact = React.createClass({
            render: function () {
                return <h1 > Hello React < /h1>
            }
        });

        ReactDOM.render( < HelloReact / > , document.body);
    </script>
</body>

</html>

但是上面的方法似乎不起作用。我的文档正文中没有收到 HelloReact。

我对 React(以及 JSX 转换等)完全陌生。 任何帮助将不胜感激。

我在 Chrome 中遇到的错误是

Uncaught Error: Invariant Violation: ReactDOM.render(): Invalid component element. Instead of passing an element string, make sure to instantiate it by passing it to React.createElement.

注意:fb 缩短的 urlfb.me,Stackoverflow 提示使用缩短器,

最佳答案

As many people have noticed already, React and React Native have both switched their respective build systems to make use of Babel. This replaced JSTransform, the source transformation tool that we wrote at Facebook.

https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html

使用babel将JSX语法转换为JS并在你的文件中使用JS

关于javascript - Chrome 浏览器中的 JSX 转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36774686/

相关文章:

reactjs - Storybook react native (IOS) - RangeError : Maximum call stack size exceeded (native stack depth)

javascript - React Navigation 在导航时转到初始路线

javascript - 如何在 NEXT JS 中的路由之间传递状态?

javascript - 媒体查询 ReactJs 组件

javascript - Meteor 和 Session/公共(public)数据

javascript - 在 javascript 中使用 fetch 请求 API 时出现 CORS 策略错误

reactjs - 鼓机播放相同的声音

javascript - React-table 全选选择框

javascript - JS : Hide all elements except of one (by id) (and all of its descending child elements and its parents)

php - 单击元素时切换 CSS 样式