You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
## Napravite React aplikaciju od nule {/*build-a-react-app-from-scratch*/}
41
40
42
-
Ako framework nije pogodan za vaš projekat, ili želite da započnete sa pravljenjem sopstvenog framework-a, možete [napraviti sopstveni React framework](/learn/building-a-react-framework).
43
-
=======
44
-
## Build a React App from Scratch {/*build-a-react-app-from-scratch*/}
45
-
46
-
If a framework is not a good fit for your project, you prefer to build your own framework, or you just want to learn the basics of a React app you can [build a React app from scratch](/learn/build-a-react-app-from-scratch).
47
-
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
41
+
Ako framework nije pogodan za vaš projekat, ako želite da napravite sopstveni framework, ili samo želite naučiti osnove React aplikacija, možete [napraviti React aplikaciju od nule](/learn/build-a-react-app-from-scratch).
48
42
49
43
## Dodajte React u postojeći projekat {/*add-react-to-an-existing-project*/}
50
44
51
45
Ako želite da isprobate React na vašem postojećem sajtu ili aplikaciji, možete [dodati React u postojeći projekat](/learn/add-react-to-an-existing-project).
52
46
53
-
<<<<<<< HEAD
54
-
## Deprecated opcije {/*deprecated-options*/}
55
-
=======
56
-
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
57
47
58
48
<Note>
59
49
60
-
<<<<<<< HEAD
61
-
Create React App je deprecated alat, koji je ranije bio preporučen za kreiranje novih React aplikacija. Ako želite da napravite novu React aplikaciju, možete [kreirati React aplikaciju](/learn/creating-a-react-app) pomoću preporučenog framework-a.
62
-
63
-
Za više informacija, pogledajte [Gašenje Create React App](/blog/2025/02/14/sunsetting-create-react-app).
64
-
=======
65
-
#### Should I use Create React App? {/*should-i-use-create-react-app*/}
50
+
#### Da li trebam koristiti Create React App? {/*should-i-use-create-react-app*/}
66
51
67
-
No. Create React App has been deprecated. For more information, see [Sunsetting Create React App](/blog/2025/02/14/sunsetting-create-react-app).
52
+
Ne. Create React App je deprecated. Za više informacija, pogledajte [Gašenje Create React App](/blog/2025/02/14/sunsetting-create-react-app).
Copy file name to clipboardExpand all lines: src/content/learn/render-and-commit.md
-17Lines changed: 0 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -70,15 +70,9 @@ Zakomentarišite `root.render()` poziv i vidite kako će komponenta nestati!
70
70
Kada je komponenta inicijalno renderovana, možete pokrenuti naredne rendere ažuriranjem state-a pomoću [`set` funkcije](/reference/react/useState#setstate). Ažuriranjem state-a vaše komponente automatski stavljate render u red čekanja. (Ovo možete zamisliti kao da gost restorana poručuje čaj, dezert i ostale stvari nakon prve porudžbine, u zavisnosti od state-a žeđi i gladi.)
71
71
72
72
<IllustrationBlocksequential>
73
-
<<<<<<< HEAD
74
73
<Illustrationcaption="Ažuriranje state-a..."alt="React kao konobar u restoranu, servira Card UI korisniku, koji je predstavljen kao čovek sa kursorom na glavi. Korisnik izražava da želi roze karticu, a ne crnu!"src="/images/docs/illustrations/i_rerender1.png" />
75
74
<Illustrationcaption="...pokreće..."alt="React se vraća u Kitchen komponentu i kaže šefu kuhinje za Card da mu treba roze Card."src="/images/docs/illustrations/i_rerender2.png" />
76
75
<Illustrationcaption="...render!"alt="Šef kuhinje za Card daje React-u roze Card."src="/images/docs/illustrations/i_rerender3.png" />
77
-
=======
78
-
<Illustrationcaption="State update..."alt="React as a server in a restaurant, serving a Card UI to the user, represented as a patron with a cursor for their head. The patron expresses they want a pink card, not a black one!"src="/images/docs/illustrations/i_rerender1.png" />
79
-
<Illustrationcaption="...triggers..."alt="React returns to the Component Kitchen and tells the Card Chef they need a pink Card."src="/images/docs/illustrations/i_rerender2.png" />
80
-
<Illustrationcaption="...render!"alt="The Card Chef gives React the pink Card."src="/images/docs/illustrations/i_rerender3.png" />
@@ -90,11 +84,7 @@ Kada pokrenete render, React poziva vaše komponente da shvati šta da prikaže
90
84
91
85
Ovaj proces je rekurzivan: ako ažurirana komponenta vrati drugu komponentu, React će renderovati _tu drugu_ komponentu, a ako ta komponenta takođe nešto vrati, renderovaće _to nešto_ sledeće, i tako dalje. Proces će se nastaviti dok god postoje ugnježdene komponente i React zna tačno šta treba biti prikazano na ekranu.
92
86
93
-
<<<<<<< HEAD
94
87
U narednom primeru, React će pozvati `Gallery()` i `Image()` nekoliko puta:
95
-
=======
96
-
In the following example, React will call `Gallery()` and `Image()` several times:
97
-
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
98
88
99
89
<Sandpack>
100
90
@@ -158,17 +148,10 @@ Default ponašanje renderovanja svih komponenti ugnježdenih u ažuriranu kompon
158
148
159
149
## Korak 3: React commit-uje promene na DOM {/*step-3-react-commits-changes-to-the-dom*/}
160
150
161
-
<<<<<<< HEAD
162
151
Nakon renderovanja (pozivanja) vaših komponenata, React će izmeniti DOM.
163
152
164
153
***Za inicijalni render**, React će koristiti [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API da postavi sve DOM čvorove koje je kreirao na ekran.
165
154
***Za ponovne rendere**, React će primeniti minimum neophodnih operacija (izračunatih tokom renderovanja!) da bi učinio da se DOM poklapa sa najnovijim rezultatom renderovanja.
166
-
=======
167
-
After rendering (calling) your components, React will modify the DOM.
168
-
169
-
***For the initial render,** React will use the [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) DOM API to put all the DOM nodes it has created on screen.
170
-
***For re-renders,** React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output.
171
-
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
172
155
173
156
**React menja DOM čvorove samo ako postoji razlika između rendera.** Na primer, ovde je komponenta koja se ponovo renderuje sa drugačijim props-ima koje dobija od roditelja svake sekunde. Primetite da možete dodati tekst u `<input>`, menjajući `value`, i da taj tekst neće nestati kad se komponenta ponovo renderuje:
Copy file name to clipboardExpand all lines: src/content/learn/state-a-components-memory.md
+1-5Lines changed: 1 addition & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1452,11 +1452,7 @@ Ako je vaš linter [konfigurisan za React](/learn/editor-setup#linting), trebali
1452
1452
1453
1453
#### Ukloniti nepotreban state {/*remove-unnecessary-state*/}
1454
1454
1455
-
<<<<<<< HEAD
1456
-
Kada se klikne dugme, ovaj primer treba pitati korisnika da unese ime, a onda da prikaže alert koji ga pozdravlja. Pokušali ste da koristite state da čuvate ime, ali iz nekog razloga uvek se prikazuje "Zdravo, !".
1457
-
=======
1458
-
When the button is clicked, this example should ask for the user's name and then display an alert greeting them. You tried to use state to keep the name, but for some reason the first time it shows "Hello, !", and then "Hello, [name]!" with the previous input every time after.
1459
-
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
1455
+
Kada se klikne dugme, ovaj primer treba pitati korisnika da unese ime, a onda da prikaže alert koji ga pozdravlja. Pokušali ste da koristite state da čuvate ime, ali iz nekog razloga prvi put se prikazuje "Zdravo, !", a svaki sledeći put se prikazuje "Zdravo, [ime]!" sa prethodnim input-om.
1460
1456
1461
1457
Da biste popravili kod, uklonite nepotrebnu state promenljivu. (Diskutovaćemo zašto [ovo nije radilo](/learn/state-as-a-snapshot) kasnije.)
Copy file name to clipboardExpand all lines: src/content/learn/tutorial-tic-tac-toe.md
+1-17Lines changed: 1 addition & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -295,11 +295,7 @@ export default function Square() {
295
295
}
296
296
```
297
297
298
-
<<<<<<< HEAD
299
298
Sekcija *browser* bi trebalo da prikazuje kvadrat sa X u njemu ovako:
300
-
=======
301
-
The _browser_ section should be displaying a square with an X in it like this:
302
-
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
303
299
304
300

305
301
@@ -921,7 +917,7 @@ Za rad u lokalnom okruženju, React DevTools je dostupan kao ekstenzija za [Chro
921
917
922
918
Do ovog trenutka, imate sve osnovne građevinske blokove za vašu iks-oks igru. Da biste je kompletirali, potrebno da naizmenično postavljate "X" i "O" na tablu, i potreban vam je način da odredite pobednika.
923
919
924
-
### Podizanje state-a {/*lifting-state-up*/}
920
+
### Podizanje state-a {/*lifting-state-up*/}
925
921
926
922
Trenutno svaka `Square` component-a čuva deo state-a igre. Da bi se proverilo ko je pobednik u igri iks-oks, `Board` bi morao nekako da zna state svake od 9 `Square` component-i.
927
923
@@ -1329,11 +1325,7 @@ Sumirajmo šta se dešava kada korisnik klikne na gornji levi kvadrat na vašoj
1329
1325
2. Funkcija `handleClick` koristi argument (`0`) da update-uje prvi element array-a `squares` sa `null` na `X`.
1330
1326
3. State `squares` iz `Board` component-e se update-uje, pa se `Board` i sve njene child component-e ponovo renderuju. Ovo izaziva promenu `value` prop-a component-e `Square` sa indeksom `0` iz `null` u `X`.
1331
1327
1332
-
<<<<<<< HEAD
1333
1328
Na kraju, korisnik vidi da se gornji levi kvadrat promenio iz praznog u kvadrat sa `X` nakon što je kliknuo na njega.
1334
-
=======
1335
-
In the end the user sees that the upper left square has changed from empty to having an `X` after clicking it.
1336
-
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
1337
1329
1338
1330
<Note>
1339
1331
@@ -1414,11 +1406,7 @@ Ali čekajte, postoji problem. Pokušajte da kliknete na isti kvadrat više puta
1414
1406
1415
1407
`X` je prepisan sa `O`! Iako bi ovo moglo dodati veoma zanimljiv preokret igri, za sada ćemo se držati originalnih pravila.
1416
1408
1417
-
<<<<<<< HEAD
1418
1409
Kada označite kvadrat sa `X` ili `O`, ne proveravate prvo da li kvadrat već ima vrednost `X` ili `O`. Ovo možete popraviti tako što ćete *ranije izaći* iz funkcije. Proverićete da li kvadrat već ima vrednost `X` ili `O`. Ako je kvadrat već popunjen, u funkciji `handleClick` vratićete se rano pomoću `return`—pre nego što funkcija pokuša da update-uje state table.
1419
-
=======
1420
-
When you mark a square with an `X` or an `O` you aren't first checking to see if the square already has an `X` or `O` value. You can fix this by *returning early*. You'll check to see if the square already has an `X` or an `O`. If the square is already filled, you will `return` in the `handleClick` function early--before it tries to update the board state.
1421
-
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
1422
1410
1423
1411
```js {2,3,4}
1424
1412
functionhandleClick(i) {
@@ -1568,11 +1556,7 @@ Nije važno da li definišete `calculateWinner` pre ili posle `Board` component-
1568
1556
1569
1557
</Note>
1570
1558
1571
-
<<<<<<< HEAD
1572
1559
Pozvaćete `calculateWinner(squares)` u funkciji `handleClick` unutar `Board` component-e kako biste proverili da li je neki igrač pobedio. Ovu proveru možete obaviti istovremeno kada proveravate da li je korisnik kliknuo na kvadrat koji već ima `X` ili `O`. Želeli bismo da se u oba slučaja funkcija završi ranije:
1573
-
=======
1574
-
You will call `calculateWinner(squares)` in the `Board` component's `handleClick` function to check if a player has won. You can perform this check at the same time you check if a user has clicked a square that already has an `X` or an `O`. We'd like to return early in both cases:
0 commit comments