how to use react in Codepen with es6

Question

http://codepen.io/JessieZhou/pen/VPgMdP ,Here is a demo using React in CodePen, but the browser gives an error "Uncaught ReferenceError: Component is not defined". However, if I insert a line "import {Component} from 'react'" in the first line, the error will be "Uncaught ReferenceError: require is not defined". Is it possible that the usage of 'class' causes this problem?

Here is my code:

//import {Component} from 'react'
class MyInput extends Component{
   constructor(props){
     super(props);
     this.handleChange = this.handleChange.bind(this);
   }

   handleChange(e){
     this.props.update(e.target.value);
   }

   render(){
     return <input onChange={this.handleChange} type="text"/>
   }
}
ReactDOM.render(MyInput, document.getElementById('myinput'));

Here is my javascript settings in CodePen: javascript settings in codepen

Answer 1

Instead of using import, use destructuring assignments to get React.Component. After adding react to codepen through js settings, it executes the script which will make React available on global scope, window.

const {Component} = React;
class MyInput extends Component{
    //Component code
}

Answer 2

Reason is Component is part of React, to access that you need to use React.Component, if you directly want to use Component, then first import it from react, like this:

import {Component} from 'react';

Use this:

class MyInput extends React.Component{
    constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e){
    console.log('e', e.target.vaule);
  }
  render(){
    return <input onChange={this.handleChange} type="text"/>
  }
}
ReactDOM.render(<MyInput/>, document.getElementById('myinput'));

Check codepen

Answer 3

I noticed that process.env.NODE_ENV is undefined in ReactDOM 16.2 js file, if you import the CDN from Quick-add.
The solution is to use the development react and ReactDOM modules from unpkg.com:

//unpkg.com/react/umd/react.development.js
//unpkg.com/react-dom/umd/react-dom.development.js

There is the example works on React 16.2: CodePen