React in code pen

React in code pen


I cant seem to get React to work in code pen. I did some searching on the forums, and online but nothing worked. My js is babel and I added react as a library, but I cant even get an h1 to render. below is my code, and in my html section I have

<div id="app"></div>
class StatefulComponent extends React.Component {
  constructor(props) {
    this.state = {
      name: 'cody'

  render() {
    return (
react.render(<StatefulComponent />, document.getElementById('app'));


Make sure to add the “react-dom” package into your codepen in addition to adding React (as you’ve already done). Then, try adding this to the top of your Javascript code:

const { render } = ReactDOM;

Then replace your last line with the following:

render(<StatefulComponent />, document.getElementById('app'));

Alternatively, after adding in the “react-dom” package, you could simply make the last line of your JS code this and omit the initial const I suggested:

ReactDOM.render(<StatefulComponent />, document.getElementById('app'));


Got it! I added the dom package, but also noticed I was using a lower case r for react.render instead of a uppercase.