React not defined on Codepen

Question

I am trying to run a basic React Component in CodePen (I enabled Babel and I used React.Component ) but it still does not render. In the console it shows React not defined. I also took some already rendered code from another person and it does not work!!

class App extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      term : ""

    }

    this.handleChange=this.handleChange.bind(this)

  }

  handleChange(event){
    let term = event.target.value;
    this.setState({term})

  }


  render() {
    return (
      <div className="App">
        <input value={this.state.term}  onChange={this.handleChange} />
        {this.state.term}
      </div>
    );
  }
}

ReactDOM.render(<App/> , document.getElementById("app"))

Answer 1

Follow these steps:

1. Click Settings at the top.
2. Select the JavaScript tab, and add "Babel" as the JavaScript preprocessor.
3. In the "quick add" drop-down, select "React" and "ReactDOM".
4. Paste your React code in the Javascript section.
5. Add <div id="app"></div> in the HTML section.

Voila!