diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 0a0df719..4b354655 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -188,7 +188,7 @@ Pročitajte **[Pisanje markup-a sa JSX](/learn/writing-markup-with-jsx)** da bis ## JavaScript u JSX-u sa vitičastim zagradama {/*javascript-in-jsx-with-curly-braces*/} -JSX vam dozvoljava da pišete markup sličan HTML-u unutar JavaScript fajla, čuvajući logiku prikazivanja i sadržaja na istom mestu. Ponekad ćete želeti da dodate malo JavaScript logike ili da referencirate dinamičko svojstvo unutar tog markup-a. U ovoj situaciji možete koristiti vitičaste zagrade u vašem JSX-u da "otvorite prozor" ka JavaScript-u: +JSX vam dozvoljava da pišete markup sličan HTML-u unutar JavaScript fajla, čuvajući logiku prikazivanja i sadržaja na istom mestu. Ponekad ćete želeti da dodate malo JavaScript logike ili da referencirate dinamičko polje unutar tog markup-a. U ovoj situaciji možete koristiti vitičaste zagrade u vašem JSX-u da "otvorite prozor" ka JavaScript-u: diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index 98a4b93a..b7684c61 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -245,7 +245,7 @@ Na ovoj stranici ste naučili: -#### Delite komponente dalje {/*split-the-components-further*/} +#### Deliti komponente dalje {/*split-the-components-further*/} Trenutno, `Gallery.js` export-uje i `Profile` i `Gallery`, što je malo zbunjujuće. diff --git a/src/content/learn/javascript-in-jsx-with-curly-braces.md b/src/content/learn/javascript-in-jsx-with-curly-braces.md index 5b1ed3c5..12209a14 100644 --- a/src/content/learn/javascript-in-jsx-with-curly-braces.md +++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md @@ -245,7 +245,7 @@ Sada znate skoro sve o JSX-u: -#### Popravite grešku {/*fix-the-mistake*/} +#### Popraviti grešku {/*fix-the-mistake*/} Ovaj kod ne radi sa greškom koja kaže `Objects are not valid as a React child`: @@ -337,7 +337,7 @@ body > div > div { padding: 20px; } -#### Izdvojite informacije u objekat {/*extract-information-into-an-object*/} +#### Izdvojiti informacije u objekat {/*extract-information-into-an-object*/} Izdvojite URL slike u `person` objekat. @@ -425,7 +425,7 @@ body > div > div { padding: 20px; } -#### Napišite jedan izraz unutar vitičastih zagrada {/*write-one-expression-inside-curly-braces*/} +#### Napisati jedan izraz unutar vitičastih zagrada {/*write-one-expression-inside-curly-braces*/} U objektu ispod, puni URL slike je podeljen na četiri dela: bazni URL, `imageId`, `imageSize` i ekstenzija fajla. diff --git a/src/content/learn/passing-props-to-a-component.md b/src/content/learn/passing-props-to-a-component.md index aae682d1..61306a68 100644 --- a/src/content/learn/passing-props-to-a-component.md +++ b/src/content/learn/passing-props-to-a-component.md @@ -1,26 +1,26 @@ --- -title: Passing Props to a Component +title: Prosleđivanje props-a u komponentu --- -React components use *props* to communicate with each other. Every parent component can pass some information to its child components by giving them props. Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, and functions. +React komponente koriste *props* da bi međusobno komunicirale. Svaka roditeljska komponenta može proslediti informacije svojoj deci tako što im daje props. Props-i vas možda podsećaju na HTML atribute, ali pomoću njih možete proslediti bilo koju JavaScript vrednost, uključujući objekte, nizove i funkcije. -* How to pass props to a component -* How to read props from a component -* How to specify default values for props -* How to pass some JSX to a component -* How props change over time +* Kako da prosledite props-e u komponentu +* Kako da pročitate props-e u komponenti +* Kako da definišete default vrednosti za props +* Kako da prosledite JSX komponenti +* Kako se props-i menjaju tokom vremena -## Familiar props {/*familiar-props*/} +## Poznati props-i {/*familiar-props*/} -Props are the information that you pass to a JSX tag. For example, `className`, `src`, `alt`, `width`, and `height` are some of the props you can pass to an ``: +Props-i su informacije koje prosleđujete u JSX tag. Na primer, `className`, `src`, `alt`, `width` i `height` su samo neki od props-a koje možete proslediti u ``: @@ -51,11 +51,11 @@ body { min-height: 120px; } -The props you can pass to an `` tag are predefined (ReactDOM conforms to [the HTML standard](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)). But you can pass any props to *your own* components, such as ``, to customize them. Here's how! +Props-i koje prosleđujete u `` tag su predefinisani (ReactDOM se prilagođava [HTML standardu](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)). Vi možete proslediti bilo koji props *vašim* komponentama, poput ``-a, da biste ih prilagodili svojim potrebama. Evo i kako! -## Passing props to a component {/*passing-props-to-a-component*/} +## Prosleđivanje props-a u komponentu {/*passing-props-to-a-component*/} -In this code, the `Profile` component isn't passing any props to its child component, `Avatar`: +U ovom primeru, `Profile` komponenta ne prosleđuje nikakav props svom detetu, `Avatar` komponenti: ```js export default function Profile() { @@ -65,11 +65,11 @@ export default function Profile() { } ``` -You can give `Avatar` some props in two steps. +U dva koraka možete dodati props u `Avatar`. -### Step 1: Pass props to the child component {/*step-1-pass-props-to-the-child-component*/} +### Korak 1: Proslediti props u dete komponentu {/*step-1-pass-props-to-the-child-component*/} -First, pass some props to `Avatar`. For example, let's pass two props: `person` (an object), and `size` (a number): +Prvo, prosledite props u `Avatar`. Na primer, prosledimo dva props-a: `person` (objekat) i `size` (broj): ```js export default function Profile() { @@ -84,25 +84,25 @@ export default function Profile() { -If double curly braces after `person=` confuse you, recall [they're merely an object](/learn/javascript-in-jsx-with-curly-braces#using-double-curlies-css-and-other-objects-in-jsx) inside the JSX curlies. +Ako vas duple vitičaste zagrade nakon `person=` zbunjuju, setite se da [one samo predstavljaju objekat](/learn/javascript-in-jsx-with-curly-braces#using-double-curlies-css-and-other-objects-in-jsx) unutar JSX vitičastih zagrada. -Now you can read these props inside the `Avatar` component. +Sada ove props-e možete pročitati unutar `Avatar` komponente. -### Step 2: Read props inside the child component {/*step-2-read-props-inside-the-child-component*/} +### Korak 2: Pročitati props unutar dečje komponente {/*step-2-read-props-inside-the-child-component*/} -You can read these props by listing their names `person, size` separated by the commas inside `({` and `})` directly after `function Avatar`. This lets you use them inside the `Avatar` code, like you would with a variable. +Možete pročitati ove props-e izlistavanjem njihovih imena `person, size` odvojenih zarezima unutar `({` i `})` odmah nakon `function Avatar`. Ovo vam omogućava da ih koristite unutar `Avatar` funkcije, kao bilo koju drugu promenljivu. ```js function Avatar({ person, size }) { - // person and size are available here + // person i size su dostupni ovde } ``` -Add some logic to `Avatar` that uses the `person` and `size` props for rendering, and you're done. +Dodajte neku logiku u `Avatar` koja će koristiti `person` i `size` props-e za renderovanje i gotovi ste. -Now you can configure `Avatar` to render in many different ways with different props. Try tweaking the values! +Sada možete konfigurisati `Avatar` da renderuje različite stvari uz pomoć različitih props-a. Probajte da menjate vrednosti! @@ -168,9 +168,9 @@ body { min-height: 120px; } -Props let you think about parent and child components independently. For example, you can change the `person` or the `size` props inside `Profile` without having to think about how `Avatar` uses them. Similarly, you can change how the `Avatar` uses these props, without looking at the `Profile`. +Props-i vam omogućavaju da odvojeno razmišljate o roditeljskim i dečjim komponentama. Na primer, možete promeniti `person` ili `size` props unutar `Profile`-a bez potrebe da razmišljate kako ih `Avatar` koristi. Slično tome, možete promeniti kako `Avatar` koristi te props-e bez gledanja u `Profile`. -You can think of props like "knobs" that you can adjust. They serve the same role as arguments serve for functions—in fact, props _are_ the only argument to your component! React component functions accept a single argument, a `props` object: +Props-e možete zamisliti kao "dugmiće" koje možete podešavati. Oni igraju istu ulogu kao i argumenti u funkcijama—u suštini, props-i _jesu_ jedini argument u vašoj komponenti! Funckije React komponenata prihvataju samo jedan argument, `props` objekat: ```js function Avatar(props) { @@ -180,11 +180,11 @@ function Avatar(props) { } ``` -Usually you don't need the whole `props` object itself, so you destructure it into individual props. +Uglavnom vam neće biti potreban ceo `props` objekat, već ćete ga dekonstruisati na pojedinačne props-e. -**Don't miss the pair of `{` and `}` curlies** inside of `(` and `)` when declaring props: +**Nemojte propustiti par vitičastih zagrada** unutar `(` i `)` prilikom deklaracije props-a: ```js function Avatar({ person, size }) { @@ -192,7 +192,7 @@ function Avatar({ person, size }) { } ``` -This syntax is called ["destructuring"](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Unpacking_fields_from_objects_passed_as_a_function_parameter) and is equivalent to reading properties from a function parameter: +Ova sintaksa se naziva ["dekonstruisanje"](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Unpacking_fields_from_objects_passed_as_a_function_parameter) i jednaka je čitanju polja od parametra funkcije: ```js function Avatar(props) { @@ -204,9 +204,9 @@ function Avatar(props) { -## Specifying a default value for a prop {/*specifying-a-default-value-for-a-prop*/} +## Definisanje default vrednosti za prop {/*specifying-a-default-value-for-a-prop*/} -If you want to give a prop a default value to fall back on when no value is specified, you can do it with the destructuring by putting `=` and the default value right after the parameter: +Ako želite da zadate default vrednost prop-u, koja će se koristiti kada vrednost nije definisana, to možete uraditi pomoću dekonstruisanja stavljajući `=` i default vrednost odmah nakon parametra: ```js function Avatar({ person, size = 100 }) { @@ -214,13 +214,13 @@ function Avatar({ person, size = 100 }) { } ``` -Now, if `` is rendered with no `size` prop, the `size` will be set to `100`. +Sada, ako se `` renderuje bez `size` prop-a, `size` će biti setovano na `100`. -The default value is only used if the `size` prop is missing or if you pass `size={undefined}`. But if you pass `size={null}` or `size={0}`, the default value will **not** be used. +Default vrednost je upotrebljena samo ako izostavite `size` prop ili ako prosledite `size={undefined}`. Ali, ako prosledite `size={null}` ili `size={0}`, default vrednost **neće** biti upotrebljena. -## Forwarding props with the JSX spread syntax {/*forwarding-props-with-the-jsx-spread-syntax*/} +## Prosleđivanje props-a sa JSX spread sintaksom {/*forwarding-props-with-the-jsx-spread-syntax*/} -Sometimes, passing props gets very repetitive: +Ponekad se prosleđivanje props-a može ponavljati: ```js function Profile({ person, size, isSepia, thickBorder }) { @@ -237,7 +237,7 @@ function Profile({ person, size, isSepia, thickBorder }) { } ``` -There's nothing wrong with repetitive code—it can be more legible. But at times you may value conciseness. Some components forward all of their props to their children, like how this `Profile` does with `Avatar`. Because they don't use any of their props directly, it can make sense to use a more concise "spread" syntax: +Nema ništa loše u ponavljanju koda—ponekad može biti čitljivije. Ali, nekada vam je potrebna sažetost. Neke komponente prosleđuju sve svoje props-e deci, kao što to `Profile` radi sa `Avatar`-om. Pošto one direktno ne koriste nijedan svoj prop, ima smisla upotrebiti koncizniju "spread" sintaksu: ```js function Profile(props) { @@ -249,13 +249,13 @@ function Profile(props) { } ``` -This forwards all of `Profile`'s props to the `Avatar` without listing each of their names. +Ovo prosleđuje sve props-e od `Profile`-a u `Avatar` bez izlistavanja njihovih imena pojedinačno. -**Use spread syntax with restraint.** If you're using it in every other component, something is wrong. Often, it indicates that you should split your components and pass children as JSX. More on that next! +**Koristite spread sintaksu odmereno.** Ako je koristite u svakoj komponenti, nešto nije u redu. To često označava da biste trebali podeliti komponente i proslediti decu kao JSX. Više u nastavku! -## Passing JSX as children {/*passing-jsx-as-children*/} +## Prosleđivanje JSX-a kao dece {/*passing-jsx-as-children*/} -It is common to nest built-in browser tags: +Ugnježdavanje ugrađenih (built-in) tag-ova je često: ```js
@@ -263,7 +263,7 @@ It is common to nest built-in browser tags:
``` -Sometimes you'll want to nest your own components the same way: +Ponekad želite da ugnjezdite vaše komponente na isti način: ```js @@ -271,7 +271,7 @@ Sometimes you'll want to nest your own components the same way: ``` -When you nest content inside a JSX tag, the parent component will receive that content in a prop called `children`. For example, the `Card` component below will receive a `children` prop set to `` and render it in a wrapper div: +Kada ugnjezdite sadržaj unutar JSX tag-a, roditeljska komponenta će primiti taj sadržaj kroz prop po imenu `children`. Na primer, `Card` komponenta ispod će primiti `children` prop setovan na `` i renderovati ga u wrapper div-u: @@ -347,17 +347,17 @@ export function getImageUrl(person, size = 's') { -Try replacing the `` inside `` with some text to see how the `Card` component can wrap any nested content. It doesn't need to "know" what's being rendered inside of it. You will see this flexible pattern in many places. +Pokušajte da promenite `` unutar ``-a sa nekim tekstom da biste videli kako `Card` komponenta može da obmota bilo koji ugnježdeni sadržaj. Ona ne mora da "zna" šta će biti renderovano unutar nje. Videćete ovaj fleksibilni obrazac na mnogim mestima. -You can think of a component with a `children` prop as having a "hole" that can be "filled in" by its parent components with arbitrary JSX. You will often use the `children` prop for visual wrappers: panels, grids, etc. +Komponentu sa `children` prop možete zamisliti kao da ima "šupljinu" koja će biti "popunjena" u njenim roditeljskim komponentama sa proizvoljnim JSX-om. Često ćete koristiti `children` prop za vizuelne wrapper-e: panel-e, grid-ove, itd. -## How props change over time {/*how-props-change-over-time*/} +## Kako se props-i menjaju tokom vremena {/*how-props-change-over-time*/} -The `Clock` component below receives two props from its parent component: `color` and `time`. (The parent component's code is omitted because it uses [state](/learn/state-a-components-memory), which we won't dive into just yet.) +`Clock` komponenta ispod prima dva props-a od svog roditelja: `color` i `time`. (Kod roditeljske komponente je izostavljen zato što koristi [state](/learn/state-a-components-memory), u koji nećemo zalaziti još uvek.) -Try changing the color in the select box below: +Pokušajte da promenite boju u primeru ispod: @@ -392,7 +392,7 @@ export default function App() { return (

- Pick a color:{' '} + Izaberite boju:{' '}