2026版 React 零基础小白入门知识点【基础完整版】

✅ 2026年React最新技术栈，纯零基础友好，通俗易懂无专业黑话，所有知识点循序渐进、由浅入深
✅ 只讲主流、刚需、高频内容，剔除过时语法（如class组件），不学冷门API，学的全是企业开发必用知识点
✅ 条理清晰+白话讲解+极简可运行案例，复制代码即可上手，看完能独立写React基础页面、完成基础交互
✅ 2026 React 开发标配：React 18 + React Hook + Vite + JSX + 函数式组件，全程贴合最新技术规范
✅ 学习目标：从「完全不懂React」到「掌握React核心基础」，能独立开发React基础项目，无缝衔接React进阶内容

---

一、前置必懂（零基础避雷 · 5分钟吃透，少走90%弯路）

✔️ 1. React是什么？（白话版，秒懂）

React 是Facebook开发的一款前端主流框架，和Vue3并列前端两大核心框架，2026年依旧是企业招聘的「刚需技能」，无论是大厂还是中小型公司，React的使用率都极高。
核心定位：专注于构建用户界面的「视图层框架」，简单说：就是用来写网页/移动端页面的，核心优势是组件化、高效渲染、生态丰富。

✔️ 2. 2026年React 零基础必学的技术栈（唯一主流，无其他选择）

零基础不用纠结版本和技术选型，2026年React开发只有一套标配技术栈，也是企业100%在用的，全程只学这套即可：

• 核心框架：React 18（最新稳定版，性能最优）
• 开发语法：函数式组件 + React Hook（2026年唯一主流写法，彻底淘汰class组件，语法简洁、无冗余）
• 核心语法糖：JSX（React的页面编写语法，重中之重）
• 构建工具：Vite（2026年前端标配，比Webpack快10倍，启动项目秒开，零基础友好）
• 语言：JavaScript（零基础先用JS，学会基础后再学TS，无缝过渡）
• 核心能力：组件化开发、数据驱动视图、事件处理、列表渲染、组件通信

✔️ 3. React和Vue的核心区别（零基础了解即可，不用深究）

很多小白会纠结先学Vue还是React，这里给大白话结论，帮你理清认知：

• Vue：语法更贴近原生HTML/CSS/JS，入门更简单，像「搭积木」一样写代码
• React：语法更贴近JavaScript，逻辑性更强，像「写JS函数」一样写页面
• 2026年就业角度：两者薪资、岗位数量基本持平，学会任何一个，另一个一周就能上手，不用纠结，学就完事

✔️ 4. 学习心态 & 核心原则（零基础最重要的事）

1. ✅ React的核心是「万物皆组件」，所有页面都是由一个个「组件」拼起来的，理解这个思想，学习效率翻倍
2. ✅ 「先模仿，再理解」：零基础不用一开始就深究原理，先跟着案例敲代码，能跑起来、能实现功能，再回头理解原理
3. ✅ 「轻原理，重实战」：不用看源码、不用学底层，只需要知道「这个语法怎么用、能实现什么效果」
4. ✅ 「少而精」：React基础知识点不多，吃透本文所有内容，就能应对80%的基础开发需求，拒绝贪多嚼不烂

---

二、环境搭建 & 第一个React项目（零基础手把手，复制命令即可）

零基础第一步：不用自己配置任何复杂环境，Vite一键生成标准化React项目，全程3条命令，5分钟搞定，Windows/Mac通用，无任何坑！
前置条件：你的电脑已经安装了 Node.js（版本16+即可，2026年主流是18/20版），安装后打开电脑的「终端/CMD/PowerShell」，执行以下命令：

✔️ 步骤1：创建React项目

# 创建项目，项目名可以自定义（比如react-demo），选React + JavaScript模板
npm create vite@latest react-demo -- --template react

✔️ 步骤2：进入项目目录

cd react-demo

✔️ 步骤3：安装依赖 + 启动项目

npm install
npm run dev

