React стал одной, если не самой популярной библиотекой пользовательского интерфейса в сообществе разработчиков. Он был развернут Facebook как проект с открытым исходным кодом в 2013 году. Инженеры Facebook упростили начало использования React, предоставив разработчикам уникальный инструмент под названием create-react-app. Этот инструмент дает вам преимущество в использовании реакции, он обходит процесс установки и настройки и запускает базовое приложение реакции.

Чтобы использовать инструмент create-react-app, вам необходимо выполнить следующие шаги:

  • Убедитесь, что на вашем компьютере установлен Node.js, если нет, нажмите здесь, чтобы получить инструкции по его установке. Node.js необходим, потому что мы будем использовать менеджер пакетов узла, который позволяет нам использовать пакеты, созданные другими разработчиками.
  • Затем вам нужно установить инструмент create-react-app глобально, выполнив следующую команду на вашем терминале npm install -g create-react-app. Флаг -g позволяет нам установить пакет глобально в нашей системе, что избавляет от необходимости устанавливать его снова в будущем.

Выполнив эти шаги, вы должны быть готовы начать использовать create-react-app. Инструмент предоставляет базовое приложение для реагирования с минимальным стилем, но в этом блоге я объясню некоторые способы, которыми вы можете добавить стиль к своему приложению.

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

Вы можете добавить стили к отдельным элементам в реагирующем приложении, используя свойство style, которое есть у всех реагирующих элементов. Свойство стиля ожидает объект, ключи представляют свойства css, которые вы хотите изменить. Код ниже может проиллюстрировать это.

Слева у нас есть функциональный компонент реакции, и мы пытаемся стилизовать тег h2, используя метод встроенного стиля. Мы передаем объект в свойство стиля с ключами color и backgroundColor. Второй ключ может сбить с толку тех, кто работал с CSS или знает его. В css свойство, используемое для изменения цвета фона элемента, называется background-color, но в реакции мы используем camelCase, в результате у нас есть backgroundColor. Причина этого в том, что хотя может показаться, что мы пишем css, технически мы пишем Javascript. Это также объясняет, почему значения, предоставляемые свойствам, заключены в двойные кавычки.

Приведенный выше код отображает в браузере следующее.

Стилизация с помощью CSS

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

Но как вы используете CSS в реакции? Сначала вы создаете внешнюю таблицу стилей, и соглашение состоит в том, чтобы использовать то же имя, что и компонент, который вы пытаетесь стилизовать. Следующим шагом будет импорт внешней таблицы стилей в ваш компонент. Ниже у меня есть изображения компонента <App /> и соответствующей ему таблицы стилей css.

Как вы можете видеть в файле App.js, особенно в строке 2, мы импортируем файл App.css, который содержит ваш типичный CSS. Этот метод стилизации лучше подходит для применения нескольких свойств css и делает код более модульным, а это означает, что ваш файл компонента становится более чистым, читабельным и управляемым.

Стилизация с помощью SCSS/SASS

Для тех из вас, кто может не знать, что такое SASS, у меня есть блог, в котором подробно рассказывается о том, что такое SASS, некоторые из его основных функций и почему вам следует рассмотреть возможность его использования в ваших проектах. В двух словах SASS расшифровывается как Syntactically Awesome Style Sheets и представляет собой препроцессор CSS, добавляющий дополнительные функциональные возможности вашему CSS.

React позволяет очень легко использовать любой препроцессор CSS, в случае использования SASS нам нужно установить пакет, чтобы использовать его в приложении реакции. выполните следующую команду на своем терминале npm install node-sass.

Чтобы начать использовать SASS и все его замечательные функции, нам просто нужно внести пару изменений в наши текущие файлы.

Сначала нам нужно изменить расширение нашего файла App.css на App.scss. Это в основном говорит реагировать на файл как файл scss.

Во-вторых, в нашем файле App.js нам нужно изменить расширение нашего импорта для внешней таблицы стилей с “./App.css” на “./App.scss”. Теперь вы можете воспользоваться преимуществами sass.

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

Спасибо, что нашли время прочитать мой блог.