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

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

Вось чаму.

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

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

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

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

Зборнік маршрутызатараў прыкладанняў Next.js цалкам рэалізуе афіцыйную React Server спецыфікацыя кампанентаў. Гэта дазваляе змяшаць кампаненты часу зборкі, серверныя і інтэрактыўныя кампаненты ў адным дрэве 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 таксама інтэгруе атрыманне даных з Suspense. Гэта дазваляе вам вызначаць стан загрузкі (напрыклад, запаўняльнік шкілета) для розных частак вашага карыстальніцкага інтэрфейсу непасрэдна ў вашым дрэве React:

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

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