执行完成后，终端会出现一个本地地址（如：http://localhost:5173/），复制到浏览器打开，你的第一个React项目就启动成功了！ ✨

✔️ 零基础必看：React项目目录结构（精简版，只记核心）

启动项目后，用VSCode打开项目，不用纠结所有文件，零基础只需要认识3个核心文件/文件夹，99%的开发都在这3个地方写代码：

react-demo/
├── src/                # 所有React代码都写在这里【重中之重】
│   ├── App.jsx         # 项目根组件，页面入口，核心开发文件
│   └── main.jsx        # 项目入口文件，不用修改，固定写法
└── index.html          # HTML入口，不用修改

✅ 核心结论：零基础学习阶段，所有代码都写在 src/App.jsx 里 即可，其他文件不用碰！

---

三、React 核心基础语法（⭐⭐⭐⭐⭐ 重中之重，零基础必学，使用率100%）

所有知识点都基于「函数式组件+JSX」，2026年React的唯一主流写法，语法简洁无冗余；
所有案例都是极简可运行，复制到 src/App.jsx 中，重启项目就能看到效果；
所有讲解都是白话版，无专业术语，零基础轻松看懂，学完即可上手开发。

✔️ 前置：React组件的本质（必懂，核心思想）

React的核心是「组件化」，组件是React的最小单位，一个页面就是由多个组件组合而成的。

• React的组件，本质就是一个 JavaScript函数
• 这个函数的作用：返回一段页面结构（JSX语法）
• 函数名必须是 大驼峰命名（如：App、Hello、GoodsList），这是React的强制规范
• 最简的React组件写法（固定模板，背下来）：

// src/App.jsx
function App() {
  // 组件的核心：返回页面结构（JSX）
  return (
    <div>
      <h1>我的第一个React组件</h1>
    </div>
  );
}

export default App;

---

✅ 知识点1：JSX 核心语法（⭐⭐⭐⭐⭐ 必学，React的页面语法，使用率100%）

1.1 什么是JSX？（白话版）

JSX 是 JavaScript + XML 的简写，是React专门用来编写页面结构的语法糖，也是React的灵魂。
✅ 大白话理解：长得像HTML的JavaScript代码，既能写HTML的页面结构，又能在里面写JavaScript的逻辑，一举两得。
✅ 核心结论：React的页面，全部是用JSX写的，没有JSX就没有React，必须吃透！

1.2 JSX 核心基础规则（零基础必记，3条顶所有，无坑）

这些是JSX的「硬性语法规范」，必须遵守，否则项目报错，零基础记死即可，全部都是高频使用：

✔️ 规则①：JSX 必须有「唯一的根节点」

返回的JSX中，所有内容必须被一个根标签包裹，最常用的是 <div></div>，也可以用React提供的 <></> 空标签（无冗余DOM，推荐）。

// ✅ 正确写法（用空标签包裹，推荐）
function App() {
  return (
    <>
      <h1>Hello React</h1>
      <p>我是零基础小白</p>
    </>
  );
}

// ❌ 错误写法（没有根节点，必报错）
function App() {
  return (
    <h1>Hello React</h1>
    <p>我是零基础小白</p>
  );
}

✔️ 规则②：JSX 中的「HTML属性名」要写成「小驼峰」

React是JavaScript框架，所以JSX里的HTML属性名，要遵循JS的命名规范，所有带横线的属性名都改成小驼峰，这是React的强制规范，也是零基础最容易踩的坑！
✅ 必记高频属性（记这几个就够了）：

• class → 改成 className （最常用！）
• tabindex → 保持不变
• onclick → 改成 onClick
• onchange → 改成 onChange
• href、src、id 等属性名不变，正常写即可

// ✅ 正确写法
function App() {
  return (
    <>
      <div className="box">我是一个盒子</div>
      <button onClick={()=>{console.log('点击了')}}>点击我</button>
      <img src="https://react.dev/images/logo.svg" alt="Reactlogo" />
    </>
  );
}

