Введение в Atomic Layout для приложений React

0 0

Современные библиотеки CSS, такие как styled-components и emotion невероятно полезны, потому что они позволяют создавать изолированные локальные CSS, которые применяются только к намеченным конкретным компонентам.

Но поскольку обе библиотеки ориентированы на написание CSS только внутри JavaScript, это означает, что вам придется самостоятельно написать правила CSS, необходимые для создания адаптивного макета.

Например, предположим, что у вас есть дизайн компонента карточки, как показано ниже. Левая сторона предназначена для просмотра на мобильных устройствах, а правая — для планшетов и настольных компьютеров:

Введение в Atomic Layout для приложений React

Введение в Atomic Layout для приложений React

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, };

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465import 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 или просто устанавливать.

Введение в Atomic Layout для приложений React

Вышеупомянутые повторно используемые компоненты объединены в компонент 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

12npx 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

1npm install styled-components atomic-layout

После установки вы можете использовать атомарный макет в своем приложении. Давайте посмотрим, как Atomic Layout может создать такой же адаптивный дизайн, как указано выше.

Псевдонимы свойств Atomic Layout

Во-первых, вам нужно импортировать компонент Composition из atomic-layout.

JavaScript import { Composition } from ‘atomic-layout’

1import { Composition } from ‘atomic-layout’

Компонент Composition является единственным компонентом, который нужно использовать из библиотеки atomic-layout. Вам необходимо указать макет вашего компонента с помощью Composition.

Компонент Composition принимает свойства, которые будут собраны в одном или нескольких свойствах CSS, также известных как псевдонимы свойств.

Список свойств, которые вы можете передать компоненту, находится в перечисленных псевдонимах свойств. В этом примере вам нужно передать свойство areas, в котором вы можете описать свойство CSS grid-template-areas. Вы можете создать шаблон, используя строковый литерал, как показано ниже:

JavaScript const areas = ` cover content actions `

12345const 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;

1234567891011121314151617181920import 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 для приложений React

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Вы можете попробовать запустить вышеуказанный компонент, чтобы увидеть атомарный макет в действии. Теперь, когда у вас готова базовая композиция, давайте посмотрим, как сделать ее адаптивной.

Адаптивные свойства Atomic Layout

Чтобы сделать Composition адаптивным, вы можете описать другой макет и снова передать его компоненту.
Атомарный макет поддерживает добавление адаптивных свойств, куда вы передаете один из псевдонимов свойств в другом брейкпоинте. Composition поддерживает пять различных брейкпоинтов, как показано ниже:

xs (по умолчанию) =

Источник: webformyself.com

Оставьте ответ