Skip to content

Commit cc2745c

Browse files
cvijandjcvijandj
committed
Add-react-to-an-existing-project translation
1 parent 7a29823 commit cc2745c

File tree

1 file changed

+45
-42
lines changed

1 file changed

+45
-42
lines changed

‎src/content/learn/add-react-to-an-existing-project.md

+45-42
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,66 @@
11
---
2-
title: Add React to an Existing Project
2+
title: Dodajte React na postojeći projekat
33
---
44

55
<Intro>
66

7-
If you want to add some interactivity to your existing project, you don't have to rewrite it in React. Add React to your existing stack, and render interactive React components anywhere.
7+
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.
88

99
</Intro>
1010

1111
<Note>
1212

13-
**You need to install [Node.js](https://nodejs.org/en/) for local development.** Although you can [try React](/learn/installation#try-react) online or with a simple HTML page, realistically most JavaScript tooling you'll want to use for development requires Node.js.
13+
**Treba da instalirate [Node.js](https://nodejs.org/en/) za lokalni razvoj.** Iako možete [probati React](/learn/installation#try-react) online ili sa jednostavnom HTML stranicom, ali u realnosti većina JavaScript alata koje želite da koristite za razvoj zahteva Node.js.
1414

1515
</Note>
1616

17-
## Using React for an entire subroute of your existing website {/*using-react-for-an-entire-subroute-of-your-existing-website*/}
17+
## Koristite React za ceo subroute vašeg postojećeg sajta {/*using-react-for-an-entire-subroute-of-your-existing-website*/}
1818

19-
Let's say you have an existing web app at `example.com` built with another server technology (like Rails), and you want to implement all routes starting with `example.com/some-app/` fully with React.
19+
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.
2020

21-
Here's how we recommend to set it up:
21+
Evo kako preporučujemo da to uradite:
2222

23-
1. **Build the React part of your app** using one of the [React-based frameworks](/learn/start-a-new-react-project).
24-
2. **Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
25-
3. **Configure your server or a proxy** so that all requests under `/some-app/` are handled by your React app.
23+
1. **Napravite React deo vaše aplikacije** koristeći jedan od [React-based framework-a](/learn/start-a-new-react-project).
24+
2. **Specifikujte `/some-app` kao *base path*** u konfiguraciji vašeg framework-a (evo kako: [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
25+
3. **Konfigurišite vaš server ili proxy** tako da sve rute ispod `/some-app/` budu obrađene od strane vaše React aplikacije.
2626

27-
This ensures the React part of your app can [benefit from the best practices](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) baked into those frameworks.
27+
Ovo će omogućiti React delu vaše aplikacije da [koristi najbolje prakse](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) koje su ugrađene u te framework-e.
2828

29-
Many React-based frameworks are full-stack and let your React app take advantage of the server. However, you can use the same approach even if you can't or don't want to run JavaScript on the server. In that case, serve the HTML/CSS/JS export ([`next export` output](https://nextjs.org/docs/advanced-features/static-html-export) for Next.js, default for Gatsby) at `/some-app/` instead.
29+
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](https://nextjs.org/docs/advanced-features/static-html-export) za Next.js, default za Gatsby) na `/some-app/` umesto toga.
3030

31-
## Using React for a part of your existing page {/*using-react-for-a-part-of-your-existing-page*/}
31+
## Koristite React za deo vaše postojeće stranice {/*using-react-for-a-part-of-your-existing-page*/}
3232

33-
Let's say you have an existing page built with another technology (either a server one like Rails, or a client one like Backbone), and you want to render interactive React components somewhere on that page. That's a common way to integrate React--in fact, it's how most React usage looked at Meta for many years!
33+
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!
3434

35-
You can do this in two steps:
35+
Ovo možete uraditi u dva koraka:
3636

37-
1. **Set up a JavaScript environment** that lets you use the [JSX syntax](/learn/writing-markup-with-jsx), split your code into modules with the [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) syntax, and use packages (for example, React) from the [npm](https://www.npmjs.com/) package registry.
38-
2. **Render your React components** where you want to see them on the page.
37+
1. **Postavite JavaScript okruženje** koje vam omogućava da koristite [JSX sintaksu](/learn/writing-markup-with-jsx), podelite svoj kod u module sa [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) sintaksom, i koristite pakete (na primer, React) iz [npm](https://www.npmjs.com/) registra paketa.
38+
2. **Renderujte vaše React komponente** gde želite da ih vidite na stranici.
3939

40-
The exact approach depends on your existing page setup, so let's walk through some details.
40+
Tačan pristup zavisi od vašeg postojećeg podešavanja stranice, pa hajde da prođemo kroz neke detalje.
4141

42-
### Step 1: Set up a modular JavaScript environment {/*step-1-set-up-a-modular-javascript-environment*/}
42+
### Korak 1: Postavite modularno JavaScript okruženje {/*step-1-set-up-a-modular-javascript-environment*/}
4343

44-
A modular JavaScript environment lets you write your React components in individual files, as opposed to writing all of your code in a single file. It also lets you use all the wonderful packages published by other developers on the [npm](https://www.npmjs.com/) registry--including React itself! How you do this depends on your existing setup:
44+
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](https://www.npmjs.com/) registru - uključujući i React! Kako ćete to uraditi zavisi od vašeg postojećeg podešavanja:
4545

46-
* **If your app is already split into files that use `import` statements,** try to use the setup you already have. Check whether writing `<div />` in your JS code causes a syntax error. If it causes a syntax error, you might need to [transform your JavaScript code with Babel](https://babeljs.io/setup), and enable the [Babel React preset](https://babeljs.io/docs/babel-preset-react) to use JSX.
46+
* **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](https://babeljs.io/setup), i omogućite [Babel React preset](https://babeljs.io/docs/babel-preset-react) da biste koristili JSX.
4747

48-
* **If your app doesn't have an existing setup for compiling JavaScript modules,** set it up with [Vite](https://vitejs.dev/). The Vite community maintains [many integrations with backend frameworks](https://github.com/vitejs/awesome-vite#integrations-with-backends), including Rails, Django, and Laravel. If your backend framework is not listed, [follow this guide](https://vitejs.dev/guide/backend-integration.html) to manually integrate Vite builds with your backend.
48+
* **Ako vaša stranica nema postojeće podešavanje za kompajliranje JavaScript modula,** postavite ga sa [Vite](https://vitejs.dev/). Vite zajednica održava [mnoge integracije sa backend framework-ovima](<https://github.com/vitejs/awesome-vite#integrations-with-backends>), ukjučujući Rails, Django, i Laravel. Ako vaš backend framework nije na listi, [pratite ovaj vodič](https://vitejs.dev/guide/backend-integration.html) da biste ručno integrisali Vite build-ove sa vašim backend-om.
4949

50-
To check whether your setup works, run this command in your project folder:
50+
Da proverite da li vaše podešavanje radi, pokrenite ovu komandu u vašem projekt folderu:
5151

5252
<TerminalBlock>
5353
npm install react react-dom
5454
</TerminalBlock>
5555

56-
Then add these lines of code at the top of your main JavaScript file (it might be called `index.js` or `main.js`):
56+
Onda dodajte ove linije koda na vrh vašeg glavnog JavaScript fajla (možda se zove `index.js` ili `main.js`):
5757

5858
<Sandpack>
5959

6060
```html index.html hidden
6161
<!DOCTYPE html>
6262
<html>
63-
<head><title>My app</title></head>
63+
<head><title>Moja Aplikacija</title></head>
6464
<body>
6565
<!-- Your existing page content (in this example, it gets replaced) -->
6666
</body>
@@ -75,22 +75,23 @@ document.body.innerHTML = '<div id="app"></div>';
7575

7676
// Render your React component instead
7777
const root = createRoot(document.getElementById('app'));
78-
root.render(<h1>Hello, world</h1>);
78+
root.render(<h1>Zdravo, svete!</h1>);
7979
```
8080

8181
</Sandpack>
8282

83-
If the entire content of your page was replaced by a "Hello, world!", everything worked! Keep reading.
83+
Ako je celi sadržaj vaše stranice zamenjen sa "Zdravo, svete!", sve je uspelo! Nastavite sa čitanjem.
8484

8585
<Note>
8686

87-
Integrating a modular JavaScript environment into an existing project for the first time can feel intimidating, but it's worth it! If you get stuck, try our [community resources](/community) or the [Vite Chat](https://chat.vitejs.dev/).
87+
Integracija modularnog JavaScript okruženja u postojeći projekat može da izgleda zastrašujuće, ali vredi! Ako zapnete, probajte naš [community resources](/community) ili [Vite Chat](https://chat.vitejs.dev/).
8888

8989
</Note>
9090

91-
### Step 2: Render React components anywhere on the page {/*step-2-render-react-components-anywhere-on-the-page*/}
91+
### Korak 2: Renderujte React komponente bilo gde na stranici {/*step-2-render-react-components-anywhere-on-the-page*/}
92+
93+
U prethodnom koraku, dodali ste ovaj kod na vrh vašeg glavnog fajla:
9294

93-
In the previous step, you put this code at the top of your main file:
9495

9596
```js
9697
import { createRoot } from 'react-dom/client';
@@ -100,33 +101,34 @@ document.body.innerHTML = '<div id="app"></div>';
100101

101102
// Render your React component instead
102103
const root = createRoot(document.getElementById('app'));
103-
root.render(<h1>Hello, world</h1>);
104+
root.render(<h1>Zdravo, svete!</h1>);
104105
```
105106

106-
Of course, you don't actually want to clear the existing HTML content!
107+
Naravno da ne želite da obrišete postojeći HTML sadržaj!
107108

108-
Delete this code.
109+
Obrišite ovaj kod.
109110

110-
Instead, you probably want to render your React components in specific places in your HTML. Open your HTML page (or the server templates that generate it) and add a unique [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) attribute to any tag, for example:
111+
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`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) atribut bilo kom tag-u, na primer:
111112

112113
```html
114+
113115
<!-- ... somewhere in your html ... -->
114116
<nav id="navigation"></nav>
115117
<!-- ... more html ... -->
116118
```
117119

118-
This lets you find that HTML element with [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) and pass it to [`createRoot`](/reference/react-dom/client/createRoot) so that you can render your own React component inside:
120+
Ovo vam omogućava da pronađete taj HTML element sa [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) i prosledite ga [`createRoot`](/reference/react-dom/client/createRoot) tako da možete da renderujete vašu React komponentu unutra:
119121

120122
<Sandpack>
121123

122124
```html index.html
123125
<!DOCTYPE html>
124126
<html>
125-
<head><title>My app</title></head>
127+
<head><title>Moja Aplikacija</title></head>
126128
<body>
127-
<p>This paragraph is a part of HTML.</p>
129+
<p>Ovaj paragraf je deo HTML-a.</p>
128130
<nav id="navigation"></nav>
129-
<p>This paragraph is also a part of HTML.</p>
131+
<p>Ovaj paragraf je takođe deo HTML-a.</p>
130132
</body>
131133
</html>
132134
```
@@ -136,7 +138,7 @@ import { createRoot } from 'react-dom/client';
136138

137139
function NavigationBar() {
138140
// TODO: Actually implement a navigation bar
139-
return <h1>Hello from React!</h1>;
141+
return <h1>Pozdrav od React-a!</h1>;
140142
}
141143

142144
const domNode = document.getElementById('navigation');
@@ -146,10 +148,11 @@ root.render(<NavigationBar />);
146148

147149
</Sandpack>
148150

149-
Notice how the original HTML content from `index.html` is preserved, but your own `NavigationBar` React component now appears inside the `<nav id="navigation">` from your HTML. Read the [`createRoot` usage documentation](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) to learn more about rendering React components inside an existing HTML page.
151+
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](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) da biste saznali više o renderovanju React komponenti unutar postojeće HTML stranice.
152+
153+
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](/learn/start-a-new-react-project) da biste dobili najviše od React-a.
150154

151-
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](/learn/start-a-new-react-project) right after to get the most out of React.
155+
## Koristite React Native u postojećoj mobilnoj aplikaciji {/*using-react-native-in-an-existing-mobile-app*/}
152156

153-
## Using React Native in an existing native mobile app {/*using-react-native-in-an-existing-native-mobile-app*/}
157+
[React Native](https://reactnative.dev/) 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č](https://reactnative.dev/docs/integration-with-existing-apps) da biste dodali React Native ekran u nju.
154158

155-
[React Native](https://reactnative.dev/) can also be integrated into existing native apps incrementally. If you have an existing native app for Android (Java or Kotlin) or iOS (Objective-C or Swift), [follow this guide](https://reactnative.dev/docs/integration-with-existing-apps) to add a React Native screen to it.

0 commit comments

Comments
 (0)