✔️ 规则③：JSX 中写「JavaScript表达式」，必须用 { } 包裹

这是JSX的核心能力！在JSX里，只要想写JS代码（变量、运算、函数调用等），就用一对大括号 {} 包起来，大括号是「JSX和JS的桥梁」，使用率100%，必须掌握！

✅ 支持的内容：变量、算术运算、三元表达式、函数调用、数组遍历，都是开发中高频使用的。
✅ 注意：{} 里只能写「表达式」，不能写「语句」（如if/for循环）

function App() {
  // 定义JS变量
  const name = "React零基础小白";
  const age = 20;
  const isShow = true;

  // 定义JS函数
  const getMsg = () => {
    return "欢迎学习React 2026版";
  };

  return (
    <>
      <p>姓名：{name}</p>
      <p>年龄：{age}</p>
      <p>年龄+1：{age + 1}</p>
      <p>三元表达式：{isShow ? "显示内容" : "隐藏内容"}</p>
      <p>函数调用：{getMsg()}</p>
    </>
  );
}

✅ 效果：页面会把所有JS表达式的结果渲染出来，这就是React的「数据嵌入页面」核心用法！

1.3 JSX 中的条件渲染（2种写法，够用所有场景，零基础必学）

开发中经常需要「根据条件显示不同的页面内容」（比如：登录显示用户名，未登录显示登录按钮），React中没有Vue的v-if指令，而是用原生JS的方式实现条件渲染，2种写法都是高频，全部掌握即可：

✔️ 写法1：三元表达式 { 条件 ? 显示内容 : 隐藏内容 } → 最常用 ✅

适合「二选一」的场景，比如显示/隐藏、登录/未登录，语法简洁，一行搞定，开发中90%的条件渲染都用这个。

function App() {
  const isLogin = true; // true=已登录，false=未登录
  return (
    <>
      { isLogin ? <p>欢迎回来，React小白！</p> : <button>请登录</button> }
    </>
  );
}

✔️ 写法2：逻辑与运算符 { 条件 && 显示内容 } → 高频 ✅

适合「满足条件就显示，不满足就什么都不显示」的场景，比三元表达式更简洁，开发中使用率极高。

function App() {
  const hasVip = true; // true=有VIP，false=无VIP
  return (
    <>
      <p>普通内容</p>
      { hasVip && <p>VIP专属内容，只有VIP才能看到</p> }
    </>
  );
}

---

✅ 知识点2：React 事件处理（⭐⭐⭐⭐⭐ 必学，页面交互核心，使用率100%）

页面交互的核心：点击按钮、输入框输入、鼠标悬浮等，都需要「事件处理」，React的事件处理是原生JS事件的封装，语法类似原生JS，但有固定规范，零基础记规范即可，极其简单。
Vue中用 @click，React中用 onClick，本质都是绑定点击事件，只是写法不同。

2.1 事件绑定的核心规则（必记，无坑）

1. React的事件名是 小驼峰命名：onClick（点击）、onChange（输入）、onMouseEnter（鼠标悬浮）、onKeyUp（键盘抬起）
2. 事件绑定的函数，必须是 函数体/箭头函数，不能直接写函数调用（如：onClick={fn()} 错误，onClick={fn} 正确）
3. 事件处理函数，在组件内部定义，是普通的JS函数

2.2 基础事件绑定（3种写法，零基础必学，够用所有场景）

✔️ 写法1：绑定「无参函数」→ 最基础，最常用 ✅

适合不需要传递参数的场景（比如：点击按钮弹出提示、重置数据等）

function App() {
  // 1. 定义事件处理函数
  const handleClick = () => {
    alert("你点击了按钮！");
    console.log("按钮被点击了");
  };

  return (
    <>
      {/* 2. 绑定事件：直接写函数名，不要加括号！ */}
      <button onClick={handleClick}>点击我弹出提示</button>
    </>
  );
}

✔️ 写法2：绑定「带参函数」→ 高频，必学 ✅

