React JS实战：创建你的第一个单页面应用 – wiki大全

作者： /

React JS 实战：创建你的第一个单页面应用

单页面应用（Single Page Application, SPA）是现代 Web 开发的主流模式。与传统多页面应用不同，SPA 在加载初始页面后，通过动态重写当前页面内容而非从服务器加载新页面，从而提供了更流畅、更接近桌面应用的用户体验。React JS，凭借其组件化架构、高效的虚拟 DOM 和庞大的生态系统，已成为构建 SPA 的首选库之一。

本文将通过一个详细的实战教程，带你从零开始，一步步构建一个属于你自己的 React 单页面应用。

前提条件

在开始之前，请确保你的开发环境中已安装以下软件：

  1. Node.js 和 npm：React 的开发环境依赖于 Node.js。npm（Node 包管理器）会随 Node.js 一同安装。你可以访问 Node.js 官网 下载并安装。
  2. 基础知识：了解 HTML、CSS 和 JavaScript (特别是 ES6+) 的基本语法。

第一步：初始化 React 项目

创建 React 项目最快捷的方式是使用官方推荐的脚手架工具 create-react-app。它能帮你自动配置好所有必需的工具和环境。

  1. 打开你的终端（或命令提示符），进入你希望创建项目的文件夹。

  2. 运行以下命令：

    bash
    npx create-react-app my-first-spa

    这里的 my-first-spa 是你的项目名称，可以替换成任何你喜欢的名字。此命令会自动创建一个新目录，并下载所有依赖项。

  3. 进入项目目录并启动开发服务器：

    bash
    cd my-first-spa
    npm start

    执行 npm start 后，你的默认浏览器会自动打开 http://localhost:3000，并显示一个旋转的 React Logo。这标志着你的 React 应用已成功运行！

第二步：创建页面组件

在 SPA 中，“页面”实际上是由不同的组件来呈现的。让我们为应用创建三个页面：主页（Home）、关于我们（About）和联系我们（Contact）。

  1. 在 src 目录下，创建一个名为 components 的新文件夹，用于存放我们的 UI 组件。

  2. 在 src/components 文件夹中，创建以下三个文件：

    Home.js:
    “`javascript
    import React from ‘react’;

    function Home() {
    return (

    主页

    欢迎来到我们的第一个 React 单页面应用！

    );
    }

    export default Home;
    “`

    About.js:
    “`javascript
    import React from ‘react’;

    function About() {
    return (

    关于我们

    这里是关于我们页面的内容。

    );
    }

    export default About;
    “`

    Contact.js:
    “`javascript
    import React from ‘react’;

    function Contact() {
    return (

    联系我们

    你可以通过 [email protected] 联系我们。

    );
    }

    export default Contact;
    “`

第三步：设置路由

为了在不同“页面”之间导航，我们需要一个路由库。react-router-dom 是 React 应用中最流行的路由解决方案。

  1. 安装 react-router-dom：
    在终端中，确保你仍在项目根目录 (my-first-spa)，然后运行：

    bash
    npm install react-router-dom

  2. 配置路由：
    打开 src/App.js 文件，这是应用的主入口组件。我们将在这里配置路由规则，告诉应用在哪个 URL 路径下应该渲染哪个组件。

    将 src/App.js 的内容替换为以下代码：

    “`javascript
    import React from ‘react’;
    import { BrowserRouter as Router, Routes, Route, Link } from ‘react-router-dom’;
    import Home from ‘./components/Home’;
    import About from ‘./components/About’;
    import Contact from ‘./components/Contact’;
    import ‘./App.css’;

    function App() {
    return (

        <main>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </main>
  </div>
</Router>

    );
    }

    export default App;
    “`

代码解释：
* BrowserRouter (我们将其重命名为 Router)：包裹整个应用，启用客户端路由。
* Link：类似于 HTML 的 <a> 标签，但它能实现无页面刷新的导航。to 属性指定了目标路径。
* Routes：所有 Route 定义的容器。
* Route：定义了 URL 路径 (path) 与要渲染的组件 (element) 之间的映射关系。

现在，回到你的浏览器，你会看到页面顶部出现了“主页”、“关于我们”和“联系我们”的导航链接。点击它们，下方的内会相应地切换，并且整个页面不会刷新！

第四步：美化你的应用

默认的样式可能比较简陋。你可以通过修改 src/App.css 来为你的应用添加一些基本样式。

例如，为导航栏添加一些样式：

“`css
/ src/App.css /
.App {
text-align: center;
}

nav {
background-color: #282c34;
padding: 1rem 0;
}

nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
}

nav li {
margin: 0 15px;
}

nav a {
color: white;
text-decoration: none;
font-size: 1.2rem;
}

nav a:hover {
color: #61dafb;
}

main {
padding: 2rem;
}
“`

保存文件后，浏览器中的应用会自动更新样式，看起来更加专业。

第五步：使用 State 和 Effect 获取外部数据

一个真实的应用通常需要从服务器获取数据。React 通过 useState 和 useEffect 这两个 Hook 来管理组件的状态和副作用（如 API 请求）。

让我们在“关于我们”页面上显示一些从公共 API 获取的数据。

  1. 修改 About.js：
    我们将使用 JSONPlaceholder 这个免费的 API 来获取一些模拟的用户数据。

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

    function About() {
    const [users, setUsers] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
    // 使用 fetch 从 API 获取数据
    fetch(‘https://jsonplaceholder.typicode.com/users’)
    .then(response => response.json())
    .then(data => {
    setUsers(data);
    setLoading(false);
    })
    .catch(error => {
    console.error(“获取用户数据失败:”, error);
    setLoading(false);
    });
    }, []); // 空数组表示这个 effect 只在组件首次渲染时运行一次

    return (

    关于我们

    这里是关于我们页面的内容。我们从外部 API 获取了一些用户数据：

      {loading ? (
    <p>数据加载中...</p>
  ) : (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )}
</div>

    );
    }

    export default About;
    “`

代码解释：
* useState：我们用它创建了两个状态变量：users 用于存储从 API 返回的用户列表，loading 用于追踪数据是否仍在加载中。
* useEffect：我们将数据获取的逻辑放在 useEffect 中。fetch 函数向指定的 URL 发送网络请求。当数据成功返回时，我们通过 setUsers 更新 users 状态，并通过 setLoading(false) 隐藏加载提示。

现在，当你导航到“关于我们”页面时，你会看到一个简短的加载提示，随后会显示一个从网络获取的用户姓名列表。

总结与下一步

恭喜你！你已经成功创建并运行了你的第一个 React 单页面应用。你学习了如何：
* 使用 create-react-app 初始化项目。
* 创建和组织 React 组件。
* 使用 react-router-dom 实现客户端路由。
* 通过 CSS 美化应用。
* 使用 useState 和 useEffect Hooks 来管理状态和获取外部数据。

这只是 React 世界的开始。接下来，你可以尝试：
* 深入学习组件：探索类组件和函数组件的更多高级用法。
* 状态管理：当应用变得复杂时，可以学习使用 Context API 或 Redux、Zustand 等库来管理全局状态。
* UI 框架：集成像 Ant Design 或 Material-UI 这样的 UI 库，快速构建美观的界面。
* 部署应用：学习如何将你的应用部署到 Netlify, Vercel 或 GitHub Pages 等平台，让全世界都能访问。

希望这篇文章能帮助你迈出 React 开发的第一步。继续探索，不断实践，你将能构建出更强大、更复杂的 Web 应用。祝你编码愉快！

滚动至顶部