Byrjaðu á nýju React verkefni
Ef þig langar að smíða nýja vefsíðu með React frá grunni þá mælum við með að velja einn af þeim römmum (e. framework) sem byggja á React og eru vinsælir í React samfélaginu. Þessi forritasöfn veita þér aðgang að sérkennum sem flest forrit og vefsíður þurfa á endanum, til dæmis beiningu (e. routing), tól til að sækja og vinna með gögn, og verkfæri til að útbúa HTML.
React rammar sem hægt er að reiða sig á í rekstri
Next.js
Next.js er svokallaður heilstafla (e. full-stack) React rammi. Next.js er fjölhæfur rammi sem gerir þér kleift að smíða React forrit af hvaða stærð sem er—frá kyrrlegri pistlasíðu yfir í flókið og kviklegt forrit. Keyra má eftirfarandi skipun til að skapa nýtt Next.js verkefni frá grunni:
Skoðaðu Next.js inngangsleiðbeiningar ef þú hefur ekki notað Next.js áður.
Vercel sér um þróun og viðhald á Next.js. Þú getur getur keyrt Next.js vef á Node.js vefþjóni, miðlaralausri hýsingu, eða á þínum eigin netþjóni. Kyrrlega Next.js vefi má keyra á hvaða kyrrlegri (e. static) hýsingu sem er.
Remix
Remix er heilstafla React rammi með faldaðri beiningu. Það gerir þér kleift að skipta vefnum þínum í faldaða hluta sem geta svo hlaðið gögnum samhliða og endurglætt samskiptasvar við aðgerðum notenda. Keyra má eftirfarandi skipun til að skapa nýtt Remix verkefni:
Skoðaðu þenann stutta kynningarpistil og þennan lengri pistil ef þú hefur ekki áður notað Remix.
Shopify sér um þróun og viðhald á Remix. Þegar þú býrð til Remix verkefni þarftu að velja þér hvers lags netþjón þú vilt keyra á. Þú getur keyrt Remix vef á hvaða Node.js eða miðlaralausri hýsingu sem er með því að nota eða skrifa millistykki.
Gatsby
Gatsby er React rammi til að þróa hraðskreiðar síður sem byggja á gögnum úr CMS (e. content management system) kerfi. Eitt höfuðmarkmið þess er að einfalda sameiningu efnis, forritaskila, og vefþjónustum í eina vefsíðu. Keyra má eftirfarandi skipun til að skapa Gatsby verkefni:
Kíktu á Gatsby kynninguna ef þú hefur ekki prófað Gatsby áður.
Netlify sér um þróun og viðhald Gatsby rammans. Þú getur keyrt algjörlega kyrrlega Gatsby síðu á hvaða kyrrlegri hýsingu sem er. Ef þú kýst að nota sérkenni sem krefjast þess að þú notir vefjón þá skaltu ganga úr skugga um að hýsingaraðilinn þinn styðji þær fyrir Gatsby.
Expo (fyrir forrit á heimavangi)
Expo er React rammi sem gerir þér kleift að skapa alhliða forrit fyrir Android, iOS, og veraldarvefinn með viðmótum sem tilheyra í heimavangi. Það veitir þér aðgang að SDK (e. software development kit) fyrir React Native sem gerir allt sem snertir inningu á heimavangi mun einfaldara í notkun. Keyra má eftirfarandi skipun til að skapa nýtt Expo verkefni:
Skoðaðu Expo kynninguna ef þú hefur aldrei notað Expo áður.
Expo (fyrirtækið) sér um þróun og viðhald á Expo. Þróun með Expo er ókeypis og þú getur sótt um að fá forritið þitt í Google og Apple forritaveiturnar án takmarkana. Expo býður einnig upp á valkvæðar skýjaþjónustur gegn greiðslu.
Köfum dýpra
Þú getur algjörlega notað React án ramma—það er þannig sem þú mundir nota React á smærri hluta vefsíðu. Þrátt fyrir það mælum við með því að þú notir ramma ef þú vilt notfæra þér það sem React hefur fram að færa til hins ýtrasta.
Hér er nokkrar ástæður fyrir því:
Jafnvel þó að þú þurfir ekki á beiningu (e. routing) að halda eða að tengjast forritaskilum þá muntu þó sennilega þurfa að bæta við einhverjum forritasöfnum fyrir þessar aðgerðir. Eftir því sem tíminn líður stækkar JavaScript knippið með hverju nýju sérkenni og þú munt mögulega þurfa að finna út úr því hvernig þú getur skipt knippinu í smærri búta (e. code splitting). Þá flækist tengingin þín gagnvart forritaskilum með tímanum, og þú gætir lent í „fyrirspurnafossum“ fram og til baka á milli biðlara og vefþjóns sem gera kerfið þitt hægt. Í tíð og tíma kann notendahópurinn þinn að stækka og innihalda fleiri notendur með lélegar nettengingar og ódýrari tölvubúnað, og þú þarft þá kannski að útbúa kyrrlegt HTML út frá íhlutunum þínum til að birta efni hraðar—annaðhvort á netþjóninum eða við smíði. Breytingar af þessu tagi, þ.e. á því hvar kóðinn keyrir, til dæmis þannig að hluti hans keyri á netþjóni eða við smíði, geta verið mjög flóknar.
Þetta eru ekki vandamál sem eiga bara við React. Þetta er ástæðan fyrir því að Svelte er með SvelteKit, Vue er með Nuxt, o.s.frv. Til að leysa þessi vandamál þarf að skrifa kóða gagnvart knippiforriti (e. bundler), beiningu, og forritasafni til að sjá um samskipti við bakenda í gegnum forritaskil. Í upphafi er ekki erfitt að fá þessa hluti til að virka sæmilega saman, en það verður fljótt flóknara eftir því sem vefur vex og þarfir breytast. Þú gætir viljað senda minnsta mögulega kóðann en á sama tíma að gera það í einni brautartímaferð á milli framenda og bakenda, samhliða öðrum gögnum sem síðan þarf á að halda. Þá getur einnig verið mikilvægt að síðan sé nothæf áður en JavaScript kóðinn byrjar að keyra, til að styðja stighækkandi betrumbætur (e. progressive enhancement). Það kann að þurfa að útfæra möppu með kyrrlegum HTML skrám fyrir markaðssetningarsíðurnar sem er hægt að hýsa hvar sem er og virkar þó að JavaScript sé ekki leyft að keyra. Það tekur tíma að útfæra alla þessa virkni upp á eigin spýtur.
React rammakerfi sem eru útlistuð á þessari síðu leysa þessi vandamál sjálfvirkt svo að þú þurfir ekki að endurskapa þessa virkni. Þau gera þér kleift að byrja smátt og þau stækka með þörfum þínum. Hver rammi er með sitt eigið samfélag og það er auðveldara að finna svör og uppfæra tól. Rammakerfi veita verkefninu líka traust burðarvirki, sem hjálpar þér og öðrum að viðhalda samhengi og þekkingu á milli verkefna. Í samanburði er auðvelt að festast í því að þurfa að nota óstuddar útgáfur af forritasöfnum og þú endar í raun á að skapa þitt eigið rammakerfi—en þó ramma sem enginn annar notar og enginn mun uppfæra fyrir þig (og ef hann er eitthvað í líkingu við það sem við höfum þróað áður, verr skipulagðan).
Ef þetta er ekki nóg til að sannfæra þig, eða ef forritið þitt er með óvenjulegar kröfur sem þessir rammar leysa ekki vel og þig langar að útfæra þína eigin lausn, þá getum við ekki stöðvað þig—gerðu þetta bara! Gríptu react og react-dom frá npm, smíðaðu forritið þitt með knippikerfi eins og Vite eða Parcel, og bættu öðrum tólum við eftir þörf, þ.e. beiningu, kyrrlega útfærslu eða bakendavörpun (e. server-side rendering), o.fl.
Nýjasta nýtt í React rammakerfum
React teymið hefur nýverið komist að því að nánari samhæfing á React og rammakerfum (sérstaklega í tengslum við beiningu, knippi og smíði, og bakendatækni) er okkar stærsta tækifæri til að hjálpa notendum að búa til betri vefsíður. Next.js teymið hefur samþykkt að starfa nánar með okkur í rannsóknum, þróun, sameiningu, og prófunum á nýjum sérkennum sem eru óháð einstökum rammakerfum eins og React Server Components.
Þessi virkni nálgast meir á hverjum degi að verða tilbúin í rekstrarumhverfi og við höfum rætt við önnur teymi sem stunda þróun á knippikerfum og römmum til að sameina þau. Við vonumst til þess að eftir eitt eða tvö ár séu öll kerfin sem eru útlistuð hér með beinan stuðning fyrir þessa virkni. (Láttu okkur vita ef þú ert að þróa rammakerfi og hefur áhuga á að sameina krafta okkar og prófa þessa virkni!)
Next.js (App Router)
App Router tæknin í Next.js er endurhönnun á forritaskilunum í Next.js með það að leiðarljósi að uppfylla draumsýn React teymisins um heilstafla högun. Hún gerir þér kleift að sækja gögn í ósamstillt íhlutum sem keyra á netþjóninum eða jafnvel á meðan á smíði stendur.
Vercel sér um þróun og viðhald á Next.js. Þú getur keyrt Next.js vef á hvaða Node.js eða biðlaralausri hýsingu sem er, eða á þínum eigin netþjóni. Next.js styður einnig kyrrlegan útflutning sem krefst ekki netþjóns.
Köfum dýpra
App Router knippikerfið í Next.js útfærir opinberu React Server Components hönnunarlýsinguna. Þetta gerir þér kleift að blanda inningu við smíði, á netþjóni, og gagnvirkum íhlutum í sama React trénu.
Þú getur til dæmis skrifað React íhlut sem keyrir aðeins á netþjóninum sem async fall sem les beint úr gagnagrunni eða skrá. Þá geturðu flutt þessi gögn niður tréð í gagnvirka íhluti:
// Þessi íhluti keyrir *aðeins* á vefþjóninum (eða við smíði).
async function Fyrirlestrar({ kennimerkiRáðstefnu }) {
// 1. Þú ert á vefþjóninum, svo þú getur talað við gagnagrunninn beint. Forritaskil eru óþarfi.
const fyrirlestrar = await db.Fyrirlestrar.findAll({ kennimerkiRáðstefnu });
// 2. Bættu hvaða virkni við sem þörf er á. Það hefur ekki áhrif á stærð JavaScript knippisins.
const myndskeið = fyrirlestrar.map(fyrirlestur => fyrirlestur.myndskeið);
// 3. Flyttu gögnin niður í gegnum íhlutina sem inntir eru í vafranum.
return <LeitanlegurMyndskeiðalisti myndskeið={myndskeið} />;
}App Router kerfið í Next.js sameinar einnig gagnaflutning og Suspense. Þetta gerir þér kleift að tilgreina tímabundna hleðslustöðu (e. loading state) fyrir mismunandi hluta af viðmótinu beint í React trénu:
<Suspense fallback={<Hleðslustaða />}>
<Fyrirlestrar kennimerkiRáðstefnu={ráðstefna.kennimerki} />
</Suspense>Server Components og Suspense eru ekki Next.js sérkenni heldur React sérkenni. Á móti kemur að það er ekkert smáræði að útfæra þessa virkni í rammakerfi og krefur mikillar vinnu. Eins og staðan er nú þá er App Router útfærslan í Next.js sú sem er lengst komin. React teymið starfar náið með forriturunum sem vinna að knippiforritinu til að gera þessi sérkenni auðveldari að útfæra í síðari rammakerfum.