#6 React css - компонентый подход

Всем привет. В этом уроке мы разберем как работать с стилями в react.

Если мы посмотрим в index.js файл, то увидим, что там импортируется index.css. То есть в javascript можно импортировать css. Это делается при помощи webpack лоадера, который специальным образом обрабатывает все файлы с расширением .css.

Давайте добавим в index.css у body

background: green;

Как мы видим, в браузере фон поменялся на зеленый. Если мы посмотрим в head нашей страницы, то увидим, что у нас добавился элемент style с стилями внутри. Обратите внимание, что когда мы меняем стили, страница не перегружается. Это происходит потому, что внутри react-create-app настроен hot-reloader, который позволяет многие действия применять без перезагрузки страницы. Это очень удобно, так как позволяет быстро пробовать различные стили и елементы.

Как же мы с вами можем структурировать стили этого проекта?

1. В index.css пишем глобальные стили
2. Под каждый компонент пишем стили для каждого компонента отдельно

Давайте попробуем

Создадим App.css и импортируем его в App.js

import './App.css';

Для того, чтобы задать елементу в react класс, используется специальный атрибут className. Например, мы можем в className задать строку container. И эта запись конвертируется в обычный класс в html, который будет искать у нас .container. Если мы напишите атрибут class, то он работать не будет. Это очень часто бывает у людей, которые только начинают знакомиться с реакт.

<div className="container">
  <RegistationForm />
</div>

И добавим стили в файле App.css к классу container.

.container {
  width: 700px;
  border: 1px solid red;
  margin: 0 auto;
}

Как мы видим, я неправильно указал импорт App.css. Нам нужно указать relative путью

Как мы видим в браузере все стили применились, но они глобальные. То есть написав класс container в двух разных файлах и примените к ним стили, мы перетрем стили одного из них.

Ну и напоследок давайте применим какие-то стили к вложенному компоненту RegistationForm. Мы, естественно, не хотим их писать в App.js, поскольку это будет тогда не внутри формы регистрации. Мы хотим ее переиспользовать сразу с стилями. Создаем новый файл RegistationForm.css и добавляем классы к инпуту и к button.

  <input
    type="text"
    placeholder="E-mail"
    value={this.state.email}
    onChange={this.handleEmailChange}
    className="emailField"
  />
  <button className="submitBtn">Save</button>

Импортируем цсс файл к нашей компоненте

import './RegistationForm.css';

Добавляем стили для инпута и кнопки.

.emailField {
  width: 300px;
  height: 40px;
  display: block;
  border-radius: 4px;
  margin-bottom: 10px;
}

.submitBtn {
  width: 300px;
  background: green;
  height: 50px;
  border: 0;
}

Теперь если мы посмотрим в браузер, мы видим, что все наши стили применились. И единственный вопрос, что же будет с стилями для продакшена. Так как у нас все стили находятся в head, и это подойдет не всем. Для продакшена многие люди хотят отдельный файл css в котором все стили минифицированы. Это абсолютно нормально, потому что create-react-app позволяет билдить наш продакшен командой

npm run build

То у вас в папке build/static будет лежать 2 файла css и js. Оба файла минифицированы. У нас также есть файл index.html, в который подключены эти файлы. Все что вам остается после билда - это засунуть эти файлы в проект на сервере.