React.js 前端框架入门指南：从零开始构建你的第一个应用

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发和维护。它的核心特点是组件化和声明式 UI，广泛应用于 Web 和移动端开发。

本教程将带你快速入门 React，包括：

  • React 的基本概念
  • 如何搭建 React 开发环境
  • 编写你的第一个 React 组件
  • React 的核心功能（JSX、状态管理、事件处理、组件通信）

1. 什么是 React？

React 是一个用于构建交互式 UI 的 JavaScript 库。它的主要特点包括：

  • 组件化：UI 被拆分成独立的组件，便于复用和管理。
  • 声明式 UI：使用 JSX（类 HTML 语法）编写代码，使 UI 状态更新更加直观。
  • 虚拟 DOM：通过 Diffing 算法优化 DOM 更新，提高性能。

React 适用于单页面应用（SPA），但也可以与其他技术结合使用，如 Next.js（服务端渲染）和 React Native（移动开发）。

2. 搭建 React 开发环境

方式 1：使用 CDN 快速体验 React（适合入门）

在 HTML 中直接引入 React：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React 入门</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        function App() {
            return <h1>Hello, React!</h1>;
        }
        ReactDOM.createRoot(document.getElementById('root')).render(<App />);
    </script>
</body>
</html>

这种方式适合快速实验，但不适用于大型项目。

方式 2：使用 Vite 创建 React 项目（推荐）

Vite 是一个现代化的构建工具，性能比 create-react-app 更强。

# 安装 Vite 并创建 React 项目
npm create vite@latest my-react-app --template react

# 进入项目目录
cd my-react-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

打开浏览器访问 http://localhost:5173/，你会看到 Vite 的默认 React 页面！

3. React 的核心概念

3.1 JSX 语法（JavaScript XML）

JSX 是一种类似 HTML 的语法，用于描述 UI 结构。例如：

const element = <h1>Hello, React!</h1>;

JSX 实际上是 React.createElement 的语法糖：

const element = React.createElement("h1", null, "Hello, React!");

JSX 代码会被 Babel 编译成 JavaScript，React 负责渲染它。

JSX 规则：

  • 必须返回单一根元素（可以用 <></> 作为 Fragment）
  • 变量插值用 {}，例如 {name}
  • 属性用 camelCase 方式，如 className（而不是 class）

示例：

function App() {
    const name = "小明";
    return <h1>你好，{name}！</h1>;
}

3.2 组件（Component）

组件是 React 的核心。可以分为：

  • 函数组件（推荐）
  • 类组件（React 16 之后不推荐）

函数组件：

function Welcome(props) {
    return <h1>你好，{props.name}！</h1>;
}

使用：

<Welcome name="小明" />

类组件（了解即可）：

class Welcome extends React.Component {
    render() {
        return <h1>你好，{this.props.name}！</h1>;
    }
}

3.3 React 状态（State）

组件内部可以存储状态（state），状态变化会触发 UI 更新。

import { useState } from "react";

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

    return (
        <div>
            <p>计数：{count}</p>
            <button onClick={() => setCount(count + 1)}>增加</button>
        </div>
    );
}

export default Counter;

每次点击按钮，count 状态会增加，UI 会自动更新。

3.4 事件处理

在 React 中，事件使用 驼峰命名法，并且需要传入一个函数：

function ClickButton() {
    function handleClick() {
        alert("按钮被点击！");
    }

    return <button onClick={handleClick}>点击我</button>;
}

事件处理可以使用 箭头函数：

<button onClick={() => console.log("按钮被点击！")}>点击</button>

3.5 组件通信（Props）

父组件可以通过 Props 传递数据：

function Welcome(props) {
    return <h1>你好，{props.name}！</h1>;
}

function App() {
    return <Welcome name="小明" />;
}

如果 name 变化，Welcome 组件会自动更新。

3.6 条件渲染

React 支持 if 和三元运算符：

function Greeting({ isLoggedIn }) {
    return isLoggedIn ? <h1>欢迎回来！</h1> : <h1>请登录</h1>;
}

3.7 列表渲染（map）

React 推荐使用 map 处理列表：

const fruits = ["苹果", "香蕉", "橙子"];

function FruitList() {
    return (
        <ul>
            {fruits.map((fruit, index) => (
                <li key={index}>{fruit}</li>
            ))}
        </ul>
    );
}

注意：列表项必须有唯一的 key 以优化渲染性能。

3.8 受控组件（表单绑定）

React 推荐用 useState 绑定表单输入：

function Form() {
    const [input, setInput] = useState("");

    return (
        <input value={input} onChange={(e) => setInput(e.target.value)} />
    );
}

4. React 进阶（简要介绍）

4.1 React Router（路由管理）

安装 React Router：

npm install react-router-dom

创建路由：

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
            </Routes>
        </BrowserRouter>
    );
}

4.2 状态管理（Redux / Zustand）

Redux：

npm install redux react-redux @reduxjs/toolkit

推荐使用 Zustand：

npm install zustand

5. 结语

恭喜你！你已经掌握了 React 的基本概念：

  • JSX 语法
  • 组件 & Props
  • 状态管理（useState）
  • 事件处理
  • 列表 & 条件渲染
  • 组件通信

如果想深入学习，建议查看 React 官方文档！🚀

如果你喜欢这篇文章，欢迎点赞、收藏或分享！💡

# 前端框架 # react.js # 前端
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

CodeGenie的AI辅助调优让你问题定位效率大幅提升

这种高门槛导致许多开发者，尤其是初学者，在面对性能问题时往往无从下手，只能通过反复查阅手册与。AI会列出某类较大的实例对象及各自大小，继续选中某个实例对象进行分析，AI会给出某实例对象的完整引用链（到GC Root），并给出问题疑似原因。配备了强大的专业工具库和案例库，助力AI在海量运行数据中快速聚焦关键指标与异常模式，明确诊断问题根源，为开发者提供精准的问题解释与优化建议。辅助分析，化繁为简，提

avatar HarmonyOS开发者社区

花椒直播首次开源推流器组件 为鸿蒙开发者提供高性能推流解决方案

未来，华为将继续与生态伙伴深化合作，面向底座技术、通用能力和垂类行业等场景推出系列开发者场景化解决方案，不断提升鸿蒙应用的创新体验和开发效率，与广大开发者共建繁荣的鸿蒙生态。其核心架构将采集、编码、推流、录制、前处理等功能封装为标准插件，统一标准数据接口通信，实现真正意义上的模块解耦。在直播、短视频等高频多媒体场景中，推流器作为底层基础能力，承担着采集、编码、传输等关键任务。，开发者可按需构建出面

avatar HarmonyOS开发者社区

《音频焦点管理》最佳实践：让鸿蒙应用中的每一段声音，都不被打扰

如今，多音频应用同时运行已成常态，但“焦点混战”带来的体验割裂却成了用户和开发者的共同痛点——应用抢占焦点导致播放中断、恢复无门，调试时还得为跨应用协作反复踩坑。针对“前播与后播音频抢焦点”的核心难题，《音频焦点管理》不仅提供标准化系统能力，更附详细开发指导+示例代码，帮开发者少走弯路、快速搞定焦点管理。《音频焦点管理》最佳实践已正式登陆 HarmonyOS 开发者官网，只需打开官网首页，搜索 “

avatar HarmonyOS开发者社区