Graphql 初体验 第九章 | #11 The React Frontend

对应内容：#11 The React Frontend | Build a Complete App with GraphQL, Node.js, MongoDB and React.js

主要内容：创建react应用，书写基础路由，创建基础页面。

• 使用cra脚手架创建react应用
• 安装react-router-dom，并且配置基本路由
• 书写路由对应的基本页面

1 使用cra脚手架创建react应用

在根目录下创建frontend文件夹

cd frontend
npx create-react-app .
cnpm install --save react-router-dom
npm start

2 配置路由

先惯例删掉了一些没有用的文件：

在App.js 中引入 react-router-dom。

import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';

import './App.css';

import AuthPage from './pages/Auth';
import EventsPage from './pages/events';
import BookingsPage from './pages/bookings';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Redirect from="/" to="/auth" exact />
        <Route path="/auth" component={AuthPage}/>
        <Route path="/events" component={EventsPage}/>
        <Route path="/bookings" component={BookingsPage}/>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

3 创建对应页面文件

./src/ 下创建pages文件夹，并创建Auth.js，events.js，bookings.js三个文件夹

import React, { Component } from 'react';

class AuthPage extends Component  {
    render () {
        return (
            <h1>The Auth Page</h1>
        );
    }
}

export default AuthPage;

import React, { Component } from 'react';

class BookingsPage extends Component {
    render() {
        return (
            <h1>The booking Page</h1>
        );
    }
}

export default BookingsPage;