CODEWITHSUNDEEP
javascriptreactjs
Leon Gaban
Leon Gaban

Reputation: 39044

What is wrong with my basic ReactJS app?

I'm trying to build a basic ReactJS app using this tutorial.

Currently I have a blank page, and when I type out MessageBox, the name of my component, I get the following error.

enter image description here

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="Playing with ReactJS">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Playing with ReactJS</title>
</head>
<body>

    <!-- container node -->
    <div id="app"></div>

    <script src="bower_components/react/react.js"></script>
    <script src="bower_components/react/react-dom.js"></script>
    <script type="text/jsx">
        /** @jsx React.DOM */
        var MessageBox = React.createClass({
            render: function() {
                return (
                    <h1>Hello, World</h1>
                );
            }  
        });

        React.renderComponent(
            <MessageBox/>,
            document.getElementById('app'),
            function () {
                console.log('after render');
            }
        )
    </script>

</body>
</html>

 /**
  * React v0.14.7
  */

Upvotes: 2

Views: 250

Answers (2)

Andrew Hendrie
Andrew Hendrie

Reputation: 6415

The renderComponent function has been deprecated.

You can use ReactDOM.render() instead of React.renderComponent().

You new file should look like this: 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="Playing with ReactJS">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Playing with ReactJS</title>
</head>
<body>

    <!-- container node -->
    <div id="app"></div>

    <script src="bower_components/react/react.js"></script>
    <script src="bower_components/react/react-dom.js"></script>
    <script type="text/jsx">
        /** @jsx React.DOM */
        var MessageBox = React.createClass({
            render: function() {
                return (
                    <h1>Hello, World</h1>
                );
            }  
        });

        ReactDOM.render(
            <MessageBox/>,
            document.getElementById('app'),
            function () {
                console.log('after render');
            }
        );
    </script>

</body>
</html>

Also - extract that function into a separate js file.

Here's a good (up to date) tutorial on this.

Upvotes: 1

thorn0
thorn0

Reputation: 10447

The browser doesn't understand JSX. You need to convert it to JavaScript somehow for it to start working. You can do it either by moving the code to a separate .jsx file and setting up some tool like Babel to compile it, or you can use JSXTransformer to run the transformation (JSX -> JS) in the browser. However, JSXTransformer has been deprecated and might not support some recent addition to the JSX syntax (e.g. valueless attributes).

Upvotes: 3

Related Questions