Пачаць новы React праект

Вы можаце выкарыстоўваць React без фрэймворка, аднак большасць праграм і сайтаў у канчатковым выніку ствараюць рашэнні для агульных праблем, такіх як раздзяленне кода, маршрутызацыя, выбарка даных і генерацыя HTML. Гэтыя праблемы характэрныя для ўсіх UI бібліятэк, а не толькі для React.

Калі вы пачнеце з фрэймворка, то зможаце хутка пачаць працу з React і пазбегнуць стварэння ўласнага фрэймворка пазней.

React фрэймворкі, гатовыя для выкарыстання ў працоўным асяроддзі

Гэтыя фрэймворкі падтрымліваюць усе функцыі, неабходныя для разгортвання і маштабіравання вашай праграмы ў працоўным асяроддзі, а таксама працуюць над падтрымкай нашага бачання фулстэк архітэктуры. Усе фрэймворкі, якія мы рэкамендуем, маюць адкрыты зыходны код з актыўнымі суполкамі для падтрымкі і могуць быць разгорнуты на вашым уласным серверы або хостынгу правайдара. Калі вы аўтар фрэймворка і хочаце, каб ваш фрэймворк ўключылі ў гэты спіс, то паведаміце нам.

Next.js

Next.js Pages Router — гэта ўніверсальны фулстэк 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 падтрымліваецца Netlify. Вы можаце разгарнуць цалкам статычны Gatsby сайт на любым статычным хостынгу. Калі вы жадаеце выкарыстоўваць толькі серверныя магчымасці Gatsby, пераканайцеся, што ваш хостынг іх падтрымлівае.

Expo (для натыўных праграм)

Expo — гэта React фрэймворк, які дазваляе ствараць універсальныя праграмы для Android, iOS і вэб-праграмы з натыўным карыстальніцкім інтэрфейсам. Ён пастаўляецца разам з SDK для React Native, што палягчае распрацоўку натыўных частак. Каб стварыць новы Expo праект, запусціце:

Для знаёмства з Expo вы можаце азнаёміцца з іх інструкцыя Expo.

Expo падтрымліваецца Expo (кампанія). Вы можаце бясплатна ствараць праграмы з дапамогай Expo і дадаваць іх у крамы Google і Apple без абмежаванняў. Дадаткова Expo прапануе платныя воблачныя паслугі.

Перадавыя React фрэймворкі

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

Мы працуем над тым, каб новыя магчымасці сталі прыдатнымі для працоўнага асяроддзя як мага хутчэй, і дамаўляемся з распрацоўшчыкамі зборшчыкаў і фрэймворкаў аб іх інтэграцыі. Мы разлічваем, праз год ці два ўсе пералічаныя фрэймворкі будуць поўнасцю падтрымліваць гэтыя магчымасці. (Калі вы распрацоўшчык фрэймворка і хочаце дапамагчы нам у эксперыментах, калі ласка, дайце нам ведаць!)

Next.js (App Router)

Next.js App Router — гэта абноўлены 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>