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

React 前端框架入门教学

article 2025/1/24 8:32:18

React 是目前最流行的前端框架之一，由 Facebook 开发和维护。它主要用于构建用户界面，强调组件化开发和高效更新。在本文中，我们将从零开始，逐步学习 React 的核心概念和基本用法。即使你是初学者，也能通过本文入门。

一、什么是 React？

React 是一个用于构建用户界面的 JavaScript 库，它的特点包括：

组件化开发：将 UI 划分为独立的、可复用的组件，便于维护和扩展。
声明式编程：通过声明式代码描述 UI 状态，React 会高效地更新和渲染需要改变的部分。
虚拟 DOM：React 使用虚拟 DOM 机制来提升性能，将变化计算后再一次性更新真实 DOM。

二、React 环境搭建

我们将通过 create-react-app 快速创建一个 React 项目。

1. 准备工具

Node.js：下载并安装 Node.js，安装后会自带 npm 包管理工具。
代码编辑器：推荐使用 VS Code。

2. 创建项目

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

npx create-react-app my-react-app

这会创建一个名为 my-react-app 的 React 项目。

3. 启动项目

进入项目文件夹并启动开发服务器：

cd my-react-app
npm start

浏览器会自动打开并显示一个 React 默认页面。

三、React 核心概念

1. 组件（Component）

组件是 React 的核心，可以理解为一个独立的 UI 模块。组件分为两种：

函数组件（推荐）
类组件

示例：创建一个简单组件

在 src 文件夹中，编辑 App.js：

function Welcome() {
  return <h1>Hello, React!</h1>;
}

export default Welcome;

2. JSX

JSX 是一种在 JavaScript 中嵌入 HTML 的语法扩展，看起来像 HTML，但实际是 JavaScript 的语法糖。

注意：JSX 的规则

使用 大括号 {} 嵌入 JavaScript 表达式。
每个标签必须关闭，比如 <img />。
最外层必须有一个父容器。

3. Props（属性）

props 是组件的输入参数，用于传递数据。

示例：使用 props

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

// 在父组件中调用
<Greeting name="Alice" />

4. State（状态）

state 是组件内部动态变化的数据。

示例：使用 state

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>
  );
}

四、React 项目结构

React 项目的典型结构如下：

src/
├── components/   // 组件文件夹
├── App.js        // 主组件
├── index.js      // 项目入口文件
└── styles/       // 样式文件夹

将功能划分到独立的组件文件中，便于团队协作和代码维护。

五、React 基本操作

1. 条件渲染

根据条件显示不同内容：

function Login(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please log in.</h1>;
  }
}

2. 列表渲染

使用 .map() 渲染列表：

function ItemList(props) {
  const items = props.items;
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

3. 表单处理

处理用户输入：

function Form() {
  const [inputValue, setInputValue] = useState("");

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`You entered: ${inputValue}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={inputValue} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}