快速掌握 React 基础入门: 一个完整的指南（一）-阿里云开发者社区

I. 介绍

A. 什么是 React

React 是一个用于构建 Web 应用程序的 JavaScript 库，它由 Facebook 开发并维护。

React 库帮助开发者构建数据驱动的交互式用户界面 (UI)。

它提供了一种声明性的编程方式，使得开发者可以针对不同的数据状态渲染出对应的 UI，让开发者可以更加专注于用户体验和系统的交互逻辑。

React 还利用 Virtual Dom 技术提高了 Web 应用的性能和响应速度，从而提升用户体验。React 虽然是一个轻量级的库，但由于其高度的可重复使用组件模型，在开发大规模的应用程序时，可以提高项目的开发效率。

React 被广泛用于构建单页应用 (SPA) 和多页应用，它也可以轻松地与其他 JavaScript 库，框架和技术配合使用。

B. React 特点

React 具有以下特点：

1. 组件化

React 将 UI 分解为小型、独立且可重复使用的组件，这使得开发者可以更加高效地编写代码。组件化也使得应用程序更容易维护和更新。

2. Virtual DOM

React 使用虚拟 DOM 来优化网页更新性能，它通过在浏览器端维护一份内存中的树结构，来优化对于 DOM 的操作，从而提升了 Web 应用的性能。

3. 单向数据流

React 强制执行组件的单向数据流，将应用程序的数据从父组件流向子组件。这种数据流的模式使得代码更加易于调试和维护。

4. JSX

React 使用 JSX (JavaScript XML) 语法，这使得可以在 JavaScript 中直接编写 HTML 代码。JSX 的易读性、易维护性和易用性使得我们可以更加方便地将数据和逻辑嵌入到 UI 组件中。

5. 生态系统

由于 React 是由 Facebook 维护的，所以它的生态环境非常强大。开发者可以通过使用 React 的大量插件和库来加速自己的开发流程，并得到更好的开发体验。

6. 开源

React 是开源软件，这意味着任何人都可以使用它来构建应用程序。这也意味着庞大的社区可以为 React 做出贡献和改进，同时还提供支持和文档，使得 React 的使用更加容易和普及。

C. React 的优势

React 的优势包括：

1. 高效和快速

React 使用虚拟 DOM 技术对 UI 进行高效的更新处理，而不是直接更新浏览器 DOM，能够显著提高应用程序的性能和响应速度。

2. 可重用性

React 的组件化思想使得 UI 可以被分解为小型、独立且可重复使用的组件，从而使得开发更加高效。

3. 易于学习和使用

React 的语法简洁易懂，通过组件化提供了一种直观的编写方式，使得开发者可以更容易地上手。

4. 生态系统强大

React 生态系统中有大量的第三方库和插件，可以有效地提高开发效率和代码质量，同时也支持整合其他框架和库。

5. 前后端分离

React 适合用于构建前后端分离的 Web 应用程序，使得前端负责 UI 和交互逻辑，后端负责数据和业务逻辑。

6. 社区支持

React 有一个庞大的社区支持，提供了大量的文档、教程和案例等，便于开发者学习和使用。

7. 可靠性和测试性

React 的组件化和单向数据流使得应用程序更可靠、易于测试和维护。

II. React 开发环境配置

A. Node.js 安装

以下是在 Windows、Mac 和 Linux 上安装 Node.js 的常用方法：

Windows上安装 Node.js

