React之JSX

/*
    启动加载一个App组件：
        引入React对象
        引入ReactDOM对象
        操作JSX
            JSX不能用+=来运算，不是字符串
            JSX可以通过数组来输出数据
            const arr = [<div></div>, <div2></div2>]
        渲染到指定的元素
        启动yarn run dev
*/

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App.js'

ReactDOM.render(<App/>, document.getElementById('root'));  



 // 使用JSX的时候必须引入React
// 组件要继承React.Component
import React, { Component } from 'react';

class App extends Component{
  constructor() {
  super();
  //初始化属于组件的属性
  this.state = {
      num : 1
    }
  }
  changeHandler (e) {
  console.log('触发了', e.target.value);
  this.state.num = e.target.value;  
  // 通知视图更新函数
  this.setState({});
 }

// 指定Render的内容
  render() {
    return (
      <div>
        大家好我是React{ this.state.num }
        <input type = "text" value = {this.state.num} onChange = {(e) => {
            this.changeHandler(e);
        }}/>
      </div>
    );
  }
}

export default App;