React 快速入门：从 JSX 到列表渲染

学习 React 之前，我们通常使用原生 JavaScript 操作 DOM：

ini 复制代码

const div = document.createElement('div')
div.innerHTML = 'Hello React'
document.body.appendChild(div)

当页面越来越复杂时：

复制代码

DOM操作越来越多

代码越来越难维护

开发效率越来越低

因此 React 出现了。

什么是 React？

React 是一个：

swift 复制代码

用于构建用户界面（UI）的 JavaScript 框架（准确来说是库）

React 的核心目标：

复制代码

提高前端开发效率

开发者只需要关注：

复制代码

数据长什么样

页面就长什么样

而不需要频繁操作 DOM。

React 的特点

1. 声明式 UI

传统开发：

ini 复制代码

const div = document.querySelector('.box')
div.innerHTML = 'Hello'

需要手动操作 DOM。

React：

javascript 复制代码

function App() {
  return <h1>Hello React</h1>
}

只需要描述：

复制代码

页面应该长什么样

React 会自动完成更新。

2. 组件化开发

React 的核心思想：

scss 复制代码

组件(Component)

可以理解为：

复制代码

一个独立的小模块

例如：

css 复制代码

首页

├── Header
├── Banner
├── ProductList
├── Footer

每个部分都可以写成一个组件。

组件化开发的优势：

复制代码

代码复用

方便维护

职责清晰

开发效率高

开发大型项目时就像：

复制代码

搭积木

一样。

3. 单页应用（SPA）

React 通常用于开发：

vbnet 复制代码

Single Page Application
单页应用

特点：

css 复制代码

整个网站只有一个HTML页面

页面切换不重新刷新

用户体验更好

例如：

css 复制代码

知乎

掘金

B站后台

GitHub

都属于典型 SPA 应用。

4. 跨平台

React 不仅能开发 Web：

复制代码

React → Web

React Native → Android

React Native → iOS

一套 React 思维：

复制代码

多平台开发

创建 React 项目

create-react-app

React 官方曾经推荐：

lua 复制代码

npx create-react-app my-app

特点：

复制代码

配置完整

开箱即用

缺点：

复制代码

启动速度慢

打包速度慢

Vite

目前主流方式：

sql 复制代码

npm create vite@latest

特点：

复制代码

启动快

热更新快

构建快

现在绝大部分 React 新项目：

复制代码

Vite + React

JSX

React 最大的特点之一：

复制代码

JSX

什么是 JSX？

JSX：

复制代码

JavaScript + XML

通常表现为：

javascript 复制代码

const element = (
  <h1>Hello React</h1>
)

看起来像：

css 复制代码

HTML

实际上：

css 复制代码

不是HTML

是JS语法扩展

最终会被编译成：

scss 复制代码

React.createElement(...)

项目入口文件

React 项目中：

css 复制代码

main.jsx

通常是整个项目入口。

例如：

javascript 复制代码

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'

ReactDOM.createRoot(
  document.getElementById('root')
).render(
  <App />
)

流程：

css 复制代码

main.jsx

↓

App.jsx

↓

各个组件

JSX 中的表达式

JSX 支持：

复制代码

{}

插入 JavaScript。

例如：

javascript 复制代码

const name = 'Rose'

function App() {
  return <h1>{name}</h1>
}

结果：

css 复制代码

<h1>Rose</h1>

JSX 只能放表达式

可以：

arduino 复制代码

{name}

{1 + 2}

{true}

{arr.length}

因为这些都是：

复制代码

表达式

不能：

scss 复制代码

{
  if(true){}
}

因为：

arduino 复制代码

if

for

switch

属于语句

JSX 不支持直接书写语句。

列表渲染

React 中最常见的需求：

复制代码

根据数组生成多个元素

例如：

ini 复制代码

const list = [
  'Vue',
  'React',
  'Angular'
]

使用：

css 复制代码

<ul>
  {
    list.map(item => (
      <li>{item}</li>
    ))
  }
</ul>

渲染结果：

css 复制代码

<ul>
  <li>Vue</li>
  <li>React</li>
  <li>Angular</li>
</ul>

key

列表渲染时必须添加：

xml 复制代码

<ul>
  {
    list.map(item => (
      <li key={item}>
        {item}
      </li>
    ))
  }
</ul>

作用：

复制代码

帮助React识别元素

提高更新效率

条件渲染

根据条件显示不同内容。

三元表达式

javascript 复制代码

const isLogin = true

{
  isLogin
    ? <h1>已登录</h1>
    : <h1>未登录</h1>
}

&&

适用于：

复制代码

满足条件才显示

css 复制代码

{
  isLogin &&
  <h1>欢迎回来</h1>
}

等价于：

arduino 复制代码

isLogin为true

才显示组件

样式处理

React 中常见三种方式。

1. className

因为：

arduino 复制代码

class 是JS关键字

React 使用：

ini 复制代码

<div className="box">
  Hello
</div>

2. 行内样式

css 复制代码

<div
  style={{
    color: 'red',
    fontSize: '20px'
  }}
>
  Hello
</div>

特点：

复制代码

外层 {}

内层 {}

3. CSS文件

css 复制代码

.box{
  color:red;
}

arduino 复制代码

import './App.css'

ini 复制代码

<div className="box">
  Hello
</div>

这是项目开发中最常见的写法。

React 学习路线

学习完本篇内容后，下一步通常是：

复制代码

React基础

↓

组件

↓

Props

↓

State

↓

事件绑定

↓

useState

↓

useEffect

↓

组件通信

↓

React Router

↓

Redux / Zustand

↓

项目实战

一张图记忆

复制代码

React

│

├── JSX
│
├── 组件化
│
├── 声明式UI
│
├── SPA
│
└── 跨平台

JSX

│

├── 表达式
│
├── 列表渲染
│
├── 条件渲染
│
└── 样式处理

核心口诀

arduino 复制代码

React：

提高开发效率

核心特点：

声明式UI
组件化
SPA
跨平台

JSX：

JS + XML

只能写表达式

列表渲染：

map + key

条件渲染：

? :
&&

样式：

className
style
css文件

入口文件：

main.jsx