Dodajte React na postojeći projekat
Ako želite da dodate neku interaktivnost na postojeći projekat, ne morate ga ponovo pisati u React-u. Dodajte React u postojeći stek i renderujte interaktivne React komponente bilo gde.
Koristite React za ceo subroute vašeg postojećeg sajta
Recimo da imate postojeći veb sajt na example.com napravljen sa nekom drugom tehnologijom (kao što je Rails) i želite da implementirate sve rute koje počinju sa example.com/some-app/ u potpunosti sa React-om.
Evo kako preporučujemo da to uradite:
- Napravite React deo vaše aplikacije koristeći jedan od React-based framework-a.
- Specifikujte
/some-appkao base path u konfiguraciji vašeg framework-a (evo kako: Next.js, Gatsby). - Konfigurišite vaš server ili proxy tako da sve rute ispod
/some-app/budu obrađene od strane vaše React aplikacije.
Ovo će omogućiti React delu vaše aplikacije da koristi najbolje prakse koje su ugrađene u te framework-e.
Mnogi React-based framework-ovi su full-stack i omogućavaju vašoj React aplikaciji da iskoristi server. Međutim, možete koristiti isti pristup čak i ako ne možete ili ne želite da pokrećete JavaScript na serveru. U tom slučaju, servirajte HTML/CSS/JS export (next export output za Next.js, default za Gatsby) na /some-app/ umesto toga.
Koristite React za deo vaše postojeće stranice
Recimo da imate postojeću stranicu napravljenu sa nekom drugom tehnologijom (ili na serveru kao Rails, ili na klijentu kao Backbone), i želite da renderujete interaktivne React komponente negde na toj stranici. To je uobičajen način da se integriše React - zapravo, to je kako je većina React koda izgledala na Meta-i mnogo godina!
Ovo možete uraditi u dva koraka:
- Postavite JavaScript okruženje koje vam omogućava da koristite JSX sintaksu, podelite svoj kod u module sa
import/exportsintaksom i koristite pakete (na primer, React) iz npm registra paketa. - Renderujte vaše React komponente gde želite da ih vidite na stranici.
Tačan pristup zavisi od vašeg postojećeg podešavanja stranice, pa hajde da prođemo kroz neke detalje.
Korak 1: Postavite modularno JavaScript okruženje
Modularno JavaScript okruženje vam omogućava da pišete vaše React komponente u pojedinačnim fajlovima, umesto da pišete sav vaš kod u jednom fajlu. Takođe vam omogućava da koristite sve divne pakete koje su objavili drugi programeri na npm registru - uključujući i React! Kako ćete to uraditi zavisi od vašeg postojećeg podešavanja:
-
Ako je vaša stranica već podeljena u fajlove koji koriste
importnaredbe, pokušajte da koristite to podešavanje. Proverite da li pisanje<div />u vašem JS kodu izaziva sintaksnu grešku. Ako izaziva sintaksnu grešku, možda ćete morati da transformišete vaš JS kod sa Babel-om i omogućite Babel React preset da biste koristili JSX. -
Ako vaša stranica nema postojeće podešavanje za kompajliranje JavaScript modula, postavite ga sa Vite-om. Vite zajednica održava mnoge integracije sa backend framework-ovima, ukjučujući Rails, Django i Laravel. Ako vaš backend framework nije na listi, pratite ovaj vodič da biste ručno integrisali Vite build-ove sa vašim backend-om.
Da proverite da li vaše podešavanje radi, pokrenite ovu komandu u folderu vašeg projekta:
Onda dodajte ove linije koda na vrh vašeg glavnog JavaScript fajla (možda se zove index.js ili main.js):
import { createRoot } from 'react-dom/client'; // Brisanje postojećeg HTML sadržaja document.body.innerHTML = '<div id="app"></div>'; // Renderovanje vaše React komponente umesto toga const root = createRoot(document.getElementById('app')); root.render(<h1>Zdravo, svete!</h1>);
Ako je celi sadržaj vaše stranice zamenjen sa “Zdravo, svete!”, sve je uspelo! Nastavite sa čitanjem.
Korak 2: Renderujte React komponente bilo gde na stranici
U prethodnom koraku, dodali ste ovaj kod na vrh vašeg glavnog fajla:
import { createRoot } from 'react-dom/client';
// Brisanje postojećeg HTML sadržaja
document.body.innerHTML = '<div id="app"></div>';
// Renderovanje vaše React komponente umesto toga
const root = createRoot(document.getElementById('app'));
root.render(<h1>Zdravo, svete!</h1>);Naravno da ne želite da obrišete postojeći HTML sadržaj!
Obrišite ovaj kod.
Umesto toga, verovatno želite da renderujete vaše React komponente na specifičnim mestima u vašem HTML-u. Otvorite vaš HTML fajl (ili server template koji ga generiše) i dodajte jedinstveni id atribut bilo kom tag-u, na primer:
<!-- ... negde u vašem HTML-u ... -->
<nav id="navigation"></nav>
<!-- ... ostatak HTML-a ... -->Ovo vam omogućava da pronađete taj HTML element sa document.getElementById i prosledite ga createRoot tako da možete da renderujete vašu React komponentu unutra:
import { createRoot } from 'react-dom/client'; function NavigationBar() { // TODO: Zapravo implementirajte NavigationBar return <h1>Pozdrav od React-a!</h1>; } const domNode = document.getElementById('navigation'); const root = createRoot(domNode); root.render(<NavigationBar />);
Primećujemo kako je originalni HTML sadržaj iz index.html sačuvan, ali vaša NavigationBar React komponenta sada se pojavljuje unutar <nav id="navigation"> iz vašeg HTML-a. Pročitajte createRoot dokumentaciju da biste saznali više o renderovanju React komponenti unutar postojeće HTML stranice.
Kada usvojite React u postojeći projekat, uobičajeno je da počnete sa malim interaktivnim komponentama (kao što su dugmad), i onda postepeno “idete na viši nivo” dok na kraju vaša cela stranica nije napravljena sa React-om. Ako ikada dođete do tog nivoa, preporučujemo da odmah nakon toga pređete na React framework da biste dobili najviše od React-a.
Koristite React Native u postojećoj mobilnoj aplikaciji
React Native može da se integriše u postojeće mobilne aplikacije postepeno. Ako imate postojeću mobilnu aplikaciju za Android (Java ili Kotlin) ili iOS (Objective-C ili Swift), pratite ovaj vodič da biste dodali React Native ekran u nju.