Огляд найпопулярніших React-бойлерплейтів у 2024 році

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Вітаю, я Родіон Сальнік, CTO в Brocoders. Нещодавно я розповідав про створення нашого власного Extensive React Boilerplate. А тепер хочу розглянути, які ще є бойлерплейти для React, що популярні цього, 2024 року.

Нещодавно React став одним із найулюбленіших інтерфейсних фреймворків усіх часів. Згідно з опитуванням 2023 року, React.js використовують 40,58% розробників у всьому світі, що робить його одним із найпопулярніших вебфреймворків. Він був створений Meta (на той час ще Facebook), й інші технологічні гіганти, такі як PayPal, Uber, Instagram і Airbnb, також покладаються на React.js для своїх інтерфейсів користувача.

Бібліотека React «з коробки» не містить практично жодних додаткових можливостей, окрім основних функцій створення та керування компонентами. Тому тут можна легко напартачити, не знаючи найкращих практик передачі пропсів, декомпонентизації, структурування файлів React-додатків, масштабування застосунку загалом і решти нюансів. Запобігти цим помилкам можна, використавши бойлерплейт, що містить вбудовані функції та конфігурації та забезпечує комплексну основу з головними інструментами та бібліотеками.

Таким чином, оптимізуючи процес розробки та дозволяючи розробникам не займатися початковим налаштуванням і конфігурацією, а зосередитися на побудові логіки своєї програми, він є узгодженою відправною точкою під час ініціювання розробки застосунку. Пошуком react-boilerplate на GitHub видає 44 800 репозиторіїв станом на цей час. Постає питання щодо вибору — який шаблон взяти для розробки, щоб підходив саме для вашого застосунку і був гарним у масштабуванні та підтриманні його згодом.

Види React-бойлерплейтів

У минулому популярним способом для запуску проєктів React був create-react-app (CRA) — популярний і офіційно підтримується Facebook. Однак нова документація React, опублікована 16 березня 2023 року, більше не рекомендує CRA як найкраще рішення для створення програм React. Розгляньмо, які є альтернативи, порівняємо і вирішимо, як взагалі краще розпочати проєкт.

Якщо заглибитися в різні аспекти React-бойлерплейтів, ось за якими критеріями їх можна поділити:

1. Бібліотеки та конфігурації:
   
   1. Мінімалістичні бойлерплейти: забезпечують основні налаштування для проєкту React, включаючи базові конфігурації (такі як Webpack, Babel і ESLint). Вони припускають, що розробники додадуть певні бібліотеки та функції за потреби. І таких бойлерплейтів насправді більшість.
   2. Багатофункціональні бойлерплейти: із попередньо налаштованими додатковими бібліотеками та інструментами. Вони можуть містити керування станом (наприклад, Redux), маршрутизацію (React Router), тестування, а також можуть містити базові сторінки та компоненти інтерфейсу користувача, ще більше прискорюючи процес розробки та створюючи основу для загальних елементів інтерфейсу користувача.
2. Автентифікація та реєстрація:
   
   1. Бойлерплейти з автентифікацією та реєстрацією: містять компоненти для логіну, реєстрації та сеансів користувача.
   2. Бойлерплейти без авторизації: залишають реалізацію автентифікації розробникам.
3. Full-Stack чи тільки Front-end:
   
   1. Full-Stack бойлерплейти: надають комплексне рішення для створення вебзастосунків, охоплюючи як фронтенд (React), так і бекенд.
   2. Бойлерплейти для Front-end: зосереджені виключно на інтерфейсі користувача. Розробникам потрібно інтегрувати їх із серверною частиною за їх вибором.
4. Бібліотеки UI-компонентів:
   
   1. Бойлерплейти з UI-компонентами: містять повний набір компонентів інтерфейсу користувача, які відповідають консистентним шаблонам проєктування (наприклад, кнопки, форми, модальні вікна).
   2. Бойлерплейти без UI-компонентів: залишають розробку компонентів повністю на розробника, який користуватиметься бойлерплейтом.
