Skip to content

add-react-to-an-existing-project.md

Latest commit

 

History

History
169 lines (112 loc) · 9.62 KB

add-react-to-an-existing-project.md

File metadata and controls

169 lines (112 loc) · 9.62 KB
title 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.

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 {/using-react-for-an-entire-subroute-of-your-existing-website/}

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:

<<<<<<< HEAD

  1. Napravite React deo vaše aplikacije koristeći jedan od React-based framework-a.
  2. Specifikujte /some-app kao base path u konfiguraciji vašeg framework-a (evo kako: Next.js, Gatsby).
  3. Konfigurišite vaš server ili proxy tako da sve rute ispod /some-app/ budu obrađene od strane vaše React aplikacije. =======
  4. Build the React part of your app using one of the React-based frameworks.
  5. Specify /some-app as the base path in your framework's configuration (here's how: Next.js, Gatsby).
  6. Configure your server or a proxy so that all requests under /some-app/ are handled by your React app.

2534424ec6c433cc2c811d5a0bd5a65b75efa5f0

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 {/using-react-for-a-part-of-your-existing-page/}

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:

  1. 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.
  2. 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 {/step-1-set-up-a-modular-javascript-environment/}

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-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:

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):

<!DOCTYPE html>
<html>
  <head><title>Moja Aplikacija</title></head>
  <body>
    <!-- Your existing page content (in this example, it gets replaced) -->
    <div id="root"></div>
  </body>
</html>
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.

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 {/step-2-render-react-components-anywhere-on-the-page/}

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:

<!DOCTYPE html>
<html>
  <head><title>Moja Aplikacija</title></head>
  <body>
    <p>Ovaj paragraf je deo HTML-a.</p>
    <nav id="navigation"></nav>
    <p>Ovaj paragraf je takođe deo HTML-a.</p>
  </body>
</html>
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.

<<<<<<< HEAD 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.

When you adopt React in an existing project, it's common to start with small interactive components (like buttons), and then gradually keep "moving upwards" until eventually your entire page is built with React. If you ever reach that point, we recommend migrating to a React framework right after to get the most out of React.

2534424ec6c433cc2c811d5a0bd5a65b75efa5f0

Koristite React Native u postojećoj mobilnoj aplikaciji {/using-react-native-in-an-existing-mobile-app/}

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.