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

Try wrap ReactDOM.render with Immediately-Invoked Function eg. $(function() {ReactDOM.render(<CommentBox/>, document.body);}) — Rafal Lesniak
– Rafal Lesniak, Commented Nov 27, 2015 at 19:47

vrintle · Accepted Answer · 2018-10-13 05:04:25Z

19

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.

edited Oct 13, 2018 at 5:04

vrintle

5,6263 gold badges19 silver badges47 bronze badges

answered Nov 27, 2015 at 19:48

jeremija

2,5581 gold badge21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Earon Over a year ago

Thanks it's working but why need to use browser.min.js ? can't use JSX as previous version ? is browser.min.js library like jquery ?

jeremija Over a year ago

Even babel seems to no longer actively maintain support for compilation in browser. I assume you previously used the JSXTransformer.js library, however it has also been marked as deprecated and no longer bundled with React.

jeremija Over a year ago

There is also a more detailed blog post describing the transition to babel.

JohnnyQ Over a year ago

Spent more than hour trying to figure this out. Thank you!

Collectives™ on Stack Overflow

Simple ReactJs Example not working

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related