Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 4 additions & 20 deletions src/content/learn/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,38 +36,22 @@ Da isprobate React lokalno na vašem računaru, [preuzmite ovu HTML stranicu](ht

Ako želite da napravite novu React aplikaciju, možete [kreirati React aplikaciju](/learn/creating-a-react-app) pomoću preporučenog framework-a.

<<<<<<< HEAD
## Napravite React framework {/*build-a-react-framework*/}
## Napravite React aplikaciju od nule {/*build-a-react-app-from-scratch*/}

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).
=======
## Build a React App from Scratch {/*build-a-react-app-from-scratch*/}

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).
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
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).

## Dodajte React u postojeći projekat {/*add-react-to-an-existing-project*/}

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

<<<<<<< HEAD
## Deprecated opcije {/*deprecated-options*/}
=======
>>>>>>> fc29603434ec04621139738f4740caed89d659a7

<Note>

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

Za više informacija, pogledajte [Gašenje Create React App](/blog/2025/02/14/sunsetting-create-react-app).
=======
#### Should I use Create React App? {/*should-i-use-create-react-app*/}
#### Da li trebam koristiti Create React App? {/*should-i-use-create-react-app*/}

No. Create React App has been deprecated. For more information, see [Sunsetting Create React App](/blog/2025/02/14/sunsetting-create-react-app).
Ne. Create React App je deprecated. Za više informacija, pogledajte [Gašenje Create React App](/blog/2025/02/14/sunsetting-create-react-app).

</Note>
>>>>>>> fc29603434ec04621139738f4740caed89d659a7

## Sledeći koraci {/*next-steps*/}

Expand Down
17 changes: 0 additions & 17 deletions src/content/learn/render-and-commit.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,15 +70,9 @@ Zakomentarišite `root.render()` poziv i vidite kako će komponenta nestati!
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.)

<IllustrationBlock sequential>
<<<<<<< HEAD
<Illustration caption="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" />
<Illustration caption="...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" />
<Illustration caption="...render!" alt="Šef kuhinje za Card daje React-u roze Card." src="/images/docs/illustrations/i_rerender3.png" />
=======
<Illustration caption="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" />
<Illustration caption="...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" />
<Illustration caption="...render!" alt="The Card Chef gives React the pink Card." src="/images/docs/illustrations/i_rerender3.png" />
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
</IllustrationBlock>

## Korak 2: React renderuje vaše komponente {/*step-2-react-renders-your-components*/}
Expand All @@ -90,11 +84,7 @@ Kada pokrenete render, React poziva vaše komponente da shvati šta da prikaže

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.

<<<<<<< HEAD
U narednom primeru, React će pozvati `Gallery()` i `Image()` nekoliko puta:
=======
In the following example, React will call `Gallery()` and `Image()` several times:
>>>>>>> fc29603434ec04621139738f4740caed89d659a7

<Sandpack>

Expand Down Expand Up @@ -158,17 +148,10 @@ Default ponašanje renderovanja svih komponenti ugnježdenih u ažuriranu kompon

## Korak 3: React commit-uje promene na DOM {/*step-3-react-commits-changes-to-the-dom*/}

<<<<<<< HEAD
Nakon renderovanja (pozivanja) vaših komponenata, React će izmeniti DOM.

* **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.
* **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.
=======
After rendering (calling) your components, React will modify the DOM.

* **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.
* **For re-renders,** React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output.
>>>>>>> fc29603434ec04621139738f4740caed89d659a7

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

Expand Down
6 changes: 1 addition & 5 deletions src/content/learn/state-a-components-memory.md
Original file line number Diff line number Diff line change
Expand Up @@ -1452,11 +1452,7 @@ Ako je vaš linter [konfigurisan za React](/learn/editor-setup#linting), trebali

#### Ukloniti nepotreban state {/*remove-unnecessary-state*/}

<<<<<<< HEAD
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, !".
=======
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.
>>>>>>> fc29603434ec04621139738f4740caed89d659a7
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.

Da biste popravili kod, uklonite nepotrebnu state promenljivu. (Diskutovaćemo zašto [ovo nije radilo](/learn/state-as-a-snapshot) kasnije.)

Expand Down
18 changes: 1 addition & 17 deletions src/content/learn/tutorial-tic-tac-toe.md
Original file line number Diff line number Diff line change
Expand Up @@ -295,11 +295,7 @@ export default function Square() {
}
```

<<<<<<< HEAD
Sekcija *browser* bi trebalo da prikazuje kvadrat sa X u njemu ovako:
=======
The _browser_ section should be displaying a square with an X in it like this:
>>>>>>> fc29603434ec04621139738f4740caed89d659a7

![kvadrat sa X](../images/tutorial/x-filled-square.png)

Expand Down Expand Up @@ -921,7 +917,7 @@ Za rad u lokalnom okruženju, React DevTools je dostupan kao ekstenzija za [Chro

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.

### Podizanje state-a {/*lifting-state-up*/}
### Podizanje state-a {/*lifting-state-up*/}

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.

Expand Down Expand Up @@ -1329,11 +1325,7 @@ Sumirajmo šta se dešava kada korisnik klikne na gornji levi kvadrat na vašoj
2. Funkcija `handleClick` koristi argument (`0`) da update-uje prvi element array-a `squares` sa `null` na `X`.
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`.

<<<<<<< HEAD
Na kraju, korisnik vidi da se gornji levi kvadrat promenio iz praznog u kvadrat sa `X` nakon što je kliknuo na njega.
=======
In the end the user sees that the upper left square has changed from empty to having an `X` after clicking it.
>>>>>>> fc29603434ec04621139738f4740caed89d659a7

<Note>

Expand Down Expand Up @@ -1414,11 +1406,7 @@ Ali čekajte, postoji problem. Pokušajte da kliknete na isti kvadrat više puta

`X` je prepisan sa `O`! Iako bi ovo moglo dodati veoma zanimljiv preokret igri, za sada ćemo se držati originalnih pravila.

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

```js {2,3,4}
function handleClick(i) {
Expand Down Expand Up @@ -1568,11 +1556,7 @@ Nije važno da li definišete `calculateWinner` pre ili posle `Board` component-

</Note>

<<<<<<< HEAD
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:
=======
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:
>>>>>>> fc29603434ec04621139738f4740caed89d659a7

```js {2}
function handleClick(i) {
Expand Down