React笔记

创建基础React项目

环境准备

node -v # 查看Node 版本
npm -v # 查看npm版本

创建项目（1种）

打开终端，运行以下命令（my-react-ts-app 为项目名，可自定义）

npx create-react-app my-react-ts-app --template typescript

• --template typescript：指定使用 TypeScript 模板（默认是 JavaScript）。
• 首次运行会自动安装 create-react-app 工具，耐心等待依赖安装完成。

启动后，浏览器会自动打开 http://localhost:3000，看到 React 初始页面即表示成功。

创建项目（2种）

Vite 是比 create-react-app 更高效的构建工具，适合需要快速开发和灵活配置的项目。

1. 创建项目

终端运行以下命令：

npm create vite@latest

按照提示操作：

1. 输入项目名（如 my-react-ts-app）；
2. 选择框架：React；
3. 选择变体：React + TypeScript（或 React + TypeScript + SWC，SWC 是更快的编译器）。

2. 安装依赖并启动

cd my-react-ts-app  # 进入项目目录
npm install         # 安装依赖
npm run dev         # 启动开发服务器（Vite 默认端口 5173）

项目结构解析（以 Vite 为例，Create React App 类似）

my-react-ts-app/
├── node_modules/       # 依赖包
├── public/             # 静态资源（图片、 favicon 等）
├── src/
│   ├── assets/         # 图片、样式等资源
│   ├── components/     # 自定义组件（TypeScript 组件）
│   ├── App.tsx         # 根组件（TypeScript 版）
│   ├── index.tsx       # 入口文件（挂载根组件）
│   ├── vite-env.d.ts   # Vite 类型声明（TypeScript 类型提示）
│   └── tsconfig.json   # TypeScript 配置文件
├── .eslintrc.cjs       # ESLint 配置（代码规范检查）
├── index.html          # 入口 HTML
└── package.json        # 项目依赖和脚本

编写第一个 TypeScript 组件

在 src/components 目录下创建 Greeting.tsx：

// src/components/Greeting.tsx
import React from 'react';

// 定义组件 props 的类型
interface GreetingProps {
  name: string;       // 必传参数，字符串类型
  age?: number;       // 可选参数，数字类型
  isStudent: boolean; // 必传参数，布尔类型
}

// TypeScript 函数组件（通过泛型指定 props 类型）
const Greeting: React.FC<GreetingProps> = ({ name, age, isStudent }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      {age && <p>Age: {age}</p>}
      <p>Is student: {isStudent ? 'Yes' : 'No'}</p>
    </div>
  );
};

export default Greeting;

在 App.tsx 中使用该组件：

// src/App.tsx
import React from 'react';
import Greeting from './components/Greeting';
import './App.css';

function App() {
  return (
    <div className="App">
      <Greeting name="Alice" age={20} isStudent={true} />
      {/* 注意：如果不传 name 或 isStudent，TypeScript 会报错（类型检查） */}
    </div>
  );
}

export default App;

常用命令

命令	作用
npm start / npm run dev	启动开发服务器（热更新）
npm run build	构建生产环境代码（输出到 build 或 dist 目录）
npm run lint	检查代码规范（需要 ESLint 配置）
npm test	运行测试（Create React App 内置 Jest）

扩展配置（可选）

TypeScript 配置优化：

编辑 tsconfig.json，可开启严格模式（推荐）：

{
  "compilerOptions": {
    "strict": true,        // 开启所有严格类型检查
    "noImplicitAny": true, // 禁止隐式 any 类型
    "skipLibCheck": true   // 跳过库类型检查（加速编译）
  }
}

添加路由：

安装 React Router（TypeScript 版）：

npm install react-router-dom @types/react-router-dom

添加 UI 组件库：

如 Ant Design（支持 TypeScript）：

npm install antd

两种方案对比

特性	Create React App	Vite
构建速度	较慢（基于 Webpack）	极快（基于 esbuild）
配置灵活性	封装较深，需 eject 暴露配置	配置文件简洁，可直接修改
热更新	页面整体刷新（大型项目较慢）	模块热替换（HMR），局部更新
适合场景	快速启动、零配置需求、新手入门	大型项目、追求开发效率、自定义配置

根据需求选择即可，新手推荐从 Create React App 入手，熟悉后可尝试 Vite。