Введение в Atomic Layout для приложений React
Современные библиотеки CSS, такие как styled-components и emotion невероятно полезны, потому что они позволяют создавать изолированные локальные CSS, которые применяются только к намеченным конкретным компонентам.
Но поскольку обе библиотеки ориентированы на написание CSS только внутри JavaScript, это означает, что вам придется самостоятельно написать правила CSS, необходимые для создания адаптивного макета.
Например, предположим, что у вас есть дизайн компонента карточки, как показано ниже. Левая сторона предназначена для просмотра на мобильных устройствах, а правая — для планшетов и настольных компьютеров:
React JS. Основы
Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения
Получить курс сейчас!
Без помощи сторонних фреймворков, таких как Bootstrap или Bulma, вам нужно создать свой собственный стиль контейнера и добавить правило медиа-запроса. Следующий пример кода реализует вышеуказанный дизайн с использованием модели CSS flexbox:
JavaScript 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, };
| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 | 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, представленный выше, состоит из трех небольших компонентов многократного использования:
Компонент Button для визуализации кнопки
Компонент Label для визуализации текста с цветом фона
Компонент Thumbnail для рендеринга небольшого изображения
Я экспортировал компоненты в Bit Cloud. Не стесняйтесь их изучать, клонировать в собственное рабочее пространство Bit или просто устанавливать.
Вышеупомянутые повторно используемые компоненты объединены в компонент Container, к которому применен адаптивный стиль макета.
Теперь, когда компонент Container работает нормально, что, если бы вы могли создать контейнер вообще без написания правил CSS? Что, если бы вы могли описать свой макет с помощью некоторых свойств API?
Это то, что делает Atomic Layout для вашего приложения React. Это позволяет вам иметь интеллектуальную компоновку компонентов, которой вы можете управлять с помощью краткого декларативного API.
Atomic Layout создаст стилизованный компонент-контейнер, который использует модель сетки CSS под капотом, поэтому, чтобы использовать Atomic Layout, вам нужно быть знакомым с моделью CSS сетки. Давайте посмотрим, как работает Atomic Layout.
Начало работы с Atomic Layout
Содержание статьи:
Если вы хотите создать пример проекта на своем компьютере, я бы рекомендовал вам использовать приложение Create React:
JavaScript npx create-react-app react-atomic-example cd react-atomic-example
| 12 | npx create-react-app react-atomic-examplecd react-atomic-example |
Во-первых, вам нужно установить пакет styled-components, который требуется Atomic Layout для создания CSS. Установите оба пакета: styled-components и atomic-layout.
JavaScript npm install styled-components atomic-layout
| 1 | npm install styled-components atomic-layout |
После установки вы можете использовать атомарный макет в своем приложении. Давайте посмотрим, как Atomic Layout может создать такой же адаптивный дизайн, как указано выше.
Псевдонимы свойств Atomic Layout
Во-первых, вам нужно импортировать компонент Composition из atomic-layout.
JavaScript import { Composition } from ‘atomic-layout’
| 1 | import { Composition } from ‘atomic-layout’ |
Компонент Composition является единственным компонентом, который нужно использовать из библиотеки atomic-layout. Вам необходимо указать макет вашего компонента с помощью Composition.
Компонент Composition принимает свойства, которые будут собраны в одном или нескольких свойствах CSS, также известных как псевдонимы свойств.
Список свойств, которые вы можете передать компоненту, находится в перечисленных псевдонимах свойств. В этом примере вам нужно передать свойство areas, в котором вы можете описать свойство CSS grid-template-areas. Вы можете создать шаблон, используя строковый литерал, как показано ниже:
JavaScript const areas = ` cover content actions `
| 12345 | const areas = ` cover content actions` |
Когда вы передаете приведенный выше areas компоненту Composition, Atomic Layout сгенерирует дочерние компоненты, которые вы можете использовать внутри него. Вот пример Card компонента, созданного с помощью компонента Composition:
JavaScript 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;
| 1234567891011121314151617181920 | 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; |
React JS. Основы
Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения
Получить курс сейчас!
Вы можете попробовать запустить вышеуказанный компонент, чтобы увидеть атомарный макет в действии. Теперь, когда у вас готова базовая композиция, давайте посмотрим, как сделать ее адаптивной.
Адаптивные свойства Atomic Layout
Чтобы сделать Composition адаптивным, вы можете описать другой макет и снова передать его компоненту.
Атомарный макет поддерживает добавление адаптивных свойств, куда вы передаете один из псевдонимов свойств в другом брейкпоинте. Composition поддерживает пять различных брейкпоинтов, как показано ниже:
xs (по умолчанию) =
Источник: webformyself.com