React Js 单页应用创建入门指南

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

为成功的 Web 应用程序选择合适的技术栈和架构是第一步。在 Web 应用开发领域，关于单页应用（SPA）的讨论一直不断。由于存在诸多不同的观点，决定为您的在线应用程序使用哪种架构可能比较困难。但在此之前，我们需要了解什么是单页应用？单页应用 (SPA) 是一种网页，它通过使用来自 Web 服务器的数据重写当前网页，从而与 Web 浏览器动态交互。因此，网页在执行过程中无需重新加载，而是直接在浏览器中运行。要开发您的单页应用，您可以聘请 React JS 开发人员。

单页应用程序和多页应用程序有什么区别？

单页应用程序 (SPA) 非常适合创建动态、加载速度快的网站，尤其适合开发移动应用。这种模式最大的缺点是搜索引擎优化 (SEO) 效果不佳，排名较低。因此，它非常适合社交网络、私人群组和对 SEO 要求不高的 SaaS 应用。Gmail、Google Maps、Facebook 和 GitHub 就是很好的例子。

相反，多页应用程序（SPA）对于在线商店、产品目录和商业网站来说非常有价值，因为它们可以处理需要多个页面、功能和菜单的大量数据。然而，React JS 开发人员正在努力寻找方法，使单页应用程序（SPA）也能处理大量数据。如果您想设计一个 SPA 并且需要一个优秀的框架，那么您应该考虑聘请一家 React JS 应用开发公司。亚马逊和 eBay 就是很好的例子。

单页应用程序有哪些优势？

以下是使用单页应用程序（SPA）的一些优势：

1. 由于 SPA 速度更快，所有网页资源在整个应用程序中只加载一次，并且只发送数据。
2. 此外，SPA 有效地缓存了本地存储，因为它只发送一个请求，保留所有数据，即使在离线状态下也能使用这些数据。
3. 事实上，SPA 简化并优化了开发任务，因为它消除了在服务器上渲染页面所需的代码编写过程。
4. Chrome 浏览器让调试 SPA 变得简单，因为它允许您浏览页面元素并查看网络活动。

什么情况下应该避免使用单页应用程序？

虽然单页应用（SPA）有其优势，但在某些情况下并不适合使用。因此，有些情况下你不应该使用单页应用。你甚至可以聘请一位 React JS 开发人员，他可以指导你哪些情况下不应该使用该库：

• SEO难题：任何用JavaScript编写的Web应用程序都会在不刷新页面的情况下加载数据，并且仅在用户请求时才加载数据。这意味着没有针对搜索引擎优化的特定URL，搜索引擎无法看到这些内容。这个问题只能通过服务器端渲染来解决。
• 下载时间：如果平台复杂、庞大且优化较差，用户的浏览器加载内容所需的时间将会更长。
• 支持 JavaScript：如果没有此功能，您将无法使用应用程序的全部功能。禁用浏览器中的 JavaScript 的用户将无法完全使用该应用程序。

如何创建一个单页 React.js 应用？

要使用 React 创建一个简单的单页应用程序，请按照以下步骤操作：

步骤 1：检查后台设置

1. 首先，请在开发环境中安装所有库和软件包。
2. 要开始使用 React，请创建一个 HTML 页面。
3. 安装所有需要的 React 组件。
4. 要获取 Web 应用程序，请使用 webpack 或其他打包工具来融合已安装的“组件”。

步骤二：创建应用程序

1. 要在选定的位置创建 React 应用，请使用npx create-react-app app-name.“
2. 不过，它还会生成一个名为“app-name”的目录，其中包含一些默认文件。

步骤 3：接下来，运行以下命令来安装 react-router-dom 并路由请求：

npm install react-router-dom

步骤 4：为了封装 App 组件，我们需要一个路由器。

1. HashRouter – 用于创建类似 example.com/#/about 的 URL
2. BrowserRouter – 用于创建类似 example.com/#/about 的 URL

步骤 5：将以下代码添加到您的 src/index.js 文件中。

import React from ‘react’
import { render } from ‘react-dom’
import { BrowserRouter } from ‘react-router-dom’
import App from ‘./App’
render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.querySelector(‘#root’)
)

步骤 6：在名为 src/pages/HomePage.js 的文件中写入以下代码：

import React from “react”;
export default function HomePage() {
return (
<>
<h1>Hey from HomePage</h1>
<p>This is your awesome HomePage subtitle</p>
</>
);
}

步骤 7：使用以下代码创建 src/pages/UserPage.js 文件：

import React from “react”;
import { useParams } from “react-router-dom”;
export default function UserPage() {
let { id } = useParams();
return (
<>
<h1>Hello there user {id}</h1>
<p>This is your awesome User Profile page</p>
</>
);
}

第 8 步：

通过使用 Switch 和 Route，您可以选择并集成要使用的路由器。Switch 会合并所有路由，并确保它们按优先级从高到低排列。而单个路由则由路由定义。此外，路由应包含在您的 App.js 文件中。

import React from ‘react’
import { Route, Switch } from ‘react-router-dom’
// We will create these two pages in a moment
import HomePage from ‘./pages/HomePage’
import UserPage from ‘./pages/UserPage’
export default function App() {
  return (
    <Switch>
      <Route exact path=”/” component={HomePage} />
      <Route path=”/:id” component={UserPage} />
    </Switch>
  )
}

上面的代码将根路由（/）映射到主页，并将其他页面动态映射到用户页面。

步骤 9. 使用链接导航到 SPA 中的页面。

现在，将以下代码添加到src/pages/HomePage.js文件中。

import React from ‘react’

import { Link } from ‘react-router-dom’

export default function HomePage() {

  return (

    <div className=”container”>

      <h1>Home </h1>

      <p>

        <Link to=”/your desired link”>Your desired link.</Link>

      </p>

    </div>

  )

}

步骤 10：运行代码并检查本地主机上的开发服务器。

此外，要创建任何简单的应用程序，我们都有一个“主父组件”。

1. 接下来，每个应用页面都成为一个独立的组件，这些组件共同构成“主组件”；“React Router”则负责确定显示哪些“组件”，隐藏哪些组件。
2. 显示初始框架 -> 创建内容页面 -> 使用 React Router -> 修复路由 -> 添加一些 CSS -> 高亮显示活动链接是具体步骤。

总结

总的来说，单页 React.js 应用无需切换到新页面。在这种情况下，页面被称为视图，它们通常在同一页面内直接加载。当页面内容发生变化时，AJAX 会持续工作。实际上，您可以聘请 React JS 开发人员为您的企业创建单页应用。毫无疑问，React 提供了一系列路由机制来帮助您。路由可以帮助您将 URL 匹配到除物理页面之外的其他目标，例如单页应用中的“各个视图”。

相关文章：

• 如何更高效地编写单页应用程序：一份指南
• 单页应用程序对搜索引擎优化 (SEO) 的友好程度如何？