簡單的ReactJs示例不起作用

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標記腳本標記，並使用以下內容加載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 。