Початок нового React-проєкту

Ви можете використовувати React без фреймворку, проте ми з’ясували, що більшість застосунків і сайтів, зрештою, створюють рішення для поширених проблем, наприклад: розбиття коду, маршрутизації, отримання даних і генерування HTML. Ці проблеми — спільні для всіх бібліотек UI, а не лише для React.

Вибравши фреймворк, можна швидко почати роботу з React і уникнути, по суті, розробки власного фреймворку пізніше.

Готові до впровадження фреймворки React

Ці фреймворки підтримують усі функції, що знадобляться для розгортання та масштабування застосунку в публічному середовищі (in production), та прямують до підтримки нашого бачення архітектури повного стеку. Усі фреймворки, які ми радимо, є відкритим програмним забезпеченням з активною спільнотою для підтримки та можуть бути розгорнуті на власних серверах чи сторонніх хостингах. Якщо ви автор фреймворку та зацікавлені у потраплянні до цього списку, будь ласка, повідомте нас.

Next.js

Page Router від Next.js — це фреймворк React повного стеку. Він багатоцільовий та дає змогу розробляти застосунки React будь-якого розміру — від здебільшого статичних блогів до складних динамічних програм. Щоб створити новий проєкт Next.js, запустіть у терміналі:

Якщо Next.js — це для вас дещо нове, то погляньте на курс вивчення Next.js.

Next.js підтримується командою Vercel. Розгорнути застосунок Next.js можна на будь-якому Node.js- або безсерверному хостингу, а також на власному сервері. Також Next.js підтримує статичне експортування, якому не потрібен сервер.

Remix

Remix — це фреймворк React повного стеку з вкладеною маршрутизацією. Він дає змогу розбивати застосунок на вкладені одна в одну частини, які можуть паралельно завантажувати дані та оновлювати їх, реагуючи на дії користувача. Щоб створити новий проєкт Remix, запустіть:

Якщо Remix — це для вас щось нове, перегляньте його посібник зі створення блогу (коротко) та посібник зі створення застосунку (довго).

Remix підтримується командою Shopify. Для створення проєкту Remix необхідно вибрати свій варіант шаблону для розгортання. Застосунок Remix можна розгорнути на будь-якому хостингу, що підтримує Node.js або є безсерверним, за допомогою готового чи власного адаптера.

Gatsby

Gatsby — це фреймворк React для швидких вебсайтів із системою керування вмістом. Його багата екосистема плагінів і шар даних на основі GraphQL спрощують інтеграцію вмісту, API і сторонніх служб в один вебсайт. Щоб створити новий проєкт Gatsby, запустіть:

Якщо Gatsby — це для вас щось нове, перегляньте підручник Gatsby.

Gatsby підтримується командою Netlify. Повністю статичний сайт Gatsby можна розгорнути на будь-якому статичному хостингу. За бажання скористатися суто серверними функціями фреймворку слід перевірити, що хостинг підтримує ці можливості для Gatsby.

Expo (для нативних застосунків)

Expo — це фреймворк React, що дає змогу створювати універсальні застосунки для Android, iOS і вебу з по-справжньому нативним UI. Він пропонує набір інструментів для React Native, завдяки якому цими нативними частинами легше користуватися. Щоб створити новий проєкт Expo, запустіть:

Якщо Expo — це для вас щось нове, перегляньте підручник Expo.

Expo підтримується компанією Expo. Розробляти застосунки за допомогою Expo можна безкоштовно, і їх можна подавати до каталогів застосунків Google і Apple без жодних обмежень. На додачу Expo пропонує необов’язкові платні хмарні послуги.

Передові фреймворки React

Під час досліджень заради подальшого покращення React ми усвідомили, що тісніша інтеграція React із фреймворками (а саме з маршрутизацією, згортанням і серверними технологіями) — це наша найбільша нагода допомогти користувачам React створювати кращі застосунки. Команда Next.js погодилася співпрацювати з нами щодо досліджень, розробки, інтегрування та тестування незалежних від фреймворків функцій React штибу серверних компонентів React.

З кожним днем ці функції наближаються до стану готовності до впровадження (production-ready), і ми обговорюємо їх інтеграцію з іншими розробниками бандлерів і фреймворків. Сподіваємося, що за рік чи два усі фреймворки, перелічені на цій сторінці, матимуть підтримку цих функцій. (Якщо ви автор фреймворку та зацікавлені у співпраці щодо експериментів із цими функціями, будь ласка, повідомте нас!)

Next.js (App Router)

App Router від Next.js — це переробка API Next.js, що прагне втілити бачення повностекової архітектури команди React. Вона дає змогу отримувати дані в асинхронних компонентах, що запускаються на сервері чи навіть під час збирання.

Next.js підтримується командою Vercel. Застосунок Next.js можна розгорнути на будь-якому Node.js- або безсерверному хостингу, а також на власному сервері. Також Next.js підтримує статичне експортування, якому не потрібен сервер.

// Цей компонент запускається *лише* на сервері (або під час збирання).
async function Talks({ confId }) {
  // 1. Ви на сервері, тож можете спілкуватися зі своїм шаром даних. Наявність API — необов'язкова.
  const talks = await db.Talks.findAll({ confId });

  // 2. Додавайте будь-яку кількість логіки рендерингу. Це не збільшить ваш бандл JavaScript.
  const videos = talks.map(talk => talk.video);

  // 3. Передайте дані до компонентів, що запустяться в браузері.
  return <SearchableVideoList videos={videos} />;
}

<Suspense fallback={<TalksLoading />}>
  <Talks confId={conf.id} />
</Suspense>