diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md index f7b78006..81c9d0c1 100644 --- a/src/content/learn/add-react-to-an-existing-project.md +++ b/src/content/learn/add-react-to-an-existing-project.md @@ -16,7 +16,7 @@ Ako želite da dodate neku interaktivnost na postojeći projekat, ne morate ga p ## Koristite React za ceo subroute vašeg postojećeg sajta {/*using-react-for-an-entire-subroute-of-your-existing-website*/} -Recimo da imate postojeći veb sajt na `example.com` napravljen sa nekom drugom tehnologijom (kao što je Rails), i želite da implementirate sve rute koje počinju sa `example.com/some-app/` u potpunosti sa React-om. +Recimo da imate postojeći veb sajt na `example.com` napravljen sa nekom drugom tehnologijom (kao što je Rails) i želite da implementirate sve rute koje počinju sa `example.com/some-app/` u potpunosti sa React-om. Evo kako preporučujemo da to uradite: @@ -30,11 +30,11 @@ Mnogi React-based framework-ovi su full-stack i omogućavaju vašoj React aplika ## Koristite React za deo vaše postojeće stranice {/*using-react-for-a-part-of-your-existing-page*/} -Recimo da imate postojeću stranicu napravljenu sa nekom drugom tehnologijom (ili na serveru kao Rails, ili na klijentu kao Backbone), i želite da renderujete interaktivne React komponente negde na toj stranici. To je uobičajen način da se integriše React - zapravo, to je kako je većina React koda izgledala na Meta-u mnogo godina! +Recimo da imate postojeću stranicu napravljenu sa nekom drugom tehnologijom (ili na serveru kao Rails, ili na klijentu kao Backbone), i želite da renderujete interaktivne React komponente negde na toj stranici. To je uobičajen način da se integriše React - zapravo, to je kako je većina React koda izgledala na Meta-i mnogo godina! Ovo možete uraditi u dva koraka: -1. **Postavite JavaScript okruženje** koje vam omogućava da koristite [JSX sintaksu](/learn/writing-markup-with-jsx), podelite svoj kod u module sa [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) sintaksom, i koristite pakete (na primer, React) iz [npm](https://www.npmjs.com/) registra paketa. +1. **Postavite JavaScript okruženje** koje vam omogućava da koristite [JSX sintaksu](/learn/writing-markup-with-jsx), podelite svoj kod u module sa [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) sintaksom i koristite pakete (na primer, React) iz [npm](https://www.npmjs.com/) registra paketa. 2. **Renderujte vaše React komponente** gde želite da ih vidite na stranici. Tačan pristup zavisi od vašeg postojećeg podešavanja stranice, pa hajde da prođemo kroz neke detalje. @@ -43,11 +43,11 @@ Tačan pristup zavisi od vašeg postojećeg podešavanja stranice, pa hajde da p Modularno JavaScript okruženje vam omogućava da pišete vaše React komponente u pojedinačnim fajlovima, umesto da pišete sav vaš kod u jednom fajlu. Takođe vam omogućava da koristite sve divne pakete koje su objavili drugi programeri na [npm](https://www.npmjs.com/) registru - uključujući i React! Kako ćete to uraditi zavisi od vašeg postojećeg podešavanja: -* **Ako je vaša stranica već podeljena u fajlove koji koriste `import` naredbe,** pokušajte da koristite to podešavanje. Proverite da li pisanje `
` u vašem JS kodu izaziva sintaksnu grešku. Ako izaziva sintaksnu grešku, možda ćete morati da [transformišete vaš JS kod sa Babel-om](https://babeljs.io/setup), i omogućite [Babel React preset](https://babeljs.io/docs/babel-preset-react) da biste koristili JSX. +* **Ako je vaša stranica već podeljena u fajlove koji koriste `import` naredbe,** pokušajte da koristite to podešavanje. Proverite da li pisanje `
` u vašem JS kodu izaziva sintaksnu grešku. Ako izaziva sintaksnu grešku, možda ćete morati da [transformišete vaš JS kod sa Babel-om](https://babeljs.io/setup) i omogućite [Babel React preset](https://babeljs.io/docs/babel-preset-react) da biste koristili JSX. -* **Ako vaša stranica nema postojeće podešavanje za kompajliranje JavaScript modula,** postavite ga sa [Vite](https://vitejs.dev/). Vite zajednica održava [mnoge integracije sa backend framework-ovima](), ukjučujući Rails, Django, i Laravel. Ako vaš backend framework nije na listi, [pratite ovaj vodič](https://vitejs.dev/guide/backend-integration.html) da biste ručno integrisali Vite build-ove sa vašim backend-om. +* **Ako vaša stranica nema postojeće podešavanje za kompajliranje JavaScript modula,** postavite ga sa [Vite-om](https://vitejs.dev/). Vite zajednica održava [mnoge integracije sa backend framework-ovima](), ukjučujući Rails, Django i Laravel. Ako vaš backend framework nije na listi, [pratite ovaj vodič](https://vitejs.dev/guide/backend-integration.html) da biste ručno integrisali Vite build-ove sa vašim backend-om. -Da proverite da li vaše podešavanje radi, pokrenite ovu komandu u vašem projekt folderu: +Da proverite da li vaše podešavanje radi, pokrenite ovu komandu u folderu vašeg projekta: npm install react react-dom @@ -70,10 +70,10 @@ Onda dodajte ove linije koda na vrh vašeg glavnog JavaScript fajla (možda se z ```js src/index.js active import { createRoot } from 'react-dom/client'; -// Clear the existing HTML content +// Brisanje postojećeg HTML sadržaja document.body.innerHTML = '
'; -// Render your React component instead +// Renderovanje vaše React komponente umesto toga const root = createRoot(document.getElementById('app')); root.render(

Zdravo, svete!

); ``` @@ -96,10 +96,10 @@ U prethodnom koraku, dodali ste ovaj kod na vrh vašeg glavnog fajla: ```js import { createRoot } from 'react-dom/client'; -// Clear the existing HTML content +// Brisanje postojećeg HTML sadržaja document.body.innerHTML = '
'; -// Render your React component instead +// Renderovanje vaše React komponente umesto toga const root = createRoot(document.getElementById('app')); root.render(

