Simple ReactJs Example not working

Question

Getting issue with simple ReactJs Example using from react website :

First i imported :

<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>

Then i copy and pasted code :

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

When opened page nothing show. Also tried :

document.getElementById('example')

No error in console don't no what issue is.

I am using jquery in page and using Laravel with Blade templates let me know if that is issue.

Also tried to use external script :

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

This is my Live Server you can check here.

Thanks

Answer 1

If you want to use the JSX syntax, you need to mark your script tags with type=text/babel and also load the babel browser script with:

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/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>

Here is an example on jsfiddle, unfortunately it doesn't work on StackOverflow snippets.

Another option is to transcompile your .jsx it to javascript on the server side using a solution such as browserify or webpack.