Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

Мой стартовый проект для разработки на реакте

Я достаточно давно поддерживаю репозиторий с базовым кодом для запуска проекта на реакте – react-webpack-starter. Сам пользуюсь им постоянно и, буду рад, если вы посмотрите и поделитесь своими соображениями. Вообще, я всем рекомендую держать под рукой такой инструмент для экспериментов. Тем более, что если это ваш основной фреймворк, то скорее всего вам ни раз придется на нем запускать проекты.

Итак, first things first, из чего состоит проект. То что основной фреймворк это React уже понятно, помимо него я так же добавил redux и sagas. Redux для управлениями моделью данных, Sagas – дополнительный уровень логики для управления асинхронными операциями. Это тот стек технологий, который я использую в каждом проекте.

Почти любое приложение работает с раутингом – как-то же надо разделить логику на разные страницы. Я взял стандартный раутинг, с которым работает большинство приложений написанных на этом фреймворке. Однако, мне не нравится функционал раутинга в его последней версии (4-ой), есть достаточно много ограничений, которые перевешивают плюсы новой версии.

Что нравится в 3-ей версии:

Что не нравится в 4-ей версии:

Структура файлов – это не последнее дело в разработке. Бардак в папках никому еще не добавил продуктивности. Итак, это мой вариант порядка:

Теперь по порядку о том что в папках

Для тестов я использую jest, собственно, ничего более хорошего для тестов компонентов на реакте и нет. Вся конфигурация, как я уже упомянул находится в папке с одноименным названием. В самом репозитории не так уж и много тестов, только несколько, для того, чтобы “обозначить диспозицию”.

Для форматирования кода я использую eslint – самое популярное решение. Все базовые проверки построены на конфигурации от airbnb, с моими небольшими дополнениями.

Конфигурация webpack’а. Webpack у меня по-разному работает в среде разработки и, когда код собирается на прод. Это и логично, когда готовим файлы для прода, то нужно их и уменьшить и протестировать, а вот всем этим все время заниматься во время разработки не хочится. Поэтому и настройки будут отличаться. Вместе с тем все npm команды буду теже – npm run build соберет файлы как для прода так и для “девелопмента”, разница между двумя сборками будет только в значении глобальной переменной NODE_ENV

Всё приложение обеспечивает только самый минимальный функционал, необходимый для тестирования всех используемых технологий.

Кстати, в таком приложение очень удобно тестировать новые версии тех или иных библиотек. А то как поменяют мажорную версию, так прямо и не знаешь сколько времени на обновление отводить – пока все баши поправишь, можно и несколько дней возиться.

Поделиться:
comments powered by Disqus