From 727b8187e11c54cf52409709ec87f8d390c8ca82 Mon Sep 17 00:00:00 2001 From: cvijandj Date: Thu, 24 Aug 2023 11:09:12 +0200 Subject: [PATCH] translation of javascript-injsx-with-curly-braces.md and post-merge fix --- src/components/MDX/ExpandableExample.tsx | 10 - .../javascript-in-jsx-with-curly-braces.md | 285 +++++++++--------- 2 files changed, 143 insertions(+), 152 deletions(-) diff --git a/src/components/MDX/ExpandableExample.tsx b/src/components/MDX/ExpandableExample.tsx index 02264255c..ec5cf2609 100644 --- a/src/components/MDX/ExpandableExample.tsx +++ b/src/components/MDX/ExpandableExample.tsx @@ -70,24 +70,14 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) { })}> {isDeepDive && ( <> -<<<<<<< HEAD - - Istražite dublje -======= Deep Dive ->>>>>>> 842c24c9aefaa60b7ae9b46b002bd1b3cf4d31f3 )} {isExample && ( <> -<<<<<<< HEAD - - Primer -======= Example ->>>>>>> 842c24c9aefaa60b7ae9b46b002bd1b3cf4d31f3 )} 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 502916113..e0b3e99ad 100644 --- a/src/content/learn/javascript-in-jsx-with-curly-braces.md +++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md @@ -4,22 +4,21 @@ title: JavaScript in JSX with Curly Braces -JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to open a window to JavaScript. +JSX vam dovoljava da pišete HTML-sličnu oznaku unutar JavaScript dokumenta, čime se logika i sadržaj prikaza drže na istom meestu. Ponekad ćete hteti dodati malo JavaScript logike ili referencirati dinamično svojstvo unutar te oznake. U ovoj situaciji možete koristiti vitičaste zagrade u JSX-u da biste otvorili prozor u JavaScript. -* How to pass strings with quotes -* How to reference a JavaScript variable inside JSX with curly braces -* How to call a JavaScript function inside JSX with curly braces -* How to use a JavaScript object inside JSX with curly braces - +* Kako da prosledite stringove sa navodnicima +* Kako da referencirate JavaScript promenljivu unutar JSX-a sa vitičastim zagradama +* Kako da pozovete JavaScript funkciju unutar JSX-a sa vitičastim zagradama +* Kako da koristite JavaScript objekat unutar JSX-a sa vitičastim zagradama -## Passing strings with quotes {/*passing-strings-with-quotes*/} +## Prosleđivanje stringova sa navodnicima {/*passing-strings-with-quotes*/} -When you want to pass a string attribute to JSX, you put it in single or double quotes: +Kada želite da prosledite string atribut JSX-u, stavite ga u jednostruke ili dvostruke navodnike: @@ -41,21 +40,21 @@ export default function Avatar() { -Here, `"https://i.imgur.com/7vQD0fPs.jpg"` and `"Gregorio Y. Zara"` are being passed as strings. +Ovde, `"https://i.imgur.com/7vQD0fPs.jpg"` i `"Gregorio Y. Zara"` se prosleđuju kao stringovi. -But what if you want to dynamically specify the `src` or `alt` text? You could **use a value from JavaScript by replacing `"` and `"` with `{` and `}`**: +Ali šta ako želite da dinamički odredite `src` ili `alt` tekst? Možete **koristiti vrednost iz JavaScript-a zamenom `"` i `"` sa `{` i `}`**: ```js export default function Avatar() { const avatar = 'https://i.imgur.com/7vQD0fPs.jpg'; - const description = 'Gregorio Y. Zara'; + const opis = 'Gregorio Y. Zara'; return ( {description} ); } @@ -67,28 +66,28 @@ export default function Avatar() { -Notice the difference between `className="avatar"`, which specifies an `"avatar"` CSS class name that makes the image round, and `src={avatar}` that reads the value of the JavaScript variable called `avatar`. That's because curly braces let you work with JavaScript right there in your markup! +Primećujete razliku između `className="avatar"`, što određuje CSS klasu `"avatar"` koja čini sliku okruglom, i `src={avatar}` koja čita vrednost JavaScript promenljive koja se zove `avatar`. To je zato što vitičaste zagrade vam dozvoljavaju da radite sa JavaScript-om upravo tamo u vašem markup-u! -## Using curly braces: A window into the JavaScript world {/*using-curly-braces-a-window-into-the-javascript-world*/} +## Koristite vitičaste zagrade: Prozor u JavaScript svet {/*using-curly-braces-a-window-into-the-javascript-world*/} -JSX is a special way of writing JavaScript. That means it’s possible to use JavaScript inside it—with curly braces `{ }`. The example below first declares a name for the scientist, `name`, then embeds it with curly braces inside the `

