Search code examples
javascriptcssreactjsbabeljscodepen

Using React.js on Codepen.io, Why is the custom tag not rendering?

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 CodepenCSS config

Thank you for your help in advance :-)

Solution

  • 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