React学习（1）-初学

推荐教程：http://react.yubolun.com/tutorial/tutorial.html

https://me.csdn.net/daxiazouyizou

http://www.runoob.com/react/react-install.html

在线编辑器（无需安装）：https://codepen.io/gaearon/pen/gWWZgR?editors=0010

React 是一个用于构建用户界面的 JAVASCRIPT 库。React 是一个采用声明式，高效而且灵活的用来构建用户界面的框架。JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

参考：https://blog.csdn.net/daxiazouyizou/article/details/79748078

所以我们需要新建一个js文件，然后js文件中ReactDOM.render函数中有一行固定的代码：document.getElementById('root')。就是将其中的内容渲染到上文中讲的index.html中id为“root”的标签中。

这里可以直接在app.js写我们的js代码。

理由：

示范编写helloworld：

App.js文件:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

像下面这样的代码中，element、return中必须有且仅有一个父标签，如div，没有父标签，是无法正常显示。

const element =( 
  <div>
   <h1>Hello, world</h1>
   <h2>It is {new Date().toLocaleTimeString()}.</h2>
  </div>
);
ReactDOM.render(
  element,
  document.getElementById('root')
);

还可以这样写：

class Welcome extends React.Component {
  render() {
    return(
    <div>
    <h1>Hello,world!</h1>
    <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
      );
  }
}
ReactDOM.render(<Welcome/ >,document.getElementById("root"));

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

这里通过调用ReactDOM.render() 方法来改变输出：设置定时器执行render方法。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    setInterval(
      () => this.tick(),
      1000
    );
  }

  // componentWillUnmount() {
  //   clearInterval(this.timerID);
  // }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

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

通过this.setState() 来更新组件局部状态。浏览器每秒钟调用 tick() 方法。 在其中，Clock 组件通过使用包含当前时间的对象调用 setState() 来调度UI更新。 通过调用 setState() ，React 知道状态已经改变，并再次调用 render() 方法来确定屏幕上应当显示什么。 这一次，render() 方法中的 this.state.date 将不同，所以渲染输出将包含更新的时间，并相应地更新DOM。

按钮交互：

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

 handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

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

表单：

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    //阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。意思是，当点击提交按钮，表单会提交，此时填写的文本框会自动清空。所以这里的默认行为就是文本框的清除。我们要阻止这个事件，保留文本框的内容一直显示
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

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

点击“修改”按钮，value一栏显示Name的值；当修改Name一栏，value自动清空:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: '',value2:''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value,value2:''});
   // this.setState({value2: ''});
  }

  handleSubmit(event) {
     this.setState({value2: this.state.value});
//阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。意思是，当点击提交按钮，表单会提交，此时填写的文本框会自动清空。所以这里的默认行为就是文本框的清除。我们要阻止这个事件，保留文本框的内容一直显示
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="修改" />
        <br />
        value:
        <input type="text" value={this.state.value2} />
      </form>
    );
  }
}

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

react请求接口4种方法：

https://www.cnblogs.com/LLLLily/p/7492118.html