Search code examples
reactjscodepen

react render doesn't show anything


My react codepen is not showing anything.

JS

class HelloWorld extends React.Component {
    render() {
        return (<div>Hello World!</div>);
    }
}
var app = document.getElementById("mainapp");
React.render(<HelloWorld />, app);

HTML

<div id='mainapp'></div>

I imported React and ReactDOM trough a cdn. And if I type React/ReactDOM in the console it is imported correctly. This code doesn't show any errors yet I see nothing. I tested this on multiple browsers (chrome, firefox, icecat) but still no results... I'm using bable is a preprocessor.


Solution

  • ReactDOM.render not React.render.

    class HelloWorld extends React.Component {
        render() {
            return <div>Hello World!</div>;
        }
    }
    var app = document.getElementById("mainapp");
    ReactDOM.render(
      <HelloWorld/>,
      app
    );
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
    <div id='mainapp'></div>