前往 Node.js 官网 (https://nodejs.org/)。
点击页面上的 “下载” 按钮。
下载对应的 Windows 安装包 (Windows Installer (.msi))。
下载后双击 .msi 文件进行安装，按照提示完成即可。
检查是否已安装成功：打开命令提示符或 PowerShell，输入 node -v 和 npm -v 命令，如果成功返回对应的版本号，则说明 Node.js 已经安装成功。

Mac上安装 Node.js

前往 Node.js 官网 (https://nodejs.org/)。
点击页面上的 “下载” 按钮。
下载对应的 macOS 安装包。
下载后打开 .pkg 文件进行安装，按照提示完成即可。
检查是否已安装成功：打开终端，输入 node -v 和 npm -v 命令，如果成功返回对应的版本号，则说明 Node.js 已经安装成功。

Linux上安装 Node.js

打开终端，输入 sudo apt-get update 命令更新包管理工具。
输入 sudo apt-get install nodejs 命令安装 Node.js。
输入 sudo apt-get install npm 命令安装 Node.js 的包管理工具。
检查是否已安装成功：在终端中输入 node -v 和 npm -v 命令，如果返回对应版本号，则表明 Node.js 已经成功安装。

以上是常用的几种安装 Node.js 的方法，可以根据不同的系统选择对应的安装方式进行安装。

B. React 的安装

在使用 React 之前，需要先安装 Node.js 和 npm（Node.js 包管理器），因为 React 本身是一个基于 Node.js 平台构建的 JavaScript 库。

安装 Node.js 和 npm 后，你可以使用 npm 安装 React，以下是常用的两种方式：

1. 使用 Create React App 脚手架工具创建 React 应用：

使用 Create React App 脚手架工具可以快速创建一个基于 React 的项目，该工具会自动配置好 React 的开发环境，开发者只需要根据需要进行开发即可。安装 Create React App 和创建 React App 的过程如下：

打开终端或命令提示符，输入如下命令进行安装 Create React App：

npx create-react-app my-app

其中，my-app 为项目名称，可以根据实际情况进行修改。

该命令将自动创建一个名为 my-app 的目录，并在其中创建 React 的项目模板，安装过程可能需要一些时间。
进入 my-app 目录，使用以下命令启动开发服务器：

cd my-app
npm start

打开浏览器访问 http://localhost:3000，即可看到 React 应用的初始页面。

2. 基于已有项目安装 React：

如果你已经有了一个现有的项目，可以通过以下方式安装 React：

在项目的根目录下，运行以下命令安装 React 和 React-DOM：

npm install --save react react-dom

React 和 React-DOM 安装成功后，你需要在项目中引入它们。在项目的入口文件中，例如 index.js 文件，添加以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
  <h1>Hello, World!</h1>,
  document.getElementById('root')
);

在以上代码中，你可以看到通过 import 语句引入了 React 和 ReactDOM，然后使用 ReactDOM.render() 方法将一段 JSX 代码渲染到页面中。

以上是常用的两种安装 React 的方法，根据实际需求进行选择即可。

C. Create React App

Create React App 是一个由 Facebook 官方推出的 React 应用程序的脚手架工具，可以快速方便地创建一个新的基于 React 的项目，同时自动配置好开发环境，包括 Babel、Webpack 和 ESLint 等工具，让开发者可以专注于开发本身而不用关注环境配置的问题，能够提高开发效率和代码质量。

使用 Create React App 创建 React 项目非常简单，只需要按照以下步骤操作：

确保已安装 Node.js 和 npm。
打开终端或命令提示符，输入以下命令：

npx create-react-app my-app

其中，my-app 为你将要创建的项目名称，可以根据实际情况进行修改。

Create React App 将自动创建一个名为 my-app 的目录，并在其中创建 React 的项目模板。

在生成的项目目录中，包含了一个简单的示例应用程序和项目配置文件等，其中包括：

public 目录：用于存放静态资源文件，如 HTML 文件、图像等。
src 目录：用于存放 React 组件、样式文件等源代码。
package.json 文件：用于存放项目的依赖信息和脚本命令等。

进入 my-app 目录，使用以下命令启动开发服务器：

cd my-app
npm start

打开浏览器，访问 http://localhost:3000，你将看到一个默认的简单页面，代表 Create React App 已经成功创建和运行了一个 React 应用程序。

使用 Create React App 创建 React 项目非常简单，可以帮助开发者快速构建 React 项目，避免了复杂的环境配置和项目结构搭建等问题，同时也提供了许多常用的工具和工程化方式，使得开发更加高效和便捷。

III. React 组件

A. 构建组件

在 React 中，组件是构建 Web 应用程序的重要概念，它们可以被视为是 UI 的独立模块，具有自己的状态和行为逻辑。在 React 中，组件分为两种类型：函数组件和类组件。

以下是创建一个基本的组件的示例，其中包含一个函数组件和一个类组件：

函数组件

import React from 'react';
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}
export default Greeting;

