Započnite novi React projekat
Ako želite da napravite novu aplikaciju ili novi sajt koristeći samo React, preporučujemo da izaberete jedan od React framework-ova popularnih u zajednici.
Možete koristiti React bez framework-a, međutim, saznali smo da većina aplikacija i sajtova pravi rešenja za uobičajene probleme poput podele koda, rutiranja, fetch-ovanja podataka i generisanja HTML-a. Ovi problemi su zajednički za sve biblioteke korisničkog interfejsa i nisu specifični za React.
Ako počnete sa framework-om, brzo ćete se uhodati sa React-om, izbegavajući pravljenje vašeg framework-a kasnije.
Deep Dive
Naravno da možete koristiti React bez framework-a—kako biste koristili React za deo vaše stranice. Međutim, ako kreirate novu aplikaciju ili sajt koristeći samo React, preporučujemo da koristite framework.
Evo i zašto.
Čak i ako vam ne treba rutiranje ili fetch podataka na početku, verovatno ćete želeti da dodate neke biblioteke za njih. Kako vaš JavaScript bundle raste sa svakom novom funkcionalnošću, možda ćete morati da podelite kod za svaku rutu pojedinačno. Kako vaše potrebe za fetch podataka postaju složenije, verovatno ćete naići na server-client mrežne vodopade koji čine da vaša aplikacija deluje veoma sporo. Kako vaša publika uključuje više korisnika sa lošim mrežnim uslovima i uređajima niske klase, možda ćete morati da generišete HTML iz vaših komponenti da biste prikazali sadržaj ranije—ili na serveru, ili tokom vremena izgradnje. Menjanje vašeg setup-a radi pokretanja vašeg koda na serveru ili tokom vremena izgradnje može biti veoma komplikovano.
Ovi problemi nisu specifični za React. Zato Svelte ima SvelteKit, Vue ima Nuxt i tako dalje. Da biste rešili ove probleme sami, moraćete da integrišete vaš bundler sa vašim router-om i sa vašom bibliotekom za fetch podataka. Nije teško napraviti početni setup, ali postoji mnogo suptilnosti u pravljenju aplikacije koja se brzo učitava čak i dok raste tokom vremena. Želećete da pošaljete minimalnu količinu koda aplikacije ali da to uradite u jednom client-server roundtrip-u, paralelno sa bilo kojim podacima potrebnim za stranicu. Verovatno ćete želeti da stranica bude interaktivna pre nego što se vaš JavaScript kod pokrene, da biste podržali progresivno poboljšanje. Možda ćete želeti da generišete folder potpuno statičkih HTML fajlova za vaše marketing stranice koje mogu biti host-ovane bilo gde i da i dalje rade sa isključenim JavaScript-om. Izgradnja ovih mogućnosti samostalno zahteva pravi posao.
React framework-ovi na ovoj stranici rešavaju probleme kao što su ovi automatski, bez dodatnog posla sa vaše strane. Oni vam omogućavaju da počnete veoma jednostavno i da onda skalirate vašu aplikaciju sa vašim potrebama. Svaki React framework ima zajednicu, tako da je lakše naći odgovore na pitanja i nadograditi alate. Framework-ovi takođe daju strukturu vašem kodu, pomažući i vama i drugima da zadržite kontekst i veštine između različitih projekata. Nasuprot tome, sa custom setup-om je lakše zaglaviti se na nepodržanim verzijama zavisnosti i na kraju ćete zapravo kreirati vaš sopstveni framework—iako bez zajednice ili putanje za nadogradnju (i ako je išta kao oni koje smo pravili u prošlosti, više haotično dizajnirani).
Ako vaša aplikacija ima neobične zahteve koji nisu dobro podržani od strane ovih framework-ova ili preferirate da rešavate probleme samostalno, možete da napravite vaš sopstveni custom setup sa React-om. Uzmite react i react-dom sa npm-a, napravite vaš custom build proces sa bundler-om kao što je Vite ili Parcel, i dodajte druge alate kada vam budu potrebni za rutiranje, statičku generaciju ili server-side rendering, i tako dalje.
React framework-ovi za produkciju
Ovi framework-ovi podržavaju sve funkcionalnosti koje su vam potrebne za deploy i skaliranje aplikacija u produkciji i rade na podršci naše vizije full-stack arhitekture. Svi framework-ovi koje preporučujemo su open source sa aktivnom podrškom zajednice i mogu biti deploy-ovani na vaš server ili na hosting provider-a. Ako ste autor framework-a koji zainteresovan da bude na ovoj listi, molimo vas da nam javite.
Next.js
Next.js-ov Pages Router je full-stack React framework. On je veoma svestran i omogućava vam da kreirate React aplikacije bilo koje veličine—od uglavnom statičkog bloga do kompleksne dinamičke aplikacije. Da biste kreirali novi Next.js projekat, pokrenite u vašem terminalu:
Ako vam je Next.js nepoznat, proverite ovaj Next.js tutorijal.
Next.js je održavan od strane Vercel-a. Možete deploy-ovati Next.js aplikaciju na bilo koji Node.js ili serverless hosting, ili na vaš sopstveni server. Next.js takođe podržava static export koji ne zahteva server.
Remix
Remix je full-stack React framework sa ugneždenim rutiranjem. On vam omogućava da podelite vašu aplikaciju na ugneždene delove koji mogu da učitavaju podatke paralelno i da se osvežavaju u odgovoru na korisničke akcije. Da biste kreirali novi Remix projekat, pokrenite u vašem terminalu:
Ako vam je Remix nepoznat, pogledajte Remix blog tutorijal (kratak) i app tutorijal (dugačak).
Remix je održavan od strane Shopify-a. Kada kreirate Remix projekat, morate izabrati vaš deployment target. Možete deploy-ovati Remix aplikaciju na bilo koji Node.js ili serverless hosting korišćenjem ili pisanjem adaptera.
Gatsby
Gatsby je React framework za brze CMS sajtove. Njegov bogat ekosistem plugin-a i GraphQL data sloj pojednostavljuju integraciju sadržaja, API-ja i servisa u jedan sajt. Da biste kreirali novi Gatsby projekat, pokrenite u vašem terminalu:
Ako vam je Gatsby nepoznat, pogledajte Gatsby tutorijal.
Gatsby je održavan od strane Netlify-a. Možete deploy-ovati potpuno statički Gatsby sajt na bilo koji statički hosting. Ako se odlučite za korišćenje server-only funkcionalnosti, pobrinite se da vaš hosting provider podržava Gatsby.
Expo (za native aplikacije)
Expo je React framework koji vam omogućava da kreirate univerzalne Android, iOS i web aplikacije sa zaista native korisničkim interfejsima. On pruža SDK za React Native koji olakšava korišćenje native delova. Da biste kreirali novi Expo projekat, pokrenite u vašem terminalu:
Ako vam je Expo nepoznat, pogledajte Expo tutorijal.
Expo je održavan od strane Expo (kompanije). Kreiranje aplikacija sa Expo-om je besplatno i možete ih submit-ovati na Google i Apple app store bez ograničenja. Expo dodatno pruža opt-in plaćene cloud servise.
Najnoviji React framework-ovi
Kako smo i dalje istraživali kako da nastavimo da poboljšavamo React, shvatili smo da je integracija React-a bliže sa framework-ovima (specifično, sa rutiranjem, bundler-ima i server tehnologijama) naša najveća prilika da pomognemo React korisnicima da kreiraju bolje aplikacije. Next.js tim se složio da sarađuje sa nama u istraživanju, razvoju, integraciji i testiranju framework-agnostičnih bleeding-edge React mogućnosti kao što su React Server Components.
Ove mogućnosti su sve bliže da budu spremne za produkciju svakog dana, i bili smo u razgovorima sa drugim bundler i framework developerima o njihovoj integraciji. Naša nada je da će za godinu ili dve, svi framework-ovi navedeni na ovoj stranici imati punu podršku za ove mogućnosti. (Ako ste autor framework-a zainteresovan za saradnju sa nama u eksperimentisanju sa ovim mogućnostima, molimo vas javite nam se!)
Next.js (App Router)
Next.js-ov App Router je redizajn Next.js API-ja koji ima za cilj da ispuni React-ovu viziju full-stack arhitekture. On vam omogućava da fetch-ujete podatke u asinhronim komponentama koje se izvršavaju na serveru ili čak tokom vremena izgradnje.
Next.js je održavan od strane Vercel-a. Možete deploy-ovati Next.js aplikaciju na bilo koji Node.js ili serverless hosting, ili na vaš sopstveni server. Next.js takođe podržava static export koji ne zahteva server.
Deep Dive
Next.js-ov App Router bundler potpuno implementira zvaničnu React Server Components specifikaciju. Ovo vam omogućava da pomešate komponente koje se izvršavaju tokom vremena izgradnje, komponente koje se izvršavaju samo na serveru i interaktivne komponente u jednom React stablu.
Na primer, možete napisati server-only React komponentu kao async funkciju koja čita iz baze podataka ili iz fajla. Zatim možete proslediti podatke iz nje vašim interaktivnim komponentama:
// Ova komponenta se izvršava *samo* na serveru (ili tokom vremena izgradnje).
async function Talks({ confId }) {
// 1. Vi ste na serveru, tako da možete da komunicirate sa vašom bazom podataka. API pristupna tačka nije potrebna.
const talks = await db.Talks.findAll({ confId });
// 2. Dodajte bilo koju količinu rendering logike. To neće učiniti vaš JavaScript bundle većim.
const videos = talks.map(talk => talk.video);
// 3. Prosledite podatke komponentama koje će se izvršavati u pretraživaču.
return <SearchableVideoList videos={videos} />;
}Router Next.js aplikacije je takođe integrisan sa fetch podataka pomoću Suspense-a. Ovo vam omogućava da specificirate stanje učitavanja (kao što je skeleton placeholder) za različite delove vašeg korisničkog interfejsa direktno u vašem React stablu:
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>Server Komponente i Suspense su funkcionalnosti React-a, a ne Next.js funkcionalnosti. Međutim, njihovo usvajanje na nivou framework-a zahteva podršku i ne-trivijalan rad na implementaciji. Trenutno, Next.js App Router je najkompletnija implementacija. React tim sarađuje sa developerima bundler-a da bi ove mogućnosti bile lakše za implementaciju u sledećoj generaciji framework-ova.