From d10061cfca867b6bfbfce71c3db52ee8062ff7af Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Sat, 13 Jul 2024 09:16:39 +0300 Subject: [PATCH 1/7] Finished translation of Start a New React Project --- .../learn/start-a-new-react-project.md | 81 +++++++++---------- 1 file changed, 40 insertions(+), 41 deletions(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index bd5ba6c50..0bf968f9b 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -1,123 +1,122 @@ --- -title: Start a New React Project +title: Старт нового проєкту на React --- -If you want to build a new app or a new website fully with React, we recommend picking one of the React-powered frameworks popular in the community. +Якщо ви вирішили розробити новий застосунок або новий вебсайт цілком за допомогою React, ми радимо обрати один зі фреймворків, заряджених React, популярних у нашій спільноті. +React можна користуватися без фреймворку, проте ми з'ясували, що більшість застосунків і сайтів, зрештою, розробляють рішення для поширених проблем, наприклад, розбиття коду, маршрутизації, отримання даних і генерування HTML. Ці проблеми – спільні для всіх бібліотек UI, а не лише для React. -You can use React without a framework, however we’ve found that most apps and sites eventually build solutions to common problems such as code-splitting, routing, data fetching, and generating HTML. These problems are common to all UI libraries, not just React. - -By starting with a framework, you can get started with React quickly, and avoid essentially building your own framework later. +Обравши фреймворк, можна швидко почати роботу з React і уникнути, по суті, розробки власного фреймворку пізніше. -#### Can I use React without a framework? {/*can-i-use-react-without-a-framework*/} +#### Чи можна скористатися React без фреймворку? {/*can-i-use-react-without-a-framework*/} -You can definitely use React without a framework--that's how you'd [use React for a part of your page.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **However, if you're building a new app or a site fully with React, we recommend using a framework.** +React цілком можна використовувати без фреймворку, – так само, як можна [використовувати React у частині сторінки.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **Проте якщо ви розробляєте новий застосунок або сайт повністю на React, ми радимо скористатися фреймворком.** -Here's why. +І ось чому. -Even if you don't need routing or data fetching at first, you'll likely want to add some libraries for them. As your JavaScript bundle grows with every new feature, you might have to figure out how to split code for every route individually. As your data fetching needs get more complex, you are likely to encounter server-client network waterfalls that make your app feel very slow. As your audience includes more users with poor network conditions and low-end devices, you might need to generate HTML from your components to display content early--either on the server, or during the build time. Changing your setup to run some of your code on the server or during the build can be very tricky. +Навіть якщо вам спершу не потрібні маршрутизація чи отримання даних, то існує ймовірність того, що ви захочете додати для цих можливостей кілька бібліотек. Поки ваш згорток JavaScript розростатиметься з кожною новою можливістю, ви можете захотіти розібратися, як розбити код на порції для кожного окремого маршруту. Поки ваші потреби з отримання даних ускладнюватимуться, ймовірно, ви зустрінете серверно-клієнтські мережеві водоспади, що зроблять ваш застосунок дуже повільним. Коли серед ваших користувачів з'явиться більше осіб з поганим з'єднанням і бюджетними пристроями, вам може знадобитися генерувати HTML на основі компонентів, щоб виводити вміст рано – або на сервері, або під час збирання сайту. Змінювати налаштування для запуску частини коду на сервері чи під час збирання може бути дуже хитрим завданням. -**These problems are not React-specific. This is why Svelte has SvelteKit, Vue has Nuxt, and so on.** To solve these problems on your own, you'll need to integrate your bundler with your router and with your data fetching library. It's not hard to get an initial setup working, but there are a lot of subtleties involved in making an app that loads quickly even as it grows over time. You'll want to send down the minimal amount of app code but do so in a single client–server roundtrip, in parallel with any data required for the page. You'll likely want the page to be interactive before your JavaScript code even runs, to support progressive enhancement. You may want to generate a folder of fully static HTML files for your marketing pages that can be hosted anywhere and still work with JavaScript disabled. Building these capabilities yourself takes real work. +**Ці проблеми не є особливими для React. Це саме те, через що в Svelte є SvelteKit, у Vue є Nuxt і так далі.** Щоб розв'язати ці проблеми самотужки, доведеться інтегрувати свій бандлер зі своїм маршрутизатором і зі своєю бібліотекою отримання даних. Неважко змусити працювати вкупі якийсь базовий варіант, проте є чимало тонкощів у створенні застосунку, який швидко завантажується навіть тоді, коли виріс з часом. Захочеться надсилати до браузера якнайменшу кількість коду застосунку, але робити це за один захід клієнт-сервер, щоб паралельно завантажувалися всі дані, необхідні на сторінці. Ймовірно, захочеться, щоб сторінка була інтерактивною навіть до запуску коду JavaScript, щоб підтримувалось поступове покращення. Може захотітися генерувати теку цілком статичних файлів HTML для рекламних сторінок, які можуть викладатися будь-де й працювати навіть із вимкненим JavaScript. Розробка таких можливостей вимагає суттєвих зусиль. -**React frameworks on this page solve problems like these by default, with no extra work from your side.** They let you start very lean and then scale your app with your needs. Each React framework has a community, so finding answers to questions and upgrading tooling is easier. Frameworks also give structure to your code, helping you and others retain context and skills between different projects. Conversely, with a custom setup it's easier to get stuck on unsupported dependency versions, and you'll essentially end up creating your own framework—albeit one with no community or upgrade path (and if it's anything like the ones we've made in the past, more haphazardly designed). +**Фреймворки React на цій сторінці розв'язують проблеми штибу цієї самі по собі, не потребуючи додаткових зусиль з вашого боку.** Вони дають змогу почати з малого, аби потім масштабувати застосунок відповідно до потреб. Кожний фреймворк на React має свою спільноту, тож шукати відповіді на питання та оновлювати інструменти розробки буде легше. Також фреймворки задають структуру коду, допомагаючи вам та іншим зберігати той самий контекст і користуватися тими ж навичками в різних проєктах. І навпаки, у випадку саморобних налаштувань легше застрягнути в версіях залежностей, що більше не підтримуються, і по суті доведеться створювати власний фреймворк – але без власної спільноти та інструкцій з оновлення (і якщо він буде схожим на те, що колись писали ми, то цей ваш фреймворк буде написаний абияк). -If your app has unusual constraints not served well by these frameworks, or you prefer to solve these problems yourself, you can roll your own custom setup with React. Grab `react` and `react-dom` from npm, set up your custom build process with a bundler like [Vite](https://vitejs.dev/) or [Parcel](https://parceljs.org/), and add other tools as you need them for routing, static generation or server-side rendering, and more. +Якщо ваш застосунок містить незвичні обмеження, які погано накладаються на фреймворки, перелічені нижче, або ви хочете розв'язувати ці проблеми самотужки, то можете розгорнути власне налаштування з React. Візьміть `react` і `react-dom` з npm, налаштуйте власний процес збирання з використанням бандлеру штибу [Vite](https://vitejs.dev/) або [Parcel](https://parceljs.org/) і додайте інші інструменти, що знадобляться, наприклад, для маршрутизації, статичної генерації, серверного рендерингу чи чогось іще. -## Production-grade React frameworks {/*production-grade-react-frameworks*/} +## Фреймворки React, готові до промислового використання {/*production-grade-react-frameworks*/} -These frameworks support all the features you need to deploy and scale your app in production and are working towards supporting our [full-stack architecture vision](#which-features-make-up-the-react-teams-full-stack-architecture-vision). All of the frameworks we recommend are open source with active communities for support, and can be deployed to your own server or a hosting provider. If you’re a framework author interested in being included on this list, [please let us know](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+). +Ці фреймворки підтримують усі можливості, що знадобляться для розгортання та масштабування застосунку в реальній роботі, та прямують до підтримки нашого [бачення архітектури повного стеку](#which-features-make-up-the-react-teams-full-stack-architecture-vision). Усі фреймворки, які ми радимо, є відкритим програмним забезпеченням, що має активні спільноти для підтримки, і їх можна розгортати на власних серверах чи сторнніх хостингах. Якщо ви автор фреймворку, зацікавлений у потраплянні до цього списку, [будь ласка, повідомте нас](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+). ### Next.js {/*nextjs-pages-router*/} -**[Next.js' Pages Router](https://nextjs.org/) is a full-stack React framework.** It's versatile and lets you create React apps of any size--from a mostly static blog to a complex dynamic application. To create a new Next.js project, run in your terminal: +**[Page Router від Next.js](https://nextjs.org/) – це фреймворк React повного стеку.** Він багатоцільовий та дає змогу розробляти застосунки React будь-якого розміру – від здебільшого статичних блогів до складних динамічних програм. Щоб створити новий проєкт Next.js, запустіть у терміналі: npx create-next-app@latest -If you're new to Next.js, check out the [learn Next.js course.](https://nextjs.org/learn) +Якщо Next.js – це для вас дещо нове, то погляньте на [курс вивчення Next.js.](https://nextjs.org/learn) -Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any Node.js or serverless hosting, or to your own server. Next.js also supports a [static export](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) which doesn't require a server. +Next.js підтримується [Vercel](https://vercel.com/). [Розгорнути застосунок Next.js](https://nextjs.org/docs/app/building-your-application/deploying) можна на будь-якому хостингу, що підтримує Node.js чи є безсерверним, а також на власному сервері. Також Next.js підтримує [статичне експортування](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports), якому не потрібен сервер. ### Remix {/*remix*/} -**[Remix](https://remix.run/) is a full-stack React framework with nested routing.** It lets you break your app into nested parts that can load data in parallel and refresh in response to the user actions. To create a new Remix project, run: +**[Remix](https://remix.run/) – це фреймворк React повного стеку зі вкладеною маршрутизацією.** Він дає змогу розбивати застосунок на вкладені одна в одну частини, які можуть паралельно завантажувати дані та оновлювати їх, реагуючи на дії користувача. Щоб створити новий проєкт Remix, запустіть: npx create-remix -If you're new to Remix, check out the Remix [blog tutorial](https://remix.run/docs/en/main/tutorials/blog) (short) and [app tutorial](https://remix.run/docs/en/main/tutorials/jokes) (long). +Якщо Remix – це для вас щось нове, погляньте його [підручник з блогом](https://remix.run/docs/en/main/tutorials/blog) (коротке) і [підручник із застосунком](https://remix.run/docs/en/main/tutorials/jokes) (довге). -Remix is maintained by [Shopify](https://www.shopify.com/). When you create a Remix project, you need to [pick your deployment target](https://remix.run/docs/en/main/guides/deployment). You can deploy a Remix app to any Node.js or serverless hosting by using or writing an [adapter](https://remix.run/docs/en/main/other-api/adapter). +Remix підтримується [Shopify](https://www.shopify.com/). При створенні проєкту Remix необхідно [обрати свою ціль розгортання](https://remix.run/docs/en/main/guides/deployment). Застосунок Remix можна розгорнути на будь-якому хостингу, що підтримує Node.js або є безсерверним, за допомогою готового чи власного [адаптера](https://remix.run/docs/en/main/other-api/adapter). ### Gatsby {/*gatsby*/} -**[Gatsby](https://www.gatsbyjs.com/) is a React framework for fast CMS-backed websites.** Its rich plugin ecosystem and its GraphQL data layer simplify integrating content, APIs, and services into one website. To create a new Gatsby project, run: +**[Gatsby](https://www.gatsbyjs.com/) – це фреймворк React для швидких вебсайтів, заснованих на CMS.** Його багата екосистема втулок і його шар даних GraphQL спрощують інтегрування вмісту, API і сторонніх служб в один вебсайт. Щоб створити новий проєкт Gatsby, запустіть: npx create-gatsby -If you're new to Gatsby, check out the [Gatsby tutorial.](https://www.gatsbyjs.com/docs/tutorial/) +Якщо Gatsby – це для вас щось нове, погляньте [підручник Gatsby.](https://www.gatsbyjs.com/docs/tutorial/) -Gatsby is maintained by [Netlify](https://www.netlify.com/). You can [deploy a fully static Gatsby site](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) to any static hosting. If you opt into using server-only features, make sure your hosting provider supports them for Gatsby. +Gatsby підтримується [Netlify](https://www.netlify.com/). [Цілком статичний сайт Gatsby можна розгорнути](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) на будь-якому статичному хостингу. При бажанні скористатися суто серверними можливостями фреймворку слід перевірити, що хостинг підтримує ці можливості для Gatsby. -### Expo (for native apps) {/*expo*/} +### Expo (для нативних застосунків) {/*expo*/} -**[Expo](https://expo.dev/) is a React framework that lets you create universal Android, iOS, and web apps with truly native UIs.** It provides an SDK for [React Native](https://reactnative.dev/) that makes the native parts easier to use. To create a new Expo project, run: +**[Expo](https://expo.dev/) – це фреймворк React, що дає змогу створювати універсальні застосунки для Android, iOS і Вебу з по-справжньому нативним UI.** Він пропонує набір інструментів для [React Native](https://reactnative.dev/), завдяки якому цими нативними частинами легше користуватися. Щоб створити новий проєкт Expo, запустіть: npx create-expo-app -If you're new to Expo, check out the [Expo tutorial](https://docs.expo.dev/tutorial/introduction/). +Якщо Expo - це для вас щось нове, погляньте [підручник Expo](https://docs.expo.dev/tutorial/introduction/). -Expo is maintained by [Expo (the company)](https://expo.dev/about). Building apps with Expo is free, and you can submit them to the Google and Apple app stores without restrictions. Expo additionally provides opt-in paid cloud services. +Expo підтримується [Expo (компанією)](https://expo.dev/about). Розробляти застосунки за допомогою Expo можна безкоштовно, і їх можна подавати до каталогів застосунків Google і Apple без жодних обмежень. На додачу Expo пропонує необов'язкові платні хмарні послуги. -## Bleeding-edge React frameworks {/*bleeding-edge-react-frameworks*/} +## Найсвіжіші застоунки React {/*bleeding-edge-react-frameworks*/} -As we've explored how to continue improving React, we realized that integrating React more closely with frameworks (specifically, with routing, bundling, and server technologies) is our biggest opportunity to help React users build better apps. The Next.js team has agreed to collaborate with us in researching, developing, integrating, and testing framework-agnostic bleeding-edge React features like [React Server Components.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) +Під час досліджень заради подальшого покращення React ми усвідомили, що тісніша інтеграція React зі фреймворками (а саме – з маршрутизацією, згортанням і серверними технологіями) – це наша найбільша нагода допомогти користувачам React створювати кращі застосунки. Команда Next.js погодилася співпрацювати з нами щодо досліджень, розробки, інтегрування та тестування незалежних від фреймворків можливостей React штибу [серверних компонентів React.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) -These features are getting closer to being production-ready every day, and we've been in talks with other bundler and framework developers about integrating them. Our hope is that in a year or two, all frameworks listed on this page will have full support for these features. (If you're a framework author interested in partnering with us to experiment with these features, please let us know!) +Ці можливості наближаються до готовності до використання в промисловості з кожним днем, і ми обговорюємо їх інтегрування з іншими розробниками бандлерів і фреймворків. Сподіваємося, що за рік чи два усі фреймворки, перелічені на цій сторінці, матимуть підтримку цих можливостей. (Якщо ви автор фреймворку, зацікавлений у співпраці щодо експериментів з цими можливостями, будь ласка, повідомте нас!) ### Next.js (App Router) {/*nextjs-app-router*/} -**[Next.js's App Router](https://nextjs.org/docs) is a redesign of the Next.js APIs aiming to fulfill the React team’s full-stack architecture vision.** It lets you fetch data in asynchronous components that run on the server or even during the build. +**[App Router від Next.js](https://nextjs.org/docs) – це переробка API Next.js, що прагне втілити бачення повностекової архітектури команди React.** Вона дає змогу отримувати дані в асинхронних компонентах, що запускаються на сервері чи навіть під час збирання. -Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any Node.js or serverless hosting, or to your own server. Next.js also supports [static export](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) which doesn't require a server. +Next.js підтримується [Vercel](https://vercel.com/). [Застосунок Next.js можна розгорнути](https://nextjs.org/docs/app/building-your-application/deploying) на будь-якому хостингу, що підтримує Node.js або є безсерверним, а також на власному сервері. Також Next.js підтримує [статичне експортування](https://nextjs.org/docs/app/building-your-application/deploying/static-exports), якому не потрібен сервер. -#### Which features make up the React team’s full-stack architecture vision? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/} +#### З яких можливостей складається бачення архітектури повного стеку від команди React? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/} -Next.js's App Router bundler fully implements the official [React Server Components specification](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). This lets you mix build-time, server-only, and interactive components in a single React tree. +Бандлер App Router від Next.js повністю реалізує офіційну [специфікацію Серверних компонентів React](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). Це дає змогу поєднувати компоненти, що запускаються під час збирання, ті, що працюють суто на сервері, та інтерактивні компоненти – в єдине дерево React. -For example, you can write a server-only React component as an `async` function that reads from a database or from a file. Then you can pass data down from it to your interactive components: +Наприклад, можна написати суто серверний компонент React у вигляді функції `async`, що зчитує дані з бази даних або з файлу. Потім можна передати дані далі, до інтерактивних компонентів: ```js -// This component runs *only* on the server (or during the build). +// Цей компонент запускається *лише* на сервері (або під час збирання). async function Talks({ confId }) { - // 1. You're on the server, so you can talk to your data layer. API endpoint not required. + // 1. Ви на сервері, тож можете спілкуватися зі своїм шаром даних. Робити запити HTTP до API – необов'язково. const talks = await db.Talks.findAll({ confId }); - // 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger. + // 2. Додавайте будь-яку кількість логіки рендерингу. Це не збільшить результівний згорток JavaScript. const videos = talks.map(talk => talk.video); - // 3. Pass the data down to the components that will run in the browser. + // 3. Передайте дані далі, до компонентів, що запустяться в браузері. return ; } ``` -Next.js's App Router also integrates [data fetching with Suspense](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). This lets you specify a loading state (like a skeleton placeholder) for different parts of your user interface directly in your React tree: +App Router від Next.js також інтегрує [отримання даних із Suspense](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). Це дає змогу задати стан завантаження (наприклад, заповнювач-скелет) для різних частин користувацького інтерфейсу безпосередньо в дереві React: ```js }> @@ -125,6 +124,6 @@ Next.js's App Router also integrates [data fetching with Suspense](/blog/2022/03 ``` -Server Components and Suspense are React features rather than Next.js features. However, adopting them at the framework level requires buy-in and non-trivial implementation work. At the moment, the Next.js App Router is the most complete implementation. The React team is working with bundler developers to make these features easier to implement in the next generation of frameworks. +Серверні компоненти та Suspense – це радше можливості React, аніж можливості Next.js. Проте залучення їх на рівні фреймворку вимагає нетривіальних зусиль з реалізації. Наразі App Router Next.js – це найповніша реалізація. Команда React працює вкупі з розробниками бандлерів, щоб ці можливості легше було реалізувати в наступному поколінні фреймворків. From f7487de225775461c255ebb25863d4adc7686fb5 Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Tue, 16 Jul 2024 20:32:26 +0300 Subject: [PATCH 2/7] Update src/content/learn/start-a-new-react-project.md --- src/content/learn/start-a-new-react-project.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 0bf968f9b..6b79b723a 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -8,6 +8,7 @@ title: Старт нового проєкту на React + React можна користуватися без фреймворку, проте ми з'ясували, що більшість застосунків і сайтів, зрештою, розробляють рішення для поширених проблем, наприклад, розбиття коду, маршрутизації, отримання даних і генерування HTML. Ці проблеми – спільні для всіх бібліотек UI, а не лише для React. Обравши фреймворк, можна швидко почати роботу з React і уникнути, по суті, розробки власного фреймворку пізніше. From 9d2957908cda134c43b6ca96f9107604a6aafd2d Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Tue, 16 Jul 2024 20:33:58 +0300 Subject: [PATCH 3/7] fix: replace en dash with em dash --- .../learn/start-a-new-react-project.md | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 6b79b723a..6d0a227d1 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -9,7 +9,7 @@ title: Старт нового проєкту на React -React можна користуватися без фреймворку, проте ми з'ясували, що більшість застосунків і сайтів, зрештою, розробляють рішення для поширених проблем, наприклад, розбиття коду, маршрутизації, отримання даних і генерування HTML. Ці проблеми – спільні для всіх бібліотек UI, а не лише для React. +React можна користуватися без фреймворку, проте ми з'ясували, що більшість застосунків і сайтів, зрештою, розробляють рішення для поширених проблем, наприклад, розбиття коду, маршрутизації, отримання даних і генерування HTML. Ці проблеми — спільні для всіх бібліотек UI, а не лише для React. Обравши фреймворк, можна швидко почати роботу з React і уникнути, по суті, розробки власного фреймворку пізніше. @@ -17,15 +17,15 @@ React можна користуватися без фреймворку, про #### Чи можна скористатися React без фреймворку? {/*can-i-use-react-without-a-framework*/} -React цілком можна використовувати без фреймворку, – так само, як можна [використовувати React у частині сторінки.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **Проте якщо ви розробляєте новий застосунок або сайт повністю на React, ми радимо скористатися фреймворком.** +React цілком можна використовувати без фреймворку, — так само, як можна [використовувати React у частині сторінки.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **Проте якщо ви розробляєте новий застосунок або сайт повністю на React, ми радимо скористатися фреймворком.** І ось чому. -Навіть якщо вам спершу не потрібні маршрутизація чи отримання даних, то існує ймовірність того, що ви захочете додати для цих можливостей кілька бібліотек. Поки ваш згорток JavaScript розростатиметься з кожною новою можливістю, ви можете захотіти розібратися, як розбити код на порції для кожного окремого маршруту. Поки ваші потреби з отримання даних ускладнюватимуться, ймовірно, ви зустрінете серверно-клієнтські мережеві водоспади, що зроблять ваш застосунок дуже повільним. Коли серед ваших користувачів з'явиться більше осіб з поганим з'єднанням і бюджетними пристроями, вам може знадобитися генерувати HTML на основі компонентів, щоб виводити вміст рано – або на сервері, або під час збирання сайту. Змінювати налаштування для запуску частини коду на сервері чи під час збирання може бути дуже хитрим завданням. +Навіть якщо вам спершу не потрібні маршрутизація чи отримання даних, то існує ймовірність того, що ви захочете додати для цих можливостей кілька бібліотек. Поки ваш згорток JavaScript розростатиметься з кожною новою можливістю, ви можете захотіти розібратися, як розбити код на порції для кожного окремого маршруту. Поки ваші потреби з отримання даних ускладнюватимуться, ймовірно, ви зустрінете серверно-клієнтські мережеві водоспади, що зроблять ваш застосунок дуже повільним. Коли серед ваших користувачів з'явиться більше осіб з поганим з'єднанням і бюджетними пристроями, вам може знадобитися генерувати HTML на основі компонентів, щоб виводити вміст рано — або на сервері, або під час збирання сайту. Змінювати налаштування для запуску частини коду на сервері чи під час збирання може бути дуже хитрим завданням. **Ці проблеми не є особливими для React. Це саме те, через що в Svelte є SvelteKit, у Vue є Nuxt і так далі.** Щоб розв'язати ці проблеми самотужки, доведеться інтегрувати свій бандлер зі своїм маршрутизатором і зі своєю бібліотекою отримання даних. Неважко змусити працювати вкупі якийсь базовий варіант, проте є чимало тонкощів у створенні застосунку, який швидко завантажується навіть тоді, коли виріс з часом. Захочеться надсилати до браузера якнайменшу кількість коду застосунку, але робити це за один захід клієнт-сервер, щоб паралельно завантажувалися всі дані, необхідні на сторінці. Ймовірно, захочеться, щоб сторінка була інтерактивною навіть до запуску коду JavaScript, щоб підтримувалось поступове покращення. Може захотітися генерувати теку цілком статичних файлів HTML для рекламних сторінок, які можуть викладатися будь-де й працювати навіть із вимкненим JavaScript. Розробка таких можливостей вимагає суттєвих зусиль. -**Фреймворки React на цій сторінці розв'язують проблеми штибу цієї самі по собі, не потребуючи додаткових зусиль з вашого боку.** Вони дають змогу почати з малого, аби потім масштабувати застосунок відповідно до потреб. Кожний фреймворк на React має свою спільноту, тож шукати відповіді на питання та оновлювати інструменти розробки буде легше. Також фреймворки задають структуру коду, допомагаючи вам та іншим зберігати той самий контекст і користуватися тими ж навичками в різних проєктах. І навпаки, у випадку саморобних налаштувань легше застрягнути в версіях залежностей, що більше не підтримуються, і по суті доведеться створювати власний фреймворк – але без власної спільноти та інструкцій з оновлення (і якщо він буде схожим на те, що колись писали ми, то цей ваш фреймворк буде написаний абияк). +**Фреймворки React на цій сторінці розв'язують проблеми штибу цієї самі по собі, не потребуючи додаткових зусиль з вашого боку.** Вони дають змогу почати з малого, аби потім масштабувати застосунок відповідно до потреб. Кожний фреймворк на React має свою спільноту, тож шукати відповіді на питання та оновлювати інструменти розробки буде легше. Також фреймворки задають структуру коду, допомагаючи вам та іншим зберігати той самий контекст і користуватися тими ж навичками в різних проєктах. І навпаки, у випадку саморобних налаштувань легше застрягнути в версіях залежностей, що більше не підтримуються, і по суті доведеться створювати власний фреймворк — але без власної спільноти та інструкцій з оновлення (і якщо він буде схожим на те, що колись писали ми, то цей ваш фреймворк буде написаний абияк). Якщо ваш застосунок містить незвичні обмеження, які погано накладаються на фреймворки, перелічені нижче, або ви хочете розв'язувати ці проблеми самотужки, то можете розгорнути власне налаштування з React. Візьміть `react` і `react-dom` з npm, налаштуйте власний процес збирання з використанням бандлеру штибу [Vite](https://vitejs.dev/) або [Parcel](https://parceljs.org/) і додайте інші інструменти, що знадобляться, наприклад, для маршрутизації, статичної генерації, серверного рендерингу чи чогось іще. @@ -37,43 +37,43 @@ React цілком можна використовувати без фреймв ### Next.js {/*nextjs-pages-router*/} -**[Page Router від Next.js](https://nextjs.org/) – це фреймворк React повного стеку.** Він багатоцільовий та дає змогу розробляти застосунки React будь-якого розміру – від здебільшого статичних блогів до складних динамічних програм. Щоб створити новий проєкт Next.js, запустіть у терміналі: +**[Page Router від Next.js](https://nextjs.org/) — це фреймворк React повного стеку.** Він багатоцільовий та дає змогу розробляти застосунки React будь-якого розміру — від здебільшого статичних блогів до складних динамічних програм. Щоб створити новий проєкт Next.js, запустіть у терміналі: npx create-next-app@latest -Якщо Next.js – це для вас дещо нове, то погляньте на [курс вивчення Next.js.](https://nextjs.org/learn) +Якщо Next.js — це для вас дещо нове, то погляньте на [курс вивчення Next.js.](https://nextjs.org/learn) Next.js підтримується [Vercel](https://vercel.com/). [Розгорнути застосунок Next.js](https://nextjs.org/docs/app/building-your-application/deploying) можна на будь-якому хостингу, що підтримує Node.js чи є безсерверним, а також на власному сервері. Також Next.js підтримує [статичне експортування](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports), якому не потрібен сервер. ### Remix {/*remix*/} -**[Remix](https://remix.run/) – це фреймворк React повного стеку зі вкладеною маршрутизацією.** Він дає змогу розбивати застосунок на вкладені одна в одну частини, які можуть паралельно завантажувати дані та оновлювати їх, реагуючи на дії користувача. Щоб створити новий проєкт Remix, запустіть: +**[Remix](https://remix.run/) — це фреймворк React повного стеку зі вкладеною маршрутизацією.** Він дає змогу розбивати застосунок на вкладені одна в одну частини, які можуть паралельно завантажувати дані та оновлювати їх, реагуючи на дії користувача. Щоб створити новий проєкт Remix, запустіть: npx create-remix -Якщо Remix – це для вас щось нове, погляньте його [підручник з блогом](https://remix.run/docs/en/main/tutorials/blog) (коротке) і [підручник із застосунком](https://remix.run/docs/en/main/tutorials/jokes) (довге). +Якщо Remix — це для вас щось нове, погляньте його [підручник з блогом](https://remix.run/docs/en/main/tutorials/blog) (коротке) і [підручник із застосунком](https://remix.run/docs/en/main/tutorials/jokes) (довге). Remix підтримується [Shopify](https://www.shopify.com/). При створенні проєкту Remix необхідно [обрати свою ціль розгортання](https://remix.run/docs/en/main/guides/deployment). Застосунок Remix можна розгорнути на будь-якому хостингу, що підтримує Node.js або є безсерверним, за допомогою готового чи власного [адаптера](https://remix.run/docs/en/main/other-api/adapter). ### Gatsby {/*gatsby*/} -**[Gatsby](https://www.gatsbyjs.com/) – це фреймворк React для швидких вебсайтів, заснованих на CMS.** Його багата екосистема втулок і його шар даних GraphQL спрощують інтегрування вмісту, API і сторонніх служб в один вебсайт. Щоб створити новий проєкт Gatsby, запустіть: +**[Gatsby](https://www.gatsbyjs.com/) — це фреймворк React для швидких вебсайтів, заснованих на CMS.** Його багата екосистема втулок і його шар даних GraphQL спрощують інтегрування вмісту, API і сторонніх служб в один вебсайт. Щоб створити новий проєкт Gatsby, запустіть: npx create-gatsby -Якщо Gatsby – це для вас щось нове, погляньте [підручник Gatsby.](https://www.gatsbyjs.com/docs/tutorial/) +Якщо Gatsby — це для вас щось нове, погляньте [підручник Gatsby.](https://www.gatsbyjs.com/docs/tutorial/) Gatsby підтримується [Netlify](https://www.netlify.com/). [Цілком статичний сайт Gatsby можна розгорнути](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) на будь-якому статичному хостингу. При бажанні скористатися суто серверними можливостями фреймворку слід перевірити, що хостинг підтримує ці можливості для Gatsby. ### Expo (для нативних застосунків) {/*expo*/} -**[Expo](https://expo.dev/) – це фреймворк React, що дає змогу створювати універсальні застосунки для Android, iOS і Вебу з по-справжньому нативним UI.** Він пропонує набір інструментів для [React Native](https://reactnative.dev/), завдяки якому цими нативними частинами легше користуватися. Щоб створити новий проєкт Expo, запустіть: +**[Expo](https://expo.dev/) — це фреймворк React, що дає змогу створювати універсальні застосунки для Android, iOS і Вебу з по-справжньому нативним UI.** Він пропонує набір інструментів для [React Native](https://reactnative.dev/), завдяки якому цими нативними частинами легше користуватися. Щоб створити новий проєкт Expo, запустіть: npx create-expo-app @@ -85,13 +85,13 @@ Expo підтримується [Expo (компанією)](https://expo.dev/abo ## Найсвіжіші застоунки React {/*bleeding-edge-react-frameworks*/} -Під час досліджень заради подальшого покращення React ми усвідомили, що тісніша інтеграція React зі фреймворками (а саме – з маршрутизацією, згортанням і серверними технологіями) – це наша найбільша нагода допомогти користувачам React створювати кращі застосунки. Команда Next.js погодилася співпрацювати з нами щодо досліджень, розробки, інтегрування та тестування незалежних від фреймворків можливостей React штибу [серверних компонентів React.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) +Під час досліджень заради подальшого покращення React ми усвідомили, що тісніша інтеграція React зі фреймворками (а саме — з маршрутизацією, згортанням і серверними технологіями) — це наша найбільша нагода допомогти користувачам React створювати кращі застосунки. Команда Next.js погодилася співпрацювати з нами щодо досліджень, розробки, інтегрування та тестування незалежних від фреймворків можливостей React штибу [серверних компонентів React.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) Ці можливості наближаються до готовності до використання в промисловості з кожним днем, і ми обговорюємо їх інтегрування з іншими розробниками бандлерів і фреймворків. Сподіваємося, що за рік чи два усі фреймворки, перелічені на цій сторінці, матимуть підтримку цих можливостей. (Якщо ви автор фреймворку, зацікавлений у співпраці щодо експериментів з цими можливостями, будь ласка, повідомте нас!) ### Next.js (App Router) {/*nextjs-app-router*/} -**[App Router від Next.js](https://nextjs.org/docs) – це переробка API Next.js, що прагне втілити бачення повностекової архітектури команди React.** Вона дає змогу отримувати дані в асинхронних компонентах, що запускаються на сервері чи навіть під час збирання. +**[App Router від Next.js](https://nextjs.org/docs) — це переробка API Next.js, що прагне втілити бачення повностекової архітектури команди React.** Вона дає змогу отримувати дані в асинхронних компонентах, що запускаються на сервері чи навіть під час збирання. Next.js підтримується [Vercel](https://vercel.com/). [Застосунок Next.js можна розгорнути](https://nextjs.org/docs/app/building-your-application/deploying) на будь-якому хостингу, що підтримує Node.js або є безсерверним, а також на власному сервері. Також Next.js підтримує [статичне експортування](https://nextjs.org/docs/app/building-your-application/deploying/static-exports), якому не потрібен сервер. @@ -99,14 +99,14 @@ Next.js підтримується [Vercel](https://vercel.com/). [Застос #### З яких можливостей складається бачення архітектури повного стеку від команди React? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/} -Бандлер App Router від Next.js повністю реалізує офіційну [специфікацію Серверних компонентів React](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). Це дає змогу поєднувати компоненти, що запускаються під час збирання, ті, що працюють суто на сервері, та інтерактивні компоненти – в єдине дерево React. +Бандлер App Router від Next.js повністю реалізує офіційну [специфікацію Серверних компонентів React](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). Це дає змогу поєднувати компоненти, що запускаються під час збирання, ті, що працюють суто на сервері, та інтерактивні компоненти — в єдине дерево React. Наприклад, можна написати суто серверний компонент React у вигляді функції `async`, що зчитує дані з бази даних або з файлу. Потім можна передати дані далі, до інтерактивних компонентів: ```js // Цей компонент запускається *лише* на сервері (або під час збирання). async function Talks({ confId }) { - // 1. Ви на сервері, тож можете спілкуватися зі своїм шаром даних. Робити запити HTTP до API – необов'язково. + // 1. Ви на сервері, тож можете спілкуватися зі своїм шаром даних. Робити запити HTTP до API — необов'язково. const talks = await db.Talks.findAll({ confId }); // 2. Додавайте будь-яку кількість логіки рендерингу. Це не збільшить результівний згорток JavaScript. @@ -125,6 +125,6 @@ App Router від Next.js також інтегрує [отримання дан ``` -Серверні компоненти та Suspense – це радше можливості React, аніж можливості Next.js. Проте залучення їх на рівні фреймворку вимагає нетривіальних зусиль з реалізації. Наразі App Router Next.js – це найповніша реалізація. Команда React працює вкупі з розробниками бандлерів, щоб ці можливості легше було реалізувати в наступному поколінні фреймворків. +Серверні компоненти та Suspense — це радше можливості React, аніж можливості Next.js. Проте залучення їх на рівні фреймворку вимагає нетривіальних зусиль з реалізації. Наразі App Router Next.js — це найповніша реалізація. Команда React працює вкупі з розробниками бандлерів, щоб ці можливості легше було реалізувати в наступному поколінні фреймворків. From c99da2724605469eba5887032876a55a7553d386 Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Thu, 18 Jul 2024 12:10:44 +0300 Subject: [PATCH 4/7] =?UTF-8?q?fix:=20replace=20=D0=BF=D1=80=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/learn/start-a-new-react-project.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 6d0a227d1..81457c507 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -57,7 +57,7 @@ npx create-remix Якщо Remix — це для вас щось нове, погляньте його [підручник з блогом](https://remix.run/docs/en/main/tutorials/blog) (коротке) і [підручник із застосунком](https://remix.run/docs/en/main/tutorials/jokes) (довге). -Remix підтримується [Shopify](https://www.shopify.com/). При створенні проєкту Remix необхідно [обрати свою ціль розгортання](https://remix.run/docs/en/main/guides/deployment). Застосунок Remix можна розгорнути на будь-якому хостингу, що підтримує Node.js або є безсерверним, за допомогою готового чи власного [адаптера](https://remix.run/docs/en/main/other-api/adapter). +Remix підтримується [Shopify](https://www.shopify.com/). Для створення проєкту Remix необхідно [обрати свою ціль розгортання](https://remix.run/docs/en/main/guides/deployment). Застосунок Remix можна розгорнути на будь-якому хостингу, що підтримує Node.js або є безсерверним, за допомогою готового чи власного [адаптера](https://remix.run/docs/en/main/other-api/adapter). ### Gatsby {/*gatsby*/} @@ -69,7 +69,7 @@ npx create-gatsby Якщо Gatsby — це для вас щось нове, погляньте [підручник Gatsby.](https://www.gatsbyjs.com/docs/tutorial/) -Gatsby підтримується [Netlify](https://www.netlify.com/). [Цілком статичний сайт Gatsby можна розгорнути](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) на будь-якому статичному хостингу. При бажанні скористатися суто серверними можливостями фреймворку слід перевірити, що хостинг підтримує ці можливості для Gatsby. +Gatsby підтримується [Netlify](https://www.netlify.com/). [Цілком статичний сайт Gatsby можна розгорнути](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) на будь-якому статичному хостингу. За бажання скористатися суто серверними можливостями фреймворку слід перевірити, що хостинг підтримує ці можливості для Gatsby. ### Expo (для нативних застосунків) {/*expo*/} From d530d11e3b6fd883823cc3a2af1ca0aa67171c80 Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Thu, 18 Jul 2024 16:15:48 +0300 Subject: [PATCH 5/7] Apply suggestions from code review Co-authored-by: Alina Listunova --- .../learn/start-a-new-react-project.md | 66 +++++++++---------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 81457c507..7b508ec47 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -1,39 +1,39 @@ --- -title: Старт нового проєкту на React +title: Початок нового React-проєкту --- -Якщо ви вирішили розробити новий застосунок або новий вебсайт цілком за допомогою React, ми радимо обрати один зі фреймворків, заряджених React, популярних у нашій спільноті. +Якщо ви вирішили розробити новий застосунок або новий вебсайт цілком за допомогою React, ми радимо вибрати один із популярних у нашій спільноті React-фреймворків. -React можна користуватися без фреймворку, проте ми з'ясували, що більшість застосунків і сайтів, зрештою, розробляють рішення для поширених проблем, наприклад, розбиття коду, маршрутизації, отримання даних і генерування HTML. Ці проблеми — спільні для всіх бібліотек UI, а не лише для React. +Ви можете використовувати React без фреймворку, проте ми з'ясували, що більшість застосунків і сайтів, зрештою, створюють рішення для поширених проблем, наприклад: розбиття коду, маршрутизації, отримання даних і генерування HTML. Ці проблеми — спільні для всіх бібліотек UI, а не лише для React. -Обравши фреймворк, можна швидко почати роботу з React і уникнути, по суті, розробки власного фреймворку пізніше. +Вибравши фреймворк, можна швидко почати роботу з React і уникнути, по суті, розробки власного фреймворку пізніше. -#### Чи можна скористатися React без фреймворку? {/*can-i-use-react-without-a-framework*/} +#### Чи можна використовувати React без фреймворку? {/*can-i-use-react-without-a-framework*/} -React цілком можна використовувати без фреймворку, — так само, як можна [використовувати React у частині сторінки.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **Проте якщо ви розробляєте новий застосунок або сайт повністю на React, ми радимо скористатися фреймворком.** +Звісно можна використовувати React без фреймворку — так само, як можна [використовувати React для частини сторінки.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **Однак якщо ви розробляєте новий застосунок або сайт повністю за допомогою React, ми радимо скористатися фреймворком.** І ось чому. -Навіть якщо вам спершу не потрібні маршрутизація чи отримання даних, то існує ймовірність того, що ви захочете додати для цих можливостей кілька бібліотек. Поки ваш згорток JavaScript розростатиметься з кожною новою можливістю, ви можете захотіти розібратися, як розбити код на порції для кожного окремого маршруту. Поки ваші потреби з отримання даних ускладнюватимуться, ймовірно, ви зустрінете серверно-клієнтські мережеві водоспади, що зроблять ваш застосунок дуже повільним. Коли серед ваших користувачів з'явиться більше осіб з поганим з'єднанням і бюджетними пристроями, вам може знадобитися генерувати HTML на основі компонентів, щоб виводити вміст рано — або на сервері, або під час збирання сайту. Змінювати налаштування для запуску частини коду на сервері чи під час збирання може бути дуже хитрим завданням. +Навіть якщо вам спершу не потрібні маршрутизація чи отримання даних, то існує ймовірність того, що ви захочете додати для цих функцій кілька бібліотек. Поки ваш бандл JavaScript розростатиметься з кожною новою функцією, ви будете розбиратися, як розбити код для кожного окремого маршруту. Поки ваші потреби з отримання даних ускладнюватимуться, ймовірно, ви зустрінете серверно-клієнтські мережеві водоспади, що зроблять ваш застосунок дуже повільним. Коли серед ваших користувачів з'явиться більше осіб із поганим з'єднанням і бюджетними пристроями, вам може знадобитися генерація HTML із компонентів, щоб показувати вміст раніше — або з боку сервера, або під час збирання сайту. Зміна налаштувань для виконання частини коду на сервері чи під час збирання може стати завданням із зірочкою. -**Ці проблеми не є особливими для React. Це саме те, через що в Svelte є SvelteKit, у Vue є Nuxt і так далі.** Щоб розв'язати ці проблеми самотужки, доведеться інтегрувати свій бандлер зі своїм маршрутизатором і зі своєю бібліотекою отримання даних. Неважко змусити працювати вкупі якийсь базовий варіант, проте є чимало тонкощів у створенні застосунку, який швидко завантажується навіть тоді, коли виріс з часом. Захочеться надсилати до браузера якнайменшу кількість коду застосунку, але робити це за один захід клієнт-сервер, щоб паралельно завантажувалися всі дані, необхідні на сторінці. Ймовірно, захочеться, щоб сторінка була інтерактивною навіть до запуску коду JavaScript, щоб підтримувалось поступове покращення. Може захотітися генерувати теку цілком статичних файлів HTML для рекламних сторінок, які можуть викладатися будь-де й працювати навіть із вимкненим JavaScript. Розробка таких можливостей вимагає суттєвих зусиль. +**Ці проблеми не стосуються лише React. Це саме те, через що у Svelte є SvelteKit, у Vue є Nuxt і так далі.** Щоб вирішити ці проблеми самотужки, доведеться інтегрувати свій бандлер зі своїм маршрутизатором і зі своєю бібліотекою отримання даних. Неважко змусити працювати вкупі якийсь базовий варіант, проте є чимало тонкощів у створенні застосунку, який, зростаючи з часом, буде все ще швидко завантажуватися. Захочеться надсилати до браузера якнайменшу кількість коду застосунку, але робити це за один захід клієнт-сервер і паралельно до завантаження всіх необхідних на сторінці даних. Ймовірно, захочеться, щоб сторінка була інтерактивною навіть до виконання коду JavaScript, щоб підтримувати поступове покращення (progressive enhancement). Може захотітися генерувати теку повністю статичних файлів HTML для рекламних сторінок, які можуть викладатися будь-де і працювати навіть із вимкненим JavaScript. Розробка такого функціоналу вимагає суттєвих зусиль. -**Фреймворки React на цій сторінці розв'язують проблеми штибу цієї самі по собі, не потребуючи додаткових зусиль з вашого боку.** Вони дають змогу почати з малого, аби потім масштабувати застосунок відповідно до потреб. Кожний фреймворк на React має свою спільноту, тож шукати відповіді на питання та оновлювати інструменти розробки буде легше. Також фреймворки задають структуру коду, допомагаючи вам та іншим зберігати той самий контекст і користуватися тими ж навичками в різних проєктах. І навпаки, у випадку саморобних налаштувань легше застрягнути в версіях залежностей, що більше не підтримуються, і по суті доведеться створювати власний фреймворк — але без власної спільноти та інструкцій з оновлення (і якщо він буде схожим на те, що колись писали ми, то цей ваш фреймворк буде написаний абияк). +**Наведені на цій сторінці фреймворки React вже вирішують такі проблеми, не потребуючи додаткових зусиль з вашого боку.** Вони дають змогу почати з малого, аби потім масштабувати застосунок відповідно до потреб. Кожний React-фреймворк має свою спільноту, тож шукати відповіді на питання та оновлювати інструменти розробки буде легше. Також фреймворки задають структуру коду, допомагаючи вам та іншим зберігати той самий контекст і користуватися тими ж навичками в різних проєктах. І навпаки: із саморобними налаштуваннями легше застрягнути у версіях залежностей, що більше не підтримуються, і, по суті, доведеться створювати власний фреймворк — але без власної спільноти та інструкцій з оновлення (і якщо він буде схожим на те, що колись писали ми, то цей ваш фреймворк буде написаний абияк). -Якщо ваш застосунок містить незвичні обмеження, які погано накладаються на фреймворки, перелічені нижче, або ви хочете розв'язувати ці проблеми самотужки, то можете розгорнути власне налаштування з React. Візьміть `react` і `react-dom` з npm, налаштуйте власний процес збирання з використанням бандлеру штибу [Vite](https://vitejs.dev/) або [Parcel](https://parceljs.org/) і додайте інші інструменти, що знадобляться, наприклад, для маршрутизації, статичної генерації, серверного рендерингу чи чогось іще. +Якщо ваш застосунок містить незвичні обмеження, які не спрацюють із переліченими нижче фреймворками, або ви хочете розв'язувати ці проблеми самотужки, то можете розгорнути власну конфігурацію з React. Візьміть `react` і `react-dom` із npm, налаштуйте власний процес збирання з використанням бандлеру, як-от [Vite](https://vitejs.dev/) або [Parcel](https://parceljs.org/), і додавайте інші інструменти за необхідності для маршрутизації, статичної генерації, серверного рендерингу чи чогось іще. -## Фреймворки React, готові до промислового використання {/*production-grade-react-frameworks*/} +## Готові до впровадження фреймворки React {/*production-grade-react-frameworks*/} -Ці фреймворки підтримують усі можливості, що знадобляться для розгортання та масштабування застосунку в реальній роботі, та прямують до підтримки нашого [бачення архітектури повного стеку](#which-features-make-up-the-react-teams-full-stack-architecture-vision). Усі фреймворки, які ми радимо, є відкритим програмним забезпеченням, що має активні спільноти для підтримки, і їх можна розгортати на власних серверах чи сторнніх хостингах. Якщо ви автор фреймворку, зацікавлений у потраплянні до цього списку, [будь ласка, повідомте нас](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+). +Ці фреймворки підтримують усі функції, що знадобляться для розгортання та масштабування застосунку в публічному середовищі (in production), та прямують до підтримки нашого [бачення архітектури повного стеку](#which-features-make-up-the-react-teams-full-stack-architecture-vision). Усі фреймворки, які ми радимо, є відкритим програмним забезпеченням з активною спільнотою для підтримки та можуть бути розгорнуті на власних серверах чи сторонніх хостингах. Якщо ви автор фреймворку та зацікавлені у потраплянні до цього списку, [будь ласка, повідомте нас](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+). ### Next.js {/*nextjs-pages-router*/} @@ -45,79 +45,79 @@ npx create-next-app@latest Якщо Next.js — це для вас дещо нове, то погляньте на [курс вивчення Next.js.](https://nextjs.org/learn) -Next.js підтримується [Vercel](https://vercel.com/). [Розгорнути застосунок Next.js](https://nextjs.org/docs/app/building-your-application/deploying) можна на будь-якому хостингу, що підтримує Node.js чи є безсерверним, а також на власному сервері. Також Next.js підтримує [статичне експортування](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports), якому не потрібен сервер. +Next.js підтримується командою [Vercel](https://vercel.com/). [Розгорнути застосунок Next.js](https://nextjs.org/docs/app/building-your-application/deploying) можна на будь-якому Node.js- або безсерверному хостингу, а також на власному сервері. Також Next.js підтримує [статичне експортування](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports), якому не потрібен сервер. ### Remix {/*remix*/} -**[Remix](https://remix.run/) — це фреймворк React повного стеку зі вкладеною маршрутизацією.** Він дає змогу розбивати застосунок на вкладені одна в одну частини, які можуть паралельно завантажувати дані та оновлювати їх, реагуючи на дії користувача. Щоб створити новий проєкт Remix, запустіть: +**[Remix](https://remix.run/) — це фреймворк React повного стеку з вкладеною маршрутизацією.** Він дає змогу розбивати застосунок на вкладені одна в одну частини, які можуть паралельно завантажувати дані та оновлювати їх, реагуючи на дії користувача. Щоб створити новий проєкт Remix, запустіть: npx create-remix -Якщо Remix — це для вас щось нове, погляньте його [підручник з блогом](https://remix.run/docs/en/main/tutorials/blog) (коротке) і [підручник із застосунком](https://remix.run/docs/en/main/tutorials/jokes) (довге). +Якщо Remix — це для вас щось нове, перегляньте його [посібник зі створення блогу](https://remix.run/docs/en/main/tutorials/blog) (коротко) та [посібник зі створення застосунку](https://remix.run/docs/en/main/tutorials/jokes) (довго). -Remix підтримується [Shopify](https://www.shopify.com/). Для створення проєкту Remix необхідно [обрати свою ціль розгортання](https://remix.run/docs/en/main/guides/deployment). Застосунок Remix можна розгорнути на будь-якому хостингу, що підтримує Node.js або є безсерверним, за допомогою готового чи власного [адаптера](https://remix.run/docs/en/main/other-api/adapter). +Remix підтримується командою [Shopify](https://www.shopify.com/). Для створення проєкту Remix необхідно [вибрати свій варіант шаблону для розгортання](https://remix.run/docs/en/main/guides/deployment). Застосунок Remix можна розгорнути на будь-якому хостингу, що підтримує Node.js або є безсерверним, за допомогою готового чи власного [адаптера](https://remix.run/docs/en/main/other-api/adapter). ### Gatsby {/*gatsby*/} -**[Gatsby](https://www.gatsbyjs.com/) — це фреймворк React для швидких вебсайтів, заснованих на CMS.** Його багата екосистема втулок і його шар даних GraphQL спрощують інтегрування вмісту, API і сторонніх служб в один вебсайт. Щоб створити новий проєкт Gatsby, запустіть: +**[Gatsby](https://www.gatsbyjs.com/) — це фреймворк React для швидких вебсайтів із системою керування вмістом.** Його багата екосистема плагінів і шар даних на основі GraphQL спрощують інтеграцію вмісту, API і сторонніх служб в один вебсайт. Щоб створити новий проєкт Gatsby, запустіть: npx create-gatsby -Якщо Gatsby — це для вас щось нове, погляньте [підручник Gatsby.](https://www.gatsbyjs.com/docs/tutorial/) +Якщо Gatsby — це для вас щось нове, перегляньте [підручник Gatsby.](https://www.gatsbyjs.com/docs/tutorial/) -Gatsby підтримується [Netlify](https://www.netlify.com/). [Цілком статичний сайт Gatsby можна розгорнути](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) на будь-якому статичному хостингу. За бажання скористатися суто серверними можливостями фреймворку слід перевірити, що хостинг підтримує ці можливості для Gatsby. +Gatsby підтримується командою [Netlify](https://www.netlify.com/). [Повністю статичний сайт Gatsby можна розгорнути](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) на будь-якому статичному хостингу. За бажання скористатися суто серверними функціями фреймворку слід перевірити, що хостинг підтримує ці можливості для Gatsby. ### Expo (для нативних застосунків) {/*expo*/} -**[Expo](https://expo.dev/) — це фреймворк React, що дає змогу створювати універсальні застосунки для Android, iOS і Вебу з по-справжньому нативним UI.** Він пропонує набір інструментів для [React Native](https://reactnative.dev/), завдяки якому цими нативними частинами легше користуватися. Щоб створити новий проєкт Expo, запустіть: +**[Expo](https://expo.dev/) — це фреймворк React, що дає змогу створювати універсальні застосунки для Android, iOS і вебу з по-справжньому нативним UI.** Він пропонує набір інструментів для [React Native](https://reactnative.dev/), завдяки якому цими нативними частинами легше користуватися. Щоб створити новий проєкт Expo, запустіть: npx create-expo-app -Якщо Expo - це для вас щось нове, погляньте [підручник Expo](https://docs.expo.dev/tutorial/introduction/). +Якщо Expo - це для вас щось нове, перегляньте [підручник Expo](https://docs.expo.dev/tutorial/introduction/). Expo підтримується [Expo (компанією)](https://expo.dev/about). Розробляти застосунки за допомогою Expo можна безкоштовно, і їх можна подавати до каталогів застосунків Google і Apple без жодних обмежень. На додачу Expo пропонує необов'язкові платні хмарні послуги. -## Найсвіжіші застоунки React {/*bleeding-edge-react-frameworks*/} +## Передові фреймворки React {/*bleeding-edge-react-frameworks*/} -Під час досліджень заради подальшого покращення React ми усвідомили, що тісніша інтеграція React зі фреймворками (а саме — з маршрутизацією, згортанням і серверними технологіями) — це наша найбільша нагода допомогти користувачам React створювати кращі застосунки. Команда Next.js погодилася співпрацювати з нами щодо досліджень, розробки, інтегрування та тестування незалежних від фреймворків можливостей React штибу [серверних компонентів React.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) +Під час досліджень заради подальшого покращення React ми усвідомили, що тісніша інтеграція React із фреймворками (а саме з маршрутизацією, згортанням і серверними технологіями) — це наша найбільша нагода допомогти користувачам React створювати кращі застосунки. Команда Next.js погодилася співпрацювати з нами щодо досліджень, розробки, інтегрування та тестування незалежних від фреймворків можливостей React штибу [серверних компонентів React.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) -Ці можливості наближаються до готовності до використання в промисловості з кожним днем, і ми обговорюємо їх інтегрування з іншими розробниками бандлерів і фреймворків. Сподіваємося, що за рік чи два усі фреймворки, перелічені на цій сторінці, матимуть підтримку цих можливостей. (Якщо ви автор фреймворку, зацікавлений у співпраці щодо експериментів з цими можливостями, будь ласка, повідомте нас!) +З кожним днем ці функції наближаються до стану готовності до впровадження (production-ready), і ми обговорюємо їх інтеграцію з іншими розробниками бандлерів і фреймворків. Сподіваємося, що за рік чи два усі фреймворки, перелічені на цій сторінці, матимуть підтримку цих функцій. (Якщо ви автор фреймворку та зацікавлені у співпраці щодо експериментів із цими функціями, будь ласка, повідомте нас!) ### Next.js (App Router) {/*nextjs-app-router*/} **[App Router від Next.js](https://nextjs.org/docs) — це переробка API Next.js, що прагне втілити бачення повностекової архітектури команди React.** Вона дає змогу отримувати дані в асинхронних компонентах, що запускаються на сервері чи навіть під час збирання. -Next.js підтримується [Vercel](https://vercel.com/). [Застосунок Next.js можна розгорнути](https://nextjs.org/docs/app/building-your-application/deploying) на будь-якому хостингу, що підтримує Node.js або є безсерверним, а також на власному сервері. Також Next.js підтримує [статичне експортування](https://nextjs.org/docs/app/building-your-application/deploying/static-exports), якому не потрібен сервер. +Next.js підтримується командою [Vercel](https://vercel.com/). [Застосунок Next.js можна розгорнути](https://nextjs.org/docs/app/building-your-application/deploying) на будь-якому Node.js- або безсерверному хостингу, а також на власному сервері. Також Next.js підтримує [статичне експортування](https://nextjs.org/docs/app/building-your-application/deploying/static-exports), якому не потрібен сервер. -#### З яких можливостей складається бачення архітектури повного стеку від команди React? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/} +#### З яких функцій складається бачення архітектури повного стеку від команди React? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/} -Бандлер App Router від Next.js повністю реалізує офіційну [специфікацію Серверних компонентів React](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). Це дає змогу поєднувати компоненти, що запускаються під час збирання, ті, що працюють суто на сервері, та інтерактивні компоненти — в єдине дерево React. +Бандлер App Router від Next.js повністю реалізує офіційну [специфікацію серверних компонентів React](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). Це дає змогу поєднувати компоненти, що запускаються під час збирання, ті, що працюють суто на сервері, та інтерактивні компоненти в єдине дерево React. -Наприклад, можна написати суто серверний компонент React у вигляді функції `async`, що зчитує дані з бази даних або з файлу. Потім можна передати дані далі, до інтерактивних компонентів: +Наприклад, можна написати суто серверний компонент React як `async` функцію, що зчитує дані з бази даних або з файлу. Потім можна передати дані до інтерактивних компонентів: ```js // Цей компонент запускається *лише* на сервері (або під час збирання). async function Talks({ confId }) { - // 1. Ви на сервері, тож можете спілкуватися зі своїм шаром даних. Робити запити HTTP до API — необов'язково. + // 1. Ви на сервері, тож можете спілкуватися зі своїм шаром даних. Наявність API — необов'язкова. const talks = await db.Talks.findAll({ confId }); - // 2. Додавайте будь-яку кількість логіки рендерингу. Це не збільшить результівний згорток JavaScript. + // 2. Додавайте будь-яку кількість логіки рендерингу. Це не збільшить ваш бандл JavaScript. const videos = talks.map(talk => talk.video); - // 3. Передайте дані далі, до компонентів, що запустяться в браузері. + // 3. Передайте дані до компонентів, що запустяться в браузері. return ; } ``` -App Router від Next.js також інтегрує [отримання даних із Suspense](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). Це дає змогу задати стан завантаження (наприклад, заповнювач-скелет) для різних частин користувацького інтерфейсу безпосередньо в дереві React: +App Router від Next.js також інтегрує [отримання даних із Suspense](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). Це дає змогу задати стан завантаження (наприклад, каркасний елемент для заповнення (skeleton placeholder)) для різних частин інтерфейсу безпосередньо в дереві React: ```js }> @@ -125,6 +125,6 @@ App Router від Next.js також інтегрує [отримання дан ``` -Серверні компоненти та Suspense — це радше можливості React, аніж можливості Next.js. Проте залучення їх на рівні фреймворку вимагає нетривіальних зусиль з реалізації. Наразі App Router Next.js — це найповніша реалізація. Команда React працює вкупі з розробниками бандлерів, щоб ці можливості легше було реалізувати в наступному поколінні фреймворків. +Серверні компоненти та Suspense — це радше функції React, аніж Next.js. Проте їхнє залучення на рівні фреймворку вимагає нетривіальних зусиль для реалізації. Наразі App Router Next.js — це найповніша імплементація. Команда React працює разом із розробниками бандлерів, щоб було легше реалізувати ці функції в наступному поколінні фреймворків. From 7febb34070b59bd2f859aa2b4812f2be12c38565 Mon Sep 17 00:00:00 2001 From: Vitalii Perehonchuk Date: Thu, 18 Jul 2024 20:15:14 +0300 Subject: [PATCH 6/7] Update src/content/learn/start-a-new-react-project.md Co-authored-by: Alina Listunova --- src/content/learn/start-a-new-react-project.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 7b508ec47..8cb9c24aa 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -81,7 +81,7 @@ npx create-expo-app Якщо Expo - це для вас щось нове, перегляньте [підручник Expo](https://docs.expo.dev/tutorial/introduction/). -Expo підтримується [Expo (компанією)](https://expo.dev/about). Розробляти застосунки за допомогою Expo можна безкоштовно, і їх можна подавати до каталогів застосунків Google і Apple без жодних обмежень. На додачу Expo пропонує необов'язкові платні хмарні послуги. +Expo підтримується [компанією Expo](https://expo.dev/about). Розробляти застосунки за допомогою Expo можна безкоштовно, і їх можна подавати до каталогів застосунків Google і Apple без жодних обмежень. На додачу Expo пропонує необов'язкові платні хмарні послуги. ## Передові фреймворки React {/*bleeding-edge-react-frameworks*/} From 61310b916b8ab40560c92092c2fb3879c9391699 Mon Sep 17 00:00:00 2001 From: Alina Listunova Date: Thu, 18 Jul 2024 23:26:30 +0300 Subject: [PATCH 7/7] Apply suggestions from code review --- src/content/learn/start-a-new-react-project.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 8cb9c24aa..14f232b78 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -79,13 +79,13 @@ Gatsby підтримується командою [Netlify](https://www.netlify npx create-expo-app -Якщо Expo - це для вас щось нове, перегляньте [підручник Expo](https://docs.expo.dev/tutorial/introduction/). +Якщо Expo — це для вас щось нове, перегляньте [підручник Expo](https://docs.expo.dev/tutorial/introduction/). Expo підтримується [компанією Expo](https://expo.dev/about). Розробляти застосунки за допомогою Expo можна безкоштовно, і їх можна подавати до каталогів застосунків Google і Apple без жодних обмежень. На додачу Expo пропонує необов'язкові платні хмарні послуги. ## Передові фреймворки React {/*bleeding-edge-react-frameworks*/} -Під час досліджень заради подальшого покращення React ми усвідомили, що тісніша інтеграція React із фреймворками (а саме з маршрутизацією, згортанням і серверними технологіями) — це наша найбільша нагода допомогти користувачам React створювати кращі застосунки. Команда Next.js погодилася співпрацювати з нами щодо досліджень, розробки, інтегрування та тестування незалежних від фреймворків можливостей React штибу [серверних компонентів React.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) +Під час досліджень заради подальшого покращення React ми усвідомили, що тісніша інтеграція React із фреймворками (а саме з маршрутизацією, згортанням і серверними технологіями) — це наша найбільша нагода допомогти користувачам React створювати кращі застосунки. Команда Next.js погодилася співпрацювати з нами щодо досліджень, розробки, інтегрування та тестування незалежних від фреймворків функцій React штибу [серверних компонентів React.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) З кожним днем ці функції наближаються до стану готовності до впровадження (production-ready), і ми обговорюємо їх інтеграцію з іншими розробниками бандлерів і фреймворків. Сподіваємося, що за рік чи два усі фреймворки, перелічені на цій сторінці, матимуть підтримку цих функцій. (Якщо ви автор фреймворку та зацікавлені у співпраці щодо експериментів із цими функціями, будь ласка, повідомте нас!)