Старт нового проєкту на React

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

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

Фреймворки React, готові до промислового використання

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

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 для швидких вебсайтів, заснованих на CMS. Його багата екосистема втулок і його шар даних 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.

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

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. Ви на сервері, тож можете спілкуватися зі своїм шаром даних. Робити запити HTTP до 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>