对于前端开发者而言，React 是目前行业内使用率最高、就业适配性最强的前端框架之一。无论是企业级中后台管理系统、AI 交互平台、移动端 H5 页面，还是跨端 React Native 应用，核心技术栈均以 React 为基础。很多初学前端的同学，在入门 React 时会混淆 JSX 语法、组件逻辑、状态与属性的使用规则，导致项目开发报错频繁、代码冗余、逻辑混乱。
本文将从零开始，系统讲解 React 四大核心基础知识点：JSX 语法、组件开发、State 内部状态、Props 组件传值，搭配大量可直接运行的实战代码、易错点解析、基础最佳实践，全程避开老旧类组件知识点，聚焦目前企业主流的函数组件 + Hooks 开发模式，零基础也能完整吃透 React 基础，直接适配项目开发和前端面试。
一、React 核心概念前置认知
1.1 什么是 React？
React 是由 Meta（原 Facebook）团队开发的声明式、组件化、跨平台前端 JavaScript 库，核心作用是高效构建用户交互界面。
和原生 JS 相比，React 彻底摒弃了手动操作 DOM 的开发模式，通过数据驱动视图的核心思想，实现数据更新、页面自动渲染，极大降低了复杂页面的开发和维护成本，这也是 React 在企业项目中垄断性普及的核心原因。
1.2 React 核心三大特性

• 声明式编程：只需定义页面最终状态，无需手动操作 DOM，框架自动处理页面渲染更新，代码更简洁、可读性更高。
• 组件化开发：将复杂页面拆分为独立、可复用的小型组件，支持组合拼接，适配大型项目开发。
• 数据驱动视图：分为 State（内部状态）和 Props（外部传值），数据变化自动触发页面更新，无需手动刷新页面。
  1.3 开发环境快速搭建
  本文所有代码基于 Vite 搭建 React 项目（相较于 Create-React-App，启动更快、热更新更高效），搭建命令如下：

创建react项目

npm create vite@latest react-basic-demo – --template react

进入项目目录

cd react-basic-demo

安装依赖

npm install

启动项目

npm run dev
项目启动成功后，默认端口为 5173，后续所有案例代码均可直接替换 src/App.jsx 文件内容运行测试。
二、JSX 语法：React 的核心模板语法
2.1 JSX 是什么？
JSX 是 React 独创的JavaScript XML 语法，是一种 JS 和 HTML 混合的语法糖。简单来说：JSX 允许我们在 JS 代码中直接编写 HTML 结构，无需拼接字符串、无需创建 DOM 节点，是 React 组件开发的基础。
浏览器无法直接识别 JSX 语法，项目运行时会通过 Babel 工具将 JSX 编译为原生 JS 代码，最终完成页面渲染。
2.2 JSX 基础语法规则（必记）
很多新手报错 80% 都是因为违反 JSX 语法规则，以下是核心强制规则：

• JSX 结构必须有唯一根标签，多个标签必须包裹在一个父标签内，可使用空标签 <></>（Fragment）避免多余 DOM 节点；
• 所有标签必须闭合，单标签必须自闭合（如 img、input、br）；
• HTML 关键字冲突属性重命名：class 改为 className、for 改为 htmlFor；
• JS 变量、表达式需包裹在 {} 中，支持四则运算、三元表达式、函数调用；
• JSX 中不能直接书写语句（if、for、while），仅支持表达式。
  2.3 JSX 实战代码案例
  // App.jsx
  import React from ‘react’

function App() {
// 定义JS变量
const username = “前端学习者”
const age = 21
const isVip = true

return (
// 空根标签，不渲染多余DOM
<>

JSX基础实战演示

{/* 1. 直接渲染变量 /}

用户名：{username}

{/ 2. 四则运算表达式 /}

年龄+5：{age + 5}

{/ 3. 三元表达式做条件渲染 /}

会员状态：{isVip ? “VIP会员” : “普通用户”}

{/ 4. 行内样式写法（驼峰命名） /}
<p style={{ color: ‘red’, fontSize: ‘18px’ }}>红色文字，18号字体
{/ 5. 类名样式绑定 */}

绑定自定义样式类名

</>
)
}

export default App
2.4 JSX 列表渲染（企业高频用法）
前端项目中表格、列表、菜单均需要批量渲染数据，JSX 通过 map 方法实现列表渲染，渲染时必须绑定唯一 key 值，提升 DOM diff 算法效率。
import React from ‘react’

function App() {
// 模拟后端返回的列表数据
const articleList = [
{ id: 1, title: ‘React基础入门’, author: ‘技术博主’ },
{ id: 2, title: ‘Hooks实战教程’, author: ‘技术博主’ },
{ id: 3, title: ‘前端面试指南’, author: ‘技术博主’ }
]

return (
<>

文章列表渲染

• 
  {
  articleList.map(item => (
  // key使用唯一id，禁止使用索引（避免列表错乱bug）
  
• 
  标题：{item.title} - 作者：{item.author}
  
• 
  ))
  }
  

</>
)
}

