Как сделать свои программы красивыми с помощью стилей в React

1656530548 kak sdelat svoi programmy krasivymi s pomoshhyu stilej v react

автор Винь Ле

1SXKuDDFwlYF4KGzddj1K6eBuutY4YacH71h

Когда дело доходит до стиля в React, существует множество способов и вариантов технологий для украшения вашего веб-приложения. Тем не менее, исходя из моего личного опыта, решать, что выбрать зависит от требований интерфейса вашего приложения.

Это слишком легко?

Если вы остановитесь здесь и скажете: Это легко! Просто Google, чтобы найти лучшие библиотеки интерфейса React UI, выберите одну из них, и все готово», может быть, вы не испытали болезненного опыта настройки предварительно стилизованных компонентов в этих библиотеках.

Чем больше времени вы над чем работаете, тем больше вы знакомы и тем меньше времени вам нужно тратить на устранение неисправностей. Стилизация в React не является исключением. Однако это действительно требует приличного количества времени, по крайней мере, для меня как разработчика-самоучки, чтобы иметь возможность сделать мудрый выбор.

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

Почему именно стайлинг?

p247brEV3QCLUH97LtMsI0w7YhhekP5ZyfTd
эстетика? Функциональные возможности? Или оба?

Еще один мертвый простой вопрос, не правда ли? Что ж, если я немного изменю этот вопрос: «Зачем изучать стили именно тогда, когда вы начинаете изучать React?», это, возможно, активирует поток ваших мыслей.

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

Прежде чем я кажусь вам слишком серьезным, позвольте мне сказать вам: «Это вполне нормально». Нет ничего плохого в том, как вы делаете. С другой стороны, будет еще лучше, если вы отложите стиль в начале, чтобы больше сосредоточиться на логике и функциональности программы.

Однако если вы заботитесь об эстетике своей работы с самого начала, то, вероятно, вы не полностью довольны своим функциональным, но минимально оформленным приложением.

Ладно, достаточно слов. Позвольте мне подытожить преимущества стилизации вашего приложения, будь то из вашего первого «Hello world» или проекта, в котором вы находитесь:

  • Хороший пользовательский интерфейс в начале – вспомните, почему существует React? Чтобы помочь нам создать динамический пользовательский интерфейс. Более отшлифованный пользовательский интерфейс способствует лучшему опыту пользователя. В результате, если мы ставим себя на место пользователей, мы просто отдаем себе отчет, что привлекательный дизайн является обязательной частью удобного приложения.
  • Хорошая среда для развития — особенно, когда вы работаете над своим посторонним проектом. Если хороший дизайн доставляет вам удовольствие от его использования, возможно, у вас будет больше вдохновения для разработки программы с подходом, основанным на дизайне. Опять же это происходит с эстетической стороны вещей. Если вы просто хотите, чтобы это работало, это может быть вам непригодным.
  • Избегайте перегрузки стиля позже — представьте, когда вы некоторое время поработали над проектом и вдруг оглянулись назад, чтобы подумать, сколько вам понадобится сделать стиль. Если это просто проект песочницы, возможно, это хорошо. Но если вашей программе требуется несколько слоев контейнеров и элементов, а реагирование обязательно, то впереди будет достаточно много работы.

Тогда что мне использовать, чтобы моя программа React выглядела хорошо?

S28rjd2vX8bKPhxNO1m1JpYO9QvorQtJ-3lK
У вас уже есть идея, давайте теперь рассмотрим альтернативы.

Встроенный стиль

Этот подход самый простой способ начать, поскольку он не требует конфигурации, и вы можете мгновенно увидеть результат. Однако, даже если вы знакомы с CSS, помните о опечатках, поскольку они могут вызвать у вас головную боль:

<div style={{ width: 50, height: 50, background: '#000'}}>    I am a square box with black background</div>

Еда на вынос

  • Встроенный стиль выполняется с помощью свойство стиля в любом элементе DOM он имеет объект тип, в котором ключ является обычным свойством CSS, и значение является эквивалентным CSS.
  • Поскольку, как у многих свойств CSS, нет тире, вы должны заметить использование заглавных букв, например: backgroundColor, backgroundImage, textAlignи flexDirection.
  • Это лучше организовано, когда вы определяете отличительную переменную, сохраняющую всю логику стилей:
