React 是一款由 Facebook 开源的 JavaScript 库，用于构建用户界面。它具有高效的 DOM 更新、组件化开发等优点，被广泛应用于各种类型的 Web 开发。在这篇文章中，我们将学习如何使用 React 开发一个 SPA（Single Page Application）。
准备工作
在开始之前，我们需要安装 Node.js 和 NPM。可以通过官方网站来获取它们。接着，在命令行中输入以下命令来检查是否已安装：
---- -- --- --
创建一个名为 my-react-app 的新项目，并初始化为一个 npm 项目：
--- ---------------- ------------ -- ------------ --- -----
这个命令将会在当前目录下创建一个名为 my-react-app 的文件夹，并在其中创建一个 React 应用。然后进入这个文件夹并启动应用。在命令行中运行这些命令之后，应用将会在浏览器中打开，你应该看到一条 “Welcome to React” 的消息。
编写代码
现在，我们已经准备好开始编写我们的应用代码了。我们将会创建一个非常简单的 SPA，其中包含两个页面：主页和关于页面。主页将会列出当前日期和时间，而关于页面则会列出一个简单的说明文本。
首先让我们来创建一个新的路由组件，用于处理这两个页面的渲染。在 src 目录下创建一个名为 Pages.jsx 的文件夹，然后再创建一个名为 HomePage.jsx 的文件和一个名为 AboutPage.jsx 的文件。这些文件的代码如下：
-- ----------------------
------ ----- ---- --------
-------- ---------- -
----- ---- - --- -------
------ -
-----
--------- -----------
------ ------- ---- --- ---- --- ---------------------------
------
--
-
------ ------- ---------
-- -----------------------
------ ----- ---- --------
-------- ----------- -
------ -
-----
--------- -------
----- --- - ---- -- ---------- --- ---- -- ----- -----------
------
--
-
------ ------- ----------接下来，我们将创建我们的应用程序的主要组件， App。该组件应该处理顶层路由和页面渲染。 App 组件的代码如下：
-- -----------
------ ----- ---- --------
------ - ------------- -- ------- ------- ------ ---- - ---- -------------------
------ -------- ---- -------------------
------ --------- ---- --------------------
-------- ----- -
------ -
--------
-----
----
----
----- ------------------
-----
----
----- -------------------------
-----
-----
------
--------
------ ---------------
---------- --
--------
------ ---------
--------- --
--------
---------
---------
--
-
------ ------- ----在这里，我们导入了 HomePage 和 AboutPage 组件，以及 BrowserRouter、Switch、Route 和 Link 组件，这些都是来自 react-router-dom 库的。我们在顶层组件 App 中使用 BrowserRouter 组件来处理路由，并在导航中使用 Link 组件来处理页面之间的导航。
运行应用
现在我们已经编写了应用程序的代码，让我们在命令行中输入以下命令来启动它：
--- -----
运行完这个命令之后，你应该会在浏览器中看到我们的应用程序。点击导航中的链接，可以在两个页面之间切换。
结论
在这篇文章中，我们学习了如何使用 React 开发一个 SPA。我们创建了两个组件， HomePage 和 AboutPage，并用 BrowserRouter、Switch、Route 和 Link 组件处理页面间的导航。通过这些步骤，我们创建了一个非常基本的 React 应用程序。在此基础上，我们可以进一步扩展和优化我们的应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672ecc3feedcc8a97c8ad7c0