Kreiranje React aplikacije
Ako želite da napravite novu aplikaciju ili novi sajt koristeći React, preporučujemo da počnete sa framework-om.
Ako vaša aplikacija ima ograničenja koja nisu dobro rešena u postojećim framework-ovima, ako želite da napravite sopstveni framework, ili samo želite naučiti osnove React aplikacija, možete napraviti React aplikaciju od nule.
Full-stack framework-ovi
Ovi preporučeni framework-ovi podržavaju sve funkcionalnosti koje su vam potrebne za deploy i skaliranje aplikacija u produkciji. Integrisali su najnovije React funkcionalnosti i iskoristili prednosti React-ove arhitekture.
Next.js (App Router)
Next.js-ov App Router je React framework koji u potpunosti koristi prednosti React-ove arhitekture kako bi omogućio full-stack React aplikacije.
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. Vercel dodatno pruža i opcione cloud servise koji se plaćaju.
React Router (v7)
React Router je najpopularnija biblioteka za rutiranje u React-u i može se upariti sa Vite-om za pravljenje full-stack React framework-a. On naglašava standardne Web API-je i ima nekoliko deploy template-a spremnih za upotrebu za različite JavaScript runtime-ove i platforme.
Da biste kreirali novi React Router framework projekat, pokrenite:
Shopify održava React Router.
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:
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 i opcione cloud servise koji se plaćaju.
Ostali framework-ovi
Postoji nekoliko nadolazećih framework-ova koji rade na našoj full stack React viziji:
- TanStack Start (Beta): TanStack Start je full-stack React framework nastao zbog TanStack Router-a. Pruža renderovanje celih dokumenata na serverskoj strani, strimovanje, serverske funkcije, bundle-ovanje i još mnogo toga koristeći alate poput Nitro-a i Vite-a.
- RedwoodJS: Redwood je full stack React framework sa mnogo unapred instaliranih paketa i konfiguracija koje olakšavaju pravljenje full-stack web aplikacija.
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, vašim interaktivnim komponentama možete proslediti podatke iz nje:
// 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šim podacima. API pristupna tačka nije potrebna.
const talks = await db.Talks.findAll({ confId });
// 2. Dodajte bilo koju količinu logike renderovanja. 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} />;
}Next.js-ov App Router je takođe integrisan sa fetch-ovanjem 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 Components i Suspense su funkcionalnosti React-a, a ne Next.js-a. Međutim, njihovo usvajanje na nivou framework-a zahteva podršku i netrivijalan rad na implementaciji. Trenutno, Next.js App Router je najkompletnija implementacija. React tim sarađuje sa developerima bundler-a kako bi ove funkcionalnosti bile lakše za implementaciju u sledećoj generaciji framework-ova.
Početak od nule
Ako vaša aplikacija ima ograničenja koja nisu dobro rešena u postojećim framework-ovima, ako želite da napravite sopstveni framework, ili samo želite naučiti osnove React aplikacija, postoji još opcija za započinjanje React projekta od nule.
Početak od nule vam pruža više fleksibilnosti, ali zahteva da napravite odluku koje alate ćete koristiti za rutiranje, fetch-ovanje podataka i ostale često korišćene šablone. To je kao da pravite sopstveni framework, a ne da koristite već postojeći. Framework-ovi koje preporučujemo imaju ugrađena rešenja za ovakve probleme.
Ako želite napraviti vaša rešenja, pogledajte uputstvo kako napraviti React aplikaciju od nule za instrukcije oko postavki React projekta počevši od postojećih alata kao što su Vite, Parcel ili RSbuild.
Ako ste vi autor framework-a i zainteresovani ste da ga uključimo u ovu stranicu, molimo vas da nam javite.