⚛️ React CRA Tools 🧑🏼‍💻 DX
⏱ 3 minutes 🗓 November 19, 2022

Create react app для SPA в 2022/23 году.

Create react app или CRA - это starter-kit для создания React приложения. В нём есть всё необходимое для создания современного SPA приложения на React. Также CRA рекомендуется к использованию на портале документации React. Правда, сама документация уже немного устарела и я очень жду, когда Дэн, закончит новую версию документации.

Моё использование Single Page Applications

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

Мы разрабатываем разной сложности продукты и у нас за основу взят CRA, с некоторой кастомизацией.

Вам не стоит смотреть в сторону CRA, если вы хотите создать портал, блог, лендинг или что-то, что не требует большой клиентской логики. Посмотрите на Next.js или генераторы статики.

Также мы используем CRA для обучения новых сотрудников, как референс React.js приложения.

Что умеет CRA?

Не полный список того, что уже настроено в CRA:

Возможно, вам не нужно всё что перечислено выше, но вы уж точно хотите хорошо оптимизированный и правильно сформированный bundle по умолчанию. Это вам обеспечит CRA.

Помимо этого, CRA обеспечивает довольно не плохой DX. При наличии ошибок он покажет приятный экран со стек-трейсом и описанием того, что пошло не так. В нём есть вполне понятная структура приложения, да, React не славится стандартизированностью подходов к разработке, обычно структура отличается от проекта к проекту (в отличии от Angular приложений). Также в CRA уже заранее настроен ESlint.

В общем, он полностью готов для того, чтобы начать изучать React.js.

Стоит ли его использовать?

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

CRA основан на Webpack, поэтому не стоит ждать от него большой скорости, он не будет ⚡️ Blazingly Fast, как нам сейчас обещают Vite и другие. Плохо ли это?

Нет. Webpack отличный инструмент, да, теперь он уступает по производительности, другим инструментам, но я не считаю его большим минусом в CRA.

Как по мне, большим минусом CRA является его архитектура и развитие его как Open Source Project. CRA базируется на npm пакете react-scripts. В нём содержится вся конфигурация webpack, eslint, jest. Многое вы сможете кастомизировать, но допустим, добавить какой нибудь less - не так просто. Вам потребуются пакеты (craco, react-app-rewired, и др.), которые занимаются манки патчингом/расширением конфигурации Webpack и других зависимостей. Либо, вам придётся вызвать команду react-scripts eject - которая уберёт всю магию скриптов, которые за вас запускают всю необходимую конфигурацию.

Ejection - означает, что все те уровни абстракции, которые были созданы командой CRA - просто пропадут, и вы останетесь наедине с Webpack и его конфигурацией, так, будто CRA никогда и не было.

В целом, наверное, если вы хотели поменять Webpack конфигурациею и вы имеет магистерскую степень по Webpack, вам нечего бояться. Но если вы хотели добавить всего один маленький CSS препроцессор, то вам будет довольно тяжело в дальнейшем поддерживать этот проект.

Считаю, что данная архитектура является главной проблемой CRA. Её может только перекрыть огромная популярность CRA, то есть, если вы хотите что-то добавить, изменить, оптимизировать, скорее всего уже где-то есть статья - как именно это сделать для CRA.