（三）React19+TS基础进阶与实战完全指南

开发环境与核心概念

React 思想与前端演进

命令式编程：

JavaScript 和 jQuery 等库。其核心思路是"命令式"的：开发者需要精确地告诉浏览器"第一步，找到这个 DOM 元素；第二步，修改它的样式；第三步，替换它的文本内容"。

MVC 和 MVVM 等设计模式：

AngularJS 和早期 Vue 框架。它们通过数据绑定的方式，将开发者从繁琐的 DOM 操作中解放出来

声明式编程：

React 的核心思想可以被精炼为一个公式：UI = f(State)。你不再需要思考当数据变化时，应该如何分步去修改界面。你唯一需要做的，就是清晰地描述出"在任何特定状态下，你的界面应该是什么样子"。当状态发生改变时，React 会像一个高效的管家，自动地、以最优的方式去计算出新旧界面之间的差异，并更新真实 DOM 中需要变化的部分。

使用 Vite 搭建 React + TypeScript 开发环境

Vite 是一个前端构建工具，其核心优势在于，它利用了现代浏览器原生支持 ES Module 的特性，在开发阶段无需对所有代码进行打包，实现了瞬时的服务器启动和热模块更新（HMR）。加速了开发和调试的反馈循环。

bash 复制代码

npm create vite@latest

执行该命令后，Vite 会启动一个交互式的脚手架，引导您完成项目的配置。您需要依次输入项目名称，然后使用键盘方向键选择 React 作为开发框架，再选择 TypeScript 作为变体。

bash 复制代码

npm create vite projectName --template=react-ts

该命令直接创建项目，少去了通过命令行提示来去逐步创建项目的时间

bash 复制代码

npm install

安装依赖

flag npm与pnpm区别?

下载安装pnpm，推荐使用pnpm

bash 复制代码

npm install -g pnpm

以下命令等价

bash 复制代码

npm run dev
pnpm dev

介绍vite项目矿建文件

待补充

bash 复制代码

vite.config.ts：构建react相关的项目内容
tsconfig.json：配置ts编译
tsconfig.app.json：前端应用层配置ts编译
tsconfig.node.json：node环境配置ts编译
eslint config.js：项目规范化处理
src：项目代码

深入 JSX 语法与实践技巧

浏览器中只能运行JS代码，所以JSX代码会被编译成JS代码

JSX是JS的扩展语法。每一行 JSX 代码，在经过编译后，都会被转换为一个普通的 JavaScript 函数调用------React.createElement()。例如，这样一行 JSX：

javascript 复制代码

<h1 className="title">Hello, React</h1>

其本质是下面这行代码的"语法糖"：

javascript 复制代码

React.createElement('h1', { className: 'title' }, 'Hello, React');

可以使用大括号 {} 在 JSX 中嵌入任何有效的 JavaScript 表达式，无论是变量、数学运算，还是函数调用。

javascript 复制代码

const user = { name: 'Alice', level:  };
const greeting = ( 
    <h1> 
       Welcome, {user.name.toUpperCase()}! Your access level is {user.level + 1}
    </h1>
);

JSX核心规则

一个组件返回的 JSX 必须拥有一个单一的根元素。如果想返回并列的多个元素，可以用一个外层 div或者Fragment (<>...</>) 包裹它们。
由于 JSX 最终会被编译成 JavaScript，一些 HTML 属性的写法需要调整以避免与 JavaScript 的保留关键字冲突。 class 属性需要写成 className ，for 属性需要写成 htmlFor ，事件名也遵循驼峰命名法，如onclick 变为 onClick。

函数式组件与 Class 组件对比

不学习