diff --git a/index.html b/index.html
index 2b58884..0b5da0a 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
     <title>HelloJS React Basic Demo</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   </head>
 
   <body>
@@ -12,4 +13,4 @@
   </body>
   <script src="/dist/bundle.js"></script>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/src/App.jsx b/src/App.jsx
index c869b09..b2d3742 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,14 +3,27 @@ import TodoList from './TodoList.jsx'
 import TodoAddForm from './TodoAddForm.jsx'
 
 class TodoApp extends React.Component {
+  state = {
+    todos: ['Hello','world']
+  }
+  addTodo = (val) => {
+    this.state.todos.push(val);
+    this.setState({todos:this.state.todos});
+  }
+  removeTode = (id) => {
+    this.state.todos.splice(id,1)
+    this.setState({todes:this.state.todes})
+  }
+
   render() {
     return (
       <div>
         <h2>Todo App</h2>
-        123
+        <TodoAddForm addTodo={this.addTodo}></TodoAddForm>
+        <TodoList todos={this.state.todos} removeTode={this.removeTode}></TodoList>
       </div>
     );
   }
 }
 
-export default TodoApp;
\ No newline at end of file
+export default TodoApp;
diff --git a/src/TodoAddForm.jsx b/src/TodoAddForm.jsx
index fbf6003..c2ec99a 100644
--- a/src/TodoAddForm.jsx
+++ b/src/TodoAddForm.jsx
@@ -1,18 +1,32 @@
 import React from 'react'
 
 class TodoAddForm extends React.Component {
-  state = {
-    inputText: ''
+  constructor(props){
+    super(props)
+    this.state = {
+      inputText: ''
+    }
   }
-  
+    handleChange = (e) => {
+
+      this.setState({inputText: e.target.value})
+    }
+
+    addTodo = () => {
+      if (this.state.inputText !== "") {
+        this.props.addTodo(this.state.inputText.trim());
+        this.setState({inputText:""})
+      }
+    }
+
   render() {
     return (
       <div>
-        <input type="text" value={this.state.inputText}/>
-        <button>新增</button>
+        <input type="text" value={this.state.inputText} onChange={this.handleChange}/>
+        <button onClick={this.addTodo}>新增</button>
       </div>
     );
   }
 }
 
-export default TodoAddForm;
\ No newline at end of file
+export default TodoAddForm;
diff --git a/src/TodoItem.jsx b/src/TodoItem.jsx
index 170af86..34e5662 100644
--- a/src/TodoItem.jsx
+++ b/src/TodoItem.jsx
@@ -1,13 +1,25 @@
 import React from 'react'
 
 class TodoItem extends React.Component {
+  constructor(props){
+    super(props)
+  }
+
+  removeTode = () => {
+    this.props.removeTode(this.props.pid)
+  }
+
   render() {
     return (
       <div>
-        
+        <ul>
+          <li style={{fontSize:22,listStyle:'none'}}><span style={{marginRight: 30}}>{this.props.pid+1}</span>{this.props.todo}
+            <i className='fa fa-times' style={{fontSize:22,margin:10,color:'#f24'}} onClick={this.removeTode}></i>
+          </li>
+        </ul>
       </div>
     );
   }
 }
 
-export default TodoItem;
\ No newline at end of file
+export default TodoItem;
diff --git a/src/TodoList.jsx b/src/TodoList.jsx
index d588dc4..ec1f63c 100644
--- a/src/TodoList.jsx
+++ b/src/TodoList.jsx
@@ -2,13 +2,22 @@ import React from 'react'
 import TodoItem from './TodoItem.jsx'
 
 class TodoList extends React.Component {
+  constructor(props){
+    super(props)
+  }
   render() {
     return (
       <div>
-        
+        {
+          this.props.todos.map((todo, i) => {
+            return(
+              <TodoItem todo={todo} key={i} pid={i} removeTode={this.props.removeTode}></TodoItem>
+            );
+          })
+        }
       </div>
     );
   }
 }
 
-export default TodoList;
\ No newline at end of file
+export default TodoList;
