Створення React-застосунку
Якщо ви вирішили розробити новий застосунок або вебсайт за допомогою React, ми радимо вибрати один із фреймворків.
Якщо ваш застосунок містить обмеження, які не спрацюють із наявними фреймворками, або ви бажаєте побудувати власний фреймворк чи розібратися в основах, побудуйте React-застосунок з нуля.
Фреймворки повного стеку
Ці фреймворки підтримують усі функції, що знадобляться для розгортання та масштабування застосунку в публічному середовищі (in production). Вони інтегрували останні React-функції й послуговуються перевагами архітектури React.
Next.js (App Router)
App Router від Next.js’s — це React-фреймворк, який повністю використовує переваги архітектури React, щоб уможливлювати React-застосунки повного стеку.
Next.js підтримується командою Vercel. Розгорнути застосунок Next.js можна на будь-якому Node.js- або безсерверному хостингу, а також на власному сервері. Також Next.js підтримує статичне експортування, якому не потрібен сервер. На додачу Vercel пропонує необов’язкові платні хмарні послуги.
React Router (v7)
React Router — це найпопулярніша бібліотека маршрутизації для React, яку можна поєднати з Vite для створення повноцінного React-фреймворку. Він зосереджується на стандартних вебінтерфейсах і має кілька готових до розгортання шаблонів для різних середовищ і платформ JavaScript.
Щоб створити новий проєкт з допомогою фреймворку React Router, виконайте:
React Router підтримується компанією Shopify.
Expo (для нативних застосунків)
Expo — це React-фреймворк, що дає змогу створювати універсальні застосунки для Android, iOS і вебу з по-справжньому нативним UI. Він пропонує набір інструментів для React Native, завдяки якому цими нативними частинами легше користуватися. Щоб створити новий проєкт Expo, виконайте:
Якщо Expo — це для вас щось нове, перегляньте підручник Expo.
Expo підтримується компанією Expo. Розробляти застосунки за допомогою Expo можна безкоштовно, і їх можна подавати до каталогів застосунків Google і Apple без жодних обмежень. На додачу Expo пропонує необов’язкові платні хмарні послуги.
Інші фреймворки
Є й інші перспективні фреймворки, які працюють над нашим баченням повного стеку з React:
- TanStack Start (бета-версія): TanStack Start — це React-фреймворк повного стеку на основі TanStack Router. Він надає повнодокументний SSR, потокове передавання, серверні функції, збирання тощо за допомогою інструментів як Nitro та Vite.
- RedwoodJS: Redwood — це React-фреймворк повного стеку із великою кількістю попередньо встановлених пакетів і налаштувань, що дає змогу легко створювати вебзастосунки повного стеку.
Deep Dive
Бандлер App Router від Next.js повністю реалізує офіційну специфікацію серверних компонентів React. Це дає змогу поєднувати компоненти, що виконуються під час збирання, ті, що працюють суто на сервері, та інтерактивні компоненти в єдине дерево React.
Наприклад, можна написати суто серверний компонент React як async функцію, що зчитує дані з бази даних або з файлу. Потім можна передати дані до інтерактивних компонентів:
// Цей компонент виконується *лише* на сервері (або під час збирання).
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} />;
}App Router від Next.js також інтегрує отримання даних із Suspense. Це дає змогу задати стан завантаження (наприклад, каркасний елемент для заповнення (skeleton placeholder)) для різних частин інтерфейсу безпосередньо в дереві React:
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>Серверні компоненти та Suspense — це радше функції React, аніж Next.js. Проте їхнє залучення на рівні фреймворку вимагає нетривіальних зусиль для реалізації та підтримування. Наразі App Router від Next.js — це найповніша імплементація. Команда React працює разом із розробниками бандлерів, щоб було легше реалізувати ці функції в наступному поколінні фреймворків.
Початок із нуля
Якщо ваш застосунок містить обмеження, які не спрацюють із наявними фреймворками, або ви бажаєте побудувати власний фреймворк чи розібратися в основах React-застосунку, є інші доступні варіанти для початку React-проєкту з нуля.
Початок роботи з нуля надає вам більше гнучкості, але потребує від вас вибору інструментів для маршрутизації, отримання даних та інших типових патернів використання. Це дуже схоже на створення власного фреймворку замість використання наявного. Фреймворки, які ми рекомендуємо, мають готові вбудовані рішення для цих проблем.
Якби ви хочете власне рішення, перегляньте наш посібник із побудови React-застосунку з нуля, щоб отримати інструкції з налаштування нового React-проєкту, починаючи з інструментів збирання, як-от Vite, Parcel чи RSbuild.
Якщо ви автор фреймворку та бажаєте додати його на цю сторінку, будь ласка, напишіть нам.