Дано: сейчас я верстаю сайты с помощью Pug, Sass, собираю Галпом, все дела. Получается статическая верстка. Потихоньку ковыряю фронтенд-фреймворки, где в компонентах используются "чистые" HTML и CSS.
Собственно, вопрос: как я понял, сначала, грубо говоря, мне нужно сделать статическую верстку с помощью все тех же Pug, Sass, а потом ctrl+C ctrl+V получивщиеся HTML и CSS вставлять уже в React-компоненты. Правильно ли я уловил суть? Объясните алгоритм "превращения" верстки в веб-приложение.
нет, в React JSX. Можно и без него, но я сходу проникся таким подходом. Верстку придется встраивать в компоненты.
Алгоритм таков: верстаем все под макет, проверяем. Затем встраиваем верстку в компоненты, присваиваем классы, айдишники, делаем сетку, рисуем состояния, определяем логику, пишем обработчики, выносим сайд эффекты (анимации, положения). Так же важно учесть переиспользуемость компонентов. Реально можно один компонент использовать десятки раз потом и сильно упростить себе жизнь.
Посмотрите руководство - там написано все по-русски понятным языком.
В Vue, например, можно верстать на любом шаблонизаторе (например, pug) с использованием любых препроцессоров (например, sass) прямо в самих компонентах.
ИМХО, самый лёгкий способ - настроить сборку Sass, Pug через Webpack (Он всё равно понадобиться для работы с фреймворком). Тогда не придётся ничего никуда переносить.
Другой путь - по одному переносить вёрстку в компоненты. Классы, декоративные элементы, сетку, ...
Да, CSS можно просто подключить собранный Gulp-ом или перенести. Но переносить придётся постоянно, если есть доработки.
Чтобы не создавать кашу, я бы рекомендовал просто перенести сборку вёрстки/стилей на Webpack
Простой