在这个例子中，我们进行了如下操作：

导入了 React 库。
创建了一个名为 Greeting 的函数组件，该组件接收一个 props 参数，并渲染一个标题。
使用 export default 将组件导出，使其可以被其他模块引用。

类组件

import React, { Component } from 'react';
class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}
export default Counter;

在这个例子中，我们创建了一个名为 Counter 的类组件，该组件包括：

一个构造函数，用于初始化组件的状态。
一个 handleClick 方法，用于更新组件状态。
一个 render 方法，用于渲染组件的 UI。
使用 export default 将组件导出，使其可以被其他模块引用。

在 React 中，除了函数组件和类组件之外，还有许多其他的组件类型，如高阶组件、无状态组件、受控组件等，开发者可以根据实际需求选择不同的组件类型来构建 React 应用程序。

B. 组件语法

React 中组件的语法可以使用类组件和函数组件两种方式来定义。

类组件

类组件是使用 ES6 中提供的 class 语法来定义的，它必须包含一个 render() 方法，用于返回组件的 UI 渲染结果。以下是一个基本的类组件示例：

import React, { Component } from 'react';
class HelloWorld extends Component {
  render() {
    return <h1>Hello, world!</h1>;
  }
}
export default HelloWorld;

函数组件

函数组件是使用 ES6 中的函数语法来定义的，它不需要使用类声明方式，直接将组件作为函数的返回值即可。以下是一个基本的函数组件示例：

import React from 'react';
function HelloWorld() {
  return <h1>Hello, world!</h1>;
}
export default HelloWorld;

在组件中，也可以使用 props 来向组件传递参数和数据。props 是组件的一个对象属性，其中包含了组件所需要的所有信息。以下是一个带有 props 的示例：

import React from 'react';
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}
export default Greeting;

在这个示例中，我们创建了一个名为 Greeting 的函数组件，它接收一个名为 props 的参数，并使用它渲染一段问候语。我们在组件的标签中提供了一个名为 name 的 props，根据这个值来动态生成问候语中的名字。

在 React 组件中，也可以使用 state 来存储组件的数据和状态信息。state 是一个对象，用于存放组件内部的状态信息。以下是一个带有 state 的示例：

import React, { Component } from 'react';
class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}
export default Counter;

在这个示例中，我们创建了一个名为 Counter 的类组件，它包含了一个表示当前计数的状态值 count。在 handleClick() 方法中，每次点击按钮时，我们使用 setState() 方法改变组件的状态并重新渲染 UI。在 render() 方法中，我们使用 this.state.count 访问组件的状态信息，并将其渲染到页面上。

C. 组件属性

在 React 中，组件属性是指在组件标签中定义的属性，可以用于向组件传递数据或行为。下面是一张表格，说明如何在组件中使用属性：

属性	类型	描述
className	String	为组件添加 CSS 样式类。
style	Object	为组件添加行内样式。
onClick	Function	点击事件处理函数。
onChange	Function	输入事件处理函数。
onBlur	Function	失去焦点事件处理函数。
onFocus	Function	获取焦点事件处理函数。
onSubmit	Function	表单提交事件处理函数。
disabled	Boolean	禁用组件。
value	String or Number	组件的值。可用于受控组件。
checked	Boolean	复选框或单选框的选中状态。可用于受控组件。
defaultValue	String or Number	组件默认的值。
defaultChecked	Boolean	复选框或单选框默认的选中状态。

在组件中，可以通过 this.props 属性访问传递给组件的属性值，例如：

import React from 'react';
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}
export default Greeting;

在这个示例中，我们创建了一个名为 Greeting 的函数组件，它接收了一个 props 参数，并使用它渲染一段问候语。我们在组件的标签中传递了一个名为 name 的属性，用于动态生成问候语中的名字。在组件定义中，我们使用 props.name 访问传递的属性值。

