如何不借助额外框架创建新的React TypeScript项目？

如果你想搭建一个只依赖React核心库的TypeScript项目，完全不需要Next.js、Remix这类框架，按以下步骤操作即可：

1. 初始化项目 #

先创建项目目录并初始化npm：

mkdir react-ts-starter && cd react-ts-starter
npm init -y

2. 安装核心依赖 #

安装React、ReactDOM以及TypeScript相关的类型包：

npm install react react-dom
npm install --save-dev typescript @types/react @types/react-dom

3. 配置TypeScript #

生成TypeScript配置文件并修改关键参数：

npx tsc --init

打开生成的tsconfig.json，调整以下配置项：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "jsx": "react-jsx",
    "strict": true,
    "moduleResolution": "bundler",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

4. 创建项目文件结构 #

建立如下文件结构：

react-ts-starter/
├── public/
│   └── index.html
├── src/
│   ├── App.tsx
│   └── index.tsx
├── tsconfig.json
└── package.json

编写public/index.html #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React TypeScript Starter</title>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="/src/index.tsx"></script>
</body>
</html>

编写src/App.tsx #

export default function App() {
  return <h1>Hello React TypeScript!</h1>;
}

编写src/index.tsx #

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

5. 配置打包工具（以Vite为例） #

Vite是轻量快速的打包工具，适合这类极简项目：

npm install --save-dev vite @vitejs/plugin-react

创建vite.config.ts：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist',
  },
});

在package.json中添加脚本：

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  }
}

6. 运行项目 #

启动开发服务器：

npm run dev

访问终端输出的本地地址，就能看到你的React TypeScript应用了。执行npm run build可以打包生产版本，输出到dist目录。

内容的提问来源于stack exchange，提问作者Iter Ator