简单的 ReactJs 示例不起作用

IT技术 javascript reactjs
2021-05-17 18:05:33

使用来自 react 网站的简单 ReactJs 示例出现问题:

首先我进口:

<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>

然后我复制并粘贴代码:

// tutorial1.js
var CommentBox = React.createClass({
    render: function() {
        return (
            <div>
                <h1>Welcome</h1>
            </div>
        );
    }
});
ReactDOM.render(<CommentBox/>, document.body);

打开页面时没有显示。也试过:

document.getElementById('example')

控制台中没有错误不是没有问题。

我在页面中使用 jquery 并使用 Laravel 和 Blade 模板让我知道这是否有问题。

还尝试使用外部脚本:

<script src="/lib/react-example.js" type="text/jsx"></script>

这是我的Live Server,您可以在这里查看。

谢谢

1个回答

如果你想使用 JSX 语法,你需要标记你的脚本标签type=text/babel加载 babel 浏览器脚本

<script src="https://unpkg.com/react@16.5.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.5.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

<script type="text/babel">
var CommentBox = React.createClass({
    render: function() {
        return (
            <div>
                <h1>Welcome</h1>
            </div>
        );
    }
});
ReactDOM.render(<CommentBox/>, document.body);
</script>

这是一个关于jsfiddle的例子,不幸的是它不适用于 StackOverflow 片段。

另一种选择是你的transcompile.jsx使用的解决方案,例如它的JavaScript在服务器端browserify的WebPack