reactjs教程-js教程-PHP中文网

reactjs教程

冷漠man

发布： 2025-11-01 12:57:02

原创

959人浏览过

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

reactjs教程

React.js 是一个用于构建用户界面的 JavaScript 库，尤其适合构建单页应用。它由 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 <h1>Hello, {props.name}</h1>;
}

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

在 App.js 中使用它：

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

3. 状态管理：使用 useState Hook

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

示例：一个计数器组件

豆包AI编程

豆包推出的AI编程助手

483

查看详情

import { useState } from 'react';

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

  return (<div>
    <p>点击次数: {count}</p>
    <button onClick={() => setCount(count + 1)}>点击我</button>
  </div>);
}

这里，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 <div>{user ? user.name : '加载中...'}</div>;
}

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