Привет! В этой статье оставлю заметки как поднять проект с шаблонизатором pug вместе с React. Этот стек экспериментальный, возможно потом буду дополнять новыми фичами. В данный момент приложение можно посмотреть в 👉 codesandbox
Сайт githublab.com предоставляет возможность по поиску гит-репозиториев по названию, с сортировкой по времени создания, количеству звезд, полному совпадению и тд.
Часть функционала такого сайта (githublab.com) была реализована здесь codesandbox.
Схема проекта выглядит примерно так:
Входной файл index.pug, в него инклюдиться pug шаблон из view/githublab и скрипт index.tsx.
В pug шаблоне подтягивается скрипт (index.ts) который расположен непосредственно в каталоге с шаблоном, управление элементами происходит через нативный javascript. Скрипт содержит класс Form в котором есть методы и поля которые наблюдаются mobx.
React компонент экспортируется из components/githublab/index.ts в нем есть класс который передается пропсом в главный реакт-элемент данного компонента, класс представляет из себя практически тот же класс что и в шаблоне паг, есть методы и поля наблюдаемые с mobx.
По объему кода компоненты, в принципе, одинаковы, на реакт логика распределена - часть логики есть и в классе со стейтом и часть в самой разметке реакт компонента. В паг вся логика сожержится в классе Form, а в шаблоне только разметка (одну из фич кода, которую возможно стоит добавить - попробовать разгрузить класс Form и перенести например дисейблы кнопок в разметку паг).
На этом все!) Спасибо за внимание :)
Гит репозиторий проекта 👉 https://github.com/g0x0y0/pug-react-ts-mobx-webpack