手动搭建前端项目（React+Antd+TS）打造精彩开发之旅

前端

2023-12-03 05:46:32

前言

作为一名前端工程师，手动搭建自己的项目是必备技能。今天，我们使用Webpack 5、React、TypeScript和Ant Design一起动手搭建一个前端项目，一步一步地完成整个过程，将所学知识应用于实践。

项目需求

假设我们要构建一个简单的待办事项应用程序。用户可以添加、删除和标记待办事项。此外，我们希望该应用程序具有响应式设计，以便在不同设备上都能良好显示。

技术栈

为了实现项目需求，我们将使用以下技术栈：

Webpack 5 ：模块打包工具，用于将前端代码打包成一个或多个文件，以便在浏览器中运行。
React ：一个流行的JavaScript库，用于构建用户界面。
TypeScript ：一种静态类型化的编程语言，可以帮助我们编写更健壮的代码。
Ant Design ：一个企业级UI组件库，可以帮助我们快速构建美观的界面。

搭建步骤

初始化项目

首先，我们需要创建一个新的项目目录，并初始化一个npm包。

mkdir my-todo-app
cd my-todo-app
npm init -y

安装依赖项

接下来，我们需要安装必要的依赖项。

npm install webpack webpack-cli react react-dom typescript ts-loader @types/react @types/react-dom @ant-design/antd

创建Webpack配置文件

接下来，我们需要创建一个Webpack配置文件。

const path = require('path');

module.exports = {
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
};

创建React组件

接下来，我们需要创建React组件。

import React from 'react';

const TodoItem = (props) => {
  return (
    <li>
      <input type="checkbox" checked={props.completed} onChange={() => props.onToggle(props.id)} />
      <label>{props.text}</label>
      <button onClick={() => props.onDelete(props.id)}>Delete</button>
    </li>
  );
};

export default TodoItem;

创建Redux Store

接下来，我们需要创建Redux Store。

import { createStore } from 'redux';

const initialState = {
  todos: [],
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, action.payload],
      };
    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map((todo) => (todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo)),
      };
    case 'DELETE_TODO':
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.payload),
      };
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;

创建React应用程序

接下来，我们需要创建React应用程序。

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import store from './store';
import TodoList from './TodoList';

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

  useEffect(() => {
    store.subscribe(() => {
      setTodos(store.getState().todos);
    });
  }, []);

  return (
    <div>
      <h1>Todo App</h1>
      <TodoList todos={todos} />
    </div>
  );
};

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