Новости

Разработчики любого уровня смогут использовать JavaScript для создания API, веб-, мобильных и десктопных приложений. В этой книге:

• Работа с данными с помощью GraphQL.
• Аутентификация для API, веб- и нативных приложений.
• Создание высокопроизводительных веб-приложений
• Разработка кроссплатформенных приложений под iOS и Android
• Создание десктопных приложений.

  Стилевое оформление приложения

  
  В своей песне Lip Service 1978 года Элвис Костелло (Elvis Costello) насмешливо исполняет строчку «don’t act like you’re above me, just look at your shoes» («не веди себя так, будто ты выше меня, а лучше взгляни на свои ботинки»). Эта фраза подразумевает, что автор высмеивает попытку людей возвышать собственный социальный статус, просто обратив внимание на чьи-то ботинки. При этом неважно, насколько опрятен его костюм или элегантно ее платье. Хорошо это или плохо, но стиль является важным элементом человеческой культуры, и мы все привыкли отмечать подобные социальные сигналы. Археологи обнаружили, что люди даже во времена позднего палеолита создавали ожерелья и браслеты из костей, зубов, ягод и камня. Наша одежда служит не только практическим целям защиты от погодных условий, но также может сообщать окружающим о нашей культуре, социальном статусе, интересах и многом другом.
  
  Веб-приложение вполне работоспособно и со стандартным веб-стилем, но, применив к нему CSS, мы сможем наладить более наглядную связь с нашими пользователями. В этой главе мы научимся использовать CSS-in-JS-библиотеку Styled Components, чтобы добавлять в приложение макет и стиль. Это позволит нам повысить удобство его использования и улучшить эстетический облик в рамках легко обслуживаемой структуры кода, основанной на компонентах.
  
  Создание компонента макета
  
  Многие, а в нашем случае все, страницы приложения будут использовать общий макет. Например, у всех страниц будет заголовок, боковая панель и область содержания (рис. 13.1). Вместо того чтобы импортировать общие элементы макета в каждый компонент, мы можем создать отдельный компонент для нашего макета и уже в него обернуть все компоненты страницы.
  
  Начнем же мы с создания файла src/components/Layout.js. В него мы импортируем общие компоненты и содержимое макета. Наша React-функция компонента будет получать свойство children, которое позволит указать, где в макете будет находиться дочерний контент. Мы также используем пустой JSX-элемент <React.Fragment>, чтобы избежать излишней разметки.

Теперь в файле src/pages/index.js мы можем обернуть компоненты страницы в только что созданный компонент Layout, чтобы применить общий макет к каждой странице:

Заключительным шагом будет удаление всех экземпляров или в компонентах страницы. Например, теперь код файла src/pages/Home.js будет сокращен:

Закончив с этим, вы можете просмотреть приложение в браузере. При переходе между разными маршрутами на каждой странице будут появляться заголовок и ссылки навигации. Сейчас они не стилизованы, и у страницы нет визуального макета, поэтому в следующем разделе мы как раз перейдем к добавлению стилей.

CSS

Cascading Style Sheets (CSS) расшифровывается как «каскадная таблица стилей» и представляет собой набор правил, позволяющих писать стили для Сети. Каскадность стилей в данном случае означает, что отрисовывается последний или наиболее конкретно определенный стиль. Например:

Данный CSS отрисует все абзацы красным, делая правило color: green неактуальным. Несмотря на свою простоту, этот принцип потребовал разработки десятков паттернов и техник для избежания подводных камней. Такие структурные методы CSS, как BEM (блок–элемент–модификатор), OOCSS (объектно-ориентированный CSS) и Atomic CSS, для облегчения определения областей стилей используют описательное именование классов. Препроцессоры вроде SASS (Syntactically Awesome Style Sheets) и LeSS (Leaner Style Sheets) предоставляют инструменты, упрощающие синтаксис CSS и допускающие использование модульных файлов. Несмотря на то что у каждого из них есть свои достоинства, CSS-in-JS предлагает привлекательный способ разработки React или других приложений на основе JavaScript.

А ЧТО НАСЧЕТ CSS-ФРЕЙМВОРКОВ?
CSS- и UI-фреймворки являются популярным выбором для разработки приложений, и на то есть свои причины. Эти фреймворки выступают в качестве надежной основы стилей и уменьшают количество необходимого кода, так как предоставляют стили и функциональность для распространенных паттернов приложений. Компромисс здесь в том, что использующие их приложения могут стать визуально похожими, а также вызвать увеличение размера бандла. Однако такие компромиссы могут оказаться для вас оправданными. К числу моих любимых UI-фреймворков для работы с React относятся Ant Design (https://ant.design), Bootstrap (https://oreil.ly/XJm-B), Grommet (https://v2.grommet.io) и Rebass (https://rebassjs.org).

CSS-in-JS

При моей первой встрече с CSS-in-JS я ужаснулся. Годы моего становления в сфере веб-разработки прошли в эпоху веб-стандартов, и я продолжаю выступать за доступность и разумные усовершенствования в этой сфере. «Разделение интересов» было ключевой составляющей моих веб-практик на протяжении более 10 лет. Так что если это вам знакомо и простое прочтение CSS-in-JS вызывает у вас неприятные ассоциации, то вы не одиноки. Однако, как только я решил уделить освоению этого инструмента время, не отвлекаясь на излишнюю критику, он быстро завоевал мою симпатию. CSS-in-JS помогает легко представить интерфейс пользователя как набор компонентов, что я на протяжении многих лет старался делать с помощью структурных методов и препроцессоров CSS.

В этой книге в качестве CSS-in-JS-библиотеки мы будем использовать Styled Components (https://www.styled-components.com). Она быстра, подвижна, постоянно развивается и является наиболее популярной библиотекой для этого инструмента. Кроме того, она используется такими крупными компаниями, как Airbnb, Reddit, Patreon, Lego, BBC News, Atlassian и др.

Styled Components позволяет нам определять стили элемента при помощи JS-синтаксиса шаблонных литералов. Мы создаем переменную, которая будет относиться к HTML-элементу и ассоциированным с ним стилям. Поскольку звучит это очень абстрактно, давайте взглянем на простой пример:

Как видите, мы можем легко определять области видимости стилей. Помимо этого, мы ограничиваем эти области до конкретного компонента. Это помогает нам избежать коллизий имен классов между разными частями приложения.

С полным содержанием статьи можно ознакомиться на сайте "Хабрахабр":

https://habr.com/ru/company/piter/blog/569086/