React应用程序的Atomic布局介绍

![1_OYqVpR90jeGyvReL3GzBMg.png][1]

Atomic Layout是一个轻量级的React库，允许你为你的组件生成一个基于网格的响应式布局。

像styled-components和emotion这样的现代CSS库是非常有用的，因为它们允许你创建孤立的、本地的CSS，只适用于预定的特定组件。

但由于这两个库都只专注于在JavaScript内编写CSS，这意味着你必须自己编写创建响应式布局所需的CSS规则。

例如，假设你有一个如下所示的卡片组件设计。左边是移动视图，右边是平板电脑和台式机。
![1_sXvDWLvd3QWUxI1wYEo0Qg.png][2]

如果没有Bootstrap或Bulma等第三方框架的帮助，你需要创建自己的容器样式，并添加媒体查询规则，使组件具有响应性。
下面的示例代码将使用CSS flexbox模型实现上述设计:
```
import React from "react";
import { Button } from "@nsebhastian/react-atomic-layout.ui.button";
import { Label } from "@nsebhastian/react-atomic-layout.ui.label";
import { Thumbnail } from "@nsebhastian/react-atomic-layout.ui.thumbnail";
import styled from "styled-components";
import PropTypes from "prop-types";

const Container = styled.div`
  align-items: center;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  column-gap: 20px;
  @media (max-width: 768px) {
    flex-direction: column;
  }
`;

export const StyledCard = ({
  title,
  imageUrl,
  artistName,
  price,
  releaseYear,
}) => (
  <Container>
    <div>
      <Thumbnail src={imageUrl} alt={title} />
    </div>
    <div>
      <Label lead>{title}</Label>
      <Label muted>
        {artistName} • {releaseYear}
      </Label>
      <Label>${price}</Label>
      <Button text="Learn more" />
    </div>
  </Container>
);

StyledCard.propTypes = {
  /**
   * The album title
   */
  title: PropTypes.string,
  /**
   * The album cover image url
   */
  imageUrl: PropTypes.string,
  /**
   * The album artist name
   */
  artistName: PropTypes.string,
  /**
   * The album price
   */
  price: PropTypes.number,
  /**
   * The album release year
   */
  releaseYear: PropTypes.number,
};
```

上面的React组件是由三个小的、可重复使用的组件组成。
- 按钮组件用于渲染一个按钮
- 标签（Label）组件，用于渲染有背景颜色的文本
- 缩略图组件，用于渲染一个小图片。

![1_nvJE_ijo6mFX4QwJ3Vpmtw.png][3]

上面的可重用组件被组合在<Container>组件下，该组件被应用于响应式布局样式。

现在，虽然Container组件工作得很好，但如果你能在不写CSS规则的情况下实际创建容器呢？如果你可以通过一些API道具来描述你的布局呢？

这就是Atomic Layout对你的React应用程序的作用。它允许你有一个智能组件布局，你可以使用简洁的、声明性的API来控制。

Atomic Layout将生成一个风格化的容器组件，它在引擎盖下使用CSS网格模型，所以你需要熟悉CSS网格模型来使用它。

接下来让我们看看Atomic Layout是如何工作的。

开始使用Atomic Layout

如果你想在你的电脑中创建一个示例项目，我建议你使用Create React App
```
npx create-react-app react-atomic-example
cd react-atomic-example
```

首先，你需要安装styled-components包，Atomic Layout需要它来生成CSS。

将styled-components和atomic-layout包都安装到你的React项目中。

```
npm install styled-components atomic-layout
```
一旦安装完毕，你就可以在你的应用程序中使用Atomic Layout。让我们看看Atomic Layout如何为你生成上述同样的响应式卡片设计。

**Atomic Layout的props别名**
-------------------------

首先，你需要从atomic-layout导入Composition组件
```
import { Composition } from 'atomic-layout'
```
构造组件是你需要使用atomic layout中的唯一组件。你需要用这个组件来指定你的组件布局。

组合组件接受道具，这些道具将被编译成单个或多个CSS属性，也被称为props别名。

你可以传递给该组件的props列表可以在这里列出的props alias中找到

在这个例子中，你需要传递areas props，在这里你可以描述组件将使用的grid-template-areas CSS属性。
你可以通过使用字符串字面来创建模板区域，如下所示

```
const areas = `
  cover
  content
  actions