5. Платні чи безкоштовні:
   
   1. Безкоштовні/Опенсорс-бойлерплейти: є у вільному доступі, підтримуються комʼюніті та часто добре обслуговуються.
   2. Платні бойлерплейти: деякі комерційні шаблони пропонують додаткові функції, преміальну підтримку або розширену функціональність.

Базуючись на наведеній вище класифікації можна сказати, що найпопулярніші реакт-бойлерплейти, такі як Vite, Create React App (CRA), Create Next App, Razzle містять лише базові бібліотеки та конфігурації, необхідні для початку розробки з React (тобто, за нашою класифікацією, вони є мінімалістичними бойлерплейтами).

Критерії вибору шаблону React

Вирішити, який шаблон взяти під час розробки, може бути досить складно, тому що потрібно не лише створити застосунок, але й масштабувати та підтримувати його згодом. Тож як підібрати відповідне рішення з приведеного різноманіття вже наявних бойлерплейтів та як обирати їх взагалі? Основні пункти, на які пропоную звернути увагу при виборі шаблону для старту проєкту:

• параметри підтримки та обслуговування: чи оновлюється проєкт?
• оцінки продуктивності;
• код (чистота структури, масштабованість, розбиття коду);
• готовність до виробництва: чи готовий проєкт до використання у продакшені зараз?
• наявність функцій, таких як авторизація, маршрутизація, інтернаціоналізація, робота з формами, тестування, базові сторінки та компоненти інтерфейсу користувача — перелік можна продовжувати, просто потрібно визначитись, які з них знадобляться у реалізації вашого проєкту, і шукати їх у бойлерплейті.

Основні інструменти збірки React-проєкту

Початком для створення програм React є Vite, Create React App, Create Next App та Razzle. Вони надають функціональність, подібну до фреймворку, зокрема щодо налаштування початкової структури проєкту, налаштування інструментів збірки та надання серверів розробки.

Vite — це інструмент для створення, який зосереджений на забезпеченні надзвичайно швидкого сервера розробки та швидкості робочих процесів веброзробки. Він використовує власний імпорт модулів ES під час розробки, що прискорює час запуску.

Create React App (CRA) — абстрагує від складності налаштування Webpack, Babel та інших інструментів збірки, дозволяючи розробникам зосередитися на написанні коду React. Містить такі функції, як гаряче перезавантаження модулів для ефективної розробки.

Next.js — це фреймворк React для створення серверно-рендерованих і статично згенерованих вебпрограм. Він налаштовує проєкт Next.js із розумними параметрами за замовчуванням, включаючи такі функції, як рендеринг на стороні сервера (SSR), маршрутизація на основі файлів і маршрути API.

Razzle — це інструмент збірки, створений Airbnb, який також спрощує рендеринг на стороні сервера. Він абстрагує складність конфігурації налаштувань відтворення на стороні сервера та дозволяє розробникам легко створювати універсальні програми JavaScript. Razzle підтримує такі функції, як розбиття коду, CSS-in-JS і гаряча заміна модулів, що робить його придатним для створення додатків React, які потребують рендерингу на стороні сервера.

Часто наведені вище інструменти визначають як реакт-бойлерплейти. Вони є засобами для абстрагування складнощі налаштування та надають базові конфігурації та оптимізують робочі збірки, до того ж самі собою не дуже функціональні і не містять додаткових можливостей. А отже, за категоризацією, наведеною вище, ми класифікуємо їх як мінімалістичні бойлерплейти. По суті, вони часто виступають як boilerplate templates, тобто є чудовими інструментами для створення більш багатофункціональних React-бойлерплейтів.

Таблиця вибраних бойлерплейтів

Далі ми розглянемо реакт-бойлерплейти, які не стягують ліцензійну плату та/чи пропонують свої продукти за гроші. Врахуємо дату останнього оновлення (не більш як пів року тому). На основі цього ми беремо до уваги 12 бойлерплейтів:

*на травень 2024

