React JS 教程：从零开始构建交互式前端 – wiki大全

作者： /

“`markdown

React JS 教程：从零开始构建交互式前端

React JS 已经成为现代 Web 开发中最受欢迎的 JavaScript 库之一。它以其组件化、声明式和高效的特点，让构建复杂的用户界面变得前所未有的简单。无论您是前端新手，还是希望扩展技能的开发者，本教程都将带您从零开始，逐步掌握 React 的核心概念，并构建一个交互式的前端应用。

什么是 React JS？

React 是一个由 Facebook 开发和维护的用于构建用户界面的 JavaScript 库。它专注于 UI 层，允许开发者创建可复用的 UI 组件。React 的核心思想是声明式编程：您只需描述 UI 的最终状态，React 会负责高效地更新 DOM 以匹配该状态。

为什么选择 React？

  • 组件化：将 UI 拆分为独立、可复用的小块，易于管理和维护。
  • 声明式：代码更具可读性，更容易理解应用的行为。
  • 高效：通过虚拟 DOM (Virtual DOM) 机制，React 能够最小化对实际 DOM 的操作，从而提高性能。
  • 庞大的社区与生态：拥有活跃的社区支持和丰富的第三方工具库。

前置条件

在开始之前，请确保您的开发环境中已安装以下工具：

  1. Node.js 和 npm (或 Yarn)：React 项目需要 Node.js 环境来运行构建工具。您可以从 nodejs.org 下载并安装。npm (Node Package Manager) 会随 Node.js 一同安装，Yarn 是另一个流行的包管理器，您可以选择其中一个使用。
  2. 基础的 HTML、CSS 和 JavaScript 知识：本教程假定您对这些 Web 基础技术有基本的了解。

第一章：搭建 React 开发环境

我们将使用 Vite 来快速创建一个 React 项目。Vite 是一个下一代的前端工具，提供了极快的冷启动时间和热模块替换 (HMR) 功能。

  1. 创建 React 项目

    打开您的终端或命令行工具，运行以下命令：

    bash
    npm create vite@latest my-react-app -- --template react

    • npm create vite@latest：使用 npm 创建一个新的 Vite 项目。
    • my-react-app：您的项目名称，可以随意更改。
    • --template react：指定使用 React 模板。

  2. 进入项目目录并安装依赖

    “`bash
    cd my-react-app
    npm install

    或者如果您使用 yarn:

    yarn

    “`

  3. 运行开发服务器

    “`bash
    npm run dev

    或者如果您使用 yarn:

    yarn dev

    “`

    您的浏览器将自动打开 http://localhost:5173 (或类似的端口)，您应该能看到一个基本的 React 欢迎页面。

第二章：核心概念解析

现在，让我们深入了解 React 的几个核心概念。

1. 组件 (Components)

组件是 React 应用的基石。它们是独立的、可复用的代码块，每个块负责渲染 UI 的一部分。

React 中主要有两种类型的组件：

  • 函数组件 (Functional Components)：推荐的现代 React 组件写法，使用 JavaScript 函数。
  • 类组件 (Class Components)：较旧的写法，使用 ES6 Class。本教程将主要侧重于函数组件和 React Hooks。

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

在 src 文件夹下创建一个名为 components 的新文件夹，并在其中创建一个 Welcome.jsx 文件。

“`jsx
// src/components/Welcome.jsx
import React from ‘react’;

function Welcome(props) {
return

Hello, {props.name}!

;
}

export default Welcome;
“`

2. JSX (JavaScript XML)

JSX 是一种 JavaScript 语法扩展，它允许您在 JavaScript 文件中编写类似 HTML 的代码。它不是强制的，但强烈推荐使用，因为它能让 UI 代码更直观。

JSX 的特点：

  • 在 JSX 中嵌入 JavaScript 表达式：使用大括号 {}。
  • 属性命名：使用驼峰命名法，如 className (对应 HTML 的 class)。
  • 自闭合标签：空元素必须自闭合，如 <img />。
  • 返回单一根元素：组件的 JSX 必须被一个根元素包裹 (或使用 Fragment <>)。

示例：在 App.jsx 中使用 Welcome 组件

“`jsx
// src/App.jsx
import { useState } from ‘react’;
import Welcome from ‘./components/Welcome’; // 导入 Welcome 组件
import ‘./App.css’;

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

return (

{/ 使用 Welcome 组件，并通过 name 属性传递数据 /}

  <p>You clicked {count} times</p>
  <button onClick={() => setCount(count + 1)}>
    Click me
  </button>
</div>

);
}

export default App;
“`

3. Props (属性)

Props (properties 的缩写) 是从父组件向子组件传递数据的方式。它们是只读的，意味着子组件不能直接修改父组件传递给它的 props。

在上面的 Welcome 组件示例中，name 就是一个 prop，它从 App 组件传递到 Welcome 组件。

4. State (状态) 与 Hooks (useState)

State 是组件内部管理的数据，它可以随着时间的推移而改变。当组件的 state 改变时，React 会重新渲染组件以反映最新的状态。

对于函数组件，我们使用 useState 这个 Hook 来管理状态。

useState 的用法：

javascript
const [stateVariable, setStateFunction] = useState(initialValue);

  • stateVariable：当前的状态值。
  • setStateFunction：一个函数，用于更新 stateVariable。调用此函数会导致组件重新渲染。
  • initialValue：状态的初始值。

示例：计数器 (App.jsx 中的 count 状态)

在 App.jsx 中，我们定义了一个 count 状态：

“`jsx
import { useState } from ‘react’; // 导入 useState Hook

