React笔记（一）-白红宇

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

Create-react-app 脚手架

npm install -g create-react-appcreate-react-app my-appcd my-appnpm 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 (      
            
     
                {/* 注释 */}          {            //多行注释          }          
      输入内容          
                
              
     
                
     
                {            this.state.list.map((item,index) => {              return (                
                        
       
                  
       
        X
       
                
      
                              )            })          }        
     
      
    
    );  }  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;复制代码