Порівняння бойлерплейтів за функціями

Тепер розглянемо більш детально те, які фічі може отримати розробник від використання бойлерплейтів, і що ще треба взяти до уваги:

Інтеграція з API — деякі шаблони можуть містити конфігурації для інтеграції з певними API або серверними службами.

Рішення для управління станом — Redux, MobX, Recoil або просто вбудоване керування станом React. Неможливо не додати асинхронний React Query.

Налаштування тестування — бойлерплейти з попередньо визначеними налаштуваннями тестування або без них.

Автентифікація та авторизація — чи прописана автентифікація та авторизація користувачів та як вона обробляється, зокрема чи є інтеграція з певними бібліотеками автентифікації.

Інтернаціоналізація (i18n) і локалізація — надає можливість підтримки кількох мов, для цього використовуючи такі бібліотеки, як react-i18next або react-intl.

Дотримання ESLint-правил — дозволяє не тільки виявляти чи пофіксити проблеми під час форматування коду, а також попередити можливі помилки.

Рішення для стилів — використання CSS modules, styled-components чи UI-бібліотек, що забезпечать легке та ефективне перевикористання стилізованих компонентів.

Використання типізації в проєкті — в процесі розробки за допомогою TypeScript можливо додати статичну типізацію, це допоможе створити більш масштабовані та надійні застосунки.

Можливість вибору теми застосунку — користувач може змінювати тему зі світлої на темну, виходячи з власних уподобань чи автоматичного налаштування.

Наявність готових компонентів форм — надає компоненти, призначені для повторного використання в різних формах, зменшуючи дублювання коду та сприяє стандартизації. Також можуть містити вбудовану валідацію та обробку помилок, що робить розробку більш надійною.

Бібліотеки UI-компонентів — пропонують готові та настроювані компоненти, такі як кнопки та модальні вікна, які розробники можуть легко інтегрувати у свої програми, заощаджуючи час і зусилля на проєктуванні цих елементів з нуля.

Ми проаналізували кожен бойлерплейт і отримали таку таблицю:

Опис бойлерплейтів з таблиці

Extensive-react-boilerplate. React-бойлерплейт, розроблений для всіх типових проектів. Має повністю сумісний з ним бекенд-бойлерплейт nestjs-boilerplate, але є цілком незалежним від нього рішенням. Підтримує автентифікацію, в т.ч. через акаунти Google та Facebook, та CRUD-запити для управління користувачами.

React-starter-kit. Шаблон для створення вебзастосунків на основі React. Містить попередньо налаштовані конфігурації, такі як CSS-in-JS, Vitest, VSCode settings, підтримку Cloudflare та SSR. Як база даних використовується підключення до Firestore. Має реалізацію деяких UI-компонентів, наприклад, тулбар чи сайдбар на основі Joy UI.

React-redux-saga-boilerplate. Стартовий проєкт для створення реакт-застосунків, який використовує Redux для управління станом. Він забезпечує підтримку Unit та End-2-End Testing, react-helmet, а для опису стилів використовує бібліотеку Emotion, що спрощує написання CSS-стилів за допомогою JavaScript. Містить власні компоненти, такі як header і footer, що були реалізовані за допомогою styled-components.

Next-js-Boilerplate. Має гнучку структуру коду, треба всього лише вибрати та зберегти необхідну функціональність. Підтримує інтеграцію з Tailwind CSS, автентифікацію з Clerk, є сумісним з SQLite, PostgreSQL та MySQL. Модульне тестування відбувається за допомогою Jest, а для опису валідаційних схем під’єднали бібліотеку Zod.

Landy-react-template. Цей бойлерплейт постачається з багатомовною підтримкою, плавною анімацією, а весь контент зберігається в JSON-файлах, через що вам надається можливість керувати текстами, не маючи ніяких попередніх знань в React.js. Містить набір власних компонентів (button, input, textarea тощо), що були створені на основі стилізації HTML-елементів за допомогою styled-components.