const styles = {  alertMessage: { color: 'red' },  ... // other styling rule};...
<span style={styles.alertMessage}>Unknown error</span>
  • Можно сделать условную укладку. Например:
<span    style={{ color: this.state.isWarning ? ‘red’ : ‘black’  }}>   Let’s see if I am a warning </span>. </span>

Плюсы

  • Легко применять, не настраивается.

Минусы

  • Ваши файлы JavaScript станут сложнее и длиннее, когда ваш проект станет более сложным. Один из способов сделать это – определить переменные стиля во внешнем файле JavaScript и импортировать их обратно. Однако для этого требуется дополнительный шаг и становится более сложным в использовании по сравнению с нижеприведенными методами стилизации.
  • Более низкая скорость разработки из-за перезагрузки программы. Если вы используете такие инструменты, как create-react-app, ваше приложение будет горячо перезагружаться всякий раз, когда вы вносите изменения. В противном случае вам придется вручную перезагрузить страницу, чтобы увидеть изменения. Поэтому в зависимости от сложности вашего приложения только для повторного рендеринга потребуется постепенно больше времени.

Когда использовать?

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

CSS

Ладно, больше никаких странных CSS-in-JS. Вот оригинальный CSS, который вам понравился :), только простая конфигурация перед началом:

  • Создайте свой файл CSS и импортируйте его в файл JavaScript:
import ‘./App.css’;
  • Добавьте className к элементу, к которому вы хотите применить стиль:
<p className=’warning-message’>Warning</p>

Обратите внимание, что сейчас classNameне нормально класс просто типичная вещь для React.

  • Следуйте вашим правилам заключения:
App.css.warning-message { color: red;}
  • Условный стиль путем установления эквивалентного названия класса:
<p   className={this.state.warning ? ’warning-message’ : ‘normal-message’}>Warning</p>

Плюсы

  • Напишите правила CSS, с которыми вы знакомы, чтобы уменьшить риск ошибок.
  • Преимущества таких функций CSS, как переменные и медиазапросы.
  • Хорошо организованная структура проекта.
  • Высшая скорость развития – это, пожалуй, самый приятный плюс, который я ощутил в разработке. При внесении изменений в файлы CSS ваше приложение не будет отображаться повторно. Поэтому обновление отобразится на экране в секунду. Чем больше и сложнее ваше приложение, тем больше удовольствия вы почувствуете, экономя ненужное время на перезагрузку.

Минусы

  • Отсутствуют функции по сравнению с SCSS, о которых я расскажу сразу после этого.

Когда использовать?

Вы можете использовать CSS с самого начала, независимо от размера программы. Поскольку это почти нулевая конфигурация, а CSS, возможно, знаком многим, его легко запустить.

Если ваше приложение становится больше и имеет еще более сложную систему дизайна, подумайте о проверке преимуществ SCSS над CSS.

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

SCSS

Это, вероятно, мой выбор для стиля React. Чтобы создать отличный пакет, нужны все преимущества CSS, а также ряд очень полезных функций. Если вы не знакомы с SCSS, у них есть отличные документы, которые вы можете проверить.

Однако для использования SCSS в программе React требуется несколько конфигураций. Если вы используете приложение create-react-app, эта инструкция может быть полезна вам.

Далее позвольте мне показать вам преимущества SCSS, которые делают его лучшим выбором по сравнению с обычным CSS.

Гнездование

Когда ваш проект станет больше, велика вероятность, что ваши файлы CSS будут переполнены именами классов. Ситуация становится еще более сложной, когда ваш дизайн состоит из вложенных блоков, контейнеров и элементов. Таким образом, поиск определенного имени класса где-то в файле с сотнями строк утомляет и занимает много времени. Вот где вложение пригодится:

App.scss.intro-container {  h1 { font-size: 20px };  .nested-child {    display: block;    p {      margin: 0;    }  }}

С помощью этой структуры, например, вы хотите изменить стиль дочернего элемента в вашем вводном контейнере. Все, что вам сейчас нужно сделать, это найти имя его класса, которое есть intro-container в этом случае. Тогда в нем можно было обнаружить все стили его детей. Гораздо легче, не правда ли?

