React 前端框架入门教学

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