Core. Сучасний шаблон, що був розроблений на основі швидкого інструменту для створення проєктів Vite. Підтримує типізацію за допомогою TypeScript та містить гарні налаштування для ESLint, Prettier, CommitLint, Husky та Lint-Staged.

Nextjs-boilerplate. Реакт-бойлерплейт що використовує Next.js для статичного генерування сторінок сайту. Підтримує конвенцію повідомлень для git, генерацію компонентів використовуючи Plop, організація стилів відбувається коштом Tailwind CSS. Має власний Storybook для документації компонентів.

React-pwa. Готовий набір для старту вашого проєкту з нуля. Складається з мінімальної комбінації основних бібліотек, компонентів та утиліт, які зазвичай потрібні розробникам під час створення React-додатків. Містить власний HOC для обробки помилок на сторінці та був розроблений на основі Vite.

Vitamin. Стартовий проєкт, що містить Tailwind CSS з базовим скиданням стилів та плагіном Prettier. Для тестування використовуються такі інструменти як Vitest, Testing Library та Cypress, при цьому бібліотек UI компонентів та інших додаткових функцій не містить.

Next-saas-stripe-starter. Використовуючи цей бойлерплейт, ви маєте змогу розширити можливості для власного проєкту за допомогою Next.js, Prisma, Planetscale, Auth.js v5, Resend, React Email, Shadcn/ui та Stripe. Містить бібліотеку з компонентами, що були побудовані за допомогою Radix UI та Tailwind CSS.

Gatsby-starter-apple. Шаблон для створення застосунків, що надає вам гарний адаптивний дизайн та містить анімацію для мобільного меню. Основою для стилізації використаних компонентів є styled-components. Добре підтримує оптимізацію пошукових систем та RSS-канал.

Fullstack-typescript. Цей бойлерплейт є повноцінним фулстек-застосунком для швидкого запуску вашого проєкту. Має бібліотеку з власними компонентами на основі Material UI та для комунікації між клієнтом та сервером використовує axios. Не підтримує технології управління станом, такі як Redux, MobX чи Zustand.

Особливості реалізації деяких фіч

Загалом шаблони React пропонують різноманітні особливості реалізації, призначені для прискорення та стандартизації процесу розробки. Так, вони містять бібліотеки UI-компонентів та охоплюють загальний підхід до стилізації, управління станом та основні конфігурації ESLint.

React-бібліотеки UI-компонентів

Реалізація функцій у шаблонах React часто обертається навколо модульної розробки, де компоненти розроблені для багаторазового використання та компонування. Проаналізувавши актуальні бібліотеки, та згідно з цією статтею, можна виділити найпопулярніші:

Як бачимо, Material UI нині є найпопулярнішою бібліотекою, що має 91.2k GitHub stars та понад три мільйони завантажень на тиждень. Завдяки властивостям респонсивного дизайну (RWD), можна бути впевненим, що застосунок буде автоматично адаптований під різні екрани та пристрої.

Рішення для стилів

Стилізаційні рішення, такі як модулі CSS, styled-components або Sass, зазвичай включені в React-бойлерплейти. Вони пропонують різні підходи до стилізації компонентів, забезпечуючи гнучкість і масштабованість та зберігаючи інкапсуляцію компонентів.

Переваги використання styled-components як рішення для стилів:

1. Бібліотека автоматично відстежує компоненти, що відображаються на сторінці та додає до них лише власні стилі.
2. Автоматичне створення унікальної назви класу для стилів, що забезпечує відсутність помилок в іменах класу.
3. Стилі прикріплюються до певного компонента, що спрощує видалення самого CSS-класу.
4. Проста динамічна стилізація (нижче приклади зі сніпетами коду від нашої команди bc-boilerplates).
   

   const AvatarInputContainer = styled(Box)(({ theme }) => ({
    display: "flex",
    position: "relative",
    flexDirection: "column",
    alignItems: "center",
    padding: theme.spacing(2),
    marginTop: theme.spacing(2),
    border: "1px dashed",
    borderColor: theme.palette.divider,
    borderRadius: theme.shape.borderRadius,
    cursor: "pointer",
     "&:hover": {
       borderColor: theme.palette.text.primary,
     },
   }));

