基础概念

  1. ECMAScript

    ECMAScript（ES）是 JavaScript 的新标准，添加了许多新的语法和功能，使 JS 代码更简洁、强大、易读。

    核心特性：使用 let 和 const 代替 var；箭头函数；async 和 await等。

  2. JavaScript

    JavaScript（简称 JS）是一种前端编程语言，主要用于网页交互，JavaScript 是 ECMAScript 规范的一个实现。例如：

    • 动态更新内容（比如无刷新加载新数据）
    • 处理用户交互（点击按钮、表单输入等）
    • 动画和特效
    • 与服务器通信（获取或发送数据）

    它是Web 开发的核心语言，与 HTML、CSS 一起构成了现代网页的基础。

  3. TypeScript (TS)

    TypeScript 是由 Microsoft 开发的一个超集，它是在 JavaScript 的基础上增加了 静态类型 和 类型检查，并支持 ES6+ 的所有特性。

    TypeScript 引入了强类型的概念，你可以为变量、函数参数、返回值等指定明确的类型。编译时会检查类型错误，避免运行时的潜在问题。

    支持接口（interface）、类（class）、枚举（enum）、泛型（generics）等高级功能。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

    // 类型注解
let name: string = "John";
let age: number = 30;

// 定义一个函数并指定参数类型和返回类型
function greet(name: string): string {
    return `Hello, ${name}!`;
}

console.log(greet(name));  // TypeScript 会检查 greet 是否按预期使用

// 接口
interface Person {
    name: string;
    age: number;
}

const person: Person = {
    name: "John",
    age: 30
};

  4. React

    React 是一个用于构建用户界面的 JavaScript 框架，由 Facebook 于 2013 年创建。它最初用于构建 Facebook 网站，后来成为开发web应用程序最流行的 JavaScript 框架之一。

    React 应用程序是由 组件 组成的。一个组件是 UI（用户界面）的一部分，它拥有自己的逻辑和外观。组件可以小到一个按钮，也可以大到整个页面。React 组件是返回标签的 JavaScript 函数

    JSX（JavaScript XML）

    JSX是 React 提供的一种语法扩展，让你可以在 JavaScript 代码中直接编写类似 HTML 的代码。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

    const name = "React";
const element = <h1>Hello, {name}!</h1>;  // 输出：Hello, React!

// 使用一个 <div> 包裹
return (
<div>
    <h1>Hello</h1>
    <p>World</p>
</div>
);

// 或者使用 Fragment（推荐）
return (
<>
    <h1>Hello</h1>
    <p>World</p>
</>
);

    在 React 组件中使用 TypeScript

    每个包含 JSX 的文件都必须使用 .tsx 文件扩展名。这是一个 TypeScript 特定的扩展，告诉 TypeScript 该文件包含 JSX。

  5. React框架

    • Ant Design Pro: 是基于 Ant Design 构建的一个企业级前端框架，主要针对管理后台系统、后台管理界面（Admin Dashboard）等复杂应用。Ant Design Pro 以 umi 作为脚手架，启动和开发与 umi 基本相同。
    • Next.js: Next.js 是一个基于 React 的 框架（Framework），它对 React 进行了扩展，使其更适合用于 服务器端渲染（SSR）、静态站点生成（SSG）、SEO 友好 的应用开发。（Next.js = React + 服务器端渲染 + 静态生成 + 更强的 SEO + 更好的开发体验）

  6. node

    是一个基于 Chrome V8 引擎的 JS 运行环境。

  7. nvm

    node 版本管理器，也就是说：一个 nvm 可以管理多个 node 版本（包含 npm 与 npx），可以方便快捷的 安装、切换 不同版本的 node。

    如果你使用 nvm 来管理 Node.js 版本，npm 版本会随着 Node.js 版本的变化而变化。

    1

    nvm use v20 # brew install node@20，然后使用nvm切换node版本

常用命令

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

# 用脚手架新建初始化项目
npx create-react-app 项目名
或 npx create-react-app 项目名 --template typescript
或 npx create-next-app@latest

# 更新构建工具
npm install react-scripts@latest

# 检查 React 和 React DOM 的版本
npm list react react-dom

# 下载一个旧项目到本地，启动前需要执行安装依赖node_module
yarn install

在 macOS 上手动调整 React 版本到 18.x.x

  1. 创建一个新的 React 项目

    1

    npx create-react-app test1

  2. 删除 node_modules 和 package-lock.json

    1
2
3
4

    cd test1  # 进入项目文件夹

rm -rf node_modules
rm package-lock.json

  3. 手动调整 React 版本为 18.x.x

    1

    npm install react@18 react-dom@18

  4. 安装依赖

    1

    npm install

  5. 验证 React 版本

    1

    npm list react react-dom

  6. 运行项目

    1

    npm start