介绍
React 是一个非常流行的前端框架，可用于构建高性能、可重用的用户界面。在这个 React 实战课程中，我们将使用 React 来构建一个单页面应用程序。
我们将创建一个名为 RoadTrip 的应用程序，该应用程序将允许用户计划他们的旅行路线。我们将使用 React、React Router 和 Google Maps API 来实现这个应用程序。
学习目标
在这个课程中，你将学习以下内容：
- 如何使用 React 创建单页面应用程序
- 如何使用 React Router 管理路由
- 如何使用 Google Maps API 显示地图和标记
- 如何使用本地存储记录用户的旅行路线
准备工作
在开始之前，你需要安装以下软件：
- Node.js
- npm
你还需要注册一个 Google Maps API Key，以便在应用程序中使用 Google Maps API。
开始
1. 创建 React 应用程序
我们将使用 Create React App 工具来创建我们的应用程序。打开终端并输入以下命令：
npx create-react-app roadtrip
这将创建一个名为 RoadTrip 的新 React 应用程序。
2. 安装 React Router 和 Google Maps API
在终端中，进入 RoadTrip 目录并运行以下命令来安装 React Router 和 Google Maps API：
npm install react-router-dom google-maps-react --save
3. 创建组件
我们将创建以下组件：
- App：主应用程序组件
- Map：用于显示地图的组件
- Marker：用于显示标记的组件
- RoutePlanner：用于规划旅行路线的组件
在 src 目录中创建一个名为 components 的新目录，然后在该目录中创建以下文件：
App.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ------ ------ - ---- -------------------
------ --- ---- --------
------ ------------ ---- -----------------
-------- ----- -
------ -
--------
--------
------ ----- -------- --------------- --
------ --------------------- ------------------------ --
---------
---------
--
-
------ ------- ----Map.js
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ---- ----------------- ------ - ---- --------------------
----- ------------ ------- --------- -
-------- -
------ -
----
--------------------------
---------
---------------- ---- -------- ---- --------- --
-
------- ----------- ---- -------- ---- --------- -- --
------
--
-
-
------ ------- ------------------
------- -----------------------------------------
-----------------RoutePlanner.js
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ------------ ------- --------- -
-------- -
------ -
-----
--------- ------------
------
--
-
-
------ ------- -------------4. 运行应用程序
现在，我们已经创建了我们的组件，让我们运行应用程序并查看我们的地图是否显示正确。
在终端中，进入 RoadTrip 目录并运行以下命令：
npm start
这将启动我们的应用程序并在浏览器中打开它。我们应该看到一个包含一个标记的地图。
5. 实现路由
现在，我们将实现路由，以便用户可以在我们的应用程序中导航到不同的页面。
在 App.js 中，我们已经定义了我们的路由。现在，我们需要在 Map 组件中添加一个链接到 RoutePlanner 组件的按钮。
在 Map.js 中，我们将添加以下代码：
-- -------------------- ---- -------
------ - ---- - ---- -------------------
----- ------------ ------- --------- -
-------- -
------ -
-----
----- ------------------------ - ------------
----
--------------------------
---------
---------------- ---- -------- ---- --------- --
-
------- ----------- ---- -------- ---- --------- -- --
------
------
--
-
-这将在地图上方添加一个链接，当用户点击该链接时，他们将被导航到 RoutePlanner 组件。
6. 实现 RoutePlanner 组件
现在，我们将实现 RoutePlanner 组件，以便用户可以规划他们的旅行路线。
在 RoutePlanner.js 中，我们将添加以下代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ------------ ------- --------- -
------------------ -
-------------
---------- - -
---------- --
--
-
----------- - -- -- -
----- - --------- - - -----------
----------------
---- --------
---- ---------
---
---------------
---------
---
--
--------------- - -- -- -
----- - --------- - - -----------
------ ------------------------ ------ -- -
---- ------------
--------------- --------------
------
---
--
-------- -
------ -
-----
--------- ------------
------- ------------------------------ -----------------
------------------------
------
--
-
-
------ ------- -------------这将在页面上渲染一个标题、添加一个按钮和一个用于渲染添加的路标的方法。
7. 实现本地存储
现在，我们将实现本地存储，以便用户可以保存他们的旅行路线。
在 RoutePlanner.js 中，我们将添加以下代码：
-- -------------------- ---- -------
----------- - -- -- -
----- - --------- - - -----------
----------------
---- --------
---- ---------
---
--------------
-
---------
--
-- -- -
--------------------------------- ---------------------------
-
--
--
------------------- -
----- --------- - ----------------------------------------------
-- ----------- -
---------------
---------
---
-
-这将在用户添加路标时将路标保存到本地存储中，并在组件加载时从本地存储中加载路标。
8. 结论
在这个 React 实战课程中，我们使用 React、React Router 和 Google Maps API 创建了一个名为 RoadTrip 的单页面应用程序。我们学习了如何创建组件、实现路由、使用 Google Maps API 显示地图和标记、以及如何使用本地存储记录用户的旅行路线。
这个应用程序还有很多改进的空间，例如添加更多的用户交互、使用真实的地图数据和路线规划算法等。但是，我们希望这个课程能够给你提供一个良好的起点，让你开始构建自己的 React 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673ab02039d6d08e88af58c3