Перейти до вмісту

State of React 2024

Бібліотеки компонентів

Елементи для побудови вашого застосунку

Співвідношення бібліотек компонентів із часом

Поки MUI зберігає перше місце за використанням, shadcn/ui успішно прогресує та подвоює цей показник із 20% до 42% за рік, а також очолює діаграму позитивності, маючи 80%!

Ant Design
Chakra UI
Headless UI
MUI
Radix
React Bootstrap
shadcn/ui
React Aria
Mantine

Режим:

Вигляд:

Використання:

Частка респондентів, які використовували це
0%
20%
40%
60%
80%
100%
2023
2024
0%
20%
40%
60%
80%
100%

Кількість опцій

Скільки опцій у цій категорії респонденти використовували.

0%
6%
11%
17%
23%
28%
1

0

2,232
2

1

1,315
3

2

1,366
4

3

1,125
5

4

804
6

5

498
7

6

280
8

7

130
9

8

78
10

9

42
0%
6%
11%
17%
23%
28%
% від усіх опитаних
2.1
💡
Ви можете натиснути на назву будь-якої технології, щоб отримати більше деталей та вичерпніший погляд на відповідні дані.

Інші бібліотеки компонентів

Які ще бібліотеки компонентів ви використовували?
Довільна форма
Множинний вибір
0%
20%
40%
60%
80%
100%
1

2

3

4

5

6

7

8

9

10

0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
516
7%
Ми покликали спільноту React поділитися своїм "вибором року"

Мій вибір 2024: nuqs — менеджер стану з типобезпечними параметрами пошуку для React

Моїм вибором став François Best та його бібліотека nuqs. Ставши віднедавна доступною для інших React-фреймворків, окрім Next.js, вона усуває багато проблем під час роботи з параметрами пошуку URL-адрес та має надзвичайно зручний і простий у використанні API.
Ми покликали спільноту React поділитися своїм "вибором року"

Aurora Scharff

Веброзробниця та консультантка в Inmeta

Анімації

Motion (попередньо відомий як Framer Motion) посідає заслужене перше місце, щоб відсвяткувати нещодавній ребрендинг!

Які бібліотеки ви використовували для роботи з анімаціями?
Множинний вибір
0%
20%
40%
60%
80%
100%
1

2,883
2

1,488
3

1,022
4

927
5

844
6

287
7

8

9

10

🚫 Нічого

1,880
11

Інші відповіді

97
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
5,971
76%

Візуалізація даних

Chart.js очолює рейтинг цього року. До речі, чи ви знали, що всі діаграми цього опитування створені вручну, а не на основі готового рішення?

Які бібліотеки ви використовували для візуалізації даних та роботи з графікою?
Множинний вибір
0%
20%
40%
60%
80%
100%
1

2,978
2

2,338
3

1,888
4

1,149
5

375
6

302
7

241
8

234
9

194
10

0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
5,906
75%

Бібліотеки для форм

На сьогодні React Hook Form є найпоширенішою бібліотекою для форм. Але зі зростанням популярності, гм…, стека TanStack цікаво подивитися на TanStack Forms у майбутньому.

Які бібліотеки ви використовували для роботи з формами?
Множинний вибір
0%
20%
40%
60%
80%
100%
1

4,275
2

2,795
3

670
4

449
5

281
6

154
7

8

33
9

10

11

12

🚫 Нічого

961
13

Інші відповіді

114
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
6,037
77%

Патерни форм

Привертає увагу, що більшості розробників зручно використовувати як контрольовані, так і неконтрольовані форми.

Та якщо вам потрібно вибрати щось одне, контрольовані поля введення у формах є кращим вибором!

Який патерн форм ви зазвичай волієте використовувати?
0%
20%
40%
60%
80%
100%
1

Обидва залежно від ситуації

3,103
2

Контрольовані компоненти форми

2,335
3

Неконтрольовані компоненти форми

606
4

Інші відповіді

16
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
6,044
77%

Інструменти та бібліотеки CSS

Tailwind вбив CSS-in-JS? Звичайний CSS усіх наздогнав? У будь-якому разі час знаджування архітектурою CSS, здається, закінчився, оскільки перші три позиції посіли інструменти CSS із тривалою історією.

Які бібліотеки або фреймворки ви використовували для стилізації ваших React-застосунків?
Множинний вибір
0%
20%
40%
60%
80%
100%
1

4,587
2

3,991
3

3,772
4

3,715
5

1,973
6

1,198
7

372
8

220
9

219
10

182
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
6,276
80%

Component Pain Points

What pain points have you encountered related to working with components?
Довільна форма
Множинний вибір
0%
20%
40%
60%
80%
100%
1

Стилізація та кастомізація

2

Проблеми форм

3

Проблеми Tailwind

4

CSS-in-JS

5

Проблеми MUI

6

Швидкодія

7

Надмірна складність

8

Проблеми styled-компонентів

9

Інші відповіді

Відповіді, що відповідають ключу "Інші відповіді" 278
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
272
3%

Рекомендовані джерела

Tailwind CSS
Steve Kinney
Temporal

Tailwind CSS

By the end of this course, you'll be proficient in building visually stunning, responsive, and maintainable user interfaces with Tailwind CSS!
Design Systems with Storybook, v2
Steve Kinney
Temporal

Design Systems with Storybook, v2

Create reusable UI components with composable styles and variants using Tailwind CSS. Use MDX for documentation, set up interaction testing, and add data fetching to create a robust dev environment for your component library.
Спонсорований вміст від наших партнерів. Детальніше.