本篇文章是专栏的第一篇文章。整合React入门所有必备基础知识点，解决掉新手无从下手、知识点零散的问题。

对比传统JS开发与React声明式开发的差异，讲解React组件化虚拟DOM单向数据流三大主要设计思想。项目搭建方式，适配新版React开发环境。详解项目目录结构、主要配置文件作用。其实，批量整合JSX语法全规则、表达式渲染、条件渲染、列表渲染、样式绑定、事件处理、this指向等入门主要知识点。搭配极简案例快速吃透基础语法。最终实战接入Ant Design组件库，完成安装、按需引入、主题简单配置。通过按钮、输入框、卡片等基础组件搭建首个React页面让新手零基础实现搭建项目、写代码、UI美化完整闭环，快速建立React开发认知。

. 为什么学 React？话说回来，从命令式到声明式

传统JavaScript操作DOM属于命令式编程你需要逐步告诉浏览器先找元素、再改属性、再绑事件。按理说，页面越复杂，代码越难维护。老实说，

React采用声明式编程你只需描述UI应该长什么样。React负责把数据映射到界面并高效更新。

. 传统JS与React对比

. 传统JS写法示例

// 命令式手动创建、插入、更新DOMconst btn = document.createElement;btn.textContent = '计数：';let count =，btn.addEventListener => {
count++;btn.textContent = `计数：${count}`;// 必须手动同步UI});document.getElementById.appendChild;

在这段代码里count是数据。btn.textContent是视图，两者必须由开发者手动保持一致。每增加一个UI元素，就要写更多DOM API，逻辑与视图逐渐耦合成一团。和数据对不上，

. React写法示例

import { useState } from 'react';function Counter {
const = useState;return (
 setCount}>
计数的观点是，{count}

);怎么说呢，}

、界面应如何呈现。老实说，  {count} 会自动渲染到按钮文字； 使用者点击时只需调用。React会对比前后差异并更新DOM，无需再手动修改文本内容。

. React 三大主要设计思想

. 组件化 Component

React把UI拆成独立、可复用的组件，如同积木一样组合页面。怎么说呢，每个组件负责一块界面及其交互逻辑：

function Welcome {
return;}
function App {
return (




);}
<''><''>
<''>
<''>"&"&"&，"&"&，"
"&"
"&，"
"&">"
<\!DOCTYPE html>
schema.org/>
type=\"text/html\" encoding=\"utf8\">
schema.org/>
type=\"text/html\" encoding=\"utf8\">
type=\"text/html\" encoding=\"utf8\">
type=\"text/html\" encoding=\"utf8\">\t\t\t\t\t\t\t\t"
注：This snippet demonstrates how a single component can be reused with different props."\t\t"."
**请注意** 上述代码中出现了一些乱码和格式错误，请在实际项目中使用正确的 JSX 写法。说到****，* **代码复用** —— 同一个 Button 等封装好的组件可以在多个场景直接调用。* **逻辑与样式隔离** —— 各个组件独立维护自身业务逻辑和样式。* **团队协同** —— 开发人员可分工负责不同组件，实现并行开发。


虚拟 DOM

虚拟 DOM 是轻量级内存中的树结构。用来做高效 diff 与 patch，从而避免全量重绘带来的性能损耗。
mermaid
flowchart LR
A --> B
B --> C
C --> D
D --> E


单向数据流

从父传子。再由子通过回调通知父更新 state，实现可追踪的数据流向。
mermaid
sequenceDiagram
participant S as State
participant V as View
participant U as User
再看S->-V，props驱动渲染
U->-V这方面，点击/输入等交互
再看V->-S，调用setState
再看S->-V。重新渲染


环境搭建 Vite+React 项目创建

前置要求


工具 
推荐版本 
用途 

Node.js≥18运行 npm 、Vite npm / pnpm最新 LTS包管理 
Node.js v18+ npm v8+ 
运行依赖管理 VS Code 任意编辑器 

bash
node --version # 应输出 v18.x 或更高
npm --version # 推荐 LTS
若 Node 版本低于18，请前往 nodejs.org 安装 LTS。

创建项目
bash
npm create vite@latest my-react-app -- --template react-ts && cd my-react-app && npm install && npm run dev


npm create vite@latest 会调用官方脚手架，无需全局安装 Vite。话说回来，

--template react-ts 使用 React + TypeScript 模板。以类型提示降低错误率，

npm run dev 启动开发服务器，可在 http://localhost:{port} 查看默认页面。


Vite 开发时序



阶段
描述




冷启动
不打包直接启动 Dev Server 秒级启动


按需编译
浏览器请求模块时才编译


HMR
修改代码后热替换保留状态


建立
npm run build 使用 Rollup 打包调整



mermaid
sequenceDiagram
participant Dev as 开发者
participant Vite as Vite Dev Server
participant Browser as 浏览器
Dev->-Vite : 保存源码
Vite->-Vite : 检测变更并编译模块
Vite->-Browser : WebSocket 推送 HMR
Browser->-Browser : 局部热替换


项目目录结构与主要配置

标准目录结构
csharp
react_demo/
├── public/ # 静态资源。原样复制到 dist
├── src/
│ ├── assets/ # 图片/字体等需 import 的资源
│ ├── App.tsx # 根组件
│ ├── main.tsx # 应用入口
│ └── index.css # 全局样式
├── demo/
│ ├── examples/ # JSX/事件/列表示例
│ └── antd-page/ # Ant Design 实战页面
├── index.html # HTML 模板
├── vite.config.ts # Vite 配置
├── tsconfig.json # TypeScript 配置
└── package.json # 依赖与脚本

主要文件说明



文件
用途




index.html
页面骨架，包括 

 挂载点


src/main.tsx
调用 createRoot 把 React 树挂载到 DOM


src/App.tsx
根组件组织页面结构


vite.config.ts
插件配置


package.json
包含依赖版本及 dev/build 脚本




entry file main.tsx
tsx
import { StrictMode } from 'react';import { createRoot } from 'react-dom/client';import './index.css';import App from './App';createRoot，).render(


,);

vite.config.ts
ts
import { defineConfig } from 'vite';import react from '@vitejs/plugin-react';export default defineConfig({
plugins:,});


JSX语法规则
JSX 是 JavaScript 的语法
在文件中写类似 HTML 的结构，它最终会被编译为 `