技术达人全栈 Todolist-client 篇(React Typescript) 指南

2023-11-06 23:35:18

前言

在当今数字化的时代，构建一个全栈应用已成为软件开发的必备技能。全栈开发要求开发者同时掌握前端和后端技术，能够独立完成整个应用的开发和部署。对于初学者来说，全栈开发可能是一个挑战，但也是一个难得的学习机会。本指南将带领大家一步步构建一个全栈 Todolist 应用，帮助大家掌握全栈开发的基础知识和技能。

项目初始化

首先，我们需要创建一个新的 React Typescript 项目。我们可以使用 create-react-app 工具来快速创建项目。在终端中执行以下命令：

npx create-react-app todolist-client --template typescript

前端开发

前端开发主要包括构建用户界面和实现前端逻辑。我们使用 React Typescript 来构建用户界面，TypeScript 是 JavaScript 的超集，它提供了静态类型检查和面向对象编程的支持，可以提高代码的可读性和可维护性。

1. 安装依赖

在项目根目录下，安装必要的依赖库：

npm install axios redux react-redux

2. 创建组件

在 src 目录下，创建 TodoList 组件，负责显示和管理任务列表：

import React, { useState } from 'react';

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

  const addTodo = (todo) => {
    setTodos([...todos, todo]);
  };

  const removeTodo = (todo) => {
    setTodos(todos.filter(t => t !== todo));
  };

  return (
    <div>
      <input type="text" placeholder="Add a todo" onKeyPress={(e) => { if (e.key === 'Enter') addTodo(e.target.value); }} />
      <ul>
        {todos.map((todo, index) => <li key={index}>{todo} <button onClick={() => removeTodo(todo)}>X</button></li>)}
      </ul>
    </div>
  );
};

export default TodoList;

3. 创建 Redux Store

在 src 目录下，创建 Redux store 来管理应用状态：

import { createStore } from 'redux';

const store = createStore((state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    case 'REMOVE_TODO':
      return state.filter(t => t !== action.payload);
    default:
      return state;
  }
});

export default store;

4. 连接组件和 Redux Store

在 src 目录下，创建 App 组件，负责将 TodoList 组件和 Redux store 连接起来：

import React from 'react';
import TodoList from './TodoList';
import { Provider } from 'react-redux';
import store from './store';

const App = () => {
  return (
    <Provider store={store}>
      <TodoList />
    </Provider>
  );
};

export default App;

后端开发

后端开发主要包括构建 API 接口和处理数据。我们使用 Node.js 和 Express.js 来构建后端 API。

1. 安装依赖

在项目根目录下，安装必要的依赖库：

npm install express body-parser

2. 创建服务器

在 src 目录下，创建 server.js 文件，负责启动服务器和定义 API 路由：

const express = require('express');
const bodyParser = require('body-parser');

const app = express();

app.use(bodyParser.json());

app.get('/todos', (req, res) => {
  res.json([]);
});

app.post('/todos', (req, res) => {
  res.json(req.body);
});

app.listen(3000);