export default App
新手易错点：禁止用 index 索引作为 key，当列表新增、删除、排序时，会导致 DOM 渲染错乱、组件状态丢失。
三、React 组件：项目开发的核心单元
3.1 组件的定义与分类
组件是 React 页面的最小单元，本质是一个返回 JSX 结构的函数，可以独立开发、复用、嵌套，大型项目就是由无数个组件拼接而成。
目前企业 100% 主流使用 函数组件，废弃老旧的类组件，本文全程只讲解函数组件开发规范。
3.2 基础函数组件创建与复用
组件命名必须首字母大写（React 区分大小写，小写为原生 HTML 标签，大写为自定义组件），支持单独文件封装、多处复用。
// 封装独立组件：ButtonBtn.jsx
import React from ‘react’

// 自定义按钮组件
const ButtonBtn = () => {
return <button style={{ padding: ‘6px 12px’, margin: ‘0 5px’ }}>自定义按钮
}

export default ButtonBtn
在主组件中引入复用：
// App.jsx
import React from ‘react’
import ButtonBtn from ‘./ButtonBtn’

function App() {
return (
<>

组件复用演示

{/* 多次复用自定义组件 */}



</>
)
}

export default App
3.3 组件嵌套规则
React 支持组件无限嵌套，父组件可以引入子组件，子组件可以引入孙组件，符合模块化开发思想，让代码结构更清晰，便于维护迭代。后续中后台项目的侧边栏、导航栏、表格、弹窗，均为独立嵌套组件。
四、Props 组件属性：父子组件传值核心
4.1 Props 核心特性
Props 是组件的外部传值参数，用于实现父组件向子组件传递数据、方法，核心特性：

• 只读性：子组件无法修改 props 数据，只能读取，保证数据单向流动；
• 复用性：通过传不同参数，实现组件差异化展示；
• 通用性：支持传递字符串、数字、数组、对象、函数、JSX 等所有数据类型。
  4.2 Props 基础传值实战
  // UserCard.jsx 子组件
  import React from ‘react’

