React JS 入门指南 – wiki词典

作者： /

React JS 入门指南

React JS 是由 Facebook (现在是 Meta) 开发和维护的一个用于构建用户界面 (UI) 的 JavaScript 库。它以其声明式、组件化和高效的特性，成为当今最流行的前端开发技术之一。

为什么选择 React？

  1. 声明式编程: React 使您能够轻松创建交互式 UI。您只需描述 UI 在给定状态下的样子，React 会在数据变化时高效地更新和渲染组件。这使得代码更易于理解和调试。
  2. 组件化: React 的核心思想是将 UI 拆分成独立、可复用的组件。每个组件都有自己的逻辑和外观，可以像乐高积木一样组合起来构建复杂的应用程序。
  3. 学习曲线相对平缓: 尽管有 JSX 这样的新语法，但 React 的核心概念相对容易掌握，特别是对于有 JavaScript 基础的开发者。
  4. 庞大的生态系统和社区: React 拥有一个巨大且活跃的社区，这意味着丰富的学习资源、第三方库和工具支持。
  5. 高性能: React 使用虚拟 DOM (Virtual DOM) 技术，通过比较新旧虚拟 DOM 树的差异，最小化对真实 DOM 的操作，从而提高应用程序的性能。

入门先决条件

在开始 React 开发之前，您需要安装以下工具：

  1. Node.js: React 项目通常使用 Node.js 的包管理器 (npm 或 yarn) 来管理依赖。请访问 Node.js 官方网站 下载并安装 LTS (长期支持) 版本。安装 Node.js 会自动安装 npm。
  2. 文本编辑器/IDE: 推荐使用 Visual Studio Code (VS Code)，因为它对 JavaScript/TypeScript 和 React 有很好的支持，并提供了丰富的插件。

安装完成后，您可以在命令行中运行以下命令来验证 Node.js 和 npm 是否安装成功：

bash
node -v
npm -v

创建第一个 React 项目

有多种方式可以创建 React 项目，最常用和推荐的是使用脚手架工具。

1. 使用 Vite (推荐)

Vite 是一个现代化的前端构建工具，它提供了极快的开发服务器启动速度和即时模块热更新 (HMR)。对于新的 React 项目，Vite 是一个非常好的选择。

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

“`bash

创建一个名为 my-react-app 的 React 项目，选择 React -> JavaScript/TypeScript

npm create vite@latest my-react-app — –template react

进入项目目录

cd my-react-app

安装依赖

npm install

启动开发服务器

npm run dev
“`

成功启动后，您会在命令行中看到一个本地开发服务器的地址 (通常是 http://localhost:5173/)。在浏览器中打开这个地址，您应该能看到一个基本的 React 应用程序界面。

2. 使用 Create React App (CRA – 传统方式)

Create React App 是 Facebook 官方提供的 React 项目脚手架，它提供了一个开箱即用的开发环境，无需手动配置复杂的构建工具 (如 Webpack、Babel)。虽然它仍然是一个可靠的选择，但 Vite 在开发体验上通常更快。

“`bash

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

npx create-react-app my-react-app

进入项目目录

cd my-react-app

启动开发服务器

npm start
“`

项目结构概览 (以 Vite 为例)

一个典型的 React 项目结构如下：

my-react-app/
├── public/
│ └── vite.svg
├── src/
│ ├── assets/ # 静态资源，如图片、字体等
│ ├── components/ # 可复用组件目录 (可选，通常自行创建)
│ ├── App.css # 根组件的样式文件
│ ├── App.jsx # 根组件文件
│ ├── index.css # 全局样式文件
│ └── main.jsx # 应用的入口文件 (渲染根组件到 DOM)
├── .gitignore
├── index.html # HTML 模板文件
├── package.json # 项目元数据和依赖配置
├── README.md
├── vite.config.js # Vite 配置 (如果使用 Vite)
└── ...

核心概念

1. 组件 (Components)

组件是 React 应用程序的基石。它们是独立的、可复用的代码块，负责渲染 UI 的一部分。React 组件可以是函数组件或类组件。在现代 React 开发中，函数组件和 Hooks 更为流行。

函数组件示例 (src/App.jsx):

“`jsx
// src/App.jsx
import React, { useState } from ‘react’; // 引入 React 和 useState Hook
import ‘./App.css’; // 引入样式文件

function App() {
// 使用 useState Hook 定义一个状态变量 count 及其更新函数 setCount
const [count, setCount] = useState(0);

// 事件处理函数
const handleClick = () => {
setCount(count + 1);
};

return (

Hello, React!

You clicked {count} times.


);
}

export default App; // 导出 App 组件
“`

2. JSX (JavaScript XML)

JSX 是一种 JavaScript 的语法扩展，它允许您在 JavaScript 代码中编写类似 HTML 的结构。React 使用 JSX 来描述 UI 的样子。

“`jsx
// 这是一个 JSX 表达式
const element =

Hello, world!

;

// 在 JSX 中嵌入 JavaScript 表达式，用花括号 {} 包裹
const name = ‘React Developer’;
const greeting =

Hello, {name}!

;
“`

JSX 规则:

  • 根元素: 每个 JSX 片段都必须有一个唯一的根元素 (或者使用 <>... 片段)。
  • 闭合标签: 所有的标签都必须正确闭合，例如 <img /> 或 <div></div>。
  • className: 在 JSX 中，使用 className 代替 HTML 的 class 属性。
  • 驼峰命名法: 大多数 HTML 属性在 JSX 中使用驼峰命名法，例如 onClick 代替 onclick。

3. Props (属性)

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

父组件 (src/App.jsx):

“`jsx
import React from ‘react’;
import Greeting from ‘./Greeting’; // 引入子组件

function App() {
return (

{/ 向 Greeting 组件传递 name 属性 /}


);
}

export default App;
“`

子组件 (src/Greeting.jsx):

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

// Greeting 组件接收一个 props 对象，其中包含 name 属性
function Greeting(props) {
return (

Hello, {props.name}!

);
}

export default Greeting;
“`

4. 状态 (State)

State 是组件内部管理的数据，它可以在组件的生命周期中发生变化。当 state 发生变化时，React 会重新渲染组件以反映这些变化。在函数组件中，我们使用 useState Hook 来管理状态。

示例 (已在上面的 App.jsx 中展示 count 状态)：

“`jsx
import React, { useState } from ‘react’;

function Counter() {
const [count, setCount] = useState(0); // count 是状态，setCount 是更新函数

return (

Count: {count}


);
}

export default Counter;
“`

事件处理

在 React 中处理事件与 HTML 类似，但有一些不同之处：

  • React 事件使用驼峰命名法，例如 onClick 而不是 onclick。
  • 您传递一个函数作为事件处理程序，而不是一个字符串。

“`jsx
function MyButton() {
function handleClick() {
alert(‘Button clicked!’);
}

return (

);
}
“`

条件渲染与列表渲染

1. 条件渲染

根据条件渲染不同的组件或元素。

“`jsx
function UserGreeting(props) {
return

Welcome back!

;
}

function GuestGreeting(props) {
return

Please sign up.

;
}

function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return ;
}
return ;
}

// 在父组件中使用:
//
//
“`

也可以使用 JavaScript 的逻辑与运算符 && 或三元运算符 ? :。

jsx
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}

2. 列表渲染

渲染一个列表的元素时，需要使用 map() 方法，并且为列表中的每个元素提供一个唯一的 key 属性。

“`jsx
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// key 属性帮助 React 识别哪些项发生了变化、被添加或被删除

  • {number}

    • );
    return (

      {listItems}

    );
    }

    // 在父组件中使用:
    // const numbers = [1, 2, 3, 4, 5];
    //
    “`

    样式化 React 组件

    有多种方式可以为 React 组件添加样式：

    1. CSS 文件: 导入普通的 .css 文件 (如 App.css)。
    2. CSS Modules: 避免样式冲突，通过 import styles from './MyComponent.module.css' 导入，并使用 className={styles.myClass}。
    3. 内联样式: style={{ color: 'red', fontSize: '16px' }} (使用 JavaScript 对象)。
    4. CSS-in-JS 库: 如 styled-components 或 Emotion，允许在 JavaScript 中编写 CSS。

    总结与下一步

    恭喜您完成了 React JS 的入门！您现在已经了解了：

    • React 是什么以及为什么要使用它。
    • 如何设置开发环境和创建第一个 React 项目。
    • React 的核心概念：组件、JSX、Props 和 State。
    • 如何处理事件以及条件渲染和列表渲染。

    这只是一个开始。要成为一名熟练的 React 开发者，您还需要深入学习以下内容：

    • Hooks: useEffect, useContext, useReducer, useCallback, useMemo 等。
    • 路由: 使用 react-router-dom 来管理应用程序的页面导航。
    • 状态管理: 对于大型应用程序，可能需要使用 Redux, Zustand, Recoil, Jotai 或 React Context API 进行更复杂的状态管理。
    • 数据获取: 如何从 API 获取数据，例如使用 fetch 或 axios。
    • 表单处理: 构建受控组件来处理表单输入。
    • 测试: 使用 Jest 和 React Testing Library 对组件进行测试。
    • TypeScript: 将 TypeScript 引入 React 项目以获得类型安全。

    推荐学习资源:

    祝您在 React 的学习旅程中一切顺利！

    滚动至顶部