function App() {
const [count, setCount] = useState(0); // 定义 count 状态，初始值为 0

return (

You clicked {count} times

);
}
“`

每当点击按钮时，setCount(count + 1) 会更新 count 的值，React 会检测到状态变化并重新渲染 App 组件，从而更新页面上显示的数字。

第三章：构建一个交互式待办事项列表应用

现在，让我们综合运用所学知识，构建一个简单的待办事项 (Todo List) 应用。

应用功能：

  1. 显示待办事项列表。
  2. 添加新的待办事项。
  3. 标记待办事项为完成/未完成。
  4. 删除待办事项。

1. 规划组件结构

我们将把应用拆分为以下几个组件：

  • App.jsx：根组件，管理所有待办事项的整体状态。
  • TodoForm.jsx：用于输入新待办事项的表单。
  • TodoList.jsx：显示待办事项列表。
  • TodoItem.jsx：单个待办事项的显示和操作。

2. 创建 TodoItem.jsx

这个组件负责显示一个待办事项，并提供完成和删除的功能。

“`jsx
// src/components/TodoItem.jsx
import React from ‘react’;

function TodoItem({ todo, toggleComplete, deleteTodo }) {
return (

toggleComplete(todo.id)}
/>

{todo.text}

);
}

export default TodoItem;
“`

  • 接收 todo 对象、toggleComplete 和 deleteTodo 函数作为 props。
  • 复选框的 checked 属性根据 todo.completed 状态决定。
  • 点击复选框时调用 toggleComplete。
  • 点击删除按钮时调用 deleteTodo。

3. 创建 TodoForm.jsx

这个组件包含一个输入框和一个按钮，用于添加新的待办事项。

“`jsx
// src/components/TodoForm.jsx
import React, { useState } from ‘react’;

function TodoForm({ addTodo }) {
const [inputValue, setInputValue] = useState(”);

const handleSubmit = (e) => {
e.preventDefault(); // 阻止表单默认提交行为
if (inputValue.trim()) { // 确保输入不为空
addTodo(inputValue);
setInputValue(”); // 清空输入框
}
};

return (

setInputValue(e.target.value)}
placeholder=”Add a new todo”
style={{ padding: ‘8px’, marginRight: ’10px’, width: ‘200px’ }}
/>

);
}

export default TodoForm;
“`

  • 使用 useState 管理输入框的值。
  • handleSubmit 函数在表单提交时调用，它会调用父组件传递的 addTodo 函数。

4. 创建 TodoList.jsx

这个组件负责渲染所有 TodoItem。

“`jsx
// src/components/TodoList.jsx
import React from ‘react’;
import TodoItem from ‘./TodoItem’;

function TodoList({ todos, toggleComplete, deleteTodo }) {
return (

{todos.map((todo) => (

))}

);
}

export default TodoList;
“`

  • 接收 todos 数组和两个处理函数作为 props。
  • 使用 map 方法遍历 todos 数组，为每个 todo 渲染一个 TodoItem。

5. 更新 App.jsx

现在，我们将把所有组件整合到 App.jsx 中，并管理待办事项的整体状态。

“`jsx
// src/App.jsx
import React, { useState } from ‘react’;
import TodoForm from ‘./components/TodoForm’;
import TodoList from ‘./components/TodoList’;
import ‘./App.css’; // 可以添加一些基础样式

function App() {
const [todos, setTodos] = useState([]); // 初始为空的待办事项数组
const [nextId, setNextId] = useState(1); // 用于为每个 todo 生成唯一的 ID

// 添加待办事项
const addTodo = (text) => {
const newTodo = {
id: nextId,
text: text,
completed: false,
};
setTodos([…todos, newTodo]); // 使用展开运算符添加新 todo
setNextId(nextId + 1);
};

// 切换待办事项的完成状态
const toggleComplete = (id) => {
setTodos(
todos.map((todo) =>
todo.id === id ? { …todo, completed: !todo.completed } : todo
)
);
};

// 删除待办事项
const deleteTodo = (id) => {
setTodos(todos.filter((todo) => todo.id !== id)); // 过滤掉要删除的 todo
};

return (

My Todo List


);
}

export default App;
“`

现在保存所有文件，并确保您的开发服务器正在运行 (npm run dev)。您应该能在浏览器中看到一个功能完整的待办事项列表应用！

可选：添加一些基础样式

您可以修改 src/App.css 来美化您的应用：

“`css
/ src/App.css /

root {

max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}

.App {
font-family: ‘Arial’, sans-serif;
background-color: #f4f4f4;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 500px;
margin: 50px auto;
}

h1 {
color: #333;
margin-bottom: 30px;
}

button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
“`

第四章：超越基础

恭喜您！您已经成功构建了一个交互式 React 应用。这只是 React 世界的开始，还有更多强大的概念等待您探索：

  • useEffect Hook：用于处理副作用，如数据获取、订阅或手动更改 DOM。
  • Context API / 状态管理库：对于大型应用，您可能需要更强大的状态管理解决方案，如 React Context、Redux、Zustand 或 Jotai。
  • React Router：用于在单页应用中实现路由功能，让您可以在不同页面之间导航。
  • 表单处理：更复杂的表单验证和管理。
  • 自定义 Hook：将可复用的逻辑封装成自定义 Hook。
  • 测试：学习如何测试您的 React 组件。
  • 样式方案：除了普通 CSS，还可以探索 CSS Modules、Styled Components、Tailwind CSS 等。

总结

在本教程中，您学习了：

  • React JS 的基本概念及其优势。
  • 如何使用 Vite 快速搭建 React 项目。
  • 函数组件、JSX、Props 和 State (useState Hook) 等核心概念。
  • 通过构建一个待办事项列表应用，将这些概念付诸实践。

通过不断练习和构建更多项目，您将对 React JS 越来越熟练。祝您的 React 学习之旅一帆风顺！
“`

滚动至顶部