// 接收父组件传递的props参数
const UserCard = (props) => {
return (
<div style={{ border: ‘1px solid #ccc’, padding: ‘10px’, width: ‘200px’, margin: ‘10px 0’ }}>

姓名：{props.name}

年龄：{props.age}

岗位：{props.job}

)
}

export default UserCard
父组件传值调用：
// App.jsx
import React from ‘react’
import UserCard from ‘./UserCard’

function App() {
return (
<>

Props父子传值演示

{/* 给子组件传递不同参数，实现复用差异化 */}


</>
)
}

export default App
4.3 Props 解构赋值与默认值（企业规范写法）
原生 props 写法代码冗余，企业开发统一使用解构赋值，同时配置默认值，避免父组件未传参导致页面报错。
// UserCard.jsx 优化版
import React from ‘react’

// 直接解构props，设置默认值
const UserCard = ({ name = “匿名用户”, age = 18, job = “实习生” }) => {
return (
<div style={{ border: ‘1px solid #ccc’, padding: ‘10px’, width: ‘200px’ }}>

姓名：{name}

年龄：{age}

岗位：{job}

)
}

export default UserCard
此时父组件不传参，子组件会自动使用默认值，完美规避报错问题。
4.4 Props 传递函数（子父组件通信）
Props 不仅可以传数据，还可以传函数，实现子组件向父组件传值，是 React 基础通信的核心用法。
// ChildBtn.jsx 子组件
import React from ‘react’

const ChildBtn = ({ sendMsg }) => {
const msg = “子组件传递的消息”
return (
<button onClick={() => sendMsg(msg)}>点击向父组件传值
)
}

export default ChildBtn
父组件接收子组件数据：
// App.jsx
import React from ‘react’
import ChildBtn from ‘./ChildBtn’

function App() {
// 定义父组件函数，接收子组件参数
const getChildMsg = (data) => {
console.log(‘接收子组件数据：’, data)
}

return (
<>

子父组件通信演示

</>
)
}

export default App
五、State 状态：组件内部可响应数据
5.1 State 核心概念
Props 是外部只读数据，而 State 是组件内部的可变状态，是实现页面交互、数据更新的核心。当 State 数据发生变化时，React 会自动重新渲染组件，更新页面视图，真正实现数据驱动视图。
函数组件通过 React 内置钩子 useState 定义状态，是企业开发最基础、最高频的 Hooks。
5.2 useState 基础语法与实战
语法：const [状态变量, 修改状态方法] = useState(初始值)
// App.jsx
import React, { useState } from ‘react’

function App() {
// 定义计数器状态，初始值为0
const [count, setCount] = useState(0)

return (
<>

State状态更新演示

当前计数：{count}

{/* 点击按钮修改状态，页面自动更新 */}
<button onClick={() => setCount(count + 1)}>点击加1
<button onClick={() => setCount(count - 1)} style={{marginLeft: ‘10px’}}>点击减1
</>
)
}

export default App
核心规则：禁止直接修改 state 变量（count++），必须通过官方提供的 set 方法修改，否则无法触发页面更新。
5.3 复杂数据类型 State（数组/对象）
实际项目中，状态大多是对象、数组格式，修改时必须遵循不可变性：不修改原数据，通过拷贝新数据替换更新。
import React, { useState } from ‘react’

function App() {
// 对象状态
const [user, setUser] = useState({
name: “小明”,
age: 20,
gender: “男”
})

// 数组状态
const [list, setList] = useState([1, 2, 3, 4])

// 修改用户信息
const changeUser = () => {
// 展开原对象，覆盖新属性（不可直接修改原对象）
setUser({ …user, name: “小红”, age: 21 })
}

// 新增数组数据
const addList = () => {
setList([…list, list.length + 1])
}

return (
<>

复杂状态更新

姓名：{user.name}，年龄：{user.age}

修改用户信息

数组数据：{list.join(‘、’)}

数组新增数据
</>
)
}

export default App
5.4 State 与 Props 核心区别（面试必问）
对比维度
State（状态）
Props（属性）
数据来源
组件内部定义
父组件传递而来
可修改性
可通过set方法修改
只读，子组件无法修改
作用场景
组件内部交互、数据更新
组件复用、父子通信
生命周期
组件销毁，状态清空
跟随父组件传递，可多层穿透
六、综合实战：React 基础整合案例
结合本文所有知识点，实现一个可复用用户卡片、数据动态更新、父子传值的综合案例，完整覆盖 JSX、组件、Props、State 四大核心。
子组件 UserCard.jsx
import React from ‘react’

// 解构props并设置默认值
const UserCard = ({ name, age, hobby, delUser, index }) => {
return (
<div style={{
border: ‘1px solid #eee’,
padding: ‘15px’,
margin: ‘10px 0’,
borderRadius: ‘8px’,
width: ‘220px’
}}>

姓名：{name}

年龄：{age}

爱好：{hobby}

<button
onClick={() => delUser(index)}
style={{ marginTop: ‘10px’, color: ‘red’, border: ‘none’, padding: ‘4px 8px’, borderRadius: ‘4px’ }}
>
删除该用户


)
}

export default UserCard
主组件 App.jsx
import React, { useState } from ‘react’
import UserCard from ‘./UserCard’

function App() {
// 定义用户列表状态
const [userList, setUserList] = useState([
{ name: “张三”, age: 22, hobby: “打球” },
{ name: “李四”, age: 23, hobby: “编程” },
{ name: “王五”, age: 21, hobby: “看书” }
])

// 删除用户方法
const delUser = (index) => {
const newList = […userList]
newList.splice(index, 1)
setUserList(newList)
}

return (
<>
<h2 style={{ textAlign: ‘center’ }}>React基础综合实战案例
<div style={{ display: ‘flex’, flexWrap: ‘wrap’, gap: ‘20px’, justifyContent: ‘center’ }}>
{
userList.map((item, index) => (

))
}

</>
)
}

export default App
案例功能说明：通过 State 管理用户列表数据，通过 Props 向子组件传递用户数据和删除方法，JSX 循环渲染组件，实现动态删除用户功能，完整贴合企业基础开发逻辑。
七、新手高频易错点总结

1. JSX 语法错误：忘记根标签、标签未闭合、class/for 关键字未改写、行内样式未双层大括号；
2. 组件命名错误：自定义组件首字母小写，导致浏览器识别为原生标签；
3. State 直接修改：直接修改 state 变量，不使用 set 方法，页面无法更新；
4. Props 直接修改：子组件尝试修改 props 数据，违反单向数据流规则；
5. 列表 key 使用索引：造成列表数据错乱、组件状态丢失bug。
   八、全文总结
   本文从零系统讲解了 React 四大核心基础：JSX 语法、函数组件、Props 父子传值、State 响应式状态，搭配海量可运行实战代码、企业开发规范、易错点解析和综合案例，完整覆盖 React 入门必备知识点。
   JSX 是 React 的语法基础，组件化是项目开发的核心思想，Props 解决了组件复用和父子通信问题，State 实现了页面动态交互，四大知识点相辅相成，是所有 React 进阶技术（Hooks进阶、路由、状态管理、项目工程化）的前置基础。
   掌握本文内容，即可独立完成 React 基础页面开发，为后续中后台项目、AI 交互项目开发、前端面试打下坚实基础。后续进阶可重点学习 useEffect、路由配置、组件封装、性能优化等企业核心技术。