适合需要传递参数的场景（比如：点击删除按钮传递id、点击列表项传递数据等），固定写法：用箭头函数包裹，零基础记死即可。

function App() {
  // 定义带参数的事件函数
  const deleteItem = (id) => {
    console.log("删除的id是：", id);
    alert(`删除了id为${id}的内容`);
  };

  return (
    <>
      {/* 绑定带参函数：箭头函数包裹，传递参数 */}
      <button onClick={() => deleteItem(1)}>删除id=1的内容</button>
      <button onClick={() => deleteItem(2)}>删除id=2的内容</button>
    </>
  );
}

✔️ 写法3：内联事件 → 简单场景可用 ✅

适合逻辑非常简单的场景（比如：点击改变一个变量的值），直接在事件中写逻辑，不用单独定义函数。

function App() {
  return (
    <>
      <button onClick={() => console.log("内联事件触发")}>内联点击</button>
    </>
  );
}

2.3 高频实战：表单输入框事件（onChange）

开发中最常用的事件之一：输入框输入内容，获取输入的值，这是「表单提交、搜索框、登录页」的核心，必须掌握！

function App() {
  // 先定义一个变量存储输入的值（后面会学useState，这里先了解写法）
  let inputValue = "";

  // 输入框改变事件：获取输入的值
  const handleInput = (e) => {
    // e.target 是当前输入框DOM元素，e.target.value 是输入框的值
    inputValue = e.target.value;
    console.log("你输入的内容是：", inputValue);
  };

  return (
    <>
      <input 
        type="text" 
        placeholder="请输入内容" 
        onChange={handleInput} 
      />
      <p>你输入的内容：{inputValue}</p>
    </>
  );
}

---

✅ 知识点3：React Hook - useState（⭐⭐⭐⭐⭐ 必学，React核心中的核心，使用率100%）

✅ 这是本文最重要的知识点，没有之一！React的「数据驱动视图」核心全靠它，零基础必须吃透！
✅ 2026年React彻底淘汰了class组件，所有的数据管理都用 React Hook，而useState是最基础、最核心的Hook，没有它就写不了动态的React页面。

3.1 为什么需要useState？（零基础必懂，核心痛点）

前面我们定义的变量（如：let name = "React"）都是普通JS变量，这种变量有一个致命问题：

✅ 变量的值改变了，页面不会自动更新！

比如：点击按钮修改name的值，控制台能看到值变了，但页面上显示的还是原来的值，这在开发中是完全不可行的。
React的核心思想是「数据驱动视图」：数据变了，页面自动更新，而实现这个功能的核心，就是 useState！

3.2 什么是useState？（白话版，秒懂）

useState 是React提供的内置Hook函数，专门用来「定义响应式变量」的。
✅ 大白话解释：用useState定义的变量，叫做「响应式状态」，当这个变量的值发生改变时，页面会自动重新渲染，展示最新的值，这就是React的「数据驱动视图」！
✅ 核心定位：useState 是React中唯一的基础数据管理方式，所有动态数据（比如：表单值、列表数据、开关状态）都必须用它定义。

3.3 useState 基础语法（固定模板，背下来，零基础必记）

✔️ 语法三步曲（固定不变，所有场景通用）

1. 第一步：从react中导入useState → 写在组件最顶部，固定写法
2. 第二步：调用useState，初始化数据 → const [变量名, 修改变量的方法] = useState(初始值)
3. 第三步：使用变量 + 修改变量 → 变量直接用 {变量名} 渲染，修改变量必须用对应的修改方法，不能直接赋值！

// 完整固定模板，复制即用
import { useState } from 'react' // 1. 导入useState

function App() {
  // 2. 调用useState，定义响应式变量
  // count：变量名，可自定义；setCount：修改count的方法，固定前缀set+变量名
  // useState(0)：初始值为0
  const [count, setCount] = useState(0);

  // 点击按钮，修改count的值
  const addCount = () => {
    // 3. 修改变量：必须用setCount方法，不能直接写 count++ 或 count=count+1！
    setCount(count + 1);
  };

  return (
    <>
      <p>当前计数：{count}</p> {/* 渲染响应式变量 */}
      <button onClick={addCount}>点击+1</button>
    </>
  );
}

