React 实战课程 - RoadTrip 单页面应用-JavaScript中文网-JavaScript教程资源分享门户

介绍

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

// javascriptcn.com code example
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Map from './Map';
import RoutePlanner from './RoutePlanner';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Map} />
        <Route path="/route-planner" component={RoutePlanner} />
      </Switch>
    </Router>
  );
}

export default App;

Map.js

// javascriptcn.com code example
import React, { Component } from 'react';
import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';

class MapContainer extends Component {
  render() {
    return (
      <Map
        google={this.props.google}
        zoom={14}
        initialCenter={{ lat: 37.7749, lng: -122.4194 }}
      >
        <Marker position={{ lat: 37.7749, lng: -122.4194 }} />
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY
})(MapContainer);

RoutePlanner.js

// javascriptcn.com code example
import React, { Component } from 'react';

class RoutePlanner extends Component {
  render() {
    return (
      <div>
        <h1>Route Planner</h1>
      </div>
    );
  }
}

export default RoutePlanner;

4. 运行应用程序

现在，我们已经创建了我们的组件，让我们运行应用程序并查看我们的地图是否显示正确。

在终端中，进入 RoadTrip 目录并运行以下命令：

npm start

这将启动我们的应用程序并在浏览器中打开它。我们应该看到一个包含一个标记的地图。

5. 实现路由

现在，我们将实现路由，以便用户可以在我们的应用程序中导航到不同的页面。

在 App.js 中，我们已经定义了我们的路由。现在，我们需要在 Map 组件中添加一个链接到 RoutePlanner 组件的按钮。

在 Map.js 中，我们将添加以下代码：

// javascriptcn.com code example
import { Link } from 'react-router-dom';

class MapContainer extends Component {
  render() {
    return (
      <div>
        <Link to="/route-planner">Plan a Route</Link>
        <Map
          google={this.props.google}
          zoom={14}
          initialCenter={{ lat: 37.7749, lng: -122.4194 }}
        >
          <Marker position={{ lat: 37.7749, lng: -122.4194 }} />
        </Map>
      </div>
    );
  }
}

这将在地图上方添加一个链接，当用户点击该链接时，他们将被导航到 RoutePlanner 组件。

6. 实现 RoutePlanner 组件

现在，我们将实现 RoutePlanner 组件，以便用户可以规划他们的旅行路线。

在 RoutePlanner.js 中，我们将添加以下代码：

// javascriptcn.com code example
import React, { Component } from 'react';

class RoutePlanner extends Component {
  constructor(props) {
    super(props);

    this.state = {
      waypoints: []
    };
  }

  addWaypoint = () => {
    const { waypoints } = this.state;

    waypoints.push({
      lat: 37.7749,
      lng: -122.4194
    });

    this.setState({
      waypoints
    });
  };

  renderWaypoints = () => {
    const { waypoints } = this.state;

    return waypoints.map((waypoint, index) => (
      <div key={index}>
        {waypoint.lat}, {waypoint.lng}
      </div>
    ));
  };

  render() {
    return (
      <div>
        <h1>Route Planner</h1>
        <button onClick={this.addWaypoint}>Add Waypoint</button>
        {this.renderWaypoints()}
      </div>
    );
  }
}

export default RoutePlanner;

这将在页面上渲染一个标题、添加一个按钮和一个用于渲染添加的路标的方法。

7. 实现本地存储

现在，我们将实现本地存储，以便用户可以保存他们的旅行路线。

在 RoutePlanner.js 中，我们将添加以下代码：

// javascriptcn.com code example
addWaypoint = () => {
  const { waypoints } = this.state;

  waypoints.push({
    lat: 37.7749,
    lng: -122.4194
  });

  this.setState(
    {
      waypoints
    },
    () => {
      localStorage.setItem('waypoints', JSON.stringify(waypoints));
    }
  );
};

componentDidMount() {
  const waypoints = JSON.parse(localStorage.getItem('waypoints'));

  if (waypoints) {
    this.setState({
      waypoints
    });
  }
}

这将在用户添加路标时将路标保存到本地存储中，并在组件加载时从本地存储中加载路标。

8. 结论

在这个 React 实战课程中，我们使用 React、React Router 和 Google Maps API 创建了一个名为 RoadTrip 的单页面应用程序。我们学习了如何创建组件、实现路由、使用 Google Maps API 显示地图和标记、以及如何使用本地存储记录用户的旅行路线。

这个应用程序还有很多改进的空间，例如添加更多的用户交互、使用真实的地图数据和路线规划算法等。但是，我们希望这个课程能够给你提供一个良好的起点，让你开始构建自己的 React 应用程序。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/673ab02039d6d08e88af58c3