Node与Express开发（第2版）

178

｜

第

16

章

16.4.3

　度假产品页

——

可视化设计

目前为止，我们还只是在构建一个纯前端的应用。那么，

Express

处于哪个位置呢？我们

的服务器仍然是单一的数据源。尤其是它维护着度假产品的数据库，而这些度假产品正是

要在网站上显示的。幸运的是，我们在第

15

章已经做了绝大部分的工作

：暴露了一个可

以以

JSON

格式返回度假产品的

API

，

React

应用可以直接使用了。

不过，在把前后端连接起来之前，让我们先把度假产品页做出来。虽然目前还没有度假产

品可以渲染，但是不要让度假产品页成为后续开发的障碍。前一节把所有的内容页面都包

含进了

client/src/App.js

，但通常认为这不是一个好实践

：让每个组件都放入它自己的文件

中是更符合习惯的做法。所以让我们花一点儿时间，把

Vacations

组件放入它自己的文件。

创建文件

client/src/V

acations.js

：

import React, { useState, useEffect } from 'react'

import { Link } from 'react-router-dom'

function Vacations() {

const [vacations, setVacations] = useState([])

return (

<>

<h2>Vacations</h2>

<div className="vacations">

{vacations.map(vacation =>

<div key={vacation.sku}> ...