Разбираемся с styled-components и prop-types

Продолжим серию видео по созданию приложения / SPA «Конструктор PDF резюме» на React с нуля. В этом видео / статье:

• установим styled-components;
• напишем компонент Avatar в styled-components;
• а header и footer организуем при помощи scss;
• сравним что лучше - styled-components vs scss;
• подключим prop-types и начнем описывать типы для пропов.

Scss в React

Чтобы начать использовать Scss в React необходимо подключить scss файл в нужный компонент:

import "./Header.scss";

Пример Header/Header.jsx:

const Header = () => {
  return (
    <header className="Header">
      <div className="ui-container">
        <div className="Header_wrapper">
          <span className="Header_logo">Cv builder</span>
          <div className="Header_menu">
            <a className="ui-button isLink">
              Print
            </a>
            <div className="ui-button isLink">Github</div>
          </div>
        </div>
      </div>
    </header>
  );
};

А Header/Header.scss тогда будет выглядеть как-то так:

.Header {
  padding: 1rem 0;
  margin-bottom: 1rem;
  background-color: white;
}

.Header_wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.Header_logo {
  font-weight: 700;
}

Установка styled-components

Styled-components - это библиотека под React / React Native для написания и управления CSS. Это решение «CSS-in-JS»., то есть вы пишете CSS в файлах js / jsx. Более того, Styled-components больше похож на SCSS, что дает преимущества в использовании переменных и тп.

Чтобы установить styled-components необходимо прописать команду:

// with npm
npm install styled-components

// with yarn
yarn add styled-components

Использование styled-components в реакте

Чтобы начать использовать styled-components нужно прописать импорт в файле jsx:

import styled from "styled-components";

Пример Avatar.jsx при помощи styled-components:

const Wrapper = styled.div`
  width: 10rem;
  height: 10rem;
  background-color: #bfbfbf;
  align-items: center;
  margin-right: 4rem;
`;

const Avatar = () => {
  return <Wrapper />;
};

Или еще красивее:

import styled from "styled-components";

const Avatar = styled.div`
  width: 10rem;
  height: 10rem;
  background-color: #bfbfbf;
  align-items: center;
  margin-right: 4rem;
`;

export default Avatar;

Установка prop-types в React

Prop-types - нужен для проверки типов во время рендера для React props.

Команда для установки prop-types:

npm install --save prop-types

Использование prop-types в связке с styled-components:

Для использования prop-types нужно прописать импорты:

// ES6 (for react)
import propTypes from 'prop-types';

// Or ES5 (for node)
var PropTypes = require('prop-types');

Передача props в styled-components выглядит так (на примере того-же аватара):

import styled from "styled-components";

const Avatar = styled.div`
  width: 10rem;
  height: 10rem;
  border-radius: ${(props) => (props.isSquare ? "10px" : "50%")};
  background-color: #bfbfbf;
  align-items: center;
  margin-right: 4rem;
`;

export default Avatar;

Пример валидация пропов при помощи props-types и передача этих props в styled-component выглядит следующим образом:

Объявление props в компоненте, где Wrapper это тот же аватар:

const Avatar = ({isSquare, onClick}) => {
  return <Wrapper isSquare={isSquare} onClick={onClick} />;
};

Валидация пропов:

Avatar.propTypes = {
  isSquare: propTypes.bool,
  onClick: propTypes.func,
};

Avatar.defaultProps = {
  isSquare: false,
  onClick: () => {},
};

Осталось только отловить onClick на родителе App.js:

// ….
<Avatar onClick={handleAvatarClick} />

И написать функцию на handleAvatarClick:

const handleAvatarClick = () => console.log("avatar clicked");

Что выбрать styled-components или scss?

Выбирать styled-components или scss это ваше дело. По своему опыту могу сказать, что styled-components откровенно «тупит» в компоненах, где происходит частый ререндер.

Например, я делал color-picker на реакте и там был компонент палетты (это когда надо дергать ползунок и выбирать цвет) и каждый раз, когда менялся цвет, то styled-components начинал рерндерить компонент, в который этот цвет передавался, что приводило к диким лагам (даже с withDebounceInput на инпуте), а подключив scss лаги моментально прошли (по-хорошему, там надо было переписать код, тогда бы и на styled-components лагов не было).

Поэтому я предпочитаю комбинировать styled-components с scss либо чистый css-in-js. Потому что плюсы, которые дает styled-components:

• читаемость кода;
• удобство использования;
• подход css-in-js, который подразумевает, что стили являются динамическими и файла .css просто не будет

перевешивают минусы, как мне кажется.

UPD: когда загрузил видео, вспомнил, что забыл сказать про конфигурации для styled-compoennts и что можно сделать так, чтобы классы генерировались с названием компонента, например: класс kav01 будет выглядеть как Avatar-kav01. Такое также можно настроить только на dev разработке, а на prod оставлять все без префиксов. Подробнее об этом можете почитать тут.

Исходники:

• Полный плейлист этого курса доступен на ютубе
• Код из текущего видео можно скачать кликнув тут
• Исходный код и весь проект вы можете скачать на гитахбе буду рад вашей звездочке ✨