除了以上列举的属性外，还有许多其他的属性可以用于组件，开发者可以根据实际需求选择不同的属性来提升组件的可重用性和灵活性。

D. 组件方法

在 React 中，组件方法用于处理组件的生命周期、事件、状态更新等操作。下面是一张表格，说明了一些常用的组件方法：

方法	描述
constructor(props)	构造函数，用于初始化组件状态和绑定方法。
render()	渲染组件的 UI。
componentDidMount()	组件挂载后触发的方法，用于进行初始化操作，如数据获取、DOM 操作等。
componentDidUpdate(prevProps, prevState, snapshot)	组件更新后触发的方法，用于响应属性或状态的变化，进行数据更新和 UI 重渲染等操作。
componentWillUnmount()	组件卸载前触发的方法，用于清理定时器、取消订阅等资源，避免内存泄漏。
shouldComponentUpdate(nextProps, nextState)	判断组件是否需要更新，优化组件性能。
setState(state, [callback])	更新组件的状态信息，并触发组件的重新渲染。
forceUpdate([callback])	强制使组件进行一次重新渲染。
handleClick(event)	处理点击事件的方法。
handleChange(event)	处理输入事件的方法。
handleBlur(event)	处理失去焦点事件的方法。
handleFocus(event)	处理获取焦点事件的方法。

在组件中，可以重写这些方法以实现自定义的行为逻辑。例如，在一个带有状态的组件中，我们可以使用 setState() 方法更新组件的状态，并在渲染方法中根据状态信息来动态生成 UI。当某个事件发生时，我们可以使用事件处理方法来修改组件状态，从而控制组件的行为。

IV. JSX

A. JSX 概述

JSX 是一种 JavaScript 的语法扩展，用于在 JavaScript 中描述 UI。它类似于 HTML，允许我们直接在 JavaScript 代码中编写类似 HTML 的结构。

JSX 允许我们在 JavaScript 中使用标签来描述页面的 UI 结构，并支持通过属性和表达式来动态生成标签和内容。它将 HTML、CSS、JavaScript 统一在一起，使得前端开发变得更加简单快捷。

在 React 应用中，JSX 是一个重要的概念，它是 React 组件中的渲染模板。通过编写 JSX，我们可以方便地描述 React 组件的 UI，从而构建出用户界面。

以下是一个简单的 JSX 示例：

import React from 'react';
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}
export default Greeting;

在这个示例中，我们使用 JSX 编写了一个名为 Greeting 的函数组件，它接收一个 props 参数，并使用它渲染一段问候语。在 JSX 中，我们使用类似 HTML 的标签语法，但是有一些不同之处：

标签名可以是任意的 JavaScript 表达式，也可以是一个组件变量。例如表示使用变量 MyComponent 引用的组件。
双括号 {{ }} 可以用于嵌套 JavaScript 表达式，例如 {props.data.map(item => {item} )}。
属性名采用驼峰式写法，例如 style={{ color: "red" }} 表示为样式设置一个 color 属性。
可以使用 JavaScript 表达式，例如 {props.name.toUpperCase()} 表示将名称转换为大写字母，并渲染为标题。
在标签中可以通过 { } 语法引用变量、属性和表达式，例如 {props.name} 表示使用 props 中的 name 属性来动态生成问候语中的名字。

总的来说，JSX 为 React 组件的编写提供了一份简洁、直观的语法，使得前端开发人员可以更加易于理解和维护代码。

B. JSX 语法

JSX 语法是一种 JavaScript 的语法扩展，用于在 JavaScript 中描述 UI。它的语法类似于 HTML，但也有一些注意事项和限制。

以下是 JSX 的常用语法：

使用尖括号 < > 包裹封装标签。例如：Hello World。
支持自闭合标签，例如：。
支持标签属性，通过 {} 可以嵌入 JavaScript 代码。例如：Hello World。
支持使用 {} 表达式，动态渲染内容。例如：{isActive ? 'Active' : 'Not Active'}。
支持使用 JSX 片段，允许组合多个组件。例如：

