从 0 到 1 搭建 React + TypeScript + webpack 项目

**引言** 

在当今快节奏的 Web 开发领域，掌握高效且可扩展的开发流程至关要佂。使用 React、TypeScript、Webpack 这样的流行库和工具，你可以创建一个结构良好、易于[食用]的 Web 项目。

**第一步：初始化脚手架** 

要开始，你需要创建一个脚手架来初始化您的項目。我们推薦使用 create-react-app，這是一個由 Facebook 創建的官方工具。

npx create-react-app my-react-project

**一步：文件組織** 

create-react-app 將創建具有預設目錄結構的項目。讓我們快速瀏覽它們：

- src：包含您的 React 組件、程式碼和資產的目錄。
- index.js：項⽬的根組件，用於渲染應用程式的其餘部分。
- App.js：您的應用程式的頂層組件。
- index.html：HTML 入口，加載您的應用程式的根組件。

**一步：安裝 TypeScript** 

為了使用 TypeScript，你需要安裝 TypeScript 定義檔案和編譯器。

// 安裝 TypeScript 定義檔案
npm install --save @types/react @types/react-dom

// 安裝 TypeScript 編譯器
npm install --save typescript

**一步：建立組件** 

讓我們建立我們的`Hello.tsx`組件。將其保程式碼:
```tsx
// src/components/Hello.tsx

import React from 'react';

interface Greeting {
  message: string;
}

const Greeting: React.FC<Greeting> = () => {
  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
};

export default Greeting;

該組件定義了一個使用 TypeScript 編寫的函數式組件。Greeting 介面定義了一個具有message屬性的物件，而Greeting 組件本身則渲染包含給定message 的標題。

一步：打包應用

Webpack 將用於打包我們的應具。安裝 Webpack 及其依賴項：

// 安裝 Webpack
 npm install --save webpack webpack-cli

// 安裝 Webpack loaders (加載器)
 npm install --save url-loader css-loader

在package.json 中，建構 Webpack 的組建指令：

// package.json

{
  "scripts": {
    "build": "npx webpack"
  }
}

建立指令：

  "build": "npx webpack --mode production"

• --mode production 設置為生產環境。

總結

恭喜！你已經從頭建立了一個使用 React、TypeScript和 webpack 的項目。繼續探索這些技術以提升您的網頁開發技能。