✅ 效果：点击按钮，count的值会加1，页面会自动更新显示最新的计数，完美实现「数据驱动视图」！

3.4 useState 核心规则（零基础必记，避坑重中之重，全部是高频坑）

这些规则是React的「硬性规定」，违反必报错，零基础记死即可，全部都是开发中每天都会用到的：

✔️ 规则①：修改状态，必须使用对应的set方法，绝对不能直接赋值！

const [count, setCount] = useState(0);

// ✅ 正确写法：用setCount修改
setCount(count + 1);

// ❌ 错误写法：直接赋值，页面不会更新！
count = count + 1;

✔️ 规则②：useState的「初始值」只在组件第一次渲染时生效

初始化的参数（比如useState(0)的0），只会在组件第一次加载时赋值一次，后续修改数据不会影响初始值，放心使用即可。

✔️ 规则③：可以定义多个useState状态，互不影响

一个组件中可以根据需求，定义任意多个useState，每个状态都是独立的，修改一个不会影响另一个，这是开发中的标配写法。

import { useState } from 'react'

function App() {
  const [count, setCount] = useState(0); // 计数状态
  const [name, setName] = useState("React小白"); // 姓名状态
  const [isShow, setIsShow] = useState(true); // 布尔状态（显示/隐藏）

  return (
    <>
      <p>{count}</p>
      <p>{name}</p>
      <p>{isShow ? "显示" : "隐藏"}</p>
    </>
  );
}

3.5 useState 高频实战案例（表单双向绑定）

这是开发中最常用的实战场景：输入框输入内容，页面实时显示输入的值，点击按钮可以修改输入框的值，完美结合「useState + onChange事件」，学会这个案例，就能搞定所有表单相关的开发！

import { useState } from 'react'

function App() {
  // 定义响应式变量，存储输入框的值，初始值为空字符串
  const [inputVal, setInputVal] = useState("");

  // 输入框改变事件：获取输入的值，更新状态
  const handleChange = (e) => {
    setInputVal(e.target.value);
  };

  // 点击按钮，清空输入框
  const clearInput = () => {
    setInputVal("");
  };

  return (
    <>
      <input
        type="text"
        placeholder="请输入内容"
        value={inputVal} {/* 绑定状态，控制输入框的值 */}
        onChange={handleChange} {/* 绑定事件，监听输入变化 */}
      />
      <p>你输入的内容：{inputVal}</p>
      <button onClick={clearInput}>清空</button>
    </>
  );
}

✅ 这个案例是React表单开发的「万能模板」，登录页、注册页、搜索框都是这个写法，必须吃透！

---

✅ 知识点4：列表渲染 - map 循环（⭐⭐⭐⭐⭐ 必学，开发中99%的页面都会用到）

开发中99%的页面都会有「列表展示」的需求：商品列表、用户列表、新闻列表、购物车列表等，React中没有Vue的v-for指令，而是用原生JS的map方法实现列表渲染，这是React的标配写法，必须掌握！
✅ 核心结论：React中所有列表渲染，都用数组的map方法，没有其他选择！

4.1 列表渲染的基础语法（固定模板，背下来）

{ 数组名.map((item, index) => {
    return (
        // 要渲染的列表项，每个项必须加 key 属性
        <div key={index}>
            {/* 渲染数组中的数据 */}
            {item}
        </div>
    )
})}

4.2 核心必记规则（2条，避坑+规范，使用率100%）

✔️ 规则①：每个列表项必须加 key 属性，且key的值必须是唯一的

这是React的强制规范，不加key会控制台报错，key的作用是让React识别每个列表项的唯一性，提升渲染性能。
✅ 开发中2种常用的key值（优先级排序）：

1. 优先用数组项的唯一id（如：商品id、用户id）→ 后端返回的列表数据都会有id，这是最优选择
2. 其次用index索引（如：key={index}）→ 适合没有id的简单数组（如：纯字符串/数字数组）

✔️ 规则②：map方法必须有返回值，返回要渲染的JSX结构

4.3 列表渲染实战案例（2个高频场景，够用所有开发需求）

✔️ 案例1：简单数组渲染（数字/字符串数组）

import { useState } from 'react'

function App() {
  // 定义响应式列表数据
  const [list, setList] = useState(["React基础", "JSX语法", "useState", "事件处理"]);

  return (
    <>
      <h3>React学习列表</h3>
      <ul>
        {/* 列表渲染：map循环，index做key */}
        {list.map((item, index) => {
          return <li key={index}>{index + 1} - {item}</li>;
        })}
      </ul>
    </>
  );
}

✔️ 案例2：对象数组渲染（开发中最常用，如商品列表、用户列表）

后端返回的列表数据，99%都是「对象数组」，这是开发中的核心实战场景，必须吃透！

import { useState } from 'react'

function App() {
  // 定义响应式对象数组（模拟后端返回的商品列表）
  const [goodsList, setGoodsList] = useState([
    { id: 1, name: "React实战教程", price: 99 },
    { id: 2, name: "Vue3基础教程", price: 89 },
    { id: 3, name: "前端面试宝典", price: 129 },
  ]);

  return (
    <>
      <h3>商品列表</h3>
      <div className="goods-box">
        {/* 列表渲染：对象数组，用唯一id做key（最优） */}
        {goodsList.map((goods) => {
          return (
            <div key={goods.id} className="goods-item">
              <p>商品名称：{goods.name}</p>
              <p>商品价格：¥{goods.price}</p>
            </div>
          );
        })}
      </div>
    </>
  );
}

✅ 这个案例是开发中的「万能模板」，商品列表、用户列表、新闻列表都是这个写法，学会这个，列表渲染就通关了！

---

✅ 知识点5：React 组件化开发 & 组件通信（⭐⭐⭐⭐ 必学，React的核心思想，使用率100%）

React的核心是「万物皆组件」，组件化开发是React的灵魂，也是企业开发的标配。零基础学会组件化，就能把页面拆分成一个个独立的小模块，代码复用率翻倍，开发效率提升80%！
2026年React的组件化，全部是「函数式组件」，没有class组件，语法极其简洁。

5.1 什么是组件化开发？（白话版，秒懂）

✅ 大白话解释：把一个复杂的页面，拆分成一个个独立的、可复用的小模块，每个小模块就是一个「组件」，最后把这些组件像搭积木一样组合起来，就形成了完整的页面。
✅ 核心优势：复用性高、代码整洁、维护方便，比如：页面的导航栏、商品卡片、底部版权信息，都可以封装成独立的组件，在多个页面中复用，不用重复写代码。

5.2 React 组件的分类（零基础只记2种，够用所有场景）

✔️ ① 根组件：App.jsx

项目的入口组件，整个页面的根容器，用来组合其他所有组件，开发中所有页面都在这里拼接。

✔️ ② 子组件：自定义组件（如：Header.jsx、GoodsItem.jsx、Footer.jsx）

自己封装的独立组件，用来实现特定的功能，比如：Header组件负责导航，GoodsItem组件负责展示商品卡片，Footer组件负责底部信息。
✅ 组件文件命名规范：大驼峰命名，后缀是 .jsx（如：Header.jsx、GoodsItem.jsx）

5.3 组件的封装与使用（3步曲，固定模板，零基础必学）

这是React组件化的核心用法，固定3步，所有组件都这么用，复制即可上手，开发中每天都会用到！

✔️ 步骤1：创建子组件（在src目录下新建组件文件，如：src/Header.jsx）

// src/Header.jsx 导航栏组件
function Header() {
  return (
    <div className="header">
      <h2>React零基础学习 - 导航栏</h2>
    </div>
  );
}

