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布局介绍

评论已关闭