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

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%
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: "Mind the Gap" – Ryan Florence's talk at Big Sky Dev Con 2024

Ryan masterfully shows how React's new "use server" and "use client" directives let us build rich features on both sides of the network, using the same unified paradigm. A must-watch for any React developer.
Ми покликали спільноту React поділитися своїм "вибором року"

Sam Selikoff

Videos for frontend developers on Build UI and YouTube, co-host of the Frontend First podcast

Анімації

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 із тривалою історією.

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%
Які бібліотеки або фреймворки ви використовували для стилізації ваших React-застосунків?

Проблеми у роботі з компонентами

З огляду на біль, спричинений проблемами стилізації та кастомізації, не дивно, що headless-бібліотеки, як-от Radix і React Aria, виявилися настільки популярними.

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.
Спонсорований вміст від наших партнерів. Детальніше.