React 是一种优秀的 JavaScript 库，旨在构建可重用组件的用户界面。本文将介绍如何使用 React 构建单页面应用程序（SPA）和静态网站，并提供有深度和指导意义的示例代码。
前置知识
在学习本文之前，您应该具备以下前置知识：
- 基本的 HTML、CSS 和 JavaScript 知识。
- 熟练掌握 ES6 + 的 JavaScript 语法。
- 熟悉 React 的基础知识和语法。
单页面应用程序（SPA）
单页面应用程序（SPA）是指一种静态网站，其中所有内容都在同一个 HTML 文件中加载。当用户与 SPA 交互时，页面不会重新加载，而是通过 JavaScript 更新页面内容。
1. 设置 React 应用程序
首先，您需要安装 Node.js 并使用 npm 包管理器来安装 React 应用程序的依赖项。在命令行中，运行以下命令：
npx create-react-app my-app cd my-app npm start
这个命令将在您的本地计算机上创建一个名为“my-app”的新 React 项目，并启动开发服务器。
2. 创建 SPA 应用程序
现在您已经设置了 React 应用程序，您可以开始编写代码。以下是一个基本的 SPA 应用程序示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ --------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
------------ -------
--
-
---------------------- -
--------------- ------------ ---- ---
-
-------- -
----- - ----------- - - -----------
------ -
-----
-----
------- ----------- -- --------------------------------------------
------- ----------- -- ----------------------------------------------
------- ----------- -- --------------------------------------------------
------
------------ --- ------ -- ----- ---
------------ --- ------- -- ------ ---
------------ --- --------- -- -------- ---
------
-
-
-
-------- ------ -
------ -
-----
----------- -- ---- ---------
------
-
-
-------- ------- -
------ -
-----
--------- -------
------
-
-
-------- --------- -
------ -
-----
----------- -------
------
-
-
-------------------- --- ---------------------------------在此示例中，我们创建了一个名为“App”的组件，该组件具有一个状态（currentPage），用于存储当前页面。我们还定义了三个组件：Home、About 和 Contact，用于显示不同的页面内容。
在 render() 方法中，我们渲染了一个导航栏和当前页面内容的条件组件。单击导航栏按钮时，我们调用 handlePageChange() 方法来更新 currentPage 状态，并更新页面内容。
3. 运行应用程序
要运行应用程序，请在命令行中运行以下命令：
npm start
您的应用程序现在应该正在运行，并在浏览器中打开。单击导航栏按钮以改变页面内容，您将发现页面不会重新加载。
静态网站
静态网站是指仅由 HTML、CSS 和 JavaScript 文件组成的网站。它们不依赖于服务器端脚本或数据库，并且通常适用于较小的网站和简单的网站。
1. 创建静态网站
要创建静态网站，请遵循以下步骤：
- 创建一个新的 React 应用程序。
npx create-react-app my-website cd my-website npm start
在 src 文件夹中创建一个名为“pages”的新文件夹。这个文件夹将用于存储每个页面的 React 组件。
在“pages”文件夹中创建一个名为“Home.js”的新文件。在此文件中，为主页创建 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------ -
------ -
-----
----------- -- -- -------------
------- -- --- ---- ---------
------
-
-
------ ------- -----按照相同的方式创建更多页面组件。
在“src”文件夹中创建一个名为“App.js”的新文件。在此文件中，编写路由代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- - ---- -------------------
------ ---- ---- ---------------
------ ----- ---- ----------------
------ ------- ---- ------------------
------ ------------
-------- ----- -
------ -
-----
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
---------
------
-
-
------ ------- ----在此示例中，我们使用 Switch 和 Route 组件来为每个页面创建路由。注意要使用 exact 属性来防止默认情况下匹配所有路径。
- 安装
react-router-dom并更新“index.js”文件以包含路由器：
npm install react-router-dom
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- - ---- -------------------
------ --------------
------ --- ---- --------
----------------
---------------
---- --
-----------------
-------------------------------
--创建“public”文件夹和“404.html”文件。在此文件中编写 HTML 代码以显示 404 页面。
运行应用程序：
npm start
您现在可以在浏览器中预览您的静态网站，并通过单击导航链接来访问不同的页面。
结论
在本文中，我们讨论了如何使用 React 构建单页面应用程序（SPA）和静态网站。通过学习本文并使用示例代码，您现在应该已经身临其境，并能创建自己的 React 应用程序和网站。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674bfba614b275ea6fdedf19