diff --git a/src/content/learn/installation.md b/src/content/learn/installation.md index 228e5419..d401bbc0 100644 --- a/src/content/learn/installation.md +++ b/src/content/learn/installation.md @@ -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 -<<<<<<< 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). ->>>>>>> fc29603434ec04621139738f4740caed89d659a7 ## Sledeći koraci {/*next-steps*/} diff --git a/src/content/learn/render-and-commit.md b/src/content/learn/render-and-commit.md index 66d3784e..c891c69b 100644 --- a/src/content/learn/render-and-commit.md +++ b/src/content/learn/render-and-commit.md @@ -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.) -<<<<<<< HEAD -======= - - - ->>>>>>> fc29603434ec04621139738f4740caed89d659a7 ## Korak 2: React renderuje vaše komponente {/*step-2-react-renders-your-components*/} @@ -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 @@ -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 ``, menjajući `value`, i da taj tekst neće nestati kad se komponenta ponovo renderuje: diff --git a/src/content/learn/state-a-components-memory.md b/src/content/learn/state-a-components-memory.md index 4b0099d1..c56ebb1c 100644 --- a/src/content/learn/state-a-components-memory.md +++ b/src/content/learn/state-a-components-memory.md @@ -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.) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index ebe637f4..c33c900e 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -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) @@ -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. @@ -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 @@ -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) { @@ -1568,11 +1556,7 @@ Nije važno da li definišete `calculateWinner` pre ili posle `Board` component- -<<<<<<< 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) {