第二章：环境搭建与安装

创建React项目

1. 初始化React项目

使用Create React App（CRA）或Vite快速搭建React开发环境：

# 使用Create React App（传统方式）
npx create-react-app my-shadcn-app
cd my-shadcn-app

# 或使用Vite（推荐更快的现代构建工具）
npm create vite@latest my-shadcn-app --template react
cd my-shadcn-app

2. 项目结构说明

初始化后的典型目录结构：

my-shadcn-app/
├── node_modules/
├── public/
├── src/
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── package.json
└── vite.config.js (或 craco.config.js)

3. 启动开发服务器

npm run dev  # Vite项目
# 或
npm start    # Create React App项目

4. 清理模板文件（可选）

建议删除以下内容以保持干净起点：

  • 删除src/App.css所有内容
  • 清除src/index.css的预置样式
  • 移除App.jsx中的示例代码

5. 添加TypeScript支持（推荐）

若初始化时未选择TS，可通过：

npm install --save-dev typescript @types/react @types/react-dom
mv src/App.jsx src/App.tsx
mv src/main.jsx src/main.tsx

6. 验证安装

访问http://localhost:3000应看到空白页面（无错误），控制台显示React成功启动。

注意：建议使用Vite作为构建工具，因其对Tailwind CSS和现代前端工具链有更好的支持。后续Shadcn组件的样式系统将依赖于此环境配置。

Last Updated::