Question

使用来自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，并使用带有Blade模板的Laravel让我知道是否存在问题。

还尝试使用外部脚本：

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

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

由于

Answer 1

如果您想使用JSX语法，则需要使用type=text/babel和load the babel browser script标记脚本标记：

<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代码段上运行。

另一种选择是使用browserify或webpack等解决方案将您的.jsx转发到服务器端的javascript。

简单的ReactJs示例不起作用

1 个答案: