当前位置：首页 > news >正文

React 入门完全指南：从零开始构建现代 Web 应用

news 来源：原创 2025/8/23 6:15:45

在当今快速发展的前端开发领域，React 凭借其高效的组件化架构和强大的生态系统，已成为最受欢迎的 JavaScript 库之一。根据 2023 年 Stack Overflow 开发者调查，React 连续七年成为最常用的 Web 框架。无论是初创公司还是科技巨头，如 Facebook、Instagram、Airbnb 和 Netflix 等，都在其产品中广泛使用 React。

本文将带你从零开始，全面了解 React 的核心概念、基础语法和最佳实践，助你快速掌握这一强大工具。

一、React 基础与环境搭建

1.1 React 简介

React 是由 Facebook 开发并开源的一个用于构建用户界面的 JavaScript 库。与传统 MVC 框架不同，React 专注于视图层的构建，其核心优势在于：

组件化开发：将 UI 拆分为独立可复用的组件
虚拟 DOM：高效更新界面，提升性能
单向数据流：数据流向清晰，易于调试
丰富的生态系统：拥有庞大的社区和工具支持

1.2 开发环境配置

开始 React 开发前，需要准备以下环境：

安装 Node.js：
- 访问 Node.js 官网下载最新 LTS 版本
- 安装完成后，在终端运行 node -v 和 npm -v 验证安装
选择代码编辑器：
- Visual Studio Code（推荐）
- WebStorm
- Atom
创建第一个 React 应用：

React 官方推荐使用 Create React App (CRA) 脚手架工具，它能快速搭建一个现代化的 React 项目结构：

npx create-react-app my-first-app
cd my-first-app
npm start

运行后，浏览器会自动打开 http://localhost:3000，你将看到默认的 React 欢迎页面。

1.3 项目结构解析

了解 CRA 生成的项目结构对后续开发很重要：

my-first-app/
├── node_modules/    # 项目依赖
├── public/          # 静态资源
│   ├── index.html   # 主HTML文件
│   └── ...
├── src/             # 源代码
│   ├── App.css      # 主样式
│   ├── App.js       # 主组件
│   ├── index.js     # 应用入口
│   └── ...
├── package.json     # 项目配置
└── README.md        # 项目说明

二、React 核心概念深入解析

2.1 JSX：JavaScript 的语法扩展

JSX 是 React 的核心特性之一，它允许我们在 JavaScript 中编写类似 HTML 的代码：

const element = <h1 className="greeting">Hello, world!</h1>;

JSX 特点：

不是字符串也不是 HTML
最终会被转译为 React.createElement() 调用
可以嵌入 JavaScript 表达式使用 {}
必须有一个根元素
使用 className 代替 class，htmlFor 代替 for

JSX 示例：

function formatName(user) {return user.firstName + ' ' + user.lastName;
}const user = {firstName: '张',lastName: '三'
};const element = (<h1>你好, {formatName(user)}!</h1>
);

2.2 组件化开发

React 的核心思想是通过组件构建用户界面。组件可以分为两类：

函数组件

function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}

类组件

class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;}
}

组件使用：

function App() {return (<div><Welcome name="Sara" /><Welcome name="Cahal" /><Welcome name="Edite" /></div>);
}

2.3 Props：组件间的数据传递

Props（属性）是父组件向子组件传递数据的方式：

function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}function App() {return (<div><Welcome name="Sara" /><Welcome name="Mike" /></div>);
}

Props 特点：

只读性：组件不能修改自己的 props
可以传递任何 JavaScript 值
使用 PropTypes 进行类型检查（需额外安装）

2.4 State：组件的内部状态

State 是组件私有的、完全受控于组件本身的数据：

class Counter extends React.Component {constructor(props) {super(props);this.state = { count: 0 };}increment = () => {this.setState({ count: this.state.count + 1 });}render() {return (<div><p>Count: {this.state.count}</p><button onClick={this.increment}>Increment</button></div>);}
}

State 使用原则：

不要直接修改 state（使用 setState()）
state 更新可能是异步的
state 更新会被合并

三、React Hooks：函数组件的革命

React 16.8 引入的 Hooks 彻底改变了函数组件的开发方式，使其能够使用 state 和其他 React 特性。

3.1 useState Hook

import React, { useState } from 'react';function Counter() {const [count, setCount] = useState(0);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

3.2 useEffect Hook

用于处理副作用操作（数据获取、订阅等）：

import React, { useState, useEffect } from 'react';function Example() {const [count, setCount] = useState(0);useEffect(() => {document.title = `You clicked ${count} times`;}, [count]); // 仅在 count 变化时更新return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

3.3 常用 Hooks 一览

Hook名称	用途描述
useState	在函数组件中使用 state
useEffect	执行副作用操作
useContext	访问 React Context
useReducer	类似 Redux 的 reducer 状态管理
useCallback	缓存函数，优化性能
useMemo	缓存计算结果，优化性能
useRef	创建可变的 ref 对象
useLayoutEffect	类似 useEffect，但在 DOM 更新后同步触发

四、React 进阶技巧

4.1 条件渲染

在 React 中有多种条件渲染的方式：

function Greeting(props) {const isLoggedIn = props.isLoggedIn;// 方式1：if语句if (isLoggedIn) {return <UserGreeting />;}return <GuestGreeting />;// 方式2：三元表达式return (<div>{isLoggedIn ? <UserGreeting /> : <GuestGreeting />}</div>);// 方式3：与运算符 &&return (<div>{isLoggedIn && <UserGreeting />}</div>);
}

4.2 列表渲染

使用 map() 函数渲染列表，注意添加 key：

function NumberList(props) {const numbers = props.numbers;return (<ul>{numbers.map((number) =><ListItem key={number.toString()} value={number} />)}</ul>);
}

key 的作用：

帮助 React 识别哪些元素改变了
应该是稳定、唯一的值
最好使用数据中的 ID
万不得已可以使用索引（不推荐）

4.3 表单处理

React 表单元素分为受控组件和非受控组件：

受控组件示例：

class NameForm extends React.Component {constructor(props) {super(props);this.state = {value: ''};}handleChange = (event) => {this.setState({value: event.target.value});}handleSubmit = (event) => {alert('提交的名字: ' + this.state.value);event.preventDefault();}render() {return (<form onSubmit={this.handleSubmit}><label>名字:<input type="text" value={this.state.value} onChange={this.handleChange} /></label><input type="submit" value="提交" /></form>);}
}

五、React 项目结构最佳实践

随着项目规模扩大，良好的项目结构至关重要。以下是一个推荐的中型项目结构：

src/
├── assets/            # 静态资源
│   ├── images/        # 图片
│   └── styles/        # 全局样式
├── components/        # 通用组件
│   ├── Button/        # 按组件分类
│   │   ├── Button.js
│   │   ├── Button.css
│   │   └── index.js
│   └── ...
├── pages/             # 页面组件
│   ├── Home/
│   └── ...
├── hooks/             # 自定义Hook
├── context/           # Context
├── utils/             # 工具函数
├── services/          # API服务
├── App.js             # 主组件
└── index.js           # 入口文件

六、React 生态与进阶学习

掌握 React 基础后，可以继续学习：

React Router：实现单页应用路由
状态管理：Redux、MobX 或 Context API
服务端渲染：Next.js 框架
静态站点生成：Gatsby
测试：Jest + React Testing Library
性能优化：React.memo、useMemo、useCallback

结语

React 的学习曲线可能初期有些陡峭，但一旦掌握了其核心概念，你将能够高效地构建现代化、高性能的 Web 应用。建议从简单的项目开始实践，逐步深入理解 React 的设计哲学。

React 入门完全指南：从零开始构建现代 Web 应用

在当今快速发展的前端开发领域，React 凭借其高效的组件化架构和强大的生态系统，已成为最受欢迎的 JavaScript 库之一。根据 2023 年 Stack Overflow 开发者调查，React 连续七年成为最常用的 Web 框架。无论是初创公司还是科技巨头&#xff0c…...

编程日记 2025/8/23 6:15:45

0701表单组件-react-仿低代码平台项目

文章目录 1 react表单组件1.1 受控组件 (Controlled Components)示例代码： 1.2 非受控组件 (Uncontrolled Components)示例代码： 2 AntD表单组件实战2.1 开发搜索功能2.2 开发注册页2.3 开发登录页2.4 表单组件校验结语 1 react表单组件 input表单组件…...

编程日记 2025/8/21 8:38:56

Android ViewStub显示VISIBLE与消失GONE，Kotlin（2）

Android ViewStub显示VISIBLE与消失GONE，Kotlin（2） 在 Android ViewStub显示VISIBLE与消失GONE，Kotlin-CSDN博客基础上完善。 import android.os.Bundle import android.util.Log import android.view.View import android.view…...

编程日记 2025/8/23 6:15:43

跨站脚本（XSS）的详细分类、对比及解决方案

以下是跨站脚本（XSS） 的详细分类、对比及解决方案： 一、XSS的分类与详解 1. 反射型XSS（非持久型XSS） 定义：攻击载荷通过URL参数传递，服务器直接返回到页面中，需用户主动触发。工…...

编程日记 2025/8/17 20:48:59

JVM：程序计数器、虚拟机栈、本地方法栈

一、程序计数器 （1）程序计数器介绍作用：当线程执行 Java 方法时，程序计数器记录该线程下一条要执行的字节码指令的地址；当线程执行本地方法时，程序计数器的值为未指定（undefined）…...

编程日记 2025/8/19 12:28:42

适配器模式在Java开发中的应用

适配器模式（Adapter Pattern）是设计模式中的一种结构型模式，它允许将一个类的接口转换成客户端所期望的另一个接口。通过这种方式，原本因接口不兼容而无法协同工作的类能够一起工作。适配器模式在Java开发中非常常见，尤…...

编程日记 2025/8/17 18:29:40

（三）谷歌Code as Policies复现（操作记录）

目录《复现的项目来源》一、创建虚拟环境二、下载原项目并修改（非必须） 二、可直接下载修改后的项目三、配置环境 （1）安装jupyterlab以及内核 （2）安装ffmpeg （3）配置环境…...

编程日记 2025/8/21 5:32:13

驱动学习专栏--字符设备驱动篇--2_字符设备注册与注销

对于字符设备驱动而言，当驱动模块加载成功以后需要注册字符设备，同样，卸载驱动模块的时候也需要注销掉字符设备。字符设备的注册和注销函数原型如下所示 : static inline int register_chrdev(unsigned int major, const char *name, const…...

编程日记 2025/8/17 21:18:35

奥创中心卸载工具Armoury Crate Uninstall Tool官网下载

为了应对用户对 Armoury Crate 占用资源大、卸载困难等问题的普遍反馈，ASUS 官方提供了一个专门的卸载工具，即 Armoury Crate Uninstall Tool(奥创中心卸载工具)。该工具的主要作用是帮助用户彻底从系统中移除 Armoury Crate 相关的所有组件，…...

编程日记 2025/8/23 6:15:41

【Linux网络】网络基础概念深度解析

📢博客主页：https://blog.csdn.net/2301_779549673 📢博客仓库：https://gitee.com/JohnKingW/linux_test/tree/master/lesson 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！ &…...

编程日记 2025/8/20 15:57:46

【NLP 61、大模型应用 —— RAG方法】

生活打不败一个大口吃饭的人！ —— 25.4.13 一、模型幻觉问题模型幻觉（AI Hallucination）是指人工智能模型（尤其是大语言模型）生成看似合理但实际不准确、虚构或与事实不符内容的现象。其本质是模型基于统计概…...

编程日记 2025/8/23 0:02:36

UV工具——小试牛刀

背景 MCP开发使用到为什么MCP更推荐使用uv进行环境管理？ MCP 依赖的 Python 环境可能包含多个模块，uv 通过 pyproject.toml 提供更高效的管理方式，并且可以避免 pip 的一些依赖冲突问题。此外，uv 的包管理速度远超 pip…...

编程日记 2025/8/22 17:01:22

vue3+vite 多个环境配置

同一套代码再也不用在不同的环境里来回切换请求地址了然后踩了一个坑就是env的文件路径是在当前项目下不是在views内因为公司项目需求只有dev和pro两个环境虽然我新增了3个但是只在这两个里面配置了 .env是可以配置一些公共配置的目前需求来说不需要所以我也懒得配了。…...

编程日记 2025/8/19 17:56:47

《分布式软总线架构下，设备虚拟化技术的深度剖析与优化策略》

设备之间的互联互通和协同工作已成为一种趋势。分布式软总线架构作为实现这一目标的关键技术，为不同设备之间的通信和协作提供了基础。而设备虚拟化技术则是在分布式软总线架构下，进一步提升设备资源利用效率的重要手段。本文将深入探讨在分布式软总线架…...

编程日记 2025/8/20 23:16:32

MCP 正当时：FunctionAI MCP 开发平台来了！

作者：封崇 MCP：AI 时代的“操作系统接口” 2024 年 11 月，Anthropic 发布模型上下文协议（MCP），这一开放标准迅速引发开发者社区的"协议觉醒"。其本质是通过标准化接口实现 LLM 与外部世界的双向…...

编程日记 2025/8/22 15:49:58

AI Agents系列之AI代理的类型

在本文中，我们将探讨不同类型的 AI 代理，包括它们的实现、实际应用、优势和局限性。从简单反射代理到多代理系统，我们将了解这些模型如何推动自动化、决策制定和智能问题解决。文章目录 1. AI代理的类型1.1 简单反射代理1.1.1 实现**1.1.2 优势****1.1.3 局限性**1.2 基于…...

编程日记 2025/8/20 8:28:26

Go RabbitMQ基础教程：入门与实践指南，实战代码讲解

简介： RabbitMQ是一款实现高级消息队列协议（AMQP）的消息代理软件，也称为消息队列或消息中间件。它通过解耦应用程序之间的直接通信，支持异步数据交换，增强了系统的可扩展性和灵活性。RabbitMQ能够跨平台运…...

编程日记 2025/8/18 20:33:24

LeetCode详解之如何一步步优化到最佳解法：27. 移除元素

LeetCode详解系列的总目录（持续更新中）： LeetCode详解之如何一步步优化到最佳解法：前100题目录（更新中...）-CSDN博客 LeetCode详解系列的上一题链接： LeetCode详解之如何一步步优化到最佳解法…...

编程日记 2025/8/17 20:27:17

c++原子操作

原子操作，顾名思义，该操作不可分割。多线程环境也能保证读写数据不错乱。百度搜索了下，其核心概念如下： 1、不可分割性。原子操作是指一系列不可被CPU上下文交换的机器指令，操作要么完全执行，要么完全不执…...

编程日记 2025/8/22 13:58:09

在 Redis Lua 脚本中，keyCount 参数的作用是明确区分脚本参数中的 KEYS 和 ARGV，具体关系如下：

在 Redis Lua 脚本中，keyCount 参数的作用是**明确区分脚本参数中的 KEYS 和 ARGV**，具体关系如下： --- ### 核心作用 1. **参数分类标识** - keyCount 表示脚本中使用的 Redis KEY 的数量（即 KEYS 数组的长度）…...

编程日记 2025/8/17 20:06:18

小白如何从0学习CSS

以下是针对小白从零开始系统学习 CSS 的完整路径和实用指南，结合核心概念、实践技巧和项目经验，助你掌握网页样式的精髓： 1. 理解 CSS 是什么？ 定义：CSS（层叠样式表）用于控制网页的视觉表现&…...

编程日记 2025/8/17 21:20:26

一文掌握RK3568开发板Android13挂载Windows共享目录

在物联网和边缘计算场景中，开发板与PC端的高效文件交互尤为重要。现以iTOP-RK3568开发板为例，详细演示Android13系统如何通过CIFS协议挂载Windows共享目录，实现开发板与PC的无缝文件共享。 RK3568开发板优势 iTOP-3568开发板采用瑞芯微RK3…...

编程日记 2025/8/21 20:55:18

UE5烘培后-＞为什么C磁盘满了

烘培会产生ddc 需要把路径切换一下，比如切换到游戏空间下。如何修改，修改如下： 使用记事本打开BaseEngine.ini文件。将以下内容： textCopy Code Path\"%ENGINEVERSIONAGNOSTICUSERDIR%DerivedDataCache\" 替换为&…...

编程日记 2025/8/17 20:56:47

本地搭建全网可访问的开源音乐服务器Melody结合内网穿透随时听歌

文章目录前言1. 添加镜像源2. 本地部署Melody3. 本地访问与使用演示4. 安装内网穿透5. 配置Melody公网地址6. 配置固定公网地址前言嗨，各位音乐发烧友们！今天我要带你们解锁一个超酷的新技能——在香橙派Zero3上搭建自己的在线音乐平台，并…...

编程日记 2025/8/23 1:49:42

深度学习Y5周：yolo.py文件解读

🍨 本文为🔗365天深度学习训练营中的学习记录博客🍖 原作者：K同学啊一、前言文件位置：./models/yolo.py 此文件是实现YOLOv5网络模型的搭建文件，如果想改进YOLOv5，这个文件是必须进行修改的…...

编程日记 2025/8/20 9:04:53

Qt实现文件传输服务器端（图文详解+代码详细注释）

Qt实现文件传输服务器 1、前言2、服务器2.1 服务器UI界面2.2添加网络模块和头文件2.3、创建服务器对象2.4 连接有新连接的信号与槽2.5实现有新连接处理的槽函数2.6 选择文件按钮实现2.6.1 连接按钮点击的信号与槽2.6.2 添加头文件2.6.3 创建所需对象2.6.3 选择文件按钮实现 2.7…...

编程日记 2025/8/17 21:06:22

记录学习的第二十七天

今天效率低下，只做了一道力扣的每日一题。看了题解才懂的。下面复述一遍吧。算法就是越长越合法型滑动窗口。核心： 如果此时窗口中有c个元素x，此时再进一个x，那么相同数对就增加c个。如果此时窗口有c个元素x，此…...

编程日记 2025/8/22 10:35:07

docker 安装TDengine 时序数据库

TDengine是一个高性能、分布式a的时序数据库，专为物联网(loT)和大数据分析日设计。使用Docker快速地搭建 TDengine 的开发或测试环境。以下技术指南，帮助您通过Docker Compose 安装并运行TDengine 1.拉取镜像 (3.3.6.0版本) docker pull registry.cn-ha…...

编程日记 2025/8/17 18:29:58

如何更好使用呼叫中心系统和语音机器人

要更好地使用呼叫中心系统和语音机器人，需要结合两者的优势，实现自动化、智能化、高效率的客户服务与业务运营。以下是优化策略和具体实践方法： 一、呼叫中心系统优化 1. 智能路由与IVR优化智能ACD（自动呼叫分配&…...

编程日记 2025/8/17 18:29:51

C复习（主要复习）

指针和数组指针数组是一个数组，数组的每个元素都是指针。它适用于需要存储多个指针的场景，如字符串数组。数组指针是一个指针，指向一个数组。它适用于需要传递整个数组给函数或处理多维数组的场景。函数指针：函数指针的定义需要…...

编程日记 2025/8/19 12:18:43

网页五子棋项目测试报告

一、测试概述网页五子棋项目运用 Java 语言与 Spring 框架开发，具备用户登录注册、人机对战、在线匹配对局、房间邀请对局及积分排行榜等功能。本次测试旨在评估项目各功能的完整性、稳定性与交互性，依据各文章所描述的功能设计和实现细节进行全面测试…...

编程日记 2025/8/20 16:30:28

大模型提示词prompt

系列文章目录第一章提示词的引言和指南文章目录系列文章目录前言原则1：写清楚具体的说明1、使用分割符2、要求结构化输出3、检查条件是否满足检查完成任务所需的假设4、少量样例提示给出成功的例子原则2：给模型足够的时间思考1、给予模型要输出执…...

编程日记 2025/8/21 22:23:39

如何让Agent开发正真可控、可靠？Cursor AI工程化

工程化的目的不知道你在AI编程的过程中有没有这样的痛点？开发质量不理想、研发进度无法把控… 问题核心在于没有一套属于AI编程的规范，这正是工程化要解决的问题。如何工程化参考我们正常研发流程中的步骤，技术方案设计&评审->…...

编程日记 2025/8/20 19:50:29

计算机视觉——基于人工智能视觉注意力的在线广告中评估检测技术

概述自2023年在线广告行业估计花费了7403亿美元以来，很容易理解为什么广告公司会投入大量资源进行这一特定领域的计算机视觉研究。尽管这个行业通常较为封闭和保守，但偶尔也会在arxiv等公共存储库中发布一些研究，这些研究暗示了更先进的专…...

编程日记 2025/8/22 2:22:32

一、图像基础 I/O 与显示 1.cv2.imread() 2.cv2.imshow() 3. cv2.waitKey() 4. cv2.imwrite() 5. cv2.selectROI() 6. cv2.VideoCapture() 二、颜色空间与转换 1. cv2.cvtColor() 2. cv2.split() 三、阈值处理 1. cv2.threshold() 2. 特殊阈值方法...

编程日记 2025/8/21 1:08:46

Redis 的不同数据结构分别适用于哪些微服务场景

我们一块来分析下Redis 的不同数据结构在微服务场景下的具体应用： 1. String (字符串) 特点: 最基本的数据类型，二进制安全，可以存储任何类型的数据（文本、序列化对象、图片等），最大 512MB。支持原子性的…...

编程日记 2025/8/19 1:22:23

用node编写git钩子hooks的示例

关于 git 钩子函数，就是在 git 进行提交的时候触发一些可执行脚本的功能，详情可以看这篇博客【GIT知识】git进阶-hooks勾子脚本_git hooks-CSDN博客，我这里稍微演示一下怎么用 node 编写钩子的脚本以 pre-commit 钩子为例，会在用…...

编程日记 2025/8/21 12:23:10

RISC-V架构新生态：鸿道Intewell操作系统×全志D1芯片

在全球化技术博弈与自主可控需求的双重驱动下，RISC-V架构正从开源革命走向产业落地。然而，RISC-V生态的成熟不仅需要硬件层面的突破，更需操作系统与芯片的深度协同。鸿道Intewell操作系统与全志D1（RISC-V架构）芯片的适…...

编程日记 2025/8/20 18:22:29

盈达科技：重新定义GEO优化的技术边界与商业未来

——以硬核技术领跑生成式AI时代的认知主权争夺战 01 技术架构：AICC 2.0智能协同中心生成式AI优化的「核动力引擎」盈达科技独创的AICC 2.0（自适应-智能-认知-动态响应）智能协同中心，构建…...

编程日记 2025/8/23 2:04:36

芯片测试工具系统Demo示例

芯片测试工具系统Demo示例一个简单的芯片测试工具系统Demo示例，包含基础功能和模拟测试流程，使用Python实现： python import time import random import csv from datetime import datetime class VirtualChip: """模…...

编程日记 2025/8/20 4:36:33

从单模态到多模态：五大模型架构演进与技术介绍

前言 1. ResNet — 残差神经网络背景核心问题与解决方案原理模型架构ResNet 系列变体技术创新与影响 2. ViT — Vision Transformer背景核心思想发展历程Transformer的起源：ViT的出现：ViT的进一步发展： 模型架构技术创新与影响 3. Swin Trans…...

编程日记 2025/8/17 21:37:10

基于 Java 的淘宝 API 调用实践：商品详情页 JSON 数据结构解析与重构

一、引言在电商领域，淘宝拥有海量的商品数据。通过调用淘宝 API 可以获取商品详情页的 JSON 数据，这对于商家进行市场分析、竞品调研等具有重要意义。本文将详细介绍如何使用 Java 调用淘宝 API，获取商品详情页的 JSON 数据，并对…...

编程日记 2025/8/22 23:00:26

Sentinel源码—3.ProcessorSlot的执行过程二

大纲 1.NodeSelectorSlot构建资源调用树 2.LogSlot和StatisticSlot采集资源的数据 3.Sentinel监听器模式的规则对象与规则管理 4.AuthoritySlot控制黑白名单权限 5.SystemSlot根据系统保护规则进行流控 3.Sentinel监听器模式的规则对象与规则管理 (1)Sentinel的规则对象 …...

编程日记 2025/8/20 18:48:17