`: +JSX je specijalan način pisanja JavaScript-a. To znači da je moguće koristiti JavaScript unutar njega - sa vitičastim zagradama `{ }`. Primer ispod prvo deklariše ime za naučnika, `ime`, a zatim ga ugnezduje(nest) sa vitičastim zagradama unutar `

`: ```js export default function TodoList() { - const name = 'Gregorio Y. Zara'; + const ime = 'Gregorio Y. Zara'; return ( -

{name}'s To Do List

+

{ime} spisak stvari za uraditi

); } ``` -Try changing the `name`'s value from `'Gregorio Y. Zara'` to `'Hedy Lamarr'`. See how the list title changes? +Pokušajte da promenite vrednost `ime` iz `'Gregorio Y. Zara'` u `'Hedy Lamarr'`. Pogledajte kako se naslov liste menja? -Any JavaScript expression will work between curly braces, including function calls like `formatDate()`: +Bilo koja JavaScript ekspresija će raditi između vitičastih zagrada, uključujući pozive funkcija kao što je `formatDate()`: @@ -104,25 +103,25 @@ function formatDate(date) { export default function TodoList() { return ( -

To Do List for {formatDate(today)}

+

Lista stvar iza uraditi za {formatDate(today)}

); } ``` -### Where to use curly braces {/*where-to-use-curly-braces*/} +### Gde koristiti vitičaste zagrade {/*where-to-use-curly-braces*/} -You can only use curly braces in two ways inside JSX: +Možete koristiti vitičaste zagrade samo na dva načina unutar JSX-a: -1. **As text** directly inside a JSX tag: `

{name}'s To Do List

` works, but `<{tag}>Gregorio Y. Zara's To Do List` will not. -2. **As attributes** immediately following the `=` sign: `src={avatar}` will read the `avatar` variable, but `src="{avatar}"` will pass the string `"{avatar}"`. +1. **Kao tekst** direktno unutar JSX oznake: `

{ime}l ista za uraditi

