一个简单的 react 实例： < TodoList >

<  react     TodoList:  >

组件：

 //引入React ；
 import React  from 'react';
 //组件
 class TodoList extends React.Component{
   constructor(props){
     super(props);
     this.state={
      list :[],
      inputValue:""
     }
   }
   //按钮的点击事件；
   addClick(){
     this.setState({
       list:[...this.state.list, this.state.inputValue],
       inputValue:""
     })
   }
   // input 里面的onChange 事件；
   addChange(e){
     this.setState({
       inputValue:e.target.value
     })
   }
   //map 循环后的删除事件；
   handleItemClick(index){
     // 这个会打印出每条数据的下标
     // console.log(index)
     const list = [...this.state.list];
     list.splice(index,1)
     this.setState({list:list})
   }
   render(){
     return(
       <div>
         <input value={this.state.inputValue} onChange={this.addChange.bind(this)}/>
         <button onClick={this.addClick.bind(this)}>add</button>
         <ul>
           {
             this.state.list.map((item, index)=>{
               return<li key={index} onClick={this.handleItemClick.bind(this,index)}>{item}</li>
             })
           }
         </ul>
       </div>
     )
   }
 }

 //抛出去
 export default TodoList 

index.js 文件

 //引入React库
 import React from 'react';

 import ReactDOM from 'react-dom';
 // 引入TOdoList组件
 import TodoList from './TodoList'

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

代码有那点不完善的，还请留言指出哦！