带你构建一个可扩展的React18 + TS4.x + Webpack5项目

2023-05-10 14:14:37

从头开始构建现代化的 React 应用程序：使用 React 18 + TypeScript 4.x + Webpack 5

创建项目结构
安装依赖项
配置 Webpack
添加基本功能
运行项目
常见问题解答
结论

创建项目结构

第一步是设置一个井然有序的目录结构，这将有助于您保持代码整洁，并使项目易于维护。以下是建议的结构：

├── node_modules
├── src
│   ├── components
│   ├── pages
│   ├── styles
│   ├── index.tsx
├── public
│   ├── index.html
│   ├── favicon.ico
├── package.json
├── tsconfig.json
├── webpack.config.js

安装依赖项

接下来，您需要使用包管理器 Yarn 安装所有必需的依赖项：

yarn install

这将安装项目所需的所有依赖项，包括 React、TypeScript、Webpack 等。

配置 Webpack

Webpack 是一个模块打包工具，用于将代码打包成浏览器可以理解的格式。您需要对 Webpack 进行配置，以便它能够正确地打包代码：

// webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 3000,
  },
};

添加基本功能

现在，您已经设置好了项目的基础结构，就可以开始添加一些基本功能了。

1. 创建 React 组件

首先，创建一个简单的 React 组件：

// src/components/HelloWorld.tsx

import React from 'react';

const HelloWorld = () => {
  return (
    <h1>Hello World!</h1>
  );
};

export default HelloWorld;

2. 渲染组件

接下来，您需要在主应用程序中渲染该组件：

// src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';

ReactDOM.render(
  <React.StrictMode>
    <HelloWorld />
  </React.StrictMode>,
  document.getElementById('root')
);

3. 添加 CSS 样式

最后，为了让应用程序看起来更美观，您可以添加一些 CSS 样式：

/* src/styles/main.css */

body {
  margin: 0;
  font-family: 'Helvetica', 'Arial', sans-serif;
}

h1 {
  color: #2196f3;
  font-size: 2.5rem;
  text-align: center;
}