React.js won't render in my Codepen

Question

I'm trying to create a counter and I can't get what's in the render to show on the page.

Here is my code in JS from Codepen (with React and ReactDOM added in external JS)

class Counter extends React.Component {
  constructor() {
    super();
    this.state = {
    };
    this.flash = "";
    this.count = 0;
  }

  componentWillReceiveProps(nextProps) {
    var newValue = nextProps.count;
    if (this.count !== newValue) {
      this.flash = this.flash === "flash1" ? "flash2" : "flash1";
    }
  }

  render () {
    return (
      <div id="counter">
        <button>+</button>
        <button>-</button>
        <div id="count" className={this.flash}>
          {this.count}
        </div>
      </div>
    );
  };
}


ReactDOM.render(<Counter />, document.getElementById('countContainer'));

I can see in my JS code that normally the should be the color brown in my Codepen, so I'm obviously missing something (it's currently yellow).

In my HTML I have the following

<div id="countContainer">
</div>

Note: I'm not done with the code in regards to what it should be able to do in the end. I figured I should try and get it to render on the page before I continue.

My codepen is: URL

Answer 1

I tried this and got an error at the line where the first JSX tag is inside render(). I fixed it by adding the Babel preprocessor in addition to React and ReactDOM.