Інструменти Reactjs на всі випадки життя

13 хв. читання

React — чудовий, це один з найбажаніших і найпопулярніших фреймворків JavaScript (відповідно до опитування StackOverflow 2021). З React легко створити і найпростіші, і складнющі застосунки.

Але існує так багато бібліотек на основі Reactjs, що знайти потрібну здається надважким завданням. Подекуди ми навіть не можемо згадати чи здогадатися про термін, пов'язаний із цією бібліотекою, і її пошук стає ще складнішим.

Тож у цій статті ви знайдете найкращі інструменти для різних випадків використання React. Тут ми не заглиблюватимемося в усі деталі. Це буде поверхневий огляд представлених бібліотек. Докладніше про них ви зможете прочитати у документації.

Керування станами

Основна частина React — це керування станами. Але є два типи бібліотек керування станами клієнтської частини:

  1. Стан інтерфейсу (наприклад схеми інтерфейсу, світлий/темний режим тощо).
  2. Отримання даних/стан асинхронних даних (кешування запиту-відповіді, подій WebSocket тощо).

Багато людей навіть не здогадуються, що існують ці 2 типи керування станами. Вони користуються лише одним рішенням Redux/Mobx/XState тощо. Але це лише менеджери станів інтерфейсу користувача. Хоча деякі з них (наприклад, Redux) мають підтримку отримання даних через інші пакунки/проміжні програми (наприклад, rtk-запит), це досі не повні рішення.

Для отримання даних/кешування мережних відповідей потрібне кешування, визначення застарілих даних недійсними, мемоїзація, збирання сміття тощо. Якщо робити усе за допомогою менеджерів стану інтерфейсу, це може призвести до витоку пам'яті/надмірного використання ресурсів та інших проблем.

Засоби керування станами клієнтської частини:

  1. zustand: простий, масштабований набір для створення менеджерів стану без готового шаблону, але з використанням основи FLUX. Він повністю побудований на хуках і відповідає шаблону одного сховища (single-store). Хоча можна створити кілька сховищ, усі вони будуть відокремлені одне від одного. Він легкий, швидкий, підтримує інструменти розробника redux, може бути інтегрований зі ще однією чудовою бібліотекою шаблонів керування станами immer та підтримує проміжне програмне забезпечення для сховищ. Це наче ідеальний менеджер стану, якого бракувало React.
  2. Redux: король керування станами. Підтримує кожен фреймворк інтерфейсу, включно з Dart Flutter. Бібліотека-першопроходець для впровадження шаблону FLUX. Redux змінив спосіб керування станами. Він потужний, налаштовуваний, готовий до продакшену і забезпечує надійний API. Завжди виправдовував себе у великих застосунках. Але кількість повторюваного шаблонного коду (boilerplate) у ньому незліченна. Redux використовується всюди, але багато людей досі ненавидять його через цей шаблонних код (який намагалися виправити за допомогою redux-toolkit). Та щойно ви розберетеся з ним, то вже ніколи не пошкодуєте, що обрали Redux.
  3. MobX: простий, масштабований менеджер станів, який працює з багатьма фреймворками. MobX навіть підтримує Dart. Його архітектурна свобода дозволяє організувати свої стани як завгодно. Так само як і Redux, він перевірений у бою та у продакшені. Він теж використовує сховища і переважно дбає про високу швидкість обробки за допомогою Observables. Крім того, він дуже прозорий і його роботу видно кінцевому користувачеві, що насправді незвично у порівнянні з іншими бібліотеками.
  4. recoil: експериментальна бібліотека! Це менеджер керування станами від Facebook. Він створює графік стану, пов'язаний з деревом React, компонентами й потоком змін стану від коренів цього графіку (який вони називають атомом) за допомогою чистих функцій, відомих як селектори. Він простий, легкий, не має шаблонів, сумісний з Concurrent React (коли ця функція в React стане доступною) та зручний. Він заповнює прогалину, яку не закрив Context API в React.
  5. jotai: чудовий менеджер керування станами, побудований на індивідуальному шаблоні стану. Замість створення центрального сховища він дає можливість створювати/керувати станом за допомогою окремих атомів. Еге ж, ці стани називаються атомами. Він елементарний, гнучкий, легкий і надшвидкий. Його створив розробник zustand, але за іншою моделлю. Він більше схожий на recoil, а zustand ближчий до Redux/MobX
  6. XState: унікальне рішення для керування станами, яке застосовує концепцію скінченного автомата: «Скінченний автомат — це математична модель обчислень, що описує поведінку системи, яка може перебувати лише в одному стані в будь-який час». На перший погляд xstate може заплутати, але все це матиме сенс, щойно ви почнете ним користуватися. Це добре розроблений менеджер керування станами.

