- The library for web and native user interfaces
+ Бібліотека зі створення UI для
+ вебу і нативних платформ
- Create user interfaces from components
+ Створюйте інтерфейс із компонентів
- React lets you build user interfaces out of individual pieces
- called components. Create your own React components like{' '}
- Thumbnail, LikeButton, and{' '}
- Video. Then combine them into entire screens, pages,
- and apps.
+ React дає змогу створювати інтерфейси користувача з окремих
+ частин — компонентів. Створюйте власні React-компоненти,
+ наприклад: Thumbnail, LikeButton та{' '}
+ Video. Потім об'єднайте їх у віджети, сторінки і
+ застосунки.
@@ -174,22 +175,22 @@ export function HomeContent() {
- Whether you work on your own or with thousands of other
- developers, using React feels the same. It is designed to let you
- seamlessly combine components written by independent people,
- teams, and organizations.
+ Чи ви самі, чи з тисячами інших розробників — React
+ відчувається однаково. Він розроблений так, щоб дати вам змогу
+ безшовно поєднувати компоненти, написані окремими людьми,
+ командами та організаціями.
- Write components with code and markup
+ Пишіть компоненти кодом і розміткою
- React components are JavaScript functions. Want to show some
- content conditionally? Use an if statement.
- Displaying a list? Try array map(). Learning React is
- learning programming.
+ Компоненти React — це JavaScript-функції. Бажаєте показати
+ деякий вміст умовно? Використовуйте оператор if.
+ Показати список? Спробуйте map() для масиву. Вивчення
+ React — це вивчення програмування.
@@ -197,22 +198,22 @@ export function HomeContent() {
- This markup syntax is called JSX. It is a JavaScript syntax
- extension popularized by React. Putting JSX markup close to
- related rendering logic makes React components easy to create,
- maintain, and delete.
+ Цей синтаксис розмітки називається JSX. Це розширення синтаксису
+ JavaScript, популяризоване завдяки React. Близькість JSX-розмітки
+ до пов'язаної з нею логіки рендерингу спрощує створення,
+ підтримування та видалення React-компонентів.
- Add interactivity wherever you need it
+ Додайте за потреби інтерактивність
- React components receive data and return what should appear on the
- screen. You can pass them new data in response to an interaction,
- like when the user types into an input. React will then update the
- screen to match the new data.
+ Компоненти React отримують дані та повертають те, що має
+ з'явитися на екрані. Ви можете передавати їм нові дані у
+ відповідь на взаємодію, наприклад, коли користувач вводить щось у
+ поле. Потім React оновить екран відповідно до нових даних.
@@ -220,16 +221,16 @@ export function HomeContent() {
- You don’t have to build your whole page in React. Add React to
- your existing HTML page, and render interactive React components
- anywhere on it.
+ Вам не потрібно будувати всю сторінку за допомогою React. Додайте
+ React до вашої наявної HTML-сторінки і рендеріть інтерактивні
+ React-компоненти будь-де на ній.
- Add React to your page
+ Додати React до вашої сторінки
@@ -238,14 +239,15 @@ export function HomeContent() {
- Go full-stack
- with a framework
+ Виберіть фреймворк
+ повного стеку
- React is a library. It lets you put components together, but it
- doesn’t prescribe how to do routing and data fetching. To build an
- entire app with React, we recommend a full-stack React framework
- like Next.js or{' '}
+ React — це бібліотека. Він комбінує компоненти, але не
+ визначає спосіб маршрутизації чи запиту даних. Щоб побудувати
+ цільний застосунок, ми рекомендуємо скористатися React-фреймворком
+ повного стеку, як-от{' '}
+ Next.js або{' '}
Remix.
@@ -254,17 +256,18 @@ export function HomeContent() {
- React is also an architecture. Frameworks that implement it let
- you fetch data in asynchronous components that run on the server
- or even during the build. Read data from a file or a database, and
- pass it down to your interactive components.
+ React також є архітектурою. Фреймворки, які її реалізують, дають
+ вам змогу отримувати дані в асинхронних компонентах, які
+ виконуються на сервері або навіть під час збирання. Читайте дані з
+ файлу або бази даних і передавайте їх своїм інтерактивним
+ компонентам.
- Get started with a framework
+ Розпочати з фреймворком
@@ -272,12 +275,12 @@ export function HomeContent() {
- Use the best from every platform
+ Візьміть найкраще від кожної з платформ
- People love web and native apps for different reasons. React
- lets you build both web apps and native apps using the same
- skills. It leans upon each platform’s unique strengths to let
- your interfaces feel just right on every platform.
+ Людям подобаються нативні чи вебзастосунки через різні причини.
+ React дає змогу створювати і ті, й інші, використовуючи однакові
+ навички. Він спирається на унікальні сильні сторони кожної
+ платформи, щоб ваші інтерфейси для них мали якнайкращий вигляд.
@@ -291,15 +294,16 @@ export function HomeContent() {
- Stay true to the web
+ Залишатися вірними вебу
- People expect web app pages to load fast. On the server,
- React lets you start streaming HTML while you’re still
- fetching data, progressively filling in the remaining
- content before any JavaScript code loads. On the client,
- React can use standard web APIs to keep your UI
- responsive even in the middle of rendering.
+ Люди очікують, що сторінки вебзастосунків
+ завантажуватимуться швидко. На сервері React дає змогу
+ почати потокове передавання HTML, поки ви все ще
+ отримуєте дані, поступово заповнюючи решту вмісту перед
+ завантаженням JavaScript-коду. На клієнті React може
+ використовувати стандартні API вебу, щоб підтримувати
+ чутливість інтерфейсу навіть під час рендерингу.
@@ -377,21 +381,21 @@ export function HomeContent() {
- Go truly native
+ Стати справді нативними
- People expect native apps to look and feel like their
- platform.{' '}
+ Люди очікують, що нативні застосунки матимуть вигляд і
+ відчуття їхньої платформи.{' '}
React Native
{' '}
- and{' '}
+ і{' '}
Expo{' '}
- let you build apps in React for Android, iOS, and
- more. They look and feel native because their UIs{' '}
- are truly native. It’s not a web view—your
- React components render real Android and iOS views
- provided by the platform.
+ дають змогу створювати застосунки за допомогою React
+ для Android, iOS тощо. Вони нативні, оскільки їхні
+ інтерфейси справді є такими. Це не
+ webview — ваші React-компоненти будуть рендерити
+ реальні компоненти Android та iOS, надані платформою.
@@ -401,14 +405,15 @@ export function HomeContent() {
- With React, you can be a web and a native developer. Your
- team can ship to many platforms without sacrificing the user
- experience. Your organization can bridge the platform silos, and
- form teams that own entire features end-to-end.
+ За допомогою React ви можете бути розробником для вебу та{' '}
+ нативної системи. Ваша команда може поставляти продукт до
+ багатьох платформ без шкоди для UX. Ваша організація може
+ подолати відокремленість між платформами та сформувати команди,
+ які відповідають за функції від а до я.
- Build for native platforms
+ Побудувати для нативних платформ
@@ -419,19 +424,19 @@ export function HomeContent() {
- Upgrade when the future is ready
+ Оновлюйте, коли майбутнє вже тут
- React approaches changes with care. Every React commit is
- tested on business-critical surfaces with over a billion
- users. Over 100,000 React components at Meta help validate
- every migration strategy.
+ React обережно реагує на зміни. Кожен коміт у React тестується
+ на критично важливих для бізнесу рівнях із понад мільярдом
+ користувачів. Понад 100 000 React-компонентів у Meta
+ допомагають перевірити кожну стратегію міграції.
- The React team is always researching how to improve React.
- Some research takes years to pay off. React has a high bar
- for taking a research idea into production. Only proven
- approaches become a part of React.
+ Команда React постійно шукає, як покращити React. Деякі
+ дослідження окупляться лише через роки. React має високу
+ планку для публічного впровадження дослідницької ідеї. Лише
+ перевірені підходи стають частиною React.
@@ -474,13 +479,13 @@ export function HomeContent() {
- Join a community
- of millions
+ Приєднуйтеся до
+ спільноти мільйонів
- You’re not alone. Two million developers from all over the
- world visit the React docs every month. React is something
- that people and teams can agree on.
+ Ви не самотні. Щомісяця два мільйони розробників з усього
+ світу відвідують документацію React. React — це те, про
+ що домовляються люди та команди.
@@ -488,13 +493,13 @@ export function HomeContent() {
- This is why React is more than a library, an architecture, or
- even an ecosystem. React is a community. It’s a place where
- you can ask for help, find opportunities, and meet new
- friends. You will meet both developers and designers,
- beginners and experts, researchers and artists, teachers and
- students. Our backgrounds may be very different, but React
- lets us all create user interfaces together.
+ Ось чому React — це більше, ніж бібліотека, архітектура
+ чи навіть екосистема. React — це спільнота. Це місце, де
+ ви можете попросити про допомогу, знайти нові можливості чи
+ зустріти нових друзів. Ви зустрінете розробників і дизайнерів,
+ початківців й експертів, дослідників і художників, викладачів
+ і студентів. Наш досвід може відрізнятися, але але ми разом
+ створюємо інтерфейси за допомогою React.
@@ -511,15 +516,15 @@ export function HomeContent() {
- Welcome to the
- React community
+ Ласкаво просимо до
+ спільноти React
- Ознайомитися
+ Розпочати