Простой пример ReactJs не работает

Question

Получение проблемы с простым примером 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, вы можете проверить здесь.

Спасибо

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, к сожалению, он не работает с фрагментами Stackru.

Другой вариант - это скомпилировать ваш .jsx это javascript на стороне сервера, используя решение, такое как http://browserify.org/ или webpack.