新闻中心 NEWS CENTER

reactjs教程

2025-11-01

浏览次数：次

React.js是用于构建用户界面的J*aScript库，1. 使用Create React App初始化项目；2. 通过函数组件和JSX编写UI；3. 用useState管理状态；4. 用useEffect处理副作用；5. 通过props实现组件通信。

reactjs教程

React.js 是一个用于构建用户界面的 J*aScript 库，尤其适合构建单页应用。它由 Facebook 开发并维护，现在被广泛用于前端开发。下面是一个简洁实用的 React 入门教程，帮助你快速上手。

1. 环境准备与项目初始化

要开始使用 React，最简单的方式是使用 Create React App，它能帮你快速搭建开发环境。

打开终端，运行以下命令：

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

执行后，React 项目会在 http://localhost:3000 启动，默认页面会显示 React 的欢迎界面。

2. 组件基础：函数组件与 JSX

React 的核心是组件。现代 React 推荐使用函数组件和 Hook。

示例：创建一个简单的函数组件

function Welcome(props) {
return

Hello, {props.name}

;
}

这个组件使用了 JSX —— 一种在 J*aScript 中写 HTML 的语法扩展。JSX 让 UI 结构更直观。

在 App.js 中使用它：

function App() {
return ();
}

3. 状态管理：使用 useState Hook

组件常常需要管理自己的数据状态。React 提供了 useState Hook 来实现这一点。

示例：一个计数器组件

import { useState } from 'react';

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

  return (

点击次数: {count}

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

237 查看详情芦笋演示

);
}

这里，useState 返回当前状态和更新状态的函数。每次点击按钮，状态更新，UI 自动刷新。

4. 处理副作用：useEffect Hook

很多组件需要处理数据获取、订阅或手动操作 DOM。这些称为“副作用”。React 使用 useEffect 来管理它们。

示例：模拟加载用户数据

import { useState, useEffect } from 'react';

function UserProfile({userId}) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/{userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]); // 依赖数组，仅在 userId 变化时重新执行

  return {user ? user.name : '加载中...'};
}

useEffect 第二个参数是依赖数组，控制何时重新执行副作用。