React笔记 （一）React基本概念以及脚手架和TodoList的编写

React 作为一个前端框架有几个核心技术: 响应式、UI 虚拟、DOM 组件等等，一下是个人学习笔记。

Create-react-app 脚手架

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

TodoList 功能

• 外部必须包一个块，不想占位的话引入Fragment，用他代替
• React不予许直接修改state的值，修改需用setState方法
• 如果想页面不转译标签里的内容，可以通过dangerouslySetInnerHTML={{__html: item}}方法让浏览器不做解析
• JSX里的标签的class名需用className属性
• label标签的for属性不可以直接使用，需使用htmlFor属性
• 绑定方法需用.bind(this)方法传入this

import React, { Component } from 'react';
import './index.css';

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: "qwewqe",
      list: ["吃饭","睡觉"]
    }
  }

  render() {
    return (
      <div className="TodoList">
        <div>
          {/* 注释 */}
          {
            //多行注释
          }
          <label htmlFor="insertArea">输入内容</label>
          <input 
            id="insertArea"
            value = {this.state.inputValue} 
            onChange = {this.inputChange.bind(this)}
          />
          <button onClick = {this.submit.bind(this)}>提交</button>
        </div>
        
        <ul>
          {
            this.state.list.map((item,index) => {
              return (
                <div className="list-box" key={index}>
                  <li dangerouslySetInnerHTML={{__html: item}}></li>
                  <div className="detil" onClick={this.listClose.bind(this, index)}>X</div>
                </div>
                
              )
            })
          }
        </ul>
      </div>
    );
  }

  inputChange(e) {
    this.setState({
      inputValue: e.target.value 
    })
  }

  submit() {
    if(this.state.inputValue){
      this.setState({
        list: [...this.state.list,this.state.inputValue],
        inputValue: ""
      })
    }
  }

  listClose(index) {
    let list = [...this.state.list];
    list.splice(index,1)
    this.setState({
      list: list
    })
  }
}

export default TodoList;