介绍Amplify UI的React组件（详细指南）

xcvxvxc
413 阅读6分钟

本周，我在AWS的团队推出了React UI组件，使用这些组件进行构建真的很有趣--我想向大家展示一些你可以创建的东西!

AWS Amplify UI是一套原始和云连接的组件，能够实现定制化、主题化和可访问性。有一些原始组件用于创建布局、按钮、页眉、评级等。还有一些组件可以连接到AWS资源，以显示地图和建立认证流。让我们建立一个与UI库一起工作的地图应用程序吧!

Completed app with header, cards, and map

启动一个应用程序

首先，创建一个应用程序 - 我使用Next.js，但你也可以很容易地使用Create React App。

npx create-next-app amplify-ui-demo
cd amplify-ui-demo

然后，安装Amplify库和UI组件。

npm i aws-amplify @aws-amplify/ui-react

Amplify UI默认没有配备字体，所以你可以选择一个你喜欢的字体。默认主题使用Inter字体--我们也会在我们的应用程序中安装它。

npm install @fontsource/inter

在你的应用程序的顶层/pages/_app.js ，导入Amplify的CSS文件和Inter字体。

import "@aws-amplify/ui-react/styles.css";
import "@fontsource/inter/variable.css";

建立一个基本的用户界面

现在，让我们建立我们的应用程序的基本用户界面吧我们将在我们应用程序的主页--/pages/index.js 。我将首先在我的React组件上创建一个餐厅阵列。每个餐厅都将有一个名称、菜肴、评级、价格和一个（随机生成的）经纬度。

const restaurants = [
  {
    name: "Mannys's Burgers",
    cuisine: "American",
    rating: 5,
    price: "$$",
    location: {
      lat: "32.385348495775",
      long: "-85.738272191934",
    },
  },
  {
    name: "Mac n Cheesy",
    cuisine: "American",
    rating: 4,
    price: "$",
    location: {
      lat: "40.385358710927",
      long: "-78.637760520167",
    },
  },
  {
    name: "Giuliano's Italian Restaurant",
    cuisine: "Italian",
    rating: 5,
    price: "$$$",
    location: {
      lat: "35.396328108119",
      long: "-87.786869702867",
    },
  },
  {
    name: "The Pink Sheep",
    cuisine: "Fine Dining",
    rating: null,
    price: "$$$$",
    rating: 3,
    location: {
      lat: "45.386348035105",
      long: "-97.535870048241",
    },
  },
];

我还将预先导入我需要的所有UI组件。我还将导入Next.js的链接组件。

import {
  withAuthenticator,
  Card,
  Badge,
  Heading,
  Rating,
  Text,
  Link,
  Flex,
  View,
  SearchField,
  useTheme,
  MapView,
} from "@aws-amplify/ui-react";

import NextLink from "next/link";

我们将从一个View 组件开始，它将默认呈现为一个div 。我们将保留Next.jsHead ，其中有一个标题标签。

function Home() {
  return (
    <View>
      <Head>
        <title>RestaurantList</title>
      </Head>
    </View>
  );
}

在Head 的下面，让我们建立一个标题。我们将首先再次使用View 组件，但这次我们将把它渲染成一个header 元素，而不是div 。我们还将添加一些填充。然后，我们将使用Flex 组件的flexbox。你可以使用道具来反映flexbox的CSS属性!我们将把内容放在行的中心，并在项目周围添加空间。我们将创建另一个Flex ，并添加一些Links。我们还将添加一个标题，其级别为1 ，内容为网站的名称。最后，我们将添加另一个Flex ，在其内部添加一个SearchField 。

<View as="header" padding="10px">
  <Flex direction="row" justifyContent="space-around" alignItems="center">
    <Flex>
      <NextLink href="">
        <Link>Home</Link>
      </NextLink>
      <NextLink href="/about">
        <Link>About</Link>
      </NextLink>
      <NextLink href="/shop">
        <Link>Shop</Link>
      </NextLink>{" "}
    </Flex>
    <Heading level={1} textAlign="center">
      RestaurantList
    </Heading>
    <Flex>
      <SearchField />
    </Flex>
  </Flex>
</View>

之后，让我们循环浏览我们的餐馆，为每个餐馆添加Card。我们将在这里创建一个Flex ，这样我们将来就可以在卡片旁边显示一个地图。然后，我们将添加一个View 组件，并设置一个maxWidth 。我们将循环浏览这些餐馆，并为每个餐馆创建一个Card 。每个Card ，左边是餐厅的信息，右边是评分。Rating 组件将呈现每家餐厅的星级评价!

<Flex>
  <View maxWidth="800px">
    {restaurants.map((restaurant) => (
      <Card variation="elevated" key={restaurant.name} margin="10px">
        <Flex direction="row" justifyContent="space-between">
          <Flex direction="column">
            <Heading level={3}>{restaurant.name}</Heading>
            <Badge size="large" variation="info" width="fit-content">
              {restaurant.cuisine}
            </Badge>
            <Text color="grey">{restaurant.price}</Text>
          </Flex>
          <Flex direction="column">
            <Rating value={restaurant.rating} maxValue={5} />
          </Flex>
        </Flex>
      </Card>
    ))}
  </View>