Миксины

Одним из наибольших преимуществ, которые приносят миксины таблицы, является определение точек остановки в медиа-запросах. Давайте рассмотрим этот пример:

_mixins.scss
// define breakpoint for mobile device  @mixin bp-mobile {    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {      @content;    }  }

Обратно в основной файл SCSS:

App.scss
body {  width: 60%; margin: 0 auto;  @include bp-mobile {    width: 90%;  }}

По сравнению с:

App.css
// set width of the body to 90% only in mobile devicesbody {  width: 60%; margin: 0 auto;}...@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {  body {    @include bp-mobile {      width: 90%;    }  }}

Я считаю, что в SCSS это гораздо более естественно и легче. Как и когда вы применяете правила стилизации для одного элемента, у вас есть ясное представление о том, как он выглядит в других окнах просмотра. Поэтому изменения и корректировки вносятся непосредственно без бремени прокрутки вверх в CSS, поскольку люди обычно определяют медиазапросы в конце файла CSS.

Наследование

Это очень помогает сделать ваш код СУХИМ. Скажем, если вы хотите применить подобный фон и предел для 2 кнопок, за исключением того, что одна из них имеет красный цвет текста, а другая – синий:

// define common rules%button-common {  background: #fff;  border: 1px solid gray;  border-radius: 3px;}
.button-red {  @extend %button-common; color: ‘red’;}
.button-blue {  @extend %button-common; color: ‘blue’;}

Давайте подытожим плюсы и минусы SCSS:

Плюсы

  • В основном все плюсы от CSS плюс отличные особенности, заставляющие людей любить SCSS.

Минусы

  • Для использования требуется конфигурация.
  • Людям, которые не знакомы с SCSS, нужно время для обучения.

Библиотеки интерфейса React

Благодаря процветанию сообщества с открытым кодом есть замечательные библиотеки пользовательского интерфейса React, которые вы можете использовать в своих проектах. Отличными ресурсами являются MaterialUI, React-Bootstrap… и это лишь некоторые из них.

Давайте возьмем MaterialUI, одну из самых популярных библиотек, как демонстрацию:

Установка

npm install @material-ui/core

Чтобы воспользоваться этим, вы должны в значительной степени полагаться на его документацию, которая хорошо составлена ​​и разработана, ну материально Google. Однако, если вы посмотрите вроде кода для его компонентов, это немного страшно. Мой способ просто импортировать компонент, который вы хотите использовать, заметить некоторые важные параметры и настроить его позже.

Скажем, если мы хотим создать кнопку:

App.js
import { Button } from ‘@material-ui/core’;...
<Button  color=’primary’  onClick={() => console.log(‘clicked’)}  fullWidth> View </Button>

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

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

Почему бы нам всем не воспользоваться этим?

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

Один из способов настроить эти компоненты – изменить их стиль, в большинстве случаев с помощью параметров стиля. Другой способ – дать ему имя класса и написать собственный стиль с помощью CSS. В этом случае, если ваш CSS полностью действителен, но ваш компонент не меняется вообще, не забудьте указать !important после ваших правил.

Итак, если бы вы использовали библиотеки интерфейса React?

Если вы работаете над небольшим побочным проектом, полезно использовать такие библиотеки, как MaterialUI. Поскольку вам придется сосредоточиться только на стороне JavaScript, и при этом будете иметь достаточно хорошее приложение.

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

Итак, вот они, популярные способы стилизации в React. Конечно, есть еще многие другие замечательные библиотеки и хаки. Пожалуйста, поделитесь своими ниже в разделе комментариев. Поскольку сообщество React становится все больше и больше, мы можем ожидать еще большее количество «сходящих» звезд.

Более того, замечательные сопровождающие и разработчики текущих библиотек с открытым кодом будут только пытаться сделать свои решения лучше, более отшлифованными и более простыми в использовании. Все это означает светлое будущее 🙂

Спасибо, что прочли!

Приветствуйтесь в социальных сетях: Facebook, Twitter, LinkedIn или на моем личном сайте.

Следите за новостями будущих технических блогов? ? ?

До встречи!

Добавить комментарий

Ваш адрес email не будет опубликован.