学习React(10) - Todo List 应用

创建一个Todo List应用是一个很好的实践项目，它可以帮助你综合运用Create React App、Webpack、Babel和CI/CD等知识点。下面是一个逐步实现这个项目的指南。

1. 使用Create React App创建项目

首先，使用Create React App来初始化你的React项目。

npx create-react-app todo-list-app
cd todo-list-app

2. 项目结构

Create React App会生成一个基本的项目结构：

todo-list-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── ...
├── .gitignore
├── package.json
├── README.md
└── yarn.lock

3. 创建Todo List组件

在src目录下创建一个新的组件文件：TodoList.js 和 TodoItem.js。

TodoItem.js

import React from 'react';

const TodoItem = ({ todo, toggleComplete, deleteTodo }) => {
  return (
    <div style={{ textDecoration: todo.completed ? "line-through" : "" }}>
      {todo.text}
      <button onClick={() => toggleComplete(todo.id)}>Complete</button>
      <button onClick={() => deleteTodo(todo.id)}>Delete</button>
    </div>
  );
}

export default TodoItem;

TodoList.js

import React, { useState } from 'react';
import TodoItem from './TodoItem';

const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [todoText, setTodoText] = useState('');

  const addTodo = () => {
    if (todoText.trim() !== '') {
      setTodos([...todos, { id: Date.now(), text: todoText, completed: false }]);
      setTodoText('');
    }
  };

  const toggleComplete = (id) => {
    setTodos(todos.map(todo => 
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input 
        type="text" 
        value={todoText}
        onChange={(e) => setTodoText(e.target.value)}
      />
      <button onClick={addTodo}>Add Todo</button>
      <div>
        {todos.map(todo => (
          <TodoItem 
            key={todo.id} 
            todo={todo} 
            toggleComplete={toggleComplete} 
            deleteTodo={deleteTodo} 
          />
        ))}
      </div>
    </div>
  );
}

export default TodoList;

4. 更新App.js

在App.js中导入并使用TodoList组件。

import React from 'react';
import TodoList from './TodoList';

function App() {
  return (
    <div className="App">
      <TodoList />
    </div>
  );
}

export default App;

5. 开发和测试

启动开发服务器以查看应用。

npm start

在浏览器中访问http://localhost:3000，你应该能够看到一个简单的Todo List应用，可以添加、完成和删除任务。

6. 构建项目

使用Webpack（已经内置于Create React App）进行打包。

npm run build

这会生成一个build目录，其中包含优化后的生产环境版本的应用。

7. 配置CI/CD

我们将使用GitHub Actions进行持续集成和部署。首先，在项目根目录创建.github/workflows目录，并在其中创建一个名为ci.yml的文件。

.github/workflows/ci.yml

name: CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14'
    - run: npm install
    - run: npm run build
    - name: Test Build Output
      run: echo "Build successful!"

此配置在每次推送到main分支或提交Pull Request时，都会执行自动化构建过程。

8. 部署应用

为了部署你的应用，你可以选择多种托管服务，例如Netlify、Vercel或GitHub Pages。以下是通过GitHub Pages部署的简要步骤：

1. 安装gh-pages包：

   npm install gh-pages --save-dev
   

2. 在package.json中添加以下脚本：

   "scripts": {
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build"
   },
   "homepage": "https://<username>.github.io/<repository-name>"
   

3. 部署应用：

   npm run deploy
   

完成这些步骤后，你的Todo List应用将被部署到GitHub Pages，并且每次推送到main分支时，CI流水线将自动构建和部署更新。

通过这个项目，你将体验到从创建React项目到配置CI/CD和部署的完整流程。希望这对你有所帮助！