</Flex>

现在你的用户界面应该看起来像这样。

UI with header and cards on left side

主题设计

Amplify UI是完全可主题化的--你可以使它的组件完全符合你的品牌或风格。在Amplify UI的文档中，有一些主题的例子，可以完全改变UI的外观

在这种情况下，我将改变一些使用的颜色。我将使用绿色作为主要的主题颜色，黄色作为辅助颜色。我将把主题对象添加到_app.js 文件中。Amplify UI有内置的颜色，这就是绿色和黄色的来源，但你也可以将这些值设置为完全自定义的颜色。

const earthyTheme = {
  name: "earthTheme",
  tokens: {
    colors: {
      brand: {
        primary: {
          10: { value: "{colors.green.10}" },
          20: { value: "{colors.green.20}" },
          40: { value: "{colors.green.40}" },
          60: { value: "{colors.green.60}" },
          80: { value: "{colors.green.80}" },
          90: { value: "{colors.green.90}" },
          100: { value: "{colors.green.100}" },
        },
        secondary: {
          10: { value: "{colors.yellow.10}" },
          20: { value: "{colors.yellow.20}" },
          40: { value: "{colors.yellow.40}" },
          60: { value: "{colors.yellow.60}" },
          80: { value: "{colors.yellow.80}" },
          90: { value: "{colors.yellow.90}" },
          100: { value: "{colors.yellow.100}" },
        },
      },
    },
  },
};

要使用该主题，请导入ThemeProvider 组件。

import { ThemeProvider } from "@aws-amplify/ui-react";

然后，在ThemeProvider 中包裹顶层应用组件，并将theme 的道具集传递给主题对象。

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={earthyTheme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

在组件中使用主题

你也可以在你的组件中直接使用主题的属性，以使它们具有风格。在Home 组件中的index.js ，使用useTheme 钩子。

const { tokens } = useTheme();

然后，让我们把标题的背景颜色设置为主题中的主色调：

<View as="header" padding="10px" backgroundColor={tokens.colors.brand.primary[40]}>

如果品牌的主色调在未来发生变化，标题就会更新以匹配

云端连接的组件

Amplify UI还提供了云连接组件，这样你就可以直接从React组件连接到AWS服务。首先，安装Amplify CLI。如果你是第一次使用Amplify，你也需要对它进行配置。

npm install -g @aws-amplify/cli

然后，在你的项目中初始化Amplify：

amplify init

当出现提示时，为你的项目选择一个名称，然后回答 "是 "以初始化默认值。也要选择你的AWS配置文件。

现在，通过运行添加认证到你的项目：

amplify add auth

按回车键查看默认配置，然后选择用户名和 "No, I am done"。

然后给你的应用程序添加映射:

amplify add geo

回答下面的问题（尽管为地图选择任何名称）:

? Select which capability you want to add: Map (visualize the geospatial data)
✔ Provide a name for the Map: · map53122572
✔ Who can access this Map? · Authorized and Guest users
Available advanced settings:
- Map style & Map data provider (default: Streets provided by Esri)

✔ Do you want to configure advanced settings? (y/N) · no

运行amplify push ，部署你的资源。

然后你需要在你的应用代码中配置Amplify。在./pages/_app.js 文件内添加以下内容:

import awsExports from "../src/aws-exports";
import { Amplify } from "aws-amplify";

Amplify.configure(awsExports);

让我们首先在应用程序中添加一个地图组件。在Flex ，在餐厅卡片的</View> 的下方，让我们添加一个MapView 。经纬度是美国的，你可能想玩一下缩放级别:

<MapView
  initialViewState={{
    latitude: "37.0902",
    longitude: "-95.7129",
    zoom: 4,
  }}
></MapView>

让我们也为我们的每个餐馆添加标记。我们将使用react-map-gl 。

安装软件包:

npm i react-map-gl

导入标记:

import { Marker } from "react-map-gl";

然后，在MapView标签中，渲染Markers:

{
  restaurants.map((restaurant) => (
    <Marker
      key={restaurant.name}
      latitude={restaurant.location.lat}
      longitude={restaurant.location.long}
    />
  ));
}

现在你就有一张地图了!

Map of US with markers for restaurants

现在让我们添加一个认证流程，以便用户需要登录来查看地图。将Home组件包裹在高阶的withAuthenticator 组件中。现在，你会被提示创建一个用户并登录

export default withAuthenticator(Home);

Authentication flow

你也可以通过使用Amplify的数据类别来使用数据库数据而不是JavaScript对象。

工作室

您也可以使用Amplify Studio从Figma设计到云连接的代码。在引擎盖下，生成的组件将全部使用 Amplify UI。请看这个教程，了解如何使用该工作流程建立一个类似的应用程序。

总结

在本教程中，我们用原始的和云连接的Amplify UI组件构建了一个用户界面。如果你想把你的应用程序与云断开，并删除认证和地理资源，请运行amplify delete 。当你使用Amplify UI构建时，我们很乐意听到你的反馈!

avatar
文章
阅读
粉丝