Codepen上没有定义React

时间:2018-03-06 13:13:00

标签: reactjs codepen

我正在尝试在CodePen中运行一个基本的React组件(我启用了Babel,我使用了React.Component),但它仍然没有渲染。在控制台中,它显示React未定义。 我还从另一个人那里获取了一些已经渲染的代码,但它不起作用!!

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"))

1 个答案:

答案 0 :(得分:0)

请按照以下步骤操作:

  1. 点击顶部的设置。
  2. 选择JavaScript选项卡,并添加“Babel”作为JavaScript预处理器。
  3. 在“快速添加”下拉列表中,选择“React”和“ReactDOM”。
  4. 将您的React代码粘贴到Javascript部分。
  5. 在HTML部分添加<div id="app"></div>
  6. 瞧!