在Codepen.io上使用React.js，为什么自定义标记不呈现？

Question

A very beginner and dumb question maybe but still, everyone learns at first..

HTML

<div class="container" id="container">

CSS(SCSS)

$back:#1D1F20;
$font:'Open Sans',sans serif;
body{
  background-color:$back;
  padding:20px;
  h1{
    font-family:$font;
    color:white;
  }
  DisplayBox{
    font-family:$font;
    color:white;
  }
}

JS (Babel)

var DisplayBox=React.createClass({
  render:function(){
        return (
          <h1>Marked</h1>
        );
    }
});

React.render(<DisplayBox />,document.getElementById("container"));

My aim is to render the custom tag DisplayBox inside the #container but it is not rendering in codepen.io JS config in Codepen CSS config

Thank you for your help in advance :-)

Answer 1

Instead of

React.render(<DisplayBox />,document.getElementById("container"));

Use

ReactDOM.render(<DisplayBox />,document.getElementById("container"));

Check the working example

Check the difference between React and ReactDOM