React+TS 安装

创建一个React+TS+Vite项目

使用pnpm

• pnpm 怎么安装 自行查找 本人不在这里介绍

pnpm create vite
或者要是TS项目直接
pnpm create vite --template react-ts

创建步骤

• 输入项目名称 和选择框架

│
◇ Project name:
│ demo1
│
◆ Select a framework:
│ ○ Vanilla
│ ○ Vue
│ ● React
│ ○ Preact
│ ○ Lit
│ ○ Svelte
│ ○ Solid
│ ○ Ember
│ ○ Qwik
│ ○ Angular
│ ○ Marko
│ ○ Others
│ ↑/↓ to navigate • Enter: confirm

• 选择语言

│
◇ Project name:
│ demo1
│
◇ Select a framework:
│ React
│
◆ Select a variant:
│ ○ TypeScript
│ ● TypeScript + React Compiler
│ ○ JavaScript
│ ○ JavaScript + React Compiler
│ ○ RSC
│ ○ React Router v7 ↗ https://reactrouter.com
│ ○ TanStack Router ↗ https://tanstack.com/router
│ ○ RedwoodSDK ↗ https://rwsdk.com
│ ○ Vike ↗ https://vike.dev
│ ↑/↓ to navigate • Enter: confirm

• 选择Eslint

◇  Project name:
│  demo1
│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  TypeScript + React Compiler
│
◆  Which linter to use?
│  ○ Oxlint
│  ● ESLint
│  ↑/↓ to navigate • Enter: confirm

• 选择安装依赖

│
◇  Project name:
│  demo1
│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  TypeScript + React Compiler
│
◇  Which linter to use?
│  ESLint
│
◆  Install with pnpm and start now?
│  ● Yes / ○ No
└

清理多余的

src 目录

- src
  - App.tsx
  - main.tsx

App.tsx

function App() {
  return (
    <div>
      <h1>Hello React</h1>
    </div>
  )
}

export default App

运行即可查看效果

npm run dev