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.

Napomena

Treba da instalirate Node.js za lokalni razvoj. Iako možete probati React online ili sa jednostavnom HTML stranicom, ali u realnosti većina JavaScript alata koje želite da koristite za razvoj zahteva Node.js.

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-app kao 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-u 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 / export sintaksom, 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 import naredbe, 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. 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 vašem projekt folderu:

Terminal

npm install react react-dom

Onda dodajte ove linije koda na vrh vašeg glavnog JavaScript fajla (možda se zove index.js ili main.js):

Fork

import { createRoot } from 'react-dom/client';

// Clear the existing HTML content
document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
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.

Napomena

Integracija modularnog JavaScript okruženja u postojeći projekat može da izgleda zastrašujuće, ali vredi! Ako zapnete, probajte naš community resources ili Vite Chat.

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';

// Clear the existing HTML content
document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
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:


<!-- ... somewhere in your html ... -->
<nav id="navigation"></nav>
<!-- ... more html ... -->

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:

Fork

import { createRoot } from 'react-dom/client';

function NavigationBar() {
  // TODO: Actually implement a navigation bar
  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.

PreviousStart a New React Project NextEditor Setup