Zdravo, svete!

); ``` @@ -112,9 +112,9 @@ Umesto toga, verovatno želite da renderujete vaše React komponente na specifi ```html - + - + ``` Ovo vam omogućava da pronađete taj HTML element sa [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) i prosledite ga [`createRoot`](/reference/react-dom/client/createRoot) tako da možete da renderujete vašu React komponentu unutra: @@ -137,7 +137,7 @@ Ovo vam omogućava da pronađete taj HTML element sa [`document.getElementById`] import { createRoot } from 'react-dom/client'; function NavigationBar() { - // TODO: Actually implement a navigation bar + // TODO: Zapravo implementirajte NavigationBar return

Pozdrav od React-a!

; } diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 888d2e48..0812d111 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -4,7 +4,7 @@ title: Opisivanje korisničkog interfejsa (UI) -React je JavaScript biblioteka za prikazivanje korisničkog interfejsa (UI). UI se sastoji od malih jedinica kao što su dugmad, tekst i slike. React vam omogućava da ih kombinujete u ponovljive, nested (ugnježdene) *komponente.* Od veb sajtova do telefonskih aplikacija, sve na ekranu može se razbiti na komponente. U ovoj glavi naučićete kako da kreirate, prilagodite i uslovno prikažete React komponente. +React je JavaScript biblioteka za prikazivanje korisničkog interfejsa (UI). UI se sastoji od malih jedinica kao što su dugmad, tekst i slike. React vam omogućava da ih kombinujete u ponovljive, nested (ugnježdene) *komponente.* Od veb sajtova do telefonskih aplikacija, sve na ekranu može se razbiti na komponente. U ovom poglavlju naučićete kako da kreirate, prilagodite i uslovno prikažete React komponente. @@ -24,7 +24,7 @@ React je JavaScript biblioteka za prikazivanje korisničkog interfejsa (UI). UI ## Vaša prva komponenta {/*your-first-component*/} -React aplikacije su izgrađene of izoliranih delova korisničkog interfejsa (UI) koje se zovu *komponente*. React komponenta je Javascript funkcija koju možete začiniti markup-om. Komponente mogu biti male kao dugme ili velike kao cela stranica. Ovde je `Gallery` komponenta koja prikazuje tri `Profile` komponente: +React aplikacije su izgrađene od izolovanih delova korisničkog interfejsa (UI) koje se zovu *komponente*. React komponenta je JavaScript funkcija koju možete začiniti markup-om. Komponente mogu biti male kao dugme ili velike kao cela stranica. Ovde je `Gallery` komponenta koja prikazuje tri `Profile` komponente: @@ -62,9 +62,9 @@ Pročitajte **[Vaša prva komponenta](/learn/your-first-component)** da biste na -## Importovanje i exportovanje komponenti {/*importing-and-exporting-components*/} +## Import-ovanje i export-ovanje komponenti {/*importing-and-exporting-components*/} -Možete deklarisati mnogo komponenti u jednom fajlu, ali veliki fajlovi mogu postati teški za navigaciju. Da biste to rešili, možete *exportovati* komponentu u svoj fajl, a zatim *importovati* tu komponentu iz drugog fajla: +Možete deklarisati mnogo komponenti u jednom fajlu, ali veliki fajlovi mogu postati teški za navigaciju. Da biste to rešili, možete *export-ovati* komponentu u svoj fajl, a zatim *import-ovati* tu komponentu iz drugog fajla: @@ -113,13 +113,13 @@ img { margin: 0 10px 10px 0; } -Pročitajte **[Importovanje i exportovanje komponenti](/learn/importing-and-exporting-components)** da biste naučili kako da podelite komponente u svoje fajlove. +Pročitajte **[Import-ovanje i export-ovanje komponenti](/learn/importing-and-exporting-components)** da biste naučili kako da podelite komponente u svoje fajlove. ## Pisanje markup-a sa JSX {/*writing-markup-with-jsx*/} -Svaka React komponenta je JavaScript funkcija koja može sadržati neki markup koji React prikazuje u browser-u. React komponente koriste sintaksu proširenja zvanu JSX da predstave taj markup. JSX izgleda mnogo kao HTML, ali je malo stroži i može prikazati dinamičke informacije. +Svaka React komponenta je JavaScript funkcija koja može sadržati neki markup koji React prikazuje u browser-u. React komponente koriste sintaksu proširenja zvanu JSX da predstave taj markup. JSX dosta liči na HTML, ali je malo strožiji i može prikazati dinamičke informacije. Ako kopirate postojeći HTML markup u React komponentu, neće uvek raditi: @@ -128,8 +128,8 @@ Ako kopirate postojeći HTML markup u React komponentu, neće uvek raditi: ```js export default function TodoList() { return ( - // This doesn't quite work! -

Hedy Lamarr's Todo lista

+ // Ovo baš i ne radi! +

Hedy Lamarr-ina Todo lista

Hedy Lamarr -

Hedy Lamarr's Todos

+

Hedy Lamarr-ina Todo lista

Hedy Lamarr @@ -211,9 +211,9 @@ export default function TodoList() { alt="Gregorio Y. Zara" />
    -
  • Unapredi the videophone
    • -
  • Pripremi predavanja iz aeronautike
    • -
  • Radi na motoru koji radi na alkohol
    • +
  • Unaprediti video-telefon
    • +
  • Pripremiti predavanja iz aeronautike
    • +
  • Raditi na motoru na alkohol
); @@ -236,7 +236,7 @@ Pročitajte **[JavaScript u JSX-u sa vitičastim zagradama](/learn/javascript-in ## Prosleđivanje props-a komponenti {/*passing-props-to-a-component*/} -React komponente koriste *props* da bi komunicirale jedna sa drugom. Svaki roditeljski(parent) komponent može proslediti neke informacije svojoj deci(children) pomoću props-a. Props vam mogu podsetiti na HTML atribute, ali možete proslediti bilo koju JavaScript vrednost kroz njih, uključujući objekte, nizove, funkcije i čak JSX! +React komponente koriste *props* da bi komunicirale jedna sa drugom. Svaka roditeljska (parent) komponenta može proslediti neke informacije svojoj deci (children) komponentama pomoću props-a. Props vas mogu podsetiti na HTML atribute, ali možete proslediti bilo koju JavaScript vrednost kroz njih, uključujući objekte, nizove, funkcije, čak i JSX! @@ -347,7 +347,7 @@ export default function PackingList() { /> @@ -391,7 +391,7 @@ export default function List() { ); return (
-

Scientists

+

Naučnici

    {listItems}
); @@ -402,31 +402,31 @@ export default function List() { export const people = [{ id: 0, name: 'Creola Katherine Johnson', - profession: 'mathematician', + profession: 'matematičarka', accomplishment: 'formula za svemirske letove', imageId: 'MK3eW3A' }, { id: 1, name: 'Mario José Molina-Pasquel Henríquez', - profession: 'chemist', + profession: 'hemičar', accomplishment: 'otkriće Arktičke rupe u ozonu', imageId: 'mynHUSa' }, { id: 2, name: 'Mohammad Abdus Salam', - profession: 'physicist', + profession: 'fizičar', accomplishment: 'teorija o elektromagnetizmu', imageId: 'bE7W1ji' }, { id: 3, name: 'Percy Lavon Julian', - profession: 'chemist', - accomplishment: 'pionirski kortizon, steroide i pilule za kontrolu rađanja', + profession: 'hemičar', + accomplishment: 'pionirski kortizon, steroidi i pilule za kontrolu rađanja', imageId: 'IOjWm71' }, { id: 4, name: 'Subrahmanyan Chandrasekhar', - profession: 'astrophysicist', + profession: 'astrofizičar', accomplishment: 'računanje mase belog patuljka', imageId: 'lrWQx8l' }]; @@ -468,7 +468,7 @@ Pročitajte **[Renderovanje liste](/learn/rendering-lists)** da biste naučili k Neke JavaScript funkcije su *čiste.* Čista funkcija: * **Gleda svoj posao.** Ne zavisi od bilo kakvih globalnih promenljivih ili stanja aplikacije. -* **Isti input, isti output.** Dajući isti input, čista funkcija uvek treba da vrati isti rezultat. +* **Isti input, isti output.** Dobijajući isti input, čista funkcija uvek treba da vrati isti rezultat. Striktno pisanje vaših komponenti kao čistih funkcija može da izbegne čitavu klasu zbunjujućih grešaka i nepredvidivog ponašanja kako vaša baza koda raste. Ovde je primer nečiste komponente: @@ -479,7 +479,7 @@ Striktno pisanje vaših komponenti kao čistih funkcija može da izbegne čitavu let guest = 0; function Cup() { - // Bad: changing a preexisting variable! + // Loše: promena postojeće promenljive! guest = guest + 1; return

Šolja čaja za gosta #{guest}

; } @@ -497,7 +497,7 @@ export default function TeaSet() { -Možete napraviti ovu komponentu čistom tako što ćete proslediti prop umesto što ćete modifikovati prethodno postojeću promenljivu: +Možete napraviti ovu komponentu čistom tako što ćete proslediti prop umesto što ćete modifikovati postojeću promenljivu: @@ -548,7 +548,7 @@ Primer modul zavisnosti stabla. -Drvo zavisnosti čest ose korišćeno od strane alata za izgradnju da bi se sve relevantne JavaScript datoteke za klijenta spakovalo u jednu datoteku. Velika veličina paketa regresira korisničko iskustvo za React aplikacije. Razumevanje modul zavisnosti stabla je korisno za otklanjanje grešaka. +Drvo zavisnosti često je korišćeno od strane alata za izgradnju da bi se sve JavaScript datoteke relevantne za klijenta spakovale u jednu datoteku. Velika veličina paketa regresira korisničko iskustvo za React aplikacije. Razumevanje modul zavisnosti stabla je korisno za otklanjanje grešaka. diff --git a/src/content/learn/editor-setup.md b/src/content/learn/editor-setup.md index 19d57548..404514bc 100644 --- a/src/content/learn/editor-setup.md +++ b/src/content/learn/editor-setup.md @@ -31,12 +31,12 @@ Neki editori dolaze sa ugrađenim funkcijama, dok drugi zahtevaju dodavanje ekst ### Linting {/*linting*/} -Linting alati pronalaze probleme u vašem kodu dok ga pišete, pomažući vam da ih ispravite na vreme. [ESLint](https://eslint.org/) je popularan, open source linter za JavaScript. +Linting alati pronalaze probleme u vašem kodu dok ga pišete, pomažući vam da ih ispravite na vreme. [ESLint](https://eslint.org/) je popularan open source linter za JavaScript. * [Instalirajte ESLint sa preporučenom konfiguracijom za React](https://www.npmjs.com/package/eslint-config-react-app) (budite sigurni da imate [Node instaliran!](https://nodejs.org/en/download/current/)) * [Integrišite ESLint u VSCode sa zvaničnom ekstenzijom](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) -**Budite sigurni da ste omogućili sve [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) pravila za vaš projekat.** Oni su esencijalni i hvataju najozbiljnije greške na vreme. Preporučena [`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) konfiguracija već ih uključuje. +**Budite sigurni da ste omogućili sva [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) pravila za vaš projekat.** Oni su esencijalni i hvataju najozbiljnije greške na vreme. Preporučena [`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) konfiguracija već ih uključuje. ### Formatiranje {/*formatting*/} @@ -59,4 +59,4 @@ Idealno, trebalo bi da formatirate vaš kod pri svakom čuvanju. VS Code ima pod 4. U pretraživaču, ukucajte "format on save" 5. Budite sigurni da je "format on save" opcija označena! -> Ako vaš ESLint preset ima pravila za formatiranje, ona mogu biti u konfliktu sa Prettier-om. Preporučujemo da onemogućite sva pravila za formatiranje u vašem ESLint presetu koristeći [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) tako da ESLint bude *samo* korišćen za hvatanje logičkih grešaka. Ako želite da primoravate da se fajlovi formatiraju pre nego što se spoje u glavnu granu, koristite [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) za vašu kontinuiranu integraciju. +> Ako vaš ESLint preset ima pravila za formatiranje, ona mogu biti u konfliktu sa Prettier-om. Preporučujemo da onemogućite sva pravila za formatiranje u vašem ESLint preset-u koristeći [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) tako da ESLint bude *samo* korišćen za hvatanje logičkih grešaka. Ako želite da primoravate da se fajlovi formatiraju pre nego što se spoje u glavnu granu, koristite [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) za vašu kontinuiranu integraciju. diff --git a/src/content/learn/index.md b/src/content/learn/index.md index 5e158af1..40eae1a7 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -4,7 +4,7 @@ title: Brzi Uvod -Dobrodošli u React dokumentaciju! Ova stranica pružiće vam uvod u 80% React koncepata koje ćete koristiti u svakodnevnom radu. +Dobro došli u React dokumentaciju! Ova stranica pružiće vam uvod u 80% React koncepata koje ćete koristiti u svakodnevnom radu. @@ -21,7 +21,7 @@ Dobrodošli u React dokumentaciju! Ova stranica pružiće vam uvod u 80% React k ## Kreiranje i umetanje komponenti {/*components*/} -React app-ovi su sačinjeni od *komponenti*. Komponenta je deo UI-a (korisničkog interfejsa) koji ima svoju logiku i izgled. Komponenta može biti mala kao dugme, ili velika kao cela stranica. +React aplikacije su sačinjene od *komponenti*. Komponenta je deo UI-a (korisničkog interfejsa) koji ima svoju logiku i izgled. Komponenta može biti mala kao dugme ili velika kao cela stranica. React komponente su JavaScript funkcije koje vraćaju markup: @@ -75,7 +75,7 @@ export default function MyApp() { Ključne reči `export default` određuju glavnu komponentu u fajlu. Ukoliko niste upoznati sa nekim delom JavaScript sintakse, [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) i [javascript.info](https://javascript.info/import-export) imaju odlične reference. -## Pisanje markupa sa JSX {/*writing-markup-with-jsx*/} +## Pisanje markup-a sa JSX {/*writing-markup-with-jsx*/} Sintaksa markup-a koju ste videli iznad se zove *JSX*. Ona nije obavezna, ali većina React projekata koristi JSX zbog njegove praktičnosti. Svi [alati koje preporučujemo za lokalni razvoj](/learn/installation) podržavaju JSX odmah po instalaciji. @@ -115,7 +115,7 @@ React ne propisuje kako dodajete CSS fajlove. U najjednostavnijem slučaju, doda ## Prikazivanje podataka {/*displaying-data*/} -JSX vam omogućava da ubacite markup u JavaScript. Kovrdžave zagrade vam omogućavaju da se "prebacite nazad" u JavaScript tako da možete ugraditi neku varijablu iz vašeg koda i prikazati je korisniku. Na primer, ovo će prikazati `user.name`: +JSX vam omogućava da ubacite markup u JavaScript. Vitičaste zagrade vam omogućavaju da se "prebacite nazad" u JavaScript tako da možete ugraditi neku varijablu iz vašeg koda i prikazati je korisniku. Na primer, ovo će prikazati `user.name`: ```js {3} return ( @@ -125,7 +125,7 @@ return ( ); ``` -Takođe možete se "prebaciti u JavaScript" iz JSX atributa, ali morate koristiti kovrdžave zagrade *umesto* navodnika. Na primer, `className="avatar"` prosleđuje `"avatar"` string kao CSS klasu, ali `src={user.imageUrl}` čita vrednost JavaScript `user.imageUrl` varijable, a zatim tu vrednost prosleđuje kao `src` atribut: +Takođe možete se "prebaciti u JavaScript" iz JSX atributa, ali morate koristiti vitičaste zagrade *umesto* navodnika. Na primer, `className="avatar"` prosleđuje `"avatar"` string kao CSS klasu, ali `src={user.imageUrl}` čita vrednost JavaScript `user.imageUrl` varijable, a zatim tu vrednost prosleđuje kao `src` atribut: ```js {3,4} return ( @@ -136,7 +136,7 @@ return ( ); ``` -Možete staviti i složenije izraze unutar JSX kovrdžavih zagrada, na primer, [konkatenaciju stringova](https://javascript.info/operators#string-concatenation-with-binary): +Možete staviti i složenije izraze unutar JSX vitičastih zagrada, na primer, [konkatenaciju stringova](https://javascript.info/operators#string-concatenation-with-binary): @@ -177,11 +177,11 @@ export default function Profile() { -U gore navedenom primeru, `style={{}}` nije posebna sintaksa, već običan `{}` objekat unutar `style={ }` JSX kovrdžavih zagrada. Možete koristiti `style` atribut kada se vaši style-ovi oslanjaju na JavaScript varijable. +U gore navedenom primeru, `style={{}}` nije posebna sintaksa, već običan `{}` objekat unutar `style={ }` JSX vitičastih zagrada. Možete koristiti `style` atribut kada se vaši style-ovi oslanjaju na JavaScript varijable. ## Kondicionalno renderovanje {/*conditional-rendering*/} -U React-u, nema posebne sintakse za pisanje kondicionih izraza. Umesto toga, koristićete iste tehnike kao kada pišete običan JavaScript kod. Na primer, možete koristiti [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) izraz za kondicionalno uključivanje JSX-a: +U React-u nema posebne sintakse za pisanje kondicionih izraza. Umesto toga, koristićete iste tehnike kao kada pišete običan JavaScript kod. Na primer, možete koristiti [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) izraz za kondicionalno uključivanje JSX-a: ```js let content; @@ -217,7 +217,7 @@ Kada vam nije potrebna `else` grana, možete koristiti i kraću [logičku `&&` s
``` -Svi ovi pristupi takođe rade i za kondicionalno specificiranje atributa. Ako niste upoznati sa oovim delovima JavaScript sintakse, možete početi tako što ćete uvek koristiti `if...else`. +Svi ovi pristupi takođe rade i za kondicionalno specificiranje atributa. Ako niste upoznati sa ovim delovima JavaScript sintakse, možete početi tako što ćete uvek koristiti `if...else`. ## Renderovanje listi {/*rendering-lists*/} @@ -280,7 +280,7 @@ export default function ShoppingList() { ## Odgovaranje na event-e {/*responding-to-events*/} -Možete odgovarati na event-e deklarisanjem *event handler-a* funkcija za obradu event-a unutar vaših komponenti: +Možete odgovarati na event-e deklarisanjem *event handler* funkcija za obradu event-a unutar vaših komponenti: ```js {2-4,7} function MyButton() { @@ -296,11 +296,11 @@ function MyButton() { } ``` -Obratite pažnju na to kako `onClick={handleClick}` nema zagrade na kraju! Ne treba da *pozivate* event handler funkciju: smo je treba *proslediti*. React će pozvati vaš event handler kada korisnik klikne na dugme. +Obratite pažnju na to kako `onClick={handleClick}` nema zagrade na kraju! Ne treba da *pozivate* event handler funkciju: samo je treba *proslediti*. React će pozvati vaš event handler kada korisnik klikne na dugme. ## Ažuriranje ekrana {/*updating-the-screen*/} -Često ćete želite da vaša komponenta "zapamti" neke informacije i prikaže ih. Na primer, možda želite da prebrojite koliko puta je dugme kliknuto. To do this, add *stanje (state)* u svoju komponentu. +Često ćete želeti da vaša komponenta "zapamti" neke informacije i prikaže ih. Na primer, možda želite da prebrojite koliko puta je dugme kliknuto. Da biste to uradili, dodajte *stanje (state)* u svoju komponentu. Prvo, uvezite [`useState`](/reference/react/useState) iz React-a: @@ -316,7 +316,7 @@ function MyButton() { // ... ``` -Od`useState` dobićete dobiti dve stvari: trenutni state (`count`), i funkciju koja vam omogućava da ga ažurirate (`setCount`). Možete im dati bilo koja imena, ali je konvencija da pišete `[nešto, setNešto]`. +Od `useState` dobićete dve stvari: trenutni state (`count`), i funkciju koja vam omogućava da ga ažurirate (`setCount`). Možete im dati bilo koja imena, ali je konvencija da pišete `[nešto, setNešto]`. Prvi put kada se dugme prikaže, `count` će biti `0` jer ste `0` prosledili u `useState()`. Kada želite da promenite state, pozovite `setCount()` i prosledite joj novu vrednost. Klikom na ovo dugme inkrementujte brojač: @@ -381,15 +381,15 @@ button { Primetite kako svako dugme "pamti" svoj sopstveni state brojača `count` i ne utiče na drugu dugmad. -## Korišćenje Hookova {/*using-hooks*/} +## Korišćenje Hook-ova {/*using-hooks*/} -Funkcije koje počinju sa `use` nazivaju se *Hookovi*. `useState` je ugrađeni Hook koji pruža React. Možete pronaći i druge ugrađene Hookove u [API referenci.](/reference/react) Takođe, možete pisati svoje sopstvene Hookove kombinovanjem postojećih. +Funkcije koje počinju sa `use` nazivaju se *Hook-ovi*. `useState` je ugrađeni Hook koji pruža React. Možete pronaći i druge ugrađene Hook-ove u [API referenci.](/reference/react) Takođe, možete pisati svoje sopstvene Hook-ove kombinovanjem postojećih. -Hookovi su restriktivniji od ostalih funkcija. Hookove možete pozivati samo na vrhu svojih komponenata (ili drugih Hookova). Ukoliko nameravate koristiti `useState` u nekom condition-u ili loop-u, izdvojite novu komponentu i stavite ga tamo. +Hook-ovi su restriktivniji od ostalih funkcija. Hook-ove možete pozivati samo na vrhu svojih komponenata (ili drugih Hook-ova). Ukoliko nameravate koristiti `useState` u nekom condition-u ili loop-u, izdvojite novu komponentu i stavite ga tamo. ## Prosleđivanje podataka među komponentama {/*sharing-data-between-components*/} -U prethodnom primeru, svaki `MyButton` je imao nezavisni `count`, i kada je svako pojedinačno dugme bilo pritisnuto,`count` se menjao samo za trenutno pritisnuto dugme: +U prethodnom primeru, svaki `MyButton` je imao nezavisni `count`, i kada je svako pojedinačno dugme bilo pritisnuto, `count` se menjao samo za trenutno pritisnuto dugme: @@ -409,7 +409,7 @@ Prva `MyButton` komponenta ažurira svoj `count` na `1` Međutim, često će vam biti potrebno da komponente *prosleđuju podatke međusobno i uvek se zajedno ažuriraju*. -Da biste obe `MyButton` komponente prikazali sa istim `count` i ažurirali zajedno, morate premestiti state iz pojedinačnih dugmeta "nagore" do najbliže komponente koja sadrži sve njih. +Da biste obe `MyButton` komponente prikazali sa istim `count` i ažurirali zajedno, morate premestiti state iz pojedinačnih dugmadi "nagore" do najbliže komponente koja sadrži sve njih. U ovom primeru, to je `MyApp`: @@ -431,7 +431,7 @@ Pri kliku, `MyApp` ažurira svoj `count` state na `1` i prosleđuje ga u obe chi Sada, kada kliknete na bilo koje dugme, `count` u `MyApp` će se promeniti, što će promeniti oba brojača u `MyButton`. Evo kako to možete izraziti u kodu. -Prvo, *pdignite state nagore* from `MyButton` u `MyApp`: +Prvo, *podignite state nagore* iz `MyButton` u `MyApp`: ```js {2-6,18} export default function MyApp() { @@ -451,12 +451,12 @@ export default function MyApp() { } function MyButton() { - // ... premestamo kod odavde ... + // ... premeštamo kod odavde ... } ``` -Zatim, *prosleđujemo state nadole* iz `MyApp` u oba `MyButton`, zajedno sa zajedničkim handlerom za klik. Informacije možete proslediti u `MyButton` koristeći kovrdžaste zagrade u JSX-u, baš kao što ste to ranije radili sa ugrađenim tagovima poput ``: +Zatim, *prosleđujemo state nadole* iz `MyApp` u oba `MyButton`, zajedno sa zajedničkim handler-om za klik. Informacije možete proslediti u `MyButton` koristeći vitičaste zagrade u JSX-u, baš kao što ste to ranije radili sa ugrađenim tagovima poput ``: ```js {11-12} export default function MyApp() { @@ -476,7 +476,7 @@ export default function MyApp() { } ``` -Informacije koje na ovaj način prosleđujete nazivaju se *props*. Sada `MyApp` komponenta sadrži `count` state i `handleClick` event handler, i *prosleđuje obe nadole kao props* svakom od dugmeta. +Informacije koje na ovaj način prosleđujete nazivaju se *props*. Sada `MyApp` komponenta sadrži `count` state i `handleClick` event handler i *prosleđuje obe nadole kao props* svakom dugmetu. Konačno, promenite `MyButton` da *čita* props koje ste prosledili iz njegove parent komponente: @@ -490,7 +490,7 @@ function MyButton({ count, onClick }) { } ``` -Kada kliknete na dugme, `onClick` handler se aktivira.`onClick` prop svakog dugmeta postavljen je na funkciju `handleClick` unutar `MyApp` pa se kod unutar nje izvršava. Taj kod poziva `setCount(count + 1)`, inkrementira `count` state varijablu. Nova `count` vrednost se prosleđuje kao prop svakom dugmetu, pa svi prikazuju novu vrednost. Ovo se naziva "podizanje state-a nagore". Pomeranjema state-a nagore, podelili ste ga između komponenata. +Kada kliknete na dugme, `onClick` handler se aktivira. `onClick` prop svakog dugmeta postavljen je na funkciju `handleClick` unutar `MyApp` pa se kod unutar nje izvršava. Taj kod poziva `setCount(count + 1)`, inkrementirajući `count` state varijablu. Nova `count` vrednost se prosleđuje kao prop svakom dugmetu, pa svi prikazuju novu vrednost. Ovo se naziva "podizanje state-a nagore". Pomeranjem state-a nagore, podelili ste ga između komponenata. diff --git a/src/content/learn/installation.md b/src/content/learn/installation.md index 417e08ea..70aadda4 100644 --- a/src/content/learn/installation.md +++ b/src/content/learn/installation.md @@ -4,7 +4,7 @@ title: Instalacija -React je dizajniran od početka za postepeno usvajanje. Možete koristiti koliko god React-a želite. Bez obzira da li želite da probate React, dodate neku interaktivnost na HTML stranicu, ili da započnete kompleksnu React aplikaciju, ova sekcija će vam pomoći da počnete. +React je dizajniran od početka za postepeno usvajanje. Možete koristiti koliko god React-a želite. Bez obzira da li želite da probate React, dodate neku interaktivnost na HTML stranicu ili da započnete kompleksnu React aplikaciju, ova sekcija će vam pomoći da počnete. @@ -38,7 +38,7 @@ export default function App() { Možete ga direktno menjati ili otvoriti u novom tabu pritiskom na "Fork" dugme u gornjem desnom uglu. -Većina stranica u React dokumentaciji sadrži sandbokse kao ovaj. Van React dokumentacije, postoje mnogi online sandboksi koji podržavaju React: na primer, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), ili [CodePen.](https://codepen.io/pen?template=QWYVwWN) +Većina stranica u React dokumentaciji sadrži sandbox-e kao ovaj. Van React dokumentacije postoje mnogi online sandbox-i koji podržavaju React: [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react) ili [CodePen](https://codepen.io/pen?template=QWYVwWN). ### Isprobajte React lokalno {/*try-react-locally*/} @@ -46,7 +46,7 @@ Da isprobate React lokalno na vašem računaru, [preuzmite ovu HTML stranicu.](h ## Započnite novi React projekat {/*start-a-new-react-project*/} -Ako želite da napravite aplikaciju ili sajt koristeći samo React, [zapocnite novi React projekat.](/learn/start-a-new-react-project) +Ako želite da napravite aplikaciju ili sajt koristeći samo React, [započnite novi React projekat.](/learn/start-a-new-react-project) ## Dodajte React u postojeći projekat {/*add-react-to-an-existing-project*/} @@ -55,4 +55,3 @@ Ako žeite da isprobate React u vašem postojećem sajtu ili aplikaciji, [dodajt ## Sledeći koraci {/*next-steps*/} Idite na [Brzi Uvod](/learn) vodič za turu najvažnijih React koncepta sa kojima ćete se susretati svakodnevno. - 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 14b64c4f..5b1ed3c5 100644 --- a/src/content/learn/javascript-in-jsx-with-curly-braces.md +++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md @@ -1,10 +1,10 @@ --- -title: JavaScript in JSX with Curly Braces +title: JavaScript u JSX-u sa vitičastim zagradama --- -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. +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. @@ -49,12 +49,12 @@ Ali šta ako želite da dinamički odredite `src` ili `alt` tekst? Možete **kor ```js export default function Avatar() { const avatar = 'https://i.imgur.com/7vQD0fPs.jpg'; - const opis = 'Gregorio Y. Zara'; + const description = 'Gregorio Y. Zara'; return ( {opis} ); } @@ -66,28 +66,28 @@ export default function Avatar() { -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! +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 vam vitičaste zagrade dozvoljavaju da radite sa JavaScript-om upravo u vašem markup-u! ## Koristite vitičaste zagrade: Prozor u JavaScript svet {/*using-curly-braces-a-window-into-the-javascript-world*/} -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 `

`: +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, `name`, a zatim ga ubacuje vitičastim zagradama unutar `

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

{ime} spisak stvari za uraditi

+

{name} spisak stvari za uraditi

); } ``` -Pokušajte da promenite vrednost `ime` iz `'Gregorio Y. Zara'` u `'Hedy Lamarr'`. Pogledajte kako se naslov liste menja? +Pokušajte da promenite vrednost `name` iz `'Gregorio Y. Zara'` u `'Hedy Lamarr'`. Pogledajte kako se naslov liste menja? -Bilo koja JavaScript ekspresija će raditi između vitičastih zagrada, uključujući pozive funkcija kao što je `formatDate()`: +Bilo koji JavaScript izraz će raditi između vitičastih zagrada, uključujući pozive funkcija kao što je `formatDate()`: @@ -103,7 +103,7 @@ function formatDate(date) { export default function TodoList() { return ( -

Lista stvar iza uraditi za {formatDate(today)}

+

Lista stvari za uraditi za {formatDate(today)}

); } ``` @@ -114,14 +114,14 @@ export default function TodoList() { Možete koristiti vitičaste zagrade samo na dva načina unutar JSX-a: -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}"`. +1. **Kao tekst** direktno unutar JSX oznake: `

{name} lista za uraditi

` radi, ali `<{tag}>Gregorio Y. Zara lista stvari za uraditi` neće. +2. **Kao atribute** praćen znakom `=`: `src={avatar}` će pročitati promenljivu `avatar`, ali `src="{avatar}"` će proslediti string `"{avatar}"`. ## Koristite "duple vitičaste zagrade": CSS i drugi objekti u JSX-u {/*using-double-curlies-css-and-other-objects-in-jsx*/} -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 }}`. +Uz stringove, brojeve i druge JavaScript izraze, možete čak proslediti i objekte u JSX. Objekti se takođe označavaju vitičastim zagradama, kao `{ name: "Hedy Lamarr", inventions: 5 }`. Stoga, da biste prosledili JS objekat u JSX, morate da umotate objekat u još jedan par vitičastih zagrada: `person={{ name: "Hedy Lamarr", inventions: 5 }}`. -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`: +Možda ćete videti ovo sa inline CSS stilovima u JSX-u. React ne zahteva da koristite inline stilove (CSS klase rade odlično u većini slučajeva). Ali kada vam je potreban inline stil, prosledite objekat atributu `style`: @@ -171,14 +171,14 @@ Inline `style` svojstva se pišu u camelCase. Na primer, HTML `
    div > div { padding: 20px; } -U ovom primeru JavaScript objekat `osoba` sadrži string `ime` i objekat `tema`: +U ovom primeru JavaScript objekat `person` sadrži string `name` i objekat `theme`: ```js -const osoba = { - ime: 'Gregorio Y. Zara', - tema: { +const person = { + name: 'Gregorio Y. Zara', + theme: { backgroundColor: 'black', color: 'pink' } }; ``` -Komponenta može da koristi ove vrednosti iz `osoba` ovako: +Komponenta može da koristi ove vrednosti iz `person` ovako: ```js -
    -

    {osoba.ime}' lista

    +
    +

    {person.name} lista

    ``` JSX je veoma minimalan kao jezik za šabloniranje jer vam omogućava da organizujete podatke i logiku koristeći JavaScript. @@ -252,9 +252,9 @@ Ovaj kod ne radi sa greškom koja kaže `Objects are not valid as a React child` ```js -const osoba = { - ime: 'Gregorio Y. Zara', - tema: { +const person = { + name: 'Gregorio Y. Zara', + theme: { backgroundColor: 'black', color: 'pink' } @@ -262,8 +262,8 @@ const osoba = { export default function TodoList() { return ( -
    -

    {osoba}' lista

    +
    +

    {person} lista

    div > div { padding: 20px; } Možete li da nađete problem? -Poglejte šta je unutar vitičastih zagrada. Da li stavljamo pravu stvar tamo? +Pogledajte šta je unutar vitičastih zagrada. Da li stavljamo pravu stvar tamo? -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. +Ovo se dešava zato što ovaj primer renderuje *objekat sam po sebi* u markup umesto stringa: `

    {person} lista

    ` pokušava da renderuje ceo `person` objekat! Uključivanje sirovih objekata kao tekstualnog sadržaja baca grešku jer React ne zna kako želite da ih prikažete. -Popraw to, zamenite `

    {osoba}' lista

    ` sa `

    {osoba.ime}' lista

    `: +Da biste popravili, zamenite `

    {person} lista

    ` sa `

    {person.name} lista

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

    {osoba.ime} lista

    +
    +

    {person.name} lista

    div > div { padding: 20px; } #### Izdvojite informacije u objekat {/*extract-information-into-an-object*/} -Izdvojite URL slike u `osoba` objekat. +Izdvojite URL slike u `person` objekat. ```js -const osoba = { - ime: 'Gregorio Y. Zara', - tema: { +const person = { + name: 'Gregorio Y. Zara', + theme: { backgroundColor: 'black', color: 'pink' } @@ -354,8 +354,8 @@ const osoba = { export default function TodoList() { return ( -
    -

    {osoba.ime} lista

    +
    +

    {person.name} lista

    div > div { padding: 20px; } -Pomerite URL slike u svojstvo `osoba.imageUrl` i pročitajte ga iz `` oznake koristeći vitičaste zagrade: +Pomerite URL slike u svojstvo `person.imageUrl` i pročitajte ga iz `` oznake koristeći vitičaste zagrade: ```js -const osoba = { - ime: 'Gregorio Y. Zara', +const person = { + name: 'Gregorio Y. Zara', imageUrl: "https://i.imgur.com/7vQD0fPs.jpg", - tema: { + theme: { backgroundColor: 'black', color: 'pink' } @@ -397,8 +397,8 @@ const osoba = { export default function TodoList() { return ( -
    -

    {osoba.ime} lista

    +
    +

    {person.name} lista

    div > div { padding: 20px; } -#### Napišite jednu ekspresiju unutar vitičastih zagrada {/*write-one-expression-inside-curly-braces*/} +#### Napišite 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. +U objektu ispod, puni URL slike je podeljen na četiri dela: bazni URL, `imageId`, `imageSize` i ekstenzija fajla. -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`. +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`. Možete li da popravite ovo? @@ -438,11 +438,11 @@ Možete li da popravite ovo? ```js const baseUrl = 'https://i.imgur.com/'; -const osoba = { - ime: 'Gregorio Y. Zara', +const person = { + name: 'Gregorio Y. Zara', imageId: '7vQD0fP', imageSize: 's', - tema: { + theme: { backgroundColor: 'black', color: 'pink' } @@ -450,12 +450,12 @@ const osoba = { export default function TodoList() { return ( -
    -

    {osoba.ime} lista

    +
    +

    {person.name} lista

    {osoba.ime}
    • Unaprediti video-telefon
      • @@ -475,13 +475,13 @@ body > div > div { padding: 20px; } -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. +Da biste proverili 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. -Možete napisati kao `src={baseUrl + osoba.imageId + osoba.imageSize + '.jpg'}`: +Možete napisati kao `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`: -1. `{` otvara JavaScript ekspresiju +1. `{` otvara JavaScript izraz 2. `baseUrl + person.imageId + person.imageSize + '.jpg'` proizvodi ispravan URL string 3. `}` zatvara JavaScript ekspresiju @@ -489,11 +489,11 @@ Možete napisati kao `src={baseUrl + osoba.imageId + osoba.imageSize + '.jpg'}`: ```js const baseUrl = 'https://i.imgur.com/'; -const osoba = { - ime: 'Gregorio Y. Zara', +const person = { + name: 'Gregorio Y. Zara', imageId: '7vQD0fP', imageSize: 's', - tema: { + theme: { backgroundColor: 'black', color: 'pink' } @@ -501,12 +501,12 @@ const osoba = { export default function TodoList() { return ( -
      -

      {osoba.ime} lista

      +
      +

      {person.name} lista

      {osoba.ime}
      • Unaprediti video-telefon
        • @@ -526,18 +526,18 @@ body > div > div { padding: 20px; } -Možete pomeriti i ekspresiju u zasebnu funkciju kao što je `getImageUrl` ispod: +Možete pomeriti i izraz u zasebnu funkciju kao što je `getImageUrl` ispod: ```js src/App.js import { getImageUrl } from './utils.js' -const osoba = { - ime: 'Gregorio Y. Zara', +const person = { + name: 'Gregorio Y. Zara', imageId: '7vQD0fP', imageSize: 's', - tema: { + theme: { backgroundColor: 'black', color: 'pink' } @@ -545,12 +545,12 @@ const osoba = { export default function TodoList() { return ( -
        -

        {osoba.ime} lista

        +
        +

        {person.name} lista

        {osoba.ime}
        • Unaprediti video-telefon
          • @@ -562,12 +562,12 @@ export default function TodoList() { } ``` -```js utils.js -export function getImageUrl(osoba) { +```js src/utils.js +export function getImageUrl(person) { return ( 'https://i.imgur.com/' + - osoba.imageId + - osoba.imageSize + + person.imageId + + person.imageSize + '.jpg' ); } diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index affc03a1..5c17cd88 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -4,7 +4,7 @@ title: React Developer Tools -Koristite React Developer Tools da inspekcijom React [komponenti](/learn/your-first-component), izmenite [props](/learn/passing-props-to-a-component) i [state](/learn/state-a-components-memory), i identifikujete probleme sa performansama. +Koristite React Developer Tools da inspekcijom React [komponenti](/learn/your-first-component), izmenite [props](/learn/passing-props-to-a-component) i [state](/learn/state-a-components-memory) i identifikujete probleme sa performansama. @@ -42,21 +42,21 @@ Sledeće, otvorite developer tools iz terminala: react-devtools ``` -Onda konektujte vaš sajt dodavanjem sledećeg ` ``` -Reloadujte vaš sajt u pretraživaču da bi ga videli u developer tools. +Reload-ujte vaš sajt u pretraživaču da bi ga videli u developer tools. ![React Developer Tools standalone](/images/docs/react-devtools-standalone.png) ## Mobilni telefoni (React Native) {/*mobile-react-native*/} React Developer Tools može se koristiti za inspekciju aplikacija napravljenih sa [React Native](https://reactnative.dev/). -Najlakeši način da koristite React Developer Tools je da ga instalirate globalno: +Najlakši način da koristite React Developer Tools je da ga instalirate globalno: ```bash # Yarn yarn global add react-devtools @@ -72,7 +72,7 @@ react-devtools Trebalo bi da se poveže sa bilo kojom lokalnom React Native aplikacijom koja je pokrenuta. -> Pokušajte da reloadujete aplikaciju ako developer tools ne uspe da se poveže nakon nekoliko sekundi. +> Pokušajte da reload-ujete aplikaciju ako developer tools ne uspe da se poveže nakon nekoliko sekundi. [Naučite više o debagovanju React Native.](https://reactnative.dev/docs/debugging) diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index c41ddade..9f3ae36e 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -11,7 +11,7 @@ Ako želite da napravite novu aplikaciju ili novi sajt koristeći samo React, pr Možete koristiti React bez framework-a, međutim, saznali smo da većina aplikacija i sajtova pravi rešenja za uobičajene probleme poput podele koda, rutiranja, fetch-ovanja podataka i generisanja HTML-a. Ovi problemi su zajednički za sve biblioteke korisničkog interfejsa i nisu specifični za React. -Ako počnete sa framework-ovom, brzo ćete se uhodati sa React-om, izbegavajući pravljenje vašeg framework-a kasnije. +Ako počnete sa framework-om, brzo ćete se uhodati sa React-om, izbegavajući pravljenje vašeg framework-a kasnije. @@ -21,11 +21,11 @@ Naravno da možete koristiti React bez framework-a--kako biste [koristili React Evo i zašto. -Čak i ako vam ne treba rutiranje ili fetch podataka na početku, verovatno ćete želeti da dodate neke biblioteke za njih. Kako vaš JavaScript bundle raste sa svakom novom funkcionalnošću, možda ćete morati da podelite kod za svaku rutu pojedinačno. Kako vaše potrebe za fetch podataka postaju složenije, verovatno ćete naići na server-client mrežne vodopade koji čine da vaša aplikacija deluje veoma sporo. Kako vaša publika uključuje više korisnika sa lošim mrežnim uslovima i uređajima niske klase, možda ćete morati da generišete HTML iz vaših komponenti da biste prikazali sadržaj ranije--ili na serveru, ili tokom vremena izgradnje. Menjanje vašeg setup-a da bi se pokrenuo neki od vašeg koda na serveru ili tokom vremena izgradnje može biti veoma komplikovano. +Čak i ako vam ne treba rutiranje ili fetch podataka na početku, verovatno ćete želeti da dodate neke biblioteke za njih. Kako vaš JavaScript bundle raste sa svakom novom funkcionalnošću, možda ćete morati da podelite kod za svaku rutu pojedinačno. Kako vaše potrebe za fetch podataka postaju složenije, verovatno ćete naići na server-client mrežne vodopade koji čine da vaša aplikacija deluje veoma sporo. Kako vaša publika uključuje više korisnika sa lošim mrežnim uslovima i uređajima niske klase, možda ćete morati da generišete HTML iz vaših komponenti da biste prikazali sadržaj ranije--ili na serveru, ili tokom vremena izgradnje. Menjanje vašeg setup-a radi pokretanja vašeg koda na serveru ili tokom vremena izgradnje može biti veoma komplikovano. -**Ovi problemi nisu specifični za React. Zato Svelte ima SvelteKit, Vue ima Nuxt, i tako dalje.** Da biste rešili ove probleme sami, moraćete da integrišete vaš bundler sa vašim router-om i sa vašom bibliotekom za fetch podataka. Nije teško napraviti početni setup, ali postoji mnogo suptilnosti u pravljenju aplikacije koja se brzo učitava čak i dok raste tokom vremena. Želećete da pošaljete minimalnu količinu koda aplikacije ali da to uradite u jednom client-server roundtrip-u, paralelno sa bilo kojim podacima potrebnim za stranicu. Verovatno ćete želeti da stranica bude interaktivna pre nego što se vaš JavaScript kod pokrene, da biste podržali progresivno poboljšanje. Možda ćete želeti da generišete folder potpuno statičkih HTML fajlova za vaše marketing stranice koje mogu biti hostovane bilo gde i da i dalje rade sa isključenim JavaScript-om. Izgradnja ovih mogućnosti sami zahteva pravi posao. +**Ovi problemi nisu specifični za React. Zato Svelte ima SvelteKit, Vue ima Nuxt i tako dalje.** Da biste rešili ove probleme sami, moraćete da integrišete vaš bundler sa vašim router-om i sa vašom bibliotekom za fetch podataka. Nije teško napraviti početni setup, ali postoji mnogo suptilnosti u pravljenju aplikacije koja se brzo učitava čak i dok raste tokom vremena. Želećete da pošaljete minimalnu količinu koda aplikacije ali da to uradite u jednom client-server roundtrip-u, paralelno sa bilo kojim podacima potrebnim za stranicu. Verovatno ćete želeti da stranica bude interaktivna pre nego što se vaš JavaScript kod pokrene, da biste podržali progresivno poboljšanje. Možda ćete želeti da generišete folder potpuno statičkih HTML fajlova za vaše marketing stranice koje mogu biti host-ovane bilo gde i da i dalje rade sa isključenim JavaScript-om. Izgradnja ovih mogućnosti samostalno zahteva pravi posao. -**React framework-ovi na ovoj stranici rešavaju probleme kao što su ovi automatski, bez dodatnog posla sa vaše strane.** Oni vam omogućavaju da počnete veoma jednostavno i da onda skalirate vašu aplikaciju sa vašim potrebama. Svaki React framework ima zajednicu, tako da je lakše naći odgovore na pitanja i nadograditi alate. Framework-ovi takođe daju strukturu vašem kodu, pomažući vam i drugima da zadržite kontekst i veštine između različitih projekata. Nasuprot tome, sa custom setup-om je lakše zaglaviti se na nepodržanim verzijama zavisnosti, i na kraju ćete zapravo kreirati vaš sopstveni framework--iako bez zajednice ili putanju za nadogradnju (i ako je išta kao oni koje smo pravili u prošlosti, više haotično dizajnirani). +**React framework-ovi na ovoj stranici rešavaju probleme kao što su ovi automatski, bez dodatnog posla sa vaše strane.** Oni vam omogućavaju da počnete veoma jednostavno i da onda skalirate vašu aplikaciju sa vašim potrebama. Svaki React framework ima zajednicu, tako da je lakše naći odgovore na pitanja i nadograditi alate. Framework-ovi takođe daju strukturu vašem kodu, pomažući i vama i drugima da zadržite kontekst i veštine između različitih projekata. Nasuprot tome, sa custom setup-om je lakše zaglaviti se na nepodržanim verzijama zavisnosti i na kraju ćete zapravo kreirati vaš sopstveni framework--iako bez zajednice ili putanje za nadogradnju (i ako je išta kao oni koje smo pravili u prošlosti, više haotično dizajnirani). Ako vaša aplikacija ima neobične zahteve koji nisu dobro podržani od strane ovih framework-ova ili preferirate da rešavate probleme samostalno, možete da napravite vaš sopstveni custom setup sa React-om. Uzmite `react` i `react-dom` sa npm-a, napravite vaš custom build proces sa bundler-om kao što je [Vite](https://vitejs.dev/) ili [Parcel](https://parceljs.org/), i dodajte druge alate kada vam budu potrebni za rutiranje, statičku generaciju ili server-side rendering, i tako dalje. @@ -33,7 +33,7 @@ Ako vaša aplikacija ima neobične zahteve koji nisu dobro podržani od strane o ## React framework-ovi za produkciju {/*production-grade-react-frameworks*/} -Ovi framework-ovi podržavaju sve funkcionalnosti koje su vam potrebne za deploy i skaliranje aplikacija u produkciji i rade na podršci naše [vizije full-stack arhitekture vision](#which-features-make-up-the-react-teams-full-stack-architecture-vision). Svi framework-ovi koje preporučujemo su otvorenog koda sa aktivnom podrškom zajednice i mogu biti deploy-ovani na vaš server ili na hosting provider-a. Ako ste All of the frameworks we recommend are open source with active communities for support, and can be deployed to your own server or a hosting provider. Ako ste autor framework-a koji zainteresovan da bude na ovoj listi, [molimo vas da nam javite](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+). +Ovi framework-ovi podržavaju sve funkcionalnosti koje su vam potrebne za deploy i skaliranje aplikacija u produkciji i rade na podršci naše [vizije full-stack arhitekture](#which-features-make-up-the-react-teams-full-stack-architecture-vision). Svi framework-ovi koje preporučujemo su open source sa aktivnom podrškom zajednice i mogu biti deploy-ovani na vaš server ili na hosting provider-a. Ako ste autor framework-a koji zainteresovan da bude na ovoj listi, [molimo vas da nam javite](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+). ### Next.js {/*nextjs-pages-router*/} @@ -45,7 +45,7 @@ npx create-next-app@latest Ako vam je Next.js nepoznat, proverite ovaj [Next.js tutorijal.](https://nextjs.org/learn) -Next.js je održavan od strane [Vercel](https://vercel.com/). Možete [deploy-ovati Next.js aplikaciju](https://nextjs.org/docs/deployment) na bilo koji Node.js ili serverless hosting, ili na vaš sopstveni server. Next.js takođe podržava [static export](https://nextjs.org/docs/advanced-features/static-html-export) koji ne zahteva server. +Next.js je održavan od strane [Vercel-a](https://vercel.com/). Možete [deploy-ovati Next.js aplikaciju](https://nextjs.org/docs/deployment) na bilo koji Node.js ili serverless hosting, ili na vaš sopstveni server. Next.js takođe podržava [static export](https://nextjs.org/docs/advanced-features/static-html-export) koji ne zahteva server. ### Remix {/*remix*/} @@ -57,19 +57,19 @@ npx create-remix Ako vam je Remix nepoznat, pogledajte Remix [blog tutorijal](https://remix.run/docs/en/main/tutorials/blog) (kratak) i [app tutorijal](https://remix.run/docs/en/main/tutorials/jokes) (dugačak). -Remix je održavan od strane [Shopify](https://www.shopify.com/). Kada kreirate Remix projekat, morate [izabrati vaš deployment target](https://remix.run/docs/en/main/guides/deployment). Možete deploy-ovati Remix aplikaciju na bilo koji Node.js ili serverless hosting korišćenjem ili pisanjem [adaptera](https://remix.run/docs/en/main/other-api/adapter). +Remix je održavan od strane [Shopify-a](https://www.shopify.com/). Kada kreirate Remix projekat, morate [izabrati vaš deployment target](https://remix.run/docs/en/main/guides/deployment). Možete deploy-ovati Remix aplikaciju na bilo koji Node.js ili serverless hosting korišćenjem ili pisanjem [adaptera](https://remix.run/docs/en/main/other-api/adapter). ### Gatsby {/*gatsby*/} -**[Gatsby](https://www.gatsbyjs.com/) je React framework za brze CMS sajtove.** Njegov bogat ekosistem plugina i GraphQL data sloj pojednostavljuju integraciju sadržaja, API-ja i servisa u jedan sajt. Da biste kreirali novi Gatsby projekat, pokrenite u vašem terminalu: +**[Gatsby](https://www.gatsbyjs.com/) je React framework za brze CMS sajtove.** Njegov bogat ekosistem plugin-a i GraphQL data sloj pojednostavljuju integraciju sadržaja, API-ja i servisa u jedan sajt. Da biste kreirali novi Gatsby projekat, pokrenite u vašem terminalu: npx create-gatsby -Ako niste upoznati sa Gatsby, pogledajte [Gatsby tutorijal.](https://www.gatsbyjs.com/docs/tutorial/) +Ako vam je Gatsby nepoznat, pogledajte [Gatsby tutorijal](https://www.gatsbyjs.com/docs/tutorial/). -Gatsby je održavan od strane [Netlify](https://www.netlify.com/). Možete [deploy-ovati potpuno statički Gatsby sajt](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) na bilo koji statički hosting. Ako se odlučite za korišćenje server-only funkcionalnosti, pobrinite se da vaš hosting provider podržava Gatsby. +Gatsby je održavan od strane [Netlify-a](https://www.netlify.com/). Možete [deploy-ovati potpuno statički Gatsby sajt](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) na bilo koji statički hosting. Ako se odlučite za korišćenje server-only funkcionalnosti, pobrinite se da vaš hosting provider podržava Gatsby. ### Expo (za native aplikacije) {/*expo*/} @@ -80,27 +80,27 @@ Gatsby je održavan od strane [Netlify](https://www.netlify.com/). Možete [depl npx create-expo-app -Ako niste upoznati sa Expo, pogledajte [Expo tutorijal.](https://docs.expo.dev/tutorial/introduction/) +Ako vam je Expo nepoznat, pogledajte [Expo tutorijal](https://docs.expo.dev/tutorial/introduction/). -Expo je održavan od strane [Expo (kompanije)](https://expo.dev/about). Kreiranje aplikacija sa Expo-om je besplatno, i možete ih submit-ovati na Google i Apple app store bez ograničenja. Expo dodatno pruža opt-in plaćene cloud servise. +Expo je održavan od strane [Expo (kompanije)](https://expo.dev/about). Kreiranje aplikacija sa Expo-om je besplatno i možete ih submit-ovati na Google i Apple app store bez ograničenja. Expo dodatno pruža opt-in plaćene cloud servise. ## Najnoviji React framework-ovi {/*bleeding-edge-react-frameworks*/} -Kako smo i dalje istraživali kako da nastavimo da poboljšavamo React, shvatili smo da je integracija React-a bliže sa framework-ovima (specifično, sa rutiranjem, bundler-ima, i server tehnologijama) naša najveća prilika da pomognemo React korisnicima da kreiraju bolje aplikacije. Next.js tim se složio da sarađuje sa nama u istraživanju, razvoju, integraciji, i testiranju framework-agnostičnih bleeding-edge React mogućnosti kao što su [React Server Components.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) +Kako smo i dalje istraživali kako da nastavimo da poboljšavamo React, shvatili smo da je integracija React-a bliže sa framework-ovima (specifično, sa rutiranjem, bundler-ima i server tehnologijama) naša najveća prilika da pomognemo React korisnicima da kreiraju bolje aplikacije. Next.js tim se složio da sarađuje sa nama u istraživanju, razvoju, integraciji i testiranju framework-agnostičnih bleeding-edge React mogućnosti kao što su [React Server Components.](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) Ove mogućnosti su sve bliže da budu spremne za produkciju svakog dana, i bili smo u razgovorima sa drugim bundler i framework developerima o njihovoj integraciji. Naša nada je da će za godinu ili dve, svi framework-ovi navedeni na ovoj stranici imati punu podršku za ove mogućnosti. (Ako ste autor framework-a zainteresovan za saradnju sa nama u eksperimentisanju sa ovim mogućnostima, molimo vas javite nam se!) ### Next.js (App Router) {/*nextjs-app-router*/} -**[Next.js-ov App Router](https://nextjs.org/docs) je redizajn Next.js API-ja koji ima za cilj da ispuni React-ovu full-stack arhitekturu viziju.** On vam omogućava da fetch-ujete podatke u asinhronim komponentama koje se izvršavaju na serveru ili čak tokom vremena izgradnje. +**[Next.js-ov App Router](https://nextjs.org/docs) je redizajn Next.js API-ja koji ima za cilj da ispuni React-ovu viziju full-stack arhitekture.** On vam omogućava da fetch-ujete podatke u asinhronim komponentama koje se izvršavaju na serveru ili čak tokom vremena izgradnje. -Next.js je održavan od strane [Vercel](https://vercel.com/). Možete [deploy-ovati Next.js aplikaciju](https://nextjs.org/docs/deployment) na bilo koji Node.js ili serverless hosting, ili na vaš sopstveni server. Next.js takođe podržava [static export](https://nextjs.org/docs/advanced-features/static-html-export) koji ne zahteva server. +Next.js je održavan od strane [Vercel-a](https://vercel.com/). Možete [deploy-ovati Next.js aplikaciju](https://nextjs.org/docs/deployment) na bilo koji Node.js ili serverless hosting, ili na vaš sopstveni server. Next.js takođe podržava [static export](https://nextjs.org/docs/advanced-features/static-html-export) koji ne zahteva server. #### Koje mogućnosti čine full-stack arhitekturu React-ovog tima? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/} -Next.js-ov App Router bundler potpuno implementira zvaničnu [React Server Components specifikaciju](). Ovo vam omogućava da pomešate komponente koje se izvršavaju tokom vremena izgradnje, komponente koje se izvršavaju samo na serveru, i interaktivne komponente u jednom React stablu. +Next.js-ov App Router bundler potpuno implementira zvaničnu [React Server Components specifikaciju](). Ovo vam omogućava da pomešate komponente koje se izvršavaju tokom vremena izgradnje, komponente koje se izvršavaju samo na serveru i interaktivne komponente u jednom React stablu. Na primer, možete napisati server-only React komponentu kao `async` funkciju koja čita iz baze podataka ili iz fajla. Zatim možete proslediti podatke iz nje vašim interaktivnim komponentama: @@ -108,7 +108,7 @@ Na primer, možete napisati server-only React komponentu kao `async` funkciju ko // Ova komponenta se izvršava *samo* na serveru (ili tokom vremena izgradnje). async function Talks({ confId }) { - // 1. Vi ste na serveru, tako da možete da komunicirate sa vašom bazom podataka. API pristupna tačka nije potreban. + // 1. Vi ste na serveru, tako da možete da komunicirate sa vašom bazom podataka. API pristupna tačka nije potrebna. const talks = await db.Talks.findAll({ confId }); // 2. Dodajte bilo koju količinu rendering logike. To neće učiniti vaš JavaScript bundle većim. @@ -127,5 +127,5 @@ Router Next.js aplikacije je takođe integrisan sa [fetch podataka pomoću Suspe ``` -Server Komponente i Suspense su fičeri React-a, a ne Next.js fičeri. Međutim, njihovo usvajanje na nivou framework-a zahteva podršku i ne-trivijalan rad na implementaciji. Trenutno, Next.js App Router je najkompletnija implementacija. React tim sarađuje sa developerima bundler-a da bi ove mogućnosti bile lakše za implementaciju u sledećoj generaciji framework-ova. +Server Komponente i Suspense su funkcionalnosti React-a, a ne Next.js funkcionalnosti. Međutim, njihovo usvajanje na nivou framework-a zahteva podršku i ne-trivijalan rad na implementaciji. Trenutno, Next.js App Router je najkompletnija implementacija. React tim sarađuje sa developerima bundler-a da bi ove mogućnosti bile lakše za implementaciju u sledećoj generaciji framework-ova.