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

poster
Мы разберем как писать в React css стили компонентам на простом примере. Научимся структурировать стили проекта и не допускать распространенных ошибок начинающих применять css в React.
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

Всем привет. В этом уроке мы разберем как работать с стилями в 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, в который подключены эти файлы. Все что вам остается после билда - это засунуть эти файлы в проект на сервере.

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
016
5 месяцев назад
Добрый день! Как Вы относитесь к использованию Bootstrap совместно с React? Здесь какие-либо особенности есть? И насколько здесь необходим React-bootstrap? В чем его польза?
monsterlessons
5 месяцев назад
Добрый день. Нормально отношусь. Использовал в рабочих проектах. Никаких особенностей нет. Просто используете как обычно <div className="container"> React-bootstrap обертка вокруг бутстрап и нужна для реализации js частей в реакт стиле. Если вам нужен только css, то обычного бутстрапа достаточно.
Igor-OK
9 месяцев назад
смотрю уроки 10.03.2018, classname не работает, в отличие от class
Кирилл Двойников
9 месяцев назад
className будет работать
Moe Green
10 месяцев назад
Хм... А Inline Style, CSS Modules - Вы не показали?
monsterlessons
10 месяцев назад
Не в этом видео. Можете посмотреть еще css in js, если интересно. https://monsterlessons.com/project/lessons/react-pishem-css-v-javascript
Moe Green
11 месяцев назад
Подскажите, а с помощью React можно создавать full-stack приложения? Как например MEAN или MEVN? Меня смущает тот факт, что React не является фреймворком, как Angular или Vue. Это всего лишь UI-библиотека.
monsterlessons
11 месяцев назад
React можно рендерить на сервер сайде. И да, это всего лишь UI библиотека. Что вы подразумеваете под full-stack? Писать на нем бекенд нельзя.
Moe Green
11 месяцев назад
"Что вы подразумеваете под full-stack?" Вот такое - https://www.amazon.com/Mastering-Full-Stack-React-Development/dp/1786461765
Moe Green
11 месяцев назад
Кстати - отзыв о книжке нелестный ((
monsterlessons
11 месяцев назад
Единственное, что понятно из описания, что там будет изоморфность, т.е. рендеринг на сервере. Понятие full-stack обычно к React не применяется. Используют понятие isomorphic или universal.
Moe Green
11 месяцев назад
К слову просто. Меня учат для каждого компонента создавать отдельный folder с *.js + *.css внутри
Moe Green
11 месяцев назад
RegistartionForm.css - имеет глобальную видимость? В Vue есть атрибут scoped чтобы сделать стили компонента локальными, ограниченными только областью видимости конкретного компонента. А как обстоит дело в React с этим? И еще вопрос - вместо .css можно использовать шаблонизаторы ( sass, stylus ) в React? В Vue это делается просто - установкой через npm (yarn) соответствующего пакета и указанием атрибута lang="{scss|stylus}". А как обстоит дело в React с этим?
monsterlessons
11 месяцев назад
Храните так, как вам удобно. По умолчанию весь css имеет глобальную область видимости. В React можно использовать css-modules либо css in js. Точно также вы можете использовать stylus, scss правильно настроив webpack.
Moe Green
11 месяцев назад
Познакомился с css-modules и Radium. Пока что личное мнение - вот геммор то! В Vue с этим гораздо проще, имхо
monsterlessons
11 месяцев назад
В Vue это проще, потому что решает другие проблемы. Никакие проблемы с удобной передачей параметров в css или калькуляций там не решают, так как это просто css. Да и загружаются всегда все стили, а не только какие нужны для элементов. P.S. посмотрите в сторону aphrodite или styled-components