React 是一个流行的 JavaScript 库，它可以帮助开发人员构建可重用的 UI 组件和单页应用程序（SPA）。
本指南将介绍如何使用 React 构建一个 SPA 应用程序，从零开始到运行。我们将讨论以下主题：
- 安装必要的软件和工具
- 创建 React 应用程序
- 编写组件和路由
- 部署应用程序
1. 安装必要的软件和工具
在开始之前，您需要安装以下软件和工具：
- Node.js 和 npm：您可以从官方网站下载安装 Node.js 和 npm。
- create-react-app：这是一个用于快速创建 React 应用程序的命令行工具。您可以使用以下命令安装它：
npm install -g create-react-app
2. 创建 React 应用程序
使用 create-react-app 命令创建一个新的 React 应用程序：
create-react-app my-app
这将创建一个名为 my-app 的新目录，并在其中生成一个新的 React 应用程序。
在 my-app 目录中，运行以下命令启动应用程序：
cd my-app npm start
这将启动一个本地开发服务器，并在浏览器中打开应用程序。您应该能够看到一个默认的欢迎页面。
3. 编写组件和路由
在 React 应用程序中，组件是构建 UI 的基本单元。我们将创建两个组件：一个用于显示主页内容，另一个用于显示关于页面内容。
首先，在 src 目录中创建一个名为 Home.js 的新文件，并添加以下代码：
-- -------------------- ---- ------- ------ ----- ---- -------- -------- ------ - ------ - ----- ----------- -- -- --------- ------- -- --- ---- --------- ------ -- - ------ ------- -----展开代码
这是一个简单的 React 函数组件，它返回一些文本和 HTML 元素。
接下来，创建一个名为 About.js 的新文件，并添加以下代码：
-- -------------------- ---- ------- ------ ----- ---- -------- -------- ------- - ------ - ----- -------------- ------- -- --- ----- --------- ------ -- - ------ ------- ------展开代码
现在，我们需要将这些组件添加到应用程序中，并设置路由以便在不同的 URL 上显示它们。
首先，安装 React 路由器：
npm install react-router-dom
然后，打开 App.js 文件，并将其修改为以下内容：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------------- -- ------- ------- ------ ---- - ---- ------------------- ------ ---- ---- --------- ------ ----- ---- ---------- -------- ----- - ------ - -------- ----- ----- ---- ---- ----- ------------------ ----- ---- ----- ------------------------ ----- ----- ------ -------- ------ -------------- ------ -- -------- ------ --------- ----- -- -------- --------- ------ --------- -- - ------ ------- ----展开代码
这将添加一个导航菜单和路由器，以便在不同的 URL 上显示不同的组件。
现在，您可以启动应用程序，并在浏览器中导航到不同的 URL，以查看不同的组件。
4. 部署应用程序
最后，您可以将应用程序部署到生产环境中。使用以下命令构建生产版本：
npm run build这将生成一个名为 build 的新目录，其中包含应用程序的生产版本。
您可以将 build 目录中的文件上传到 Web 服务器或使用 GitHub Pages 等服务进行部署。
恭喜！您已经完成了使用 React 构建 SPA 应用程序的指南。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d2ee89a941bf71345a7ad5