5. Використання динамічних пропсів компонента під час стилізації. Це забезпечує оновлення стилю виходячи із значення змінної.
   

   const StyledCollapseBtn = styled("button")<ICollapse>(({ isOpen, theme }) => ({
    justifySelf: "flex-end",  
    color: COLOURS.black,  
    backgroundColor: "transparent",  
    border: "none",  
    cursor: "pointer",  
    paddingLeft: theme.spacing(2.5),  
    position: "absolute",  
    bottom: theme. spacing(3),  
    left: isOpen ? "150px" : "unset",
   }));

6. Перевикористання стилів одного компоненту в іншому або для впливу одного компонента на інший (дочірнього та батьківського).
   

   const Link = styled.a`
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background: papayawhip;
    color: #BF4F74;
   `;
   
   const Icon = styled.svg`
    flex: none;
    transition: fill 0.25s;
    width: 48px;
    height: 48px;
      ${Link}:hover & {
      fill: purple;
     }
   `;

ESLint-правила у бойлерплейтах

Ефективність використання правил ESLint під час розробки проєкту проявляється також у написанні кастомних правил. Адже завдяки тому, що він має широкий набір функцій та гнучкість, можна створити не тільки формат та правила, а й врахувати внутрішні проєктні рішення. Наприклад, використовуючи роботу з формами, можливо контролювати та попереджати розробників про можливі зайві рендери, некоректні рішення при роботі з об’єктами чи просто вказувати на невикористані імпорти.

Ми у extensive-react-boilerplate пропонуємо розв’язання таких проблем так:

• за допомогою правил попередження щодо некоректного використання патернів:

{
 "selector": "CallExpression[callee.name=useForm][arguments.length=0], CallExpression[callee.name=useForm][arguments.length=1]:not(:has(Property[key.name=defaultValues]))",
 "message": "Pass object with \"defaultValues\" for correct \"formState\" behavior." 
},
{
 "selector": "VariableDeclaration[declarations.0.init.callee.name=useState] ~ ReturnStatement JSXIdentifier[name=Controller]",
 "message": "Don't use \"Controller\" with \"useState\". Move you \"useState\" and another logic to separate component and wrap this component via Controller. Reason: This approach will rise wrong logic for handle input field. Example: \"src/components/form/text-input/form-text-input.tsx\""
},
{
 "selector": "VariableDeclaration[declarations.0.init.callee.name=useState] ~ VariableDeclaration[declarations.0.init.callee.name=useController], VariableDeclaration[declarations.0.init.callee.name=useController] ~ VariableDeclaration[declarations.0.init.callee.name=useState]",
 "message": "Don't use \"useController\" with \"useState\". Move you \"useState\" and another logic to separate component and wrap this component into another component with useController. Reason: This approach will rise wrong logic for handle input filed"
},
{
 "selector": "CallExpression[callee.name=useForm][arguments.length=1] Property[key.name=defaultValues][value.properties.length=0]",
 "message": "\"defaultValues\" can not be empty object for correct \"formState\" behavior." 
}

• за допомогою інформування про можливість неконтрольованих рендерів:

{
 "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useFieldArray]",
 "message": "\"useFieldArray\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useFieldArray's logic to separate component."
},
{
 "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useController]",
 "message": "\"useController\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useController's logic to separate component."
},
{
 "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useFormContext]",
 "message": "\"useFormContext\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useFormContext's logic to separate component."
},
{
 "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useFormState]",
 "message": "\"useFormState\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useFormState's logic to separate component."
},
{
 "selector": "CallExpression[callee.name=useForm][arguments.length=0], CallExpression[callee.name=useForm][arguments.length=1]:not(:has(Property[key.name=defaultValues]))",
 "message": "Pass object with \"defaultValues\" for correct \"formState\" behavior."
}