资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

教程：Windows 上的 React（初学者）

创作时间:

作者:

@小白创作中心

教程：Windows 上的 React（初学者）

引用

来源

https://learn.microsoft.com/zh-cn/windows/dev-environment/javascript/react-beginners-tutorial

本教程将帮助React初学者快速入门。通过在Windows环境下使用React进行开发，你将学习React的基本概念、如何在Visual Studio Code中设置React项目，以及如何通过API调用获取数据并在React组件中显示。

本文内容

如果你不熟悉如何使用React，本指南介绍了一些基础知识，可帮助你入门。

先决条件

一些基本术语和概念

React 是用于生成用户界面的 JavaScript 库。

它是开源的，这意味着你可以通过提交问题或拉取请求来为其作出贡献。（就如这些文档所述！）
它是声明性的，这意味着你可以编写自己所需的代码，然后 React 会使用已声明的代码并执行所有 JavaScript/DOM 步骤以得到所需的结果。
它是基于组件的，这意味着应用程序是使用预制的且可重用的独立代码模块创建的，这些模块管理其自己的状态并且可使用 React 框架互相粘附在一起，这样就可以在不让状态出现在 DOM 中的情况下通过应用传递数据。
React 的宣传语是“Learn once, write anywhere（一次学习，处处适用）。”目的是实现代码重用，不是假设你如何将 React UI 用于其他技术，而是在无需重写现有代码的情况下使组件可以重复使用。
JSX是为了与 React 一起使用而编写的 JavaScript 的语法扩展，其与 HTML 类似，但实际上是需要编译或转换为常规 JavaScript 的 JavaScript 文件。
虚拟 DOM：DOM是 Document Object Model（文档对象模型）的缩写，表示应用的 UI。每当应用 UI 的状态更改时，DOM 会进行更新以表示这种更改。 DOM 频繁更新时，性能会变慢。虚拟 DOM 只是 DOM 的可视化表示形式，因此当应用状态发生更改时，将更新虚拟 DOM 而不是实际 DOM，从而降低性能成本。它是 DOM 对象的表示形式，如一个轻量级副本。
视图：呈现在浏览器中供用户查看的内容。在 React 中，视图与你希望用户在其屏幕上看到的呈现元素的概念相关。
状态：指由不同视图存储的数据。状态通常取决于用户的身份和用户正在执行的操作。例如，登录到网站可能会显示你的用户配置文件（视图）及你的姓名（状态）。状态数据会根据用户而更改，但视图将保持不变。状态用于实现用户与应用程序的大部分交互。
组件属性：是父组件将一些信息作为值或数据（包括对象、数组和函数）传递给其子组件的一种方式。属性为只读，不能由子组件更新。

尝试在 Visual Studio Code 中使用 React

通过 React 创建应用程序的方法有多种（请参阅React 概述页中的示例）。本教程将介绍如何使用vite快速设置一个可正常运行的 React 应用，这样就可以看到它运行并可专注于通过代码进行试验，从而不用关心生成工具如何。

在 Windows 或 WSL 上使用 vite（查看上述先决条件）创建新项目：

npm create vite@latest hello-world -- --template react

cd hello-world

安装依赖项：

npm install

启动本地开发服务器：

npm run dev

新的 React Hello World 应用将编译并打开默认 Web 浏览器，以显示其正在 http://localhost:5173 上运行。

停止运行 React 应用 (Ctrl+c)，并通过输入以下命令在 VS Code 中打开其代码文件：

code .

找到 src/App.jsx 文件，并找到如下所示的标头部分：

<p>Edit <code>src/App.jsx</code> and save to test HMR</p>

将其更改为：

<p>Hello World! This is my first React app.</p>

打开终端窗口并启动本地开发服务器：

npm run dev

