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

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

Вось чаму:

Нават калі спачатку вам не патрэбна маршрутызацыя або атрыманне даных, вы, верагодна, захочаце пазней дадаць некаторыя бібліятэкі для гэтага. С кожнай новай функцыяй памер вашага JavaScript кода будзе расці і вам давядзецца задумацца аб тым, як падзяляць код для розных маршрутаў. Па меры таго, як ваша праграма будзе атрымліваць усё больш даных, вы можаце сутыкнуцца з каскаднымі запытамі, якія запаволяць вашу праграму. Сярод вашых карыстальнікаў з’явяцца тыя, хто карыстаецца нізкахуткасным інтэрнэтам або старымі прыладамі, і вы захочаце генерыраваць HTML на серверы або падчас зборкі. Змяніць налады вялікага праекту так, каб запускаць код на серверы або падчас зборкі, можа аказацца складанай задачай.

Гэтыя праблемы не з’яўляюцца спецыфічнымі для React. Вось чаму ў Svelte ёсць SvelteKit, у Vue ёсць Nuxt і гэтак далей. Каб іх вырашыць, вам давядзецца інтэграваць ваш зборшчык з абранымі бібліятэкамі для маршрутызацыі і атрымання даных. Зрабіць першасную наладу і прымусіць усё гэта працаваць разам можа аказацца не так складана, але існуе шмат падводных камянёў аб якіх вам прыйдзецца даведацца, каб падтрымліваць прадукцыйнасць праграмы па меры яе росту. Вы захочаце адпраўляць як мага менш кода, але зрабіць гэта за адзін раўнд запытаў паміж кліентам і серверам, пры гэтым паралельна атрымліваючы неабходныя для старонкі даныя. Верагодна, вы захочаце, каб са старонка можна было працаваць яшчэ да запуску JavaScript кода, каб падтрымліваць прагрэсіўнае паляпшэнне. Магчыма, вам спатрэбіцца дадаць папку статычных HTML файлаў для маркетынгавых старонак, якія могуць працаваць з адключаным на старонцы Javascript. Самастойнае стварэнне і падтрымка ўсіх гэтых магчымасцей патрабуе вельмі вялікай і сур’ёзнай працы.

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

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

Зборшчык Next.js App Router цалкам рэалізуе афіцыйную спецыфікацыю серверных кампанентаў 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} />;
}

Next.js App Router таксама падтрымлівае атрыманне даных з затрымкай (Suspense). Так вы можаце задаць стан розных частак вашай праграмы пры загрузцы (напрыклад, паказаць заглушкі) непасрэдна ў вашым дрэве React:

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

Серверныя кампаненты і затрымка (Suspense) — гэта хутчэй магчымасці React, чым Next.js. Аднак іх прыняцце на ўзроўні фрэймворка патрабуе згоды на гэта ад каманды распрацоўкі і нетрывіяльнай працы па рэалізацыі. На дадзены момант Next.js App Router з’яўляецца найбольш поўнай рэалізацыяй гэтых магчымасцей. Каманда React працуе разам з распрацоўшчыкамі зборшчыкаў, каб палегчыць рэалізацыю гэтых функцый у фрэймворках наступнага пакалення.