No output from my react app

Question

I am very interested in learning Reactjs, i watched some tutorials on YouTube.

I also followed some other tutorials on the internet like this tutorial.

My main issue is when i try to run the first example from the tutorial mentioned above, the code gives no result, have i missed something ? (i use IntelliJ IDEA.)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>React tutorial</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

<div id="content"></div>

<script type="text/jsx">

    var TimerExample = React.createClass({

        getInitialState: function(){

            // This is called before our render function. The object that is
            // returned is assigned to this.state, so we can use it later.

            return { elapsed: 0 };
        },

        componentDidMount: function(){

            // componentDidMount is called by react when the component
            // has been rendered on the page. We can set the interval here:

            this.timer = setInterval(this.tick, 50);
        },

        componentWillUnmount: function(){

            // This method is called immediately before the component is removed
            // from the page and destroyed. We can clear the interval here:

            clearInterval(this.timer);
        },

        tick: function(){

            // This function is called every 50 ms. It updates the
            // elapsed counter. Calling setState causes the component to be re-rendered

            this.setState({elapsed: new Date() - this.props.start});
        },

        render: function() {

            var elapsed = Math.round(this.state.elapsed / 100);

            // This will give a number with one digit after the decimal dot (xx.x):
            var seconds = (elapsed / 10).toFixed(1);

            // Although we return an entire <p> element, react will smartly update
            // only the changed parts, which contain the seconds variable.

            return <p>This example was started <b>{seconds} seconds</b> ago.</p>;
        }
    });


    ReactDOM.render(
            <TimerExample start={Date.now()} />,
        document.getElementById('content')
    );
</script>

</body>
</html>

Do you see any error message in your console? Anyway your tutorial seems very outdated. — Axnyff, Dec 05 '17 at 15:47
I would advise you to dump this example which is outdated and use the official ones : https://reactjs.org/docs/hello-world.html — ChrisR, Dec 05 '17 at 15:58

Mayank Shukla · Accepted Answer · 2017-12-05T16:01:00.477

Am i missed something?

Yes, you mixed two important parts: "React" and "ReactDOM". Initially react was a single lib that contained all the code but after v0.14 single lib has been splitted into two parts "react" and "react-dom".

For more details check this: React vs ReactDOM?

Solution to your problem:

You are using v0.13 so use React.render instead of ReactDOM.render. Another possible solution is use these scripts (separate libs):

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Also you don't need JQuery, so you can remove the reference.

Suggestion: Check the doc for more updates and better ways.

Working snippet by using React.render:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>React tutorial</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>

<div id="content"></div>

<script type="text/jsx">

    var TimerExample = React.createClass({

        getInitialState: function(){

            // This is called before our render function. The object that is
            // returned is assigned to this.state, so we can use it later.

            return { elapsed: 0 };
        },

        componentDidMount: function(){

            // componentDidMount is called by react when the component
            // has been rendered on the page. We can set the interval here:

            this.timer = setInterval(this.tick, 50);
        },

        componentWillUnmount: function(){

            // This method is called immediately before the component is removed
            // from the page and destroyed. We can clear the interval here:

            clearInterval(this.timer);
        },

        tick: function(){

            // This function is called every 50 ms. It updates the
            // elapsed counter. Calling setState causes the component to be re-rendered

            this.setState({elapsed: new Date() - this.props.start});
        },

        render: function() {

            var elapsed = Math.round(this.state.elapsed / 100);

            // This will give a number with one digit after the decimal dot (xx.x):
            var seconds = (elapsed / 10).toFixed(1);

            // Although we return an entire <p> element, react will smartly update
            // only the changed parts, which contain the seconds variable.

            return <p>This example was started <b>{seconds} seconds</b> ago.</p>;
        }
    });


    React.render(
            <TimerExample start={Date.now()} />,
        document.getElementById('content')
    );
</script>

</body>
</html>

No output from my react app

1 Answers1