也可以使用集成的 VS Code 终端 (Ctrl + `)，并从中启动开发服务器。在 React 应用的整个开发过程中，可以让本地开发服务器保持运行状态，所有更改将立即在浏览器的 http://localhost:5173 中呈现。

应用程序文件结构

初始文件结构如下所示：

hello-world
├── node_modules 
├── README.md 
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── assets
│   │   └── react.svg
│   ├── index.css
│   └── main.jsx
└── vite.config.js

对于初学者而言，这些是需要了解的重要文件和文件夹。

index.html：是 Vite 从 src 文件夹中注入代码以供浏览器运行的文件。除了更改 React 应用程序的标题外，不应编辑此文件。
src 文件夹：是 React 应用程序的源代码所在的位置。这是创建自定义组件、CSS 文件和生成应用程序所需的其他代码文件的地方。这些文件由 Vite 的构建工具处理，以解析和构建它们，从而创建最终 React 项目。
public 文件夹：包含将直接提供给浏览器的所有静态文件。 Vite 不会处理这些文件。

尝试通过 API 使用 React

若使用相同的 Hello World! 应用（通过 React 生成并通过 Visual Studio Code 更新的应用），让我们尝试添加 API 调用以显示某些数据。

让我们从头开始。我们将删除 Vite 提供的几乎所有样本代码，只保留上一步的代码。App.jsx 文件现在应如下所示：

import "./App.css";
function App() {
  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}
export default App;

接下来，设置一个本地状态，在该状态下，我们可以保存 API 中的数据。状态是可以存储要在视图中使用的数据的位置。

若要添加本地状态，首先需要导入useStateReact 挂钩，以便向组件添加状态变量。还需要初始化本地状态。useState 返回一个由两个值组成的数组；当前状态和 set 函数。我们将当前状态称为初始化为 posts 空数组，稍后可以使用 setPosts 函数从 API 填充 POST 数据。App.jsx 文件现在应如下所示：

import { useState } from "react";
import "./App.css";
function App() {
  const [posts, setPosts] = useState([]);
  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}
export default App;

要调用一个包含数据的 API 以便在 React 应用中使用，我们将使用 .fetch JavaScript 方法。我们将调用的 API 是JSONPlaceholder，它是用于测试和原型制作的免费 API，并提供 JSON 格式的虚假占位符数据。使用useEffectReact 挂钩并使用set 函数更新 posts 状态。

import { useState, useEffect } from "react";
import "./App.css";
function App() {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    const url = "https://jsonplaceholder.typicode.com/albums/1/photos";
    fetch(url)
      .then((response) => response.json())
      .then((data) => setPosts(data));
  }, []);
  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}
export default App;

让我们查看一下 API 在我们的 posts 状态中保存了哪些数据。以下是虚假 JSON API 文件的一些内容。我们可以使用以下类别查看列出的数据的格式：albumId、id、title、url 和 thumbnailUrl。

[
  {
    "albumId": 1,
    "id": 1,
    "title": "accusamus beatae ad facilis cum similique qui sunt",
    "url": "https://via.placeholder.com/600/92c952",
    "thumbnailUrl": "https://via.placeholder.com/150/92c952"
  },
  {
    "albumId": 1,
    "id": 2,
    "title": "reprehenderit est deserunt velit ipsam",
    "url": "https://via.placeholder.com/600/771796",
    "thumbnailUrl": "https://via.placeholder.com/150/771796"
  }
]

为了显示 API 数据，我们现在需要在呈现的 return() 语句中添加一些 JSX 代码。我们将使用 map() 方法显示存储为键的 posts 对象中的数据。每个 POST 都将显示一个带有“ID #”的标题，随后是 JSON 数据中的 post.id 键值 + post.title 键值。然后是显示基于 thumbnailUrl 键值的图像的正文。

// rest of the code 
  return (
    <article>
      <h1>Posts from our API call</h1>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>ID #{post.id} {post.title}</h2>
          <img src={post.thumbnailUrl} />
        </article>
      ))}
    </article>
  );
}
export default App;