export default Header; // 必须导出组件，才能在其他地方使用

✔️ 步骤2：在根组件中「导入子组件」

// src/App.jsx
import Header from './Header' // 导入子组件，路径正确即可

✔️ 步骤3：在根组件中「使用子组件」

直接把组件名当作标签使用即可，<Header />，像写HTML标签一样简单。

// src/App.jsx 完整代码
import Header from './Header'

function App() {
  return (
    <>
      <Header /> {/* 使用子组件 */}
      <div className="content">
        <p>我是页面主体内容</p>
      </div>
    </>
  );
}

export default App;

✅ 效果：页面会渲染出导航栏+主体内容，组件化开发完成！

5.4 组件通信 - 父传子（⭐⭐⭐⭐⭐ 必学，开发中99%的通信场景）

组件通信：就是「组件之间传递数据」，比如：父组件有一个商品列表数据，需要传递给子组件展示；父组件有一个状态，需要传递给子组件控制显示/隐藏。
React中组件通信的核心原则：单向数据流 → 数据只能从「父组件」流向「子组件」，不能反向传递，这是React的核心设计思想，也是开发中的规范。
✅ 零基础必学：父传子是React中唯一的基础通信方式，也是开发中最常用的，学会这个，就能搞定99%的通信需求！

5.5 父传子的核心语法（固定模板，背下来，无坑）

React中实现「父传子」的核心是：Props（属性），Props是组件的「入参」，和函数的参数一模一样，这也是React组件本质是函数的体现。

✔️ 父传子 3步曲（固定不变，所有场景通用）

1. 父组件中：使用子组件时，通过「属性名=属性值」的方式传递数据 → <Son 数据名={数据值} />
2. 子组件中：子组件是一个函数，通过「函数的参数props」接收父组件传递的数据 → function Son(props) { ... }
3. 子组件中：使用数据 → props.数据名

5.6 父传子 实战案例（开发中最常用，复制即用）

// 父组件：src/App.jsx
import { useState } from 'react'
import GoodsItem from './GoodsItem' // 导入子组件

function App() {
  // 父组件的商品数据
  const [goods] = useState({ id: 1, name: "React实战教程", price: 99 });

  return (
    <>
      <h3>父组件 - 商品展示</h3>
      {/* 步骤1：父组件传递数据给子组件，属性名自定义（如：goodsInfo） */}
      <GoodsItem goodsInfo={goods} />
    </>
  );
}

export default App;

// 子组件：src/GoodsItem.jsx
// 步骤2：子组件通过props参数接收父组件传递的数据
function GoodsItem(props) {
  // 步骤3：使用props中的数据，props.属性名
  const { name, price } = props.goodsInfo; // 解构赋值，更简洁

  return (
    <div className="goods-item">
      <p>商品名称：{name}</p>
      <p>商品价格：¥{price}</p>
    </div>
  );
}

export default GoodsItem;

✅ 效果：子组件成功展示了父组件传递的商品数据，父传子通信完成！这是开发中的「万能模板」，所有父传子场景都是这个写法。

---

四、React 零基础高频避坑指南（TOP8，看完少走99%弯路）

所有坑都是零基础小白学习React时最容易踩的高频坑，全部是实战总结，每一个坑都对应解决方案，看完立刻避开，节省大量调试时间，这是零基础的「保命指南」！

1. ❌ JSX中写class属性写成class="box" → ✅ 正确写法：className="box"
2. ❌ 用useState定义的响应式变量，直接赋值修改（如：count=count+1）→ ✅ 正确：必须用setCount方法修改
3. ❌ 列表渲染时不加key属性 → ✅ 正确：每个列表项必须加唯一的key
4. ❌ 事件绑定带参函数时，直接写onClick={deleteItem(1)} → ✅ 正确：用箭头函数包裹onClick={()=>deleteItem(1)}
5. ❌ 组件名用小写字母（如：function header()）→ ✅ 正确：组件名必须大驼峰（function Header()）
6. ❌ JSX中写JS表达式不用大括号 → ✅ 正确：所有JS代码必须用{}包裹
7. ❌ 子组件接收父组件数据时，不用props参数 → ✅ 正确：子组件必须通过props接收父组件数据
8. ❌ JSX返回多个标签没有根节点 → ✅ 正确：用<></>空标签包裹所有内容

