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 的新文件，并添加以下代码：
// www.javascriptcn.com code example
import React from 'react';
function Home() {
return (
<div>
<h1>Welcome to my app!</h1>
<p>This is the home page.</p>
</div>
);
}
export default Home;这是一个简单的 React 函数组件，它返回一些文本和 HTML 元素。
接下来，创建一个名为 About.js 的新文件，并添加以下代码：
// www.javascriptcn.com code example
import React from 'react';
function About() {
return (
<div>
<h1>About</h1>
<p>This is the about page.</p>
</div>
);
}
export default About;现在，我们需要将这些组件添加到应用程序中，并设置路由以便在不同的 URL 上显示它们。
首先，安装 React 路由器：
npm install react-router-dom
然后，打开 App.js 文件，并将其修改为以下内容：
// www.javascriptcn.com code example
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
export default App;这将添加一个导航菜单和路由器，以便在不同的 URL 上显示不同的组件。
现在，您可以启动应用程序，并在浏览器中导航到不同的 URL，以查看不同的组件。
4. 部署应用程序
最后，您可以将应用程序部署到生产环境中。使用以下命令构建生产版本：
npm run build
这将生成一个名为 build 的新目录，其中包含应用程序的生产版本。
您可以将 build 目录中的文件上传到 Web 服务器或使用 GitHub Pages 等服务进行部署。
恭喜！您已经完成了使用 React 构建 SPA 应用程序的指南。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d2ee89a941bf71345a7ad5