Adding interactivity #104
Merged
Adding interactivity #104
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
|
Thanks for this, I'll check it tomorrow. |
rammba
approved these changes
Nov 26, 2024
There was a problem hiding this comment.
Hey @lxmarinkovic, thanks for translating this page. 🚀
I've added few comments and suggestions. We can fix suggestions now and bigger ones to left for later, or just merge this one if you prefer it like that. I think it's easier to batch suggestions into one commit and resolve them in one go if you agree.
| * [How to queue multiple state updates](/learn/queueing-a-series-of-state-updates) | ||
| * [How to update an object in state](/learn/updating-objects-in-state) | ||
| * [How to update an array in state](/learn/updating-arrays-in-state) | ||
| * [Kako da rukujette event-ima koje pokrene korisnik](/learn/responding-to-events) |
There was a problem hiding this comment.
Suggested change
| * [Kako da rukujette event-ima koje pokrene korisnik](/learn/responding-to-events) | |
| * [Kako da rukujete event-ima koje pokrene korisnik](/learn/responding-to-events) |
|
|
||
| Built-in components like `<button>` only support built-in browser events like `onClick`. However, you can also create your own components, and give their event handler props any application-specific names that you like. | ||
| Ugrađene component-e poput `<button>` podržavaju samo ugrađene browser event-e poput `onClick`. Međutim, možete kreirati i sopstvene component-e i njihovim event handler prop-ovima dati bilo koja aplikacijski specifična imena koja želite. |
There was a problem hiding this comment.
Suggested change
| Ugrađene component-e poput `<button>` podržavaju samo ugrađene browser event-e poput `onClick`. Međutim, možete kreirati i sopstvene component-e i njihovim event handler prop-ovima dati bilo koja aplikacijski specifična imena koja želite. | |
| Ugrađene component-e poput `<button>` podržavaju samo ugrađene browser event-e poput `onClick`. Međutim, možete kreirati i sopstvene component-e i njihovim event handler prop-ovima dati bilo koja aplikacijski specifična imena. |
I think we don't need to specify koja želite at the end of this sentence.
|
|
||
| Components often need to change what's on the screen as a result of an interaction. Typing into the form should update the input field, clicking "next" on an image carousel should change which image is displayed, clicking "buy" puts a product in the shopping cart. Components need to "remember" things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called *state.* | ||
| Component-e često moraju da promene ono što je prikazano na ekranu kao rezultat neke interakcije. Kucanje u formu treba da update-uje polje za unos, klik na "sledeće" u karuselu slika treba da promeni prikazanu sliku, klik na "kupi" stavlja proizvod u korpu. Component-e moraju da "pamte" određene stvari: trenutnu vrednost unosa, trenutnu sliku, korpu za kupovinu. U React-u, ova vrsta memorije specifična za component-e naziva se *state.* |
There was a problem hiding this comment.
Suggested change
| Component-e često moraju da promene ono što je prikazano na ekranu kao rezultat neke interakcije. Kucanje u formu treba da update-uje polje za unos, klik na "sledeće" u karuselu slika treba da promeni prikazanu sliku, klik na "kupi" stavlja proizvod u korpu. Component-e moraju da "pamte" određene stvari: trenutnu vrednost unosa, trenutnu sliku, korpu za kupovinu. U React-u, ova vrsta memorije specifična za component-e naziva se *state.* | |
| Component-e često moraju da promene ono što je prikazano na ekranu kao rezultat neke interakcije. Kucanje u formu treba da update-uje polje za unos, klik na "sledeće" u carousel-u slika treba da promeni prikazanu sliku, klik na "kupi" stavlja proizvod u korpu. Component-e moraju da "pamte" određene stvari: trenutnu vrednost unosa, trenutnu sliku, korpu za kupovinu. U React-u, ova vrsta memorije specifična za component-e naziva se *state.* |
I would rather use english term than transliterating it to Serbian.
|
|
||
| You can add state to a component with a [`useState`](/reference/react/useState) Hook. *Hooks* are special functions that let your components use React features (state is one of those features). The `useState` Hook lets you declare a state variable. It takes the initial state and returns a pair of values: the current state, and a state setter function that lets you update it. | ||
| Možete dodati state component-i pomoću Hook-a [`useState`](/reference/react/useState). *Hook-ovi* su specijalne funkcije koje omogućavaju vašim component-ama da koriste React funkcionalnosti (state je jedna od tih funkcionalnosti). Hook `useState` vam omogućava da deklarišete varijablu state-a. On prima inicijalni state i vraća par vrednosti: trenutni state i funkciju za setovanje state-a koja vam omogućava da ga update-ujete. |
There was a problem hiding this comment.
Suggested change
| Možete dodati state component-i pomoću Hook-a [`useState`](/reference/react/useState). *Hook-ovi* su specijalne funkcije koje omogućavaju vašim component-ama da koriste React funkcionalnosti (state je jedna od tih funkcionalnosti). Hook `useState` vam omogućava da deklarišete varijablu state-a. On prima inicijalni state i vraća par vrednosti: trenutni state i funkciju za setovanje state-a koja vam omogućava da ga update-ujete. | |
| Možete dodati state component-i pomoću Hook-a [`useState`](/reference/react/useState). *Hook-ovi* su specijalne funkcije koje omogućavaju vašim component-ama da koriste React funkcionalnosti (state je jedna od tih funkcionalnosti). Hook `useState` vam omogućava da deklarišete promenljivu state-a. On prima inicijalni state i vraća par vrednosti: trenutni state i funkciju za setovanje state-a koja vam omogućava da ga update-ujete. |
| <Illustration caption="Commit" alt="React delivers the Card to the user at their table." src="/images/docs/illustrations/i_render-and-commit3.png" /> | ||
| <Illustration caption="Trigger" alt="React kao konobar u restoranu, prenosi narudžbine od korisnika i dostavlja ih u Component-u Kitchen." src="/images/docs/illustrations/i_render-and-commit1.png" /> | ||
| <Illustration caption="Render" alt="Šef kuhinje za Card daje React-u svežu Card component-u." src="/images/docs/illustrations/i_render-and-commit2.png" /> | ||
| <Illustration caption="Commit" alt="React donosi Card korisniku za njihov sto." src="/images/docs/illustrations/i_render-and-commit3.png" /> |
There was a problem hiding this comment.
Suggested change
| <Illustration caption="Commit" alt="React donosi Card korisniku za njihov sto." src="/images/docs/illustrations/i_render-and-commit3.png" /> | |
| <Illustration caption="Commit" alt="React donosi Card korisniku za njegov sto." src="/images/docs/illustrations/i_render-and-commit3.png" /> |
|
|
||
| Unlike regular JavaScript variables, React state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render. This can be surprising at first! | ||
| Za razliku od običnih JavaScript varijabli, React state se ponaša više kao snapshot. Njegovo postavljanje ne menja već postojeću state varijablu, već umesto toga pokreće re-render. Ovo može biti iznenađujuće na početku! |
There was a problem hiding this comment.
Suggested change
| Za razliku od običnih JavaScript varijabli, React state se ponaša više kao snapshot. Njegovo postavljanje ne menja već postojeću state varijablu, već umesto toga pokreće re-render. Ovo može biti iznenađujuće na početku! | |
| Za razliku od običnih JavaScript promenljivih, React state se ponaša više kao snapshot. Njegovo postavljanje ne menja već postojeću state promenljivu, već umesto toga ponovo pokreće renderovanje. Ovo može biti iznenađujuće na početku! |
|
|
||
| Unlike regular JavaScript variables, React state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render. This can be surprising at first! | ||
| Za razliku od običnih JavaScript varijabli, React state se ponaša više kao snapshot. Njegovo postavljanje ne menja već postojeću state varijablu, već umesto toga pokreće re-render. Ovo može biti iznenađujuće na početku! | ||
|
|
||
| ```js | ||
| console.log(count); // 0 | ||
| setCount(count + 1); // Request a re-render with 1 |
There was a problem hiding this comment.
We should translate comments as well
| @@ -354,7 +353,7 @@ button { display: inline-block; margin: 10px; font-size: 20px; } | |||
|
|
|||
| </Sandpack> | |||
|
|
|||
| [State as a Snapshot](/learn/state-as-a-snapshot) explains why this is happening. Setting state requests a new re-render, but does not change it in the already running code. So `score` continues to be `0` right after you call `setScore(score + 1)`. | |||
| [State kao Snapshot](/learn/state-as-a-snapshot) objašnjava zašto se ovo dešava. Postavljanje state-a traži novo render-ovanje, ali ne menja njegovu vrednost u kodu koji se već izvršava. Tako `score` nastavlja da ima vrednost `0` odmah nakon što pozovete `setScore(score + 1)`. | |||
There was a problem hiding this comment.
Suggested change
| [State kao Snapshot](/learn/state-as-a-snapshot) objašnjava zašto se ovo dešava. Postavljanje state-a traži novo render-ovanje, ali ne menja njegovu vrednost u kodu koji se već izvršava. Tako `score` nastavlja da ima vrednost `0` odmah nakon što pozovete `setScore(score + 1)`. | |
| [State kao Snapshot](/learn/state-as-a-snapshot) objašnjava zašto se ovo dešava. Postavljanje state-a traži novo renderovanje, ali ne menja njegovu vrednost u kodu koji se već izvršava. Tako `score` nastavlja da ima vrednost `0` odmah nakon što pozovete `setScore(score + 1)`. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adding interactivity
Closes #103