`
```
当你把上面的字面意思传递给Composition组件时，Atomic Layout会生成子组件，你可以在里面使用。
下面是一个使用Composition组件创建的Card组件的例子:

```
import React from "react";
import { Composition } from "atomic-layout";
const areas = `
  cover
  content
  actions
`;
const Card = () => (
  <Composition areas={areas}>
    {(Areas) => (
      <>
        <Areas.Cover>Our thumbnail</Areas.Thumbnail>
        <Areas.Content>Content</Areas.Content>
        <Areas.Actions>Call to action</Areas.Actions>
      </>
    )}
  </Composition>
);
export default Card;
```

你可以尝试运行上述组件，看看Atomic Layout的运行情况。

现在你已经准备好了基本的构图，让我们看看如何使它具有响应性。

**Atomic Layout 响应式props**
--------------------------

为了使构图具有响应性，你可以描述另一个布局，并在不同的断点下再次将其传递给该组件。
Atomic Layout支持添加响应式props，你在不同的断点下传递其中一个props别名。
组件支持五个不同的断点，如下所示:
- xs（默认）=<576px
- sm = ≥576px
- md = ≥768px
- lg = ≥992px
- xl = ≥1200px

例如，要创建一个用于平板电脑和台式机的布局，那么你可以将另一个模板传递给 areasMd道具。
下面是一个将多个区域props传递给组合的例子。
```
<Composition 
  areas={areas} 
  areasMd={areasMedium} 
  areasLg={areasLarge}>
```
在卡片设计之后，那么medium布局可以使用以下模板。
```
const areasMedium = `
  cover content
  cover actions
`
```
上面的模板将创建一个两行两列的布局，其中封面组件将展开并填满第一列的第一行和第二行，而内容和动作将被放在第二列上。
最后，你只需要把上面的 areasMedium 字面传递给 Composition 组件的 areaMd 托词。
```
<Composition areas={areas} areasMd={areasMedium}>
```
而这将是你创建响应式布局的全部需要。
你可以在你的项目中尝试使用以下组件
```
import React from "react";
import { Composition } from "atomic-layout";
const areasMobile = `
  cover
  content
  actions
`;
const areasTablet = `
  cover content
  cover actions
`
const Card = () => (
  <Composition
    areas={areasMobile}
    areasMd={areasTablet}
  >
    {({ Cover, Content, Actions }) => (
      <>
        <Cover>
          <p>Thumbnail image here</p>
        </Cover>
        <Content>
          <p>Label and price here</p>
        </Content>
        <Actions>
          <button>Click me!</button>
        </Actions>
      </>
    )}
  </Composition>
);
export default Album;
```

当浏览器窗口宽度为768px或更大时，上面的组件将使用平板电脑布局。当窗口较小时，则会使用移动布局。
为了完成这个例子，你需要添加边框、间隙、衬垫，并将Composition的显示方式改为inline。
Composition组件可以通过使用as prop来渲染一个自定义的包装组件。
你可以传递一个风格化的组件作为Composition组件的包装器，如下所示
```
const CardContainer = styled.div`
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
`;
<Composition
  as={AlbumContainer}
  areas={areasMobile}
  areasMd={areasTablet}
>
```
要将组合显示改为inline-grid，你需要将inline boolean prop传递给该组件。
```
<Composition
  inline
  as={AlbumContainer}
  areas={areasMobile}
  areasMd={areasTablet}
>
```
最后，让我们为该组件添加一些间隙和填充，如下所示
```
<Composition
  inline
  as={AlbumContainer}
  areas={areasMobile}
  areasMd={areasTablet}
  gap={20}
  gapMd={30}
  padding={32}>
```

**总结**
------

当我开始使用React和styled-components时，我很怀念通过Bootstrap和Tailwind等框架创建响应式布局的简易性。
虽然CSS框架可能很臃肿，但你可能会同意，这些框架提供的响应式网格系统使得创建不同的布局很容易。
只要添加一些类，就可以了。你就有了一个响应式的布局。
Atomic Layout是一个精简、轻量级的库，填补了这一空白。该库专注于帮助你为你的应用程序获得正确的响应式网格布局，既简单又有趣。

[1]: http://guobacai.com/usr/uploads/2021/11/656812111.png
  [2]: http://guobacai.com/usr/uploads/2021/11/1506998497.png
  [3]: http://guobacai.com/usr/uploads/2021/11/2407207017.png

React应用程序的Atomic布局介绍

评论已关闭