Створюйте інтерфейс із компонентів
React дає змогу створювати інтерфейси користувача з окремих частин — компонентів. Створюйте власні React-компоненти, наприклад: Thumbnail, LikeButton та Video. Потім об'єднайте їх у віджети, сторінки і застосунки.
Video.js
function Video({ video }) {
return (
<div>
<Thumbnail video={video} />
<a href={video.url}>
<h3>{video.title}</h3>
<p>{video.description}</p>
</a>
<LikeButton video={video} />
</div>
);
}Чи ви самі, чи з тисячами інших розробників — React відчувається однаково. Він розроблений так, щоб дати вам змогу безшовно поєднувати компоненти, написані окремими людьми, командами та організаціями.
Пишіть компоненти кодом і розміткою
Компоненти React — це JavaScript-функції. Бажаєте показати деякий вміст умовно? Використовуйте оператор if. Показати список? Спробуйте map() для масиву. Вивчення React — це вивчення програмування.
VideoList.js
function VideoList({ videos, emptyHeading }) {
let heading = emptyHeading;
const count = videos.length;
if (count > 0) {
heading = count + ' відео';
}
return (
<section>
<h2>{heading}</h2>
{videos.map(video =>
<Video key={video.id} video={video} />
)}
</section>
);
}3 відео
Цей синтаксис розмітки називається JSX. Це розширення синтаксису JavaScript, популяризоване завдяки React. Близькість JSX-розмітки до пов'язаної з нею логіки рендерингу спрощує створення, підтримування та видалення React-компонентів.
Додайте за потреби інтерактивність
Компоненти React отримують дані та повертають те, що має з'явитися на екрані. Ви можете передавати їм нові дані у відповідь на взаємодію, наприклад, коли користувач вводить щось у поле. Потім React оновить екран відповідно до нових даних.
SearchableVideoList.js
import { useState } from 'react';
function SearchableVideoList({ videos }) {
const [searchText, setSearchText] = useState('');
const foundVideos = filterVideos(videos, searchText);
return (
<>
<SearchInput
value={searchText}
onChange={newText => setSearchText(newText)} />
<VideoList
videos={foundVideos}
emptyHeading={`Нічого не знайдено за запитом “${searchText}”`} />
</>
);
}Відео про React
Коротка історія бібліотеки React
Вам не потрібно будувати всю сторінку за допомогою React. Додайте React до вашої наявної HTML-сторінки і рендеріть інтерактивні React-компоненти будь-де на ній.
Виберіть фреймворк
повного стеку
React — це бібліотека. Він комбінує компоненти, але не визначає спосіб маршрутизації чи запиту даних. Щоб побудувати цільний застосунок, ми рекомендуємо скористатися React-фреймворком повного стеку, як-от Next.js або React Router.
confs/[slug].js
import { db } from './database.js';
import { Suspense } from 'react';
async function ConferencePage({ slug }) {
const conf = await db.Confs.find({ slug });
return (
<ConferenceLayout conf={conf}>
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>
</ConferenceLayout>
);
}
async function Talks({ confId }) {
const talks = await db.Talks.findAll({ confId });
const videos = talks.map(talk => talk.video);
return <SearchableVideoList videos={videos} />;
}
19 відео
React також є архітектурою. Фреймворки, які її реалізують, дають вам змогу отримувати дані в асинхронних компонентах, які виконуються на сервері або навіть під час збирання. Читайте дані з файлу або бази даних і передавайте їх своїм інтерактивним компонентам.
Візьміть найкраще від кожної з платформ
Людям подобаються нативні чи вебзастосунки через різні причини. React дає змогу створювати і ті, й інші, використовуючи однакові навички. Він спирається на унікальні сильні сторони кожної платформи, щоб ваші інтерфейси для них мали якнайкращий вигляд.
Залишатися вірними вебу
Люди очікують, що сторінки вебзастосунків завантажуватимуться швидко. На сервері React дає змогу почати потокове передавання HTML, поки ви все ще отримуєте дані, поступово заповнюючи решту вмісту перед завантаженням JavaScript-коду. На клієнті React може використовувати стандартні API вебу, щоб підтримувати чутливість інтерфейсу навіть під час рендерингу.
Стати справді нативними
Люди очікують, що нативні застосунки матимуть вигляд і відчуття їхньої платформи. React Native і Expo дають змогу створювати застосунки за допомогою React для Android, iOS тощо. Вони нативні, оскільки їхні інтерфейси справді є такими. Це не webview — ваші React-компоненти будуть рендерити реальні компоненти Android та iOS, надані платформою.
За допомогою React ви можете бути розробником для вебу та нативної системи. Ваша команда може поставляти продукт до багатьох платформ без шкоди для UX. Ваша організація може подолати відокремленість між платформами та сформувати команди, які відповідають за функції від а до я.
Оновлюйте, коли майбутнє вже тут
React обережно реагує на зміни. Кожен коміт у React тестується на критично важливих для бізнесу рівнях із понад мільярдом користувачів. Понад 100 000 React-компонентів у Meta допомагають перевірити кожну стратегію міграції.
Команда React постійно шукає, як покращити React. Деякі дослідження окупляться лише через роки. React має високу планку для публічного впровадження дослідницької ідеї. Лише перевірені підходи стають частиною React.
Приєднуйтеся до
спільноти мільйонів
Ви не самотні. Щомісяця два мільйони розробників з усього світу відвідують документацію React. React — це те, про що домовляються люди та команди.
Ось чому React — це більше, ніж бібліотека, архітектура чи навіть екосистема. React — це спільнота. Це місце, де ви можете попросити про допомогу, знайти нові можливості чи зустріти нових друзів. Ви зустрінете розробників і дизайнерів, початківців й експертів, дослідників і художників, викладачів і студентів. Наш досвід може відрізнятися, але але ми разом створюємо інтерфейси за допомогою React.
