手把手教你打造一个 React + TypeScript 脚手架项目

2024-02-25 13:57:41

打造一个React+TypeScript脚手架项目

在现代Web开发中，React和TypeScript无疑是炙手可热的技术。React是一个用于构建用户界面的JavaScript库，而TypeScript是一种强类型的编程语言，以其卓越的错误捕获能力和代码维护性而著称。将这两者结合起来使用，您可以在开发React应用时获得无与伦比的体验。

搭建React + TypeScript脚手架项目

为了构建一个React + TypeScript脚手架项目，您需要：

Node.js
Git
Yarn或npm

创建项目

创建一个名为“my-react-app”的新文件夹。
打开终端并切换到该文件夹。
初始化一个新项目，使用Yarn或npm。

yarn init -y
# or
npm init -y

安装依赖项

安装React、React DOM和TypeScript等必要的依赖项。

yarn add react react-dom typescript
# or
npm install react react-dom typescript

创建TypeScript配置文件

在项目根目录创建名为“tsconfig.json”的文件，并添加以下内容：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "sourceMap": true
  }
}

创建Babel配置文件

在项目根目录创建名为“.babelrc”的文件，并添加以下内容：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

创建webpack配置文件

在项目根目录创建名为“webpack.config.js”的文件，并添加以下内容：

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.tsx",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "babel-loader"
      }
    ]
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"]
  },
  devServer: {
    contentBase: "./dist",
    port: 3000
  }
};

创建src目录

在项目根目录创建名为“src”的文件夹，并在其中创建名为“index.tsx”的文件，并添加以下内容：

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return <h1>Hello, world!</h1>;
};

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

创建public目录

在项目根目录创建名为“public”的文件夹，并在其中创建名为“index.html”的文件，并添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  
</head>
<body>
  <div id="root"></div>
  <script src="bundle.js"></script>
</body>
</html>