---

五、React 零基础学习路线（2026最新，科学合理，不走弯路）

✅ 阶段一：夯实基础（本文所有内容，3-5天）

✅ 吃透本文所有知识点：JSX语法、事件处理、useState响应式数据、列表渲染、组件化开发、父传子通信；
✅ 能独立写React基础页面：表单、列表、按钮交互、组件拆分；
✅ 能独立完成「基础TodoList、商品列表、登录页」等小案例；
✅ 核心目标：理解React的核心思想「组件化+数据驱动视图」，能独立写React基础代码。

✅ 阶段二：React 核心进阶（5-7天，无缝衔接本文）

✅ 学习React Hook进阶：useEffect（生命周期）、useContext（跨组件通信）、useRef（获取DOM）；
✅ 学习组件通信进阶：子传父、跨组件通信；
✅ 学习React路由（React Router 6.x）：页面跳转、路由传参、路由守卫；
✅ 学习网络请求（Axios）：前后端交互、接口请求、请求封装；
✅ 核心目标：能独立开发中大型React项目，具备企业开发的基础能力。

✅ 阶段三：实战巩固（3-5天，重中之重）

✅ 实战项目1：开发一个「React + Axios」的商品管理系统（列表展示、增删改查、表单提交）；
✅ 实战项目2：开发一个「React + React Router」的多页面应用（首页、列表页、详情页、登录页）；
✅ 核心目标：把所有知识点融会贯通，能独立解决开发中的问题，拥有可展示的完整项目。

✅ 阶段四：技术升级（2026刚需，加分项）

✅ 学习TypeScript + React：2026年企业招聘的硬性要求，学会后薪资翻倍；
✅ 学习React生态库：UI组件库（Ant Design 5.x/Element Plus）、状态管理（Zustand/Pinia）；
✅ 学习项目打包部署：将React项目打包成静态文件，部署到服务器；
✅ 核心目标：成为「能独立开发企业级React项目」的前端工程师，具备求职竞争力。

---

最后：写给React零基础小白的心里话

恭喜你！学完本文，你已经从「完全不懂React」的小白，成长为「掌握React核心基础」的前端学习者，也真正踏入了React的大门。

React的学习之路，没有想象中那么难，它的核心思想其实很简单：把页面拆成组件，用数据驱动组件的渲染。所有的语法和API，都是为了让这个过程更高效、更简洁。

2026年的前端行业，React依然是主流框架，掌握React，你就拥有了进入前端行业的核心敲门砖。React的学习没有捷径，唯一的方法就是「多敲代码、多做案例、多解决问题」，当你能独立写出一个完整的项目时，你会发现，React的开发其实很简单。

你已经走完了React的基础之路，接下来就是进阶和实战了。你的前端之路，才刚刚开始，未来可期！加油！💪

---

附：React零基础核心知识点速查表（随时查阅，按使用率排序）

知识点	核心语法	作用	使用率
JSX语法	{JS表达式}、className、根节点包裹	编写React页面结构	100%
事件处理	onClick={()=>{}}、onChange	实现页面交互（点击、输入等）	100%
useState	const [val, setVal] = useState(init)	定义响应式数据，数据驱动视图	100%
列表渲染	数组.map((item,id)=>{return <div key={id}>{item}</div>})	展示列表数据	99%
组件化开发	封装子组件 + 导入使用	拆分页面，代码复用	100%
父传子通信	父组件传属性 + 子组件props接收	组件之间传递数据	99%
条件渲染	{条件?A:B}、{条件&&A}	根据条件展示不同内容	95%