import React from 'react';
function App() {
  return (
    <>
      <Header />
      <Content />
      <Footer />
    </>
  );
}
export default App;

JSX 中不再使用 class 属性来声明样式，而是使用 className 属性，因为 class 是 JavaScript 保留关键字。
JSX 中的注释需要用 {/* */} 包括，而不是 // 或 /* */。
JSX 中的内容需要通过花括号 {} 包裹才能渲染 JavaScript 表达式、变量和对象属性。例如：{name}。

需要注意的是，JSX 语法虽然类似于 HTML，但是也存在一些限制和注意事项，例如：

JSX 中的属性名必须采用驼峰式写法，例如 className、onClick。
JSX 中的表达式需要在大括号 {} 内部包裹，而且只能包含合法的 JavaScript 表达式语句。
JSX 中的标签必须具有关闭标记，即不能使用类似这样的自闭合标签。

总体来说，JSX 语法可以让我们更加直观地编写 React 组件的 UI，从而大大提升前端开发效率。

C. JSX 中的属性

在 JSX 中，可以使用标签属性来传递组件参数。属性的语法和 HTML 一样，是以类似于属性名=属性值的形式出现在标签中的。

例如，我们可以将一个变量传递给组件的一个属性：

import React from 'react';
function MyComponent(props) {
  return <div>{props.message}</div>;
}
function App() {
  return <MyComponent message="Hello World" />;
}
export default App;

在这个示例中，我们将一个名为 message 的字符串变量作为 MyComponent 的属性传递给组件。在 JSX 中，我们使用如下方式来设置属性：

<MyComponent message="Hello World" />

注意，属性名开头必须是小写字母，而属性值可以是任何有效的 JavaScript 表达式。当需要引用 JavaScript 变量或表达式时，需要将它们用 { } 包裹，例如：

import React from 'react';
function MyComponent(props) {
  return <div>Age: {props.age}</div>;
}
function App() {
  const age = 18;
  return <MyComponent age={age} />;
}
export default App;

在这个示例中，我们在 App 组件中定义了一个名为 age 的变量，并将其作为 MyComponent 组件的 age 属性进行传递。

在 React 中，一般推荐使用 props 来传递组件参数，这样可以方便地实现组件的重用和组合。同时，也可以使用自定义的属性来实现一些特殊的功能。例如，可以使用 className 来设置 CSS 类名、使用 style 来设置行内样式、使用 onClick 来添加事件监听等。

import React from 'react';
function MyComponent(props) {
  return (
    <button
      className="btn btn-primary"
      style={{ color: 'white', backgroundColor: 'blue' }}
      onClick={props.onClick}
    >
      {props.label}
    </button>
  );
}
function App() {
  function handleClick() {
    console.log('Button clicked!');
  }
  return <MyComponent label="Click me" onClick={handleClick} />;
}
export default App;

在这个示例中，我们使用 className 和 style 来设置按钮的样式，使用 onClick 来添加点击事件监听，从而实现一个简单的按钮组件。

快速掌握 React 基础入门: 一个完整的指南（二）https://developer.aliyun.com/article/1426133

快速掌握 React 基础入门: 一个完整的指南（一）

I. 介绍

A. 什么是 React

B. React 特点

1. 组件化

2. Virtual DOM

3. 单向数据流

4. JSX

5. 生态系统

6. 开源

C. React 的优势

1. 高效和快速

2. 可重用性

3. 易于学习和使用

4. 生态系统强大

5. 前后端分离

6. 社区支持

7. 可靠性和测试性

II. React 开发环境配置

A. Node.js 安装

Windows上安装 Node.js

Mac上安装 Node.js

Linux上安装 Node.js

B. React 的安装

1. 使用 Create React App 脚手架工具创建 React 应用：

2. 基于已有项目安装 React：

C. Create React App

III. React 组件

A. 构建组件

函数组件

类组件

B. 组件语法

类组件

函数组件

C. 组件属性

D. 组件方法

IV. JSX

A. JSX 概述

{props.name.toUpperCase()}

{props.name}

B. JSX 语法

C. JSX 中的属性

热门文章

最新文章

相关课程

相关电子书