` radi, ali `<{tag}>Gregorio Y. Zara lista stvari za uraditi` neće. +2. **Kao atribute** odmah ispraćene znakom `=`: `src={avatar}` će pročitati promenljivu `avatar`, ali `src="{avatar}"` će proslediti string `"{avatar}"`. -## Using "double curlies": CSS and other objects in JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/} +## Koristite "duple vitičaste zagrade": CSS i drugi objekti u JSX-u {/*using-double-curlies-css-and-other-objects-in-jsx*/} -In addition to strings, numbers, and other JavaScript expressions, you can even pass objects in JSX. Objects are also denoted with curly braces, like `{ name: "Hedy Lamarr", inventions: 5 }`. Therefore, to pass a JS object in JSX, you must wrap the object in another pair of curly braces: `person={{ name: "Hedy Lamarr", inventions: 5 }}`. +Uz stringove, brojeve i druge JavaScript ekspresije, možete čak proslediti i objekte u JSX. Objekti se takođe označavaju vitičastim zagradama, kao `{ ime: "Hedy Lamarr", izumi: 5 }`. Stoga, da biste prosledili JS objekat u JSX, morate da umotate objekat u još jedan par vitičastih zagrada: `osoba={{ ime: "Hedy Lamarr", izumi: 5 }}`. -You may see this with inline CSS styles in JSX. React does not require you to use inline styles (CSS classes work great for most cases). But when you need an inline style, you pass an object to the `style` attribute: +Možda ćete videti ovo sa inline CSS stilovima u JSX-u. React ne zahteva da koristite inline stilove (CSS klase rade odlično za većinu slučajeva). Ali kada vam je potreban inline stil, prosledite objekat atributu `style`: @@ -133,9 +132,9 @@ export default function TodoList() { backgroundColor: 'black', color: 'pink' }}> -
  • Improve the videophone
    • -
  • Prepare aeronautics lectures
    • -
  • Work on the alcohol-fuelled engine
    • +
  • Unaprediti video-telefon
    • +
  • Pripremiti predavanja iz aeronautike
    • +
  • Raditi na motoru na alkohol
    • ); } @@ -148,9 +147,9 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }     -Try changing the values of `backgroundColor` and `color`. +Pokušajte da promenite vrednosti `backgroundColor` i `color`. -You can really see the JavaScript object inside the curly braces when you write it like this: +Stvarno možete videti JavaScript objekat unutar vitičastih zagrada kada ga napišete ovako: ```js {2-5}
      ``` -The next time you see `{{` and `}}` in JSX, know that it's nothing more than an object inside the JSX curlies! +Sledeći put kada vidite `{{` i `}}` u JSX-u, znajte da je to ništa više od objekta unutar JSX vitičastih zagrada! -Inline `style` properties are written in camelCase. For example, HTML `
        ` would be written as `
          ` in your component. +Inline `style` svojstva se pišu u camelCase. Na primer, HTML `
            ` bi se napisao kao `
              ` u vašoj komponenti. -## More fun with JavaScript objects and curly braces {/*more-fun-with-javascript-objects-and-curly-braces*/} -You can move several expressions into one object, and reference them in your JSX inside curly braces: +## Još zabave sa JavaScript objektima i vitičastim zagradama {/*more-fun-with-javascript-objects-and-curly-braces*/} + +Možete da prosledite više JavaScript ekspresija u jedan objekat, i da ih referencirate u vašem JSX-u unutar vitičastih zagrada: ```js -const person = { - name: 'Gregorio Y. Zara', - theme: { +const osoba = { + ime: 'Gregorio Y. Zara', + tema: { backgroundColor: 'black', color: 'pink' } @@ -186,17 +186,17 @@ const person = { export default function TodoList() { return ( -
              -

              {person.name}'s Todos

              +
              +

              {osoba.ime} lista

              Gregorio Y. Zara
                -
              • Improve the videophone
                • -
              • Prepare aeronautics lectures
                • -
              • Work on the alcohol-fuelled engine
                • +
              • Unaprediti video-telefon
                • +
              • Pripremiti predavanja iz aeronautike
                • +
              • Raditi na motoru na alkohol
              ); @@ -211,50 +211,50 @@ body > div > div { padding: 20px; } -In this example, the `person` JavaScript object contains a `name` string and a `theme` object: +U ovom primeru JavaScript objekat `osoba` sadrži string `ime` i objekat `tema`: ```js -const person = { - name: 'Gregorio Y. Zara', - theme: { +const osoba = { + ime: 'Gregorio Y. Zara', + tema: { backgroundColor: 'black', color: 'pink' } }; ``` -The component can use these values from `person` like so: +Komponenta može da koristi ove vrednosti iz `osoba` ovako: ```js -
              -

              {person.name}'s Todos

              +
              +

              {osoba.ime}' lista

              ``` -JSX is very minimal as a templating language because it lets you organize data and logic using JavaScript. +JSX je veoma minimalan kao jezik za šabloniranje jer vam omogućava da organizujete podatke i logiku koristeći JavaScript. -Now you know almost everything about JSX: +Sada znate skoro sve o JSX-u: -* JSX attributes inside quotes are passed as strings. -* Curly braces let you bring JavaScript logic and variables into your markup. -* They work inside the JSX tag content or immediately after `=` in attributes. -* `{{` and `}}` is not special syntax: it's a JavaScript object tucked inside JSX curly braces. +* JSX atributi unutar navodnika se prosleđuju kao stringovi. +* Vitičaste zagrade vam omogućavaju da unesete JavaScript logiku i promenljive u vaš markup. +* One rade unutar JSX oznake ili odmah nakon `=` u atributima. +* `{{` i `}}` nisu specijalna sintaksa: to je JavaScript objekat koji je umotan u JSX vitičaste zagrade. -#### Fix the mistake {/*fix-the-mistake*/} +#### Popravite grešku {/*fix-the-mistake*/} -This code crashes with an error saying `Objects are not valid as a React child`: +Ovaj kod ne radi sa greškom koja kaže `Objects are not valid as a React child`: ```js -const person = { - name: 'Gregorio Y. Zara', - theme: { +const osoba = { + ime: 'Gregorio Y. Zara', + tema: { backgroundColor: 'black', color: 'pink' } @@ -262,17 +262,17 @@ const person = { export default function TodoList() { return ( -
              -

              {person}'s Todos

              +
              +

              {osoba}' lista

              Gregorio Y. Zara
                -
              • Improve the videophone
                • -
              • Prepare aeronautics lectures
                • -
              • Work on the alcohol-fuelled engine
                • +
              • Unaprediti video-telefon
                • +
              • Pripremiti predavanja iz aeronautike
                • +
              • Raditi na motoru na alkohol
              ); @@ -287,22 +287,22 @@ body > div > div { padding: 20px; } -Can you find the problem? +Možete li da nađete problem? -Look for what's inside the curly braces. Are we putting the right thing there? +Poglejte šta je unutar vitičastih zagrada. Da li stavljamo pravu stvar tamo? -This is happening because this example renders *an object itself* into the markup rather than a string: `

              {person}'s Todos

              ` is trying to render the entire `person` object! Including raw objects as text content throws an error because React doesn't know how you want to display them. +Ovo se dešava zato što ovaj primer renderuje *objekat sam po sebi* u markup umesto stringa: `

              {osoba}' lista

              ` pokušava da renderuje ceo `osoba` objekat! Uključivanje sirovih objekata kao tekstualnog sadržaja baca grešku jer React ne zna kako želite da ih prikažete. -To fix it, replace `

              {person}'s Todos

              ` with `

              {person.name}'s Todos

              `: +Popraw to, zamenite `

              {osoba}' lista

              ` sa `

              {osoba.ime}' lista

              `: ```js -const person = { - name: 'Gregorio Y. Zara', - theme: { +const osoba = { + ime: 'Gregorio Y. Zara', + tema: { backgroundColor: 'black', color: 'pink' } @@ -310,17 +310,17 @@ const person = { export default function TodoList() { return ( -
              -

              {person.name}'s Todos

              +
              +

              {osoba.ime} lista

              Gregorio Y. Zara
                -
              • Improve the videophone
                • -
              • Prepare aeronautics lectures
                • -
              • Work on the alcohol-fuelled engine
                • +
              • Unaprediti video-telefon
                • +
              • Pripremiti predavanja iz aeronautike
                • +
              • Raditi na motoru na alkohol
              ); @@ -337,16 +337,16 @@ body > div > div { padding: 20px; } -#### Extract information into an object {/*extract-information-into-an-object*/} +#### Izdvojite informacije u objekat {/*extract-information-into-an-object*/} -Extract the image URL into the `person` object. +Izdvojite URL slike u `osoba` objekat. ```js -const person = { - name: 'Gregorio Y. Zara', - theme: { +const osoba = { + ime: 'Gregorio Y. Zara', + tema: { backgroundColor: 'black', color: 'pink' } @@ -354,17 +354,17 @@ const person = { export default function TodoList() { return ( -
              -

              {person.name}'s Todos

              +
              +

              {osoba.ime} lista

              Gregorio Y. Zara
                -
              • Improve the videophone
                • -
              • Prepare aeronautics lectures
                • -
              • Work on the alcohol-fuelled engine
                • +
              • Unaprediti video-telefon
                • +
              • Pripremiti predavanja iz aeronautike
                • +
              • Raditi na motoru na alkohol
              ); @@ -381,15 +381,15 @@ body > div > div { padding: 20px; } -Move the image URL into a property called `person.imageUrl` and read it from the `` tag using the curlies: +Pomerite URL slike u svojstvo `osoba.imageUrl` i pročitajte ga iz `` oznake koristeći vitičaste zagrade: ```js -const person = { - name: 'Gregorio Y. Zara', +const osoba = { + ime: 'Gregorio Y. Zara', imageUrl: "https://i.imgur.com/7vQD0fPs.jpg", - theme: { + tema: { backgroundColor: 'black', color: 'pink' } @@ -397,17 +397,17 @@ const person = { export default function TodoList() { return ( -
              -

              {person.name}'s Todos

              +
              +

              {osoba.ime} lista

              Gregorio Y. Zara
                -
              • Improve the videophone
                • -
              • Prepare aeronautics lectures
                • -
              • Work on the alcohol-fuelled engine
                • +
              • Unaprediti video-telefon
                • +
              • Pripremiti predavanja iz aeronautike
                • +
              • Raditi na motoru na alkohol
              ); @@ -424,24 +424,25 @@ body > div > div { padding: 20px; } -#### Write an expression inside JSX curly braces {/*write-an-expression-inside-jsx-curly-braces*/} -In the object below, the full image URL is split into four parts: base URL, `imageId`, `imageSize`, and file extension. +#### Napišite jednu ekspresiju 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. -We want the image URL to combine these attributes together: base URL (always `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`), and file extension (always `'.jpg'`). However, something is wrong with how the `` tag specifies its `src`. +Mi želimo da URL slike kombinuje ove atribute zajedno: bazni URL (uvek `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`), i ekstenzija fajla (uvek `'.jpg'`). Međutim, nešto nije u redu sa načinom na koji `` oznaka određuje svoj `src`. -Can you fix it? +Možete li da popravite ovo? ```js const baseUrl = 'https://i.imgur.com/'; -const person = { - name: 'Gregorio Y. Zara', +const osoba = { + ime: 'Gregorio Y. Zara', imageId: '7vQD0fP', imageSize: 's', - theme: { + tema: { backgroundColor: 'black', color: 'pink' } @@ -449,17 +450,17 @@ const person = { export default function TodoList() { return ( -
              -

              {person.name}'s Todos

              +
              +

              {osoba.ime} lista

              {person.name}
                -
              • Improve the videophone
                • -
              • Prepare aeronautics lectures
                • -
              • Work on the alcohol-fuelled engine
                • +
              • Unaprediti video-telefon
                • +
              • Pripremiti predavanja iz aeronautike
                • +
              • Raditi na motoru na alkohol
              ); @@ -474,25 +475,25 @@ body > div > div { padding: 20px; } -To check that your fix worked, try changing the value of `imageSize` to `'b'`. The image should resize after your edit. +Da proverite da li je vaša popravka uspela, pokušajte da promenite vrednost `imageSize` u `'b'`. Slika bi trebalo da se promeni nakon vaše izmene. -You can write it as `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`. +Možete napisati kao `src={baseUrl + osoba.imageId + osoba.imageSize + '.jpg'}`: -1. `{` opens the JavaScript expression -2. `baseUrl + person.imageId + person.imageSize + '.jpg'` produces the correct URL string -3. `}` closes the JavaScript expression +1. `{` otvara JavaScript ekspresiju +2. `baseUrl + person.imageId + person.imageSize + '.jpg'` proizvodi ispravan URL string +3. `}` zatvara JavaScript ekspresiju ```js const baseUrl = 'https://i.imgur.com/'; -const person = { - name: 'Gregorio Y. Zara', +const osoba = { + ime: 'Gregorio Y. Zara', imageId: '7vQD0fP', imageSize: 's', - theme: { + tema: { backgroundColor: 'black', color: 'pink' } @@ -500,17 +501,17 @@ const person = { export default function TodoList() { return ( -
              -

              {person.name}'s Todos

              +
              +

              {osoba.ime} lista

              {person.name}
                -
              • Improve the videophone
                • -
              • Prepare aeronautics lectures
                • -
              • Work on the alcohol-fuelled engine
                • +
              • Unaprediti video-telefon
                • +
              • Pripremiti predavanja iz aeronautike
                • +
              • Raditi na motoru na alkohol
              ); @@ -525,18 +526,18 @@ body > div > div { padding: 20px; } -You can also move this expression into a separate function like `getImageUrl` below: +Možete pomeriti i ekspresiju u zasebnu funkciju kao što je `getImageUrl` ispod: ```js App.js import { getImageUrl } from './utils.js' -const person = { - name: 'Gregorio Y. Zara', +const osoba = { + ime: 'Gregorio Y. Zara', imageId: '7vQD0fP', imageSize: 's', - theme: { + tema: { backgroundColor: 'black', color: 'pink' } @@ -544,17 +545,17 @@ const person = { export default function TodoList() { return ( -
              -

              {person.name}'s Todos

              +
              +

              {osoba.ime} lista

              {person.name}
                -
              • Improve the videophone
                • -
              • Prepare aeronautics lectures
                • -
              • Work on the alcohol-fuelled engine
                • +
              • Unaprediti video-telefon
                • +
              • Pripremiti predavanja iz aeronautike
                • +
              • Raditi na motoru na alkohol
              ); @@ -562,11 +563,11 @@ export default function TodoList() { ``` ```js utils.js -export function getImageUrl(person) { +export function getImageUrl(osoba) { return ( 'https://i.imgur.com/' + - person.imageId + - person.imageSize + + osoba.imageId + + osoba.imageSize + '.jpg' ); } @@ -580,7 +581,7 @@ body > div > div { padding: 20px; } -Variables and functions can help you keep the markup simple! +Promenljive i funkcije vam mogu pomoći da održite markup jednostavnim!