Бібліотеки керування отриманням даних та асинхронних даних:

  1. react-query: бібліотека збору даних, якої бракує у React. Якщо говорити технічніше, вона спрощує отримання, кешування, синхронізацію та оновлення стану сервера у ваших React-застосунках. До появи react-query синхронізація зі станом сервера та кешування були запаморочливо складними. Особливо, коли ви маєте лише менеджери станів для інтерфейсу. Вона полегшує керування пам'яттю, мемоїзацію, кешування та ручну перевірку застарілих даних. Бібліотека також доступна для react-native. Це одна з причин, чому багато розробників обирають React замість інших фронтенд-фреймворків.
  2. swr: робота бібліотеки нагадує react-query. Легка, надає хуки для отримання даних та підтримує стек JAM. Також працює з багатьма методами передавання та протоколами. Вона забезпечує швидку навігацію сторінками, запити за інтервалами (polling on intervals), залежність від даних, повторну перевірку кешованих даних під час фокусування, відновлення позиції прокрутки та багато іншого. Створена командою Nextjs і vercel
  3. apollo-client: комплексна бібліотека, яка дозволяє керувати як локальними, так і віддаленими даними за допомогою GraphQL. Її можна застосовувати для отримання, кешування та зміни даних застосунку, одночасно автоматично оновлюючи інтерфейс користувача. Це як react-query, але для GraphQL. Також має однакові з react-query назви хуків. Завдяки спільноті має і міжфреймворкову сумісність. Це найкраща бібліотека збору даних для роботи з GraphQL.
  4. rtk-query: похідна від redux-toolkit і найкраще пасує, якщо ви користуєтеся Redux/redux-toolkit як менеджером станів свого інтерфейсу. Проста і легка. На відміну від інших вона не базується на сховищах, тому всі запити індивідуальні. Оскільки бібліотека походить від Redux, ви отримаєте гарну швидкодію.

Стилізація

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

Стилізація за допомогою JavaScript — це також нова опція. Хоча вона дещо сповільнює виконання, та багато чого піддається налаштуванню. Це називається CSS у JS.

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

Створені на основі CSS:

  1. tailwindcss: модульний/налаштовуваний, побудований на утилітах CSS-фреймворк. Має власний компілятор jit (Just in time), що відкидає невикористаний CSS та пропонує стилі CSS на ходу в процесі розробки. Від робочого коду можна відрізати 100% невикористаного CSS за допомогою purgecss. Майже все, що можна зробити за допомогою CSS, можна зробити за допомогою класів tailwindcss.
  2. bootstrap: Bootstrap від Twitter — один з найкращих фреймворків для компонентів CSS, а ще найзріліший: він працює вже 10 років. Найкращий для швидкого створення інтерфейсів користувача. Надає зрозумілі класи CSS для створення будь-якого компонента. Bootstrap пропонує власний набір компонентів. Крім того, існує маса бібліотек, створених для bootstrap, які ви навряд колись вичерпаєте.
  3. scss: scss/sass — це препроцесор CSS, який дозволяє робити багато крутих штук за допомогою досить простого синтаксису. Раніше компілятор Sass був написаний на Ruby, але пізніше його переписали мовою Dart. Scss/Sass також є основою bootstrap, хоча раніше bootstrap був створений на CSS.
  4. css modules: просто файли CSS, у яких усі назви класів та назви анімацій типово розташовано локально. Імена класів CSS-файлу унікальні, адже в кінці кожного класу додається UUID під час збирання. Це найкращий спосіб відмежувати індивідуальні стилі вашого компонента від інших.

