如何使用 ReactJS 创建 ToDo 应用程序？

React 是一个用于开发交互式用户界面的 JavaScript 库。它由 Facebook 和一个由个人开发者和公司组成的社区管理。 React 主要专注于开发单页网页或移动应用程序。在这里，我们将创建一个 todo 应用程序来了解reactJS的基础知识。

所需模块：

npm
反应
反应引导
```
npm install react-bootstrap bootstrap
```

基本设置：通过以下命令启动项目：

NPX： npm 5.2+自带的包运行工具，npx是好用的CLI工具。 npx 用于执行 Node 包。它极大地简化了许多事情，其中之一是快速检查/运行节点包，而无需在本地或全局安装它。
```
npx create-react-app todo-react
```
现在，转到文件夹
```
cd todo-react
```
启动服务器 - 通过在终端中键入以下命令启动服务器：
```
npm start
```
打开http://localhost:3000/
将目录更改为 src：
```
cd src
```
删除目录中的所有内容
```
rm *
```
现在创建index.js文件
```
touch index.js 
```
该文件会将我们的应用程序渲染为位于public 文件夹中的 HTML 文件。还使用文件名app.js创建文件夹名称组件
```
mkdir components && cd components && touch app.js
```
app.js将包含我们的待办事项应用程序：

在 src 中编辑 index.js 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';
import 'bootstrap/dist/css/bootstrap.min.css';
  
ReactDOM.render(, document.getElementById('root'));

在组件中编辑 app.js：

import React, {Component} from 'react';
  
// Bootstrap for react
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Button from 'react-bootstrap/Button';
import InputGroup from 'react-bootstrap/InputGroup';
import FormControl from 'react-bootstrap/FormControl';
import ListGroup from 'react-bootstrap/ListGroup';
  
  
class App extends Component  {
  constructor(props) {
    super(props);
  
    // Setting up state
    this.state = {
      userInput : "",
      list:[]
    }
  }
  
  // Set a user input value
  updateInput(value){
    this.setState({
      userInput: value,
    });
  }
  
  // Add item if user input in not empty
  addItem(){
    if(this.state.userInput !== '' ){
      const userInput = {
  
        // Add a random id which is used to delete
        id :  Math.random(),
  
        // Add a user value to list
        value : this.state.userInput
      };
  
      // Update list
      const list = [...this.state.list];
      list.push(userInput);
  
      // reset state
      this.setState({
        list,
        userInput:""
      });
    }
  }
  
  // Function to delete item from list use id to delete
  deleteItem(key){
    const list = [...this.state.list];
  
    // Filter values and leave value which we need to delete
    const updateList = list.filter(item => item.id !== key);
  
    // Update list in state
    this.setState({
      list:updateList,
    });
  
  }
  
  render(){
    return(
  
          TODO LIST
            
  
           
          
          
  
          
           this.updateInput(item.target.value)}
            aria-label="add something"
            aria-describedby="basic-addon2"
          />
          
            
          
        
  
     
   
   
     
        
          {/* map over and print items */}
         {this.state.list.map(item => {return(
  
             this.deleteItem(item.id) }>
              {item.value}
            
  
         )})}
        
     
   
     
    );
  }
}
  
export default App;

保存所有文件并启动服务器：
```
npm start
```
输出：在浏览器中打开http://localhost:3000/ ：