此demo，包含了以下知識點

1.React 元素渲染(以及css樣式的不同的書寫)

2.JSX

3.React 元件和props(父子元件傳值，方法呼叫)

4.React State(狀態)

5.React 事件處理

效果圖：

目錄介紹：

index.js

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import  './style.css'

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

TodoList.js

import React, { Component } from 'react';
import TodoItem from './TodoItem'
class TodoList extends Component {
    constructor(props){
        super(props);
        this.state={
            list:[],
            inputValue:''
        }
        this.handleBtnClickAdd=this.handleBtnClickAdd.bind(this)
        this.handleInputChange=this.handleInputChange.bind(this)
    }

    handleBtnClickAdd(){
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:''
        })
        
    }
    handleInputChange(e){
        this.setState({inputValue:e.target.value})
    }   
    handleDel(index){
        console.log(index)
        const list=[...this.state.list]
        list.splice(index,1)
        this.setState({
            list:list
        })
    }
    getHtmlTodoItem(){
       return (
            this.state.list.map((item,index)=>{
                {/*contents={item} index={index}向子元件傳值*/}
                {/*delete={this.handleDel.bind(this,index)   TodoItem子元件呼叫的TodoList父元件handleDel方法*/}
                return (<TodoItem key={index} contents={item} index={index} delete={this.handleDel.bind(this,index)}></TodoItem>)
            })
       )   
    }
  render(){
    return (
        // <React.Fragement>替換<div>。可以在控制檯看到外層div就沒了
        <div>              
            <div>
                <input className='input-color' value={this.state.inputValue} onChange={this.handleInputChange}/>
                <button style={{marginLeft:"10px",background:'orange',color:'#fff',border:'1px solid orange',height:'34px',width:'50px'}} onClick={this.handleBtnClickAdd}>add</button>
            </div>
            <ul>
                {
                    this.getHtmlTodoItem()     
                    /*this.state.list.map((item,index)=>{            
                        return (<TodoItem key={index} contents={item} index={index} delete={this.handleDel.bind(this,index)}></TodoItem>)
                    })  */           
                }       
            </ul>        
        </div>
    )
  }
}

export default TodoList;
 

TodoItem.js

import React from 'react';

class TodoItem extends React.Component {    
    constructor(props){
        super(props);
        this.handleBtnClickDel=this.handleBtnClickDel.bind(this)
    }
handleBtnClickDel(){
    console.log(this.props.index) /*父元件傳過來的值*/
    this.props.delete(this.props.index)/*呼叫父元件方法*/ 
}
  render(){
    return (
        <div style={{width:'320px',height:"50px",lineHeight:"50px"}}>
            {/*父元件傳過來的值*/}
            <span style={{display:"inline-block",width:'162px'}}>{this.props.contents}</span>
            <button className="button-style" onClick={this.handleBtnClickDel}>del</button>
        </div>
    )
  }
}
export default TodoItem;