Створені на основі CSS у JS:

  1. styled-components: одна з найкращих бібліотек CSS у JS. Вона дає змогу стилізувати елементи за допомогою нового шаблону міток для синтаксису функцій JS. Підтримує створення тем, успадкування стилів, роботу IntelliSense в редакторі, сумісна з іншими фреймворками CSS та дозволяє передавати/отримувати доступ до властивостей через функції/аргументи стилів.
  2. emotion: ще одна бібліотека CSS у JS, але не прив'язана до будь-яких фреймворків. Пропонує високу швидкодію і простоту використання. Вона підтримує стилізацію як об'єктів, так і рядків. Emotion дійсно зручна для розробників, тому її застосовують чимало більших бібліотеки з UI-компонентами.
  3. xstyled: бібліотека CSS у JS, яка використовує метод utility-first і створена для React. Дозволяє легко узгоджувати систему проєктування та масштабувати її з плином часу. На відміну від інших бібліотек CSS у JS, тут можна стилізувати за допомогою переданих властивостей. Ідеально відповідає декларативності React. Надає підтримку тем. Подібна на tailwindcss, але створена за допомогою CSS у JS. Однак це не самодостатня бібліотека CSS у JS: потрібен або styled-component, або @emotion/react @emotion/styled, оскільки xstyled використовує їх під капотом.
  4. JSS: ще одна не прив'язана до будь-яких фреймворків бібліотека CSS у JS. Вона проста, мінімалістська, забезпечує всі основні набори для роботи без зайвих елементів, має систему плагінів. Це основний вибір для більших UI-фреймворків, оскільки вона має надзвичайно багато можливостей, а також дуже легка.

Компоненти інтерфейсу

Це просто заздалегідь створені компоненти, які можна налаштувати/пристосувати для інших проєктів. UI-компоненти значно заощаджують час та полегшують розробку. Крім того, ними опікуються так багато людей, що такі компоненти часто безпечніші та ефективніші, ніж створені власноруч.

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

Ось перелік деяких із них:

  1. chakra-ui: модульно-компонентна бібліотека. Схожа на tailwindcss для React, але створена за шаблоном «стилі як властивості». Підтримує теми. Може бути налаштована, щоб виглядати як завгодно, і має величезну бібліотеку компонентів.
  2. material-ui: найвідоміша UI-бібліотека в екосистемі React. Має понад 200 компонентів, які можна налаштовувати на основі принципів Матеріального дизайну Google. Але зараз вона страждає від помилки, пов'язаної з Typescript, яка дуже сповільнює визначення типів ts-сервером. Її буде виправлено в наступному великому оновленні v5, яке вже на стадії бета-версії. Ця помилка може легко сповільнити слабкі ПК, але якщо у вас ПК із середніми характеристиками, не переймайтесь, можете вільно користуватись бібліотекою. Також буде краще, якщо ви не застосовуєте Typescript у своєму проєкті.
  3. react-bootstrap: React-реалізація відомого CSS-фреймворку bootstrap.
  4. ant-design react: фреймворк UI-компонентів для React від ant-design, створений на основі системи ant-design. Легко налаштовуваний, підтримує теми та пропонує величезну кількість компонентів.
  5. grommet: адаптивна, найперше фокусується на мобільній розробці, ретельно розроблена бібліотека компонентів інтерфейсу для React. Має велику кількість добре продуманих компонентів. Проста, мінімалістська і дуже адаптивна.
  6. evergreen: Гнучкий, зручний для розробників, з компонентами які усталено надають продумані стилі інтерфейсу користувача фреймворк. Його основа надзвичайна, вона забезпечує мінімалістську систему проєктування і він є унікальним серед усіх.

До речі: Автор цієї статті створює бібліотеку компонентів інтерфейсу на основі tailwindcss, яка повинна стати міжфреймворковою бібліотекою. На початку буде надана підтримка React & Vue, а також планується підтримка svelte. Її назва — revind. Проєкт потребує більшої кількості учасників. Якщо ви хочете зробити свій внесок, перейдіть на сторінку https://github.com/FotieMConstant/revind або зв'яжіться з ним через Twitter.

Обробники форм

Обробка форм — складне завдання для React. Контроль, перевірка полів, скидання стану після успішного надсилання, перевірка, чи вводилося щось, тощо — все це багато роботи. Але, на щастя, є бібліотеки для обробки форм, які полегшують це завдання.

Перелік обробників форм:

  1. formik;
  2. react-hook-form;
  3. react-final-form.

GraphQL

Ця мова запитів дає змогу отримати лише необхідні дані, заощаджуючи дані користувача та сервера. Технологія розроблена Facebook, працює поверх HTTP. Вона використовує лише метод HTTP POST для передачі даних. Сучасна і робить з'єднання HTTP чистішим для довкілля.

Популярні бібліотеки graphql для React:

  1. Apollo Client від Apollo Server;
  2. Relay від Facebook;
  3. urqlуніверсальна бібліотека запитів react.

Незамінні допоміжні компоненти/хуки

1. Таблиці

Таблиці найчастіше потрібні для застосунків, які керуються даними (data-driven). Але обробка великої кількості динамічного тексту власноруч може бути ризикованою. Втім, бібліотеки для роботи з таблицями в React полегшать це завдання.

Перелік бібліотек для роботи з таблицями:

  1. material-table (найкраще для роботи з material-ui);
  2. react-table (від розробника react-query);
  3. MUI-Datatables (ще одна хороша бібліотека для роботи з material-ui);
  4. react-virtualized (не прив'язана до певного фреймворку).

2. Бібліотеки для роботи з анімацією

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

Перелік бібліотек для роботи з анімаціями:

  1. react-spring;
  2. framer-motion;
  3. remotion;
  4. react-move.

3. Покажчики завантаження/виконання/скелетонів

Завжди добре, коли візуалізується процес отримання даних із сервера, чи не так? З індикаторами завантаження/скелетонів/виконання чекати стає легше і є шанс, що користувач не піде з вашого сайту після першого кліку.

Далі наведено чудові бібліотеки завантажувачів, які можна застосовувати з React:

  1. react-content-loader;
  2. react-loader-spinner;
  3. react-spinners;
  4. @tenem/react-nprogress;
  5. react-loading-skeleton;
  6. react-top-loading-bar.

4. Нескінченне прокручування

Розбиття на сторінки стає застарілим. Власників смартфонів дедалі більшає, тож зручніше користуватися нескінченним прокручуванням, щоб отримати більше даних або нескінченну кількість даних. Але це передбачає багато маніпуляцій з DOM за допомогою ref, тож створювати все власноруч трохи ризиковано. Тому існують бібліотеки нескінченного прокручування компонентів/хуків.

Перелік бібліотек нескінченного прокручування компонентів/хуків:

  1. react-waypoint;
  2. react-infinite-scroller;
  3. react-list;
  4. react-infinite-scroll-component;
  5. react-simple-infinite-scroll.

Libreact

Ще одна чудова бібліотека React — libreact. Це неймовірна колекція всього різного. Тут є компоненти React, які нам не дуже потрібні зазвичай, але іноді — просто конче необхідні. libreact надає ці компоненти окремо або збірником. У кожному разі ви знайдете тут практично всі ці найпопулярніші компоненти саме тоді, коли вони вам потрібні.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.3K
Приєднався: 7 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація