From 6ab23edf46beeeb3a7fdec7ca3a3caf96b3208ac Mon Sep 17 00:00:00 2001 From: cvijandj Date: Thu, 25 May 2023 14:37:14 +0200 Subject: [PATCH 1/3] Fixed translation on a few words --- src/content/learn/installation.md | 2 +- src/content/learn/start-a-new-react-project.md | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/installation.md b/src/content/learn/installation.md index 2a18e0ef..26e6f188 100644 --- a/src/content/learn/installation.md +++ b/src/content/learn/installation.md @@ -54,5 +54,5 @@ Ako žeite da isprobate React u vašem postojećem sajtu ili aplikaciji, [dodajt ## Sledeći koraci {/*next-steps*/} -Idite na [Brzi Start](/learn) vodič za turu najvažnijih React koncepta sa kojima ćete se susretati svakodnevno. +Idite na [Brzi Uvod](/learn) vodič za turu najvažnijih React koncepta sa kojima ćete se susretati svakodnevno. diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 9dadb05b..870d5323 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -4,7 +4,7 @@ title: Započnite novi React projekat -Ako želite da napravite novu aplikaciju ili novi sajt koristeći samo React, preporučujemo da izaberete jedan od React framework-ova popularnih u zajednici. Framework-ovi pružaju funkcionalnosti koje većina aplikacija i sajtova na kraju treba da imaju, uključujući rutiranje, dohvatanje podataka i generisanje HTML-a. +Ako želite da napravite novu aplikaciju ili novi sajt koristeći samo React, preporučujemo da izaberete jedan od React framework-ova popularnih u zajednici. Framework-ovi pružaju funkcionalnosti koje većina aplikacija i sajtova na kraju treba da imaju, uključujući rutiranje,fetch podataka i generisanje HTML-a. @@ -73,11 +73,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 dohvatanje 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 dohvatanjem 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 da bi se pokrenuo neki od 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 dohvatanje 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 hostovane bilo gde i da i dalje rade sa isključenim JavaScript-om. Izgradnja ovih mogućnosti sami zahteva pravi posao. -**React frejmveorkovi 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 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). Ako i dalje niste ubedjeni, ili vaša aplikacija ima neobične zahteve koji nisu dobro podržani od strane ovih framework-ova i želite da napravite vaš sopstveni custom setup, ne možemo vas zaustaviti--krenite! 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. @@ -121,7 +121,7 @@ async function Talks({ confId }) { } ``` -Router Next.js aplikacije je takođe integrisan sa [dohvatanjem podataka pomoću Suspense-a](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). Ovo vam omogućava da specificirate stanje učitavanja (kao što je skeleton placeholder) za različite delove vašeg korisničkog interfejsa direktno u vašem React stablu: +Router Next.js aplikacije je takođe integrisan sa [fetch podataka pomoću Suspense-a](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). Ovo vam omogućava da specificirate stanje učitavanja (kao što je skeleton placeholder) za različite delove vašeg korisničkog interfejsa direktno u vašem React stablu: ```js }> From ab1f02b4f2f9123fbac896a7f0003847dacd089b Mon Sep 17 00:00:00 2001 From: cvijandj Date: Tue, 30 May 2023 15:19:52 +0200 Subject: [PATCH 2/3] Editor-setup, React-developer-tools translation --- src/content/learn/editor-setup.md | 62 +++++++++++----------- src/content/learn/react-developer-tools.md | 44 +++++++-------- 2 files changed, 54 insertions(+), 52 deletions(-) diff --git a/src/content/learn/editor-setup.md b/src/content/learn/editor-setup.md index 94dbbbae..b79f940c 100644 --- a/src/content/learn/editor-setup.md +++ b/src/content/learn/editor-setup.md @@ -1,62 +1,62 @@ --- -title: Editor Setup +title: Postavka Radnog okruženja (Editora) --- -A properly configured editor can make code clearer to read and faster to write. It can even help you catch bugs as you write them! If this is your first time setting up an editor or you're looking to tune up your current editor, we have a few recommendations. +Dobro kofigurisan editor može učiniti kod jasnijim za čitanje i bržim za pisanje. Može vam čak pomoći da primetite greške dok ih pišete! Ako je ovo prvi put da postavljate editor ili želite da podesite vaš trenutni editor, imamo nekoliko preporuka. -* What the most popular editors are -* How to format your code automatically +* Koji editori su najpopularniji +* Kako da automatski formatirate vaš kod -## Your editor {/*your-editor*/} +## Vaš editor {/*your-editor*/} -[VS Code](https://code.visualstudio.com/) is one of the most popular editors in use today. It has a large marketplace of extensions and integrates well with popular services like GitHub. Most of the features listed below can be added to VS Code as extensions as well, making it highly configurable! +[VS Code](https://code.visualstudio.com/) je jedan od najpopularnijih editora koji se koriste danas. Ima veliko tržište ekstenzija i dobro se integriše sa popularnim servisima kao što je GitHub. Većina funkcija navedenih ispod mogu se dodati u VS Code kao ekstenzije, što ga čini visoko konfigurabilnim! -Other popular text editors used in the React community include: +Drugi popularni editori koji se koriste u React zajednici su: -* [WebStorm](https://www.jetbrains.com/webstorm/) is an integrated development environment designed specifically for JavaScript. -* [Sublime Text](https://www.sublimetext.com/) has support for JSX and TypeScript, [syntax highlighting](https://stackoverflow.com/a/70960574/458193) and autocomplete built in. -* [Vim](https://www.vim.org/) is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X. +* [WebStorm](https://www.jetbrains.com/webstorm/) je integrisano razvojno okruženje dizajnirano posebno za JavaScript. +* [Sublime Text](https://www.sublimetext.com/) ima ugrađenu podršku za JSX i TypeScript, [podršku za sintaksu](https://stackoverflow.com/a/70960574/458193) i automatsko završavanje. +* [Vim](https://www.vim.org/) je visoko konfigurabilan tekst editor napravljen da pravljenje i menjanje bilo kog tipa teksta bude veoma efikasno. Uključen je kao "vi" sa većinom UNIX sistema i sa Apple OS X. -## Recommended text editor features {/*recommended-text-editor-features*/} +## Preporučene funkcije editora {/*recommended-editor-features*/} -Some editors come with these features built in, but others might require adding an extension. Check to see what support your editor of choice provides to be sure! +Neki editori dolaze sa ugrađenim funkcijama, dok drugi zahtevaju dodavanje ekstenzija. Proverite koje funkcije podržava vaš editor koji ste izabrali! ### Linting {/*linting*/} -Code linters find problems in your code as you write, helping you fix them early. [ESLint](https://eslint.org/) is a popular, open source linter for 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. -* [Install ESLint with the recommended configuration for React](https://www.npmjs.com/package/eslint-config-react-app) (be sure you have [Node installed!](https://nodejs.org/en/download/current/)) -* [Integrate ESLint in VSCode with the official extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) +* [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) -**Make sure that you've enabled all the [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) rules for your project.** They are essential and catch the most severe bugs early. The recommended [`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) preset already includes them. +**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. -### Formatting {/*formatting*/} +### Formatiranje {/*formatting*/} -The last thing you want to do when sharing your code with another contributor is get into an discussion about [tabs vs spaces](https://www.google.com/search?q=tabs+vs+spaces)! Fortunately, [Prettier](https://prettier.io/) will clean up your code by reformatting it to conform to preset, configurable rules. Run Prettier, and all your tabs will be converted to spaces—and your indentation, quotes, etc will also all be changed to conform to the configuration. In the ideal setup, Prettier will run when you save your file, quickly making these edits for you. +Poslednja stvar koju želite da radite kada delite vaš kod sa drugim saradnicima je da se upustite u diskusiju o [tabovima vs razmacima](https://www.google.com/search?q=tabs+vs+spaces)! Srećom, [Prettier](https://prettier.io/) će očistiti vaš kod tako što će ga preformatirati u skladu sa unapred podešenim, konfigurabilnim pravilima. Pokrenite Prettier i svi vaši tabovi će biti konvertovani u razmake - i vaša uvlačenja, navodnici, itd. će takođe biti promenjeni u skladu sa konfiguracijom. U idealnom slučaju, Prettier će se pokrenuti kada sačuvate vaš fajl, brzo praveći ove izmene za vas. -You can install the [Prettier extension in VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) by following these steps: +Možete instalirati [Prettier ekstenziju u VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) prateći ove korake: -1. Launch VS Code -2. Use Quick Open (press Ctrl/Cmd+P) -3. Paste in `ext install esbenp.prettier-vscode` -4. Press Enter +1. Pokrenite VS Code +2. Koristite Brzo otvaranje (pritisnite Ctrl/Cmd+P) +3. Zalepite `ext install esbenp.prettier-vscode` +4. Pritisnite Enter -#### Formatting on save {/*formatting-on-save*/} +#### Formatiranje pri čuvanju {/*formatting-on-save*/} -Ideally, you should format your code on every save. VS Code has settings for this! +Idealno, trebalo bi da formatirate vaš kod pri svakom čuvanju. VS Code ima podešavanja za ovo! -1. In VS Code, press `CTRL/CMD + SHIFT + P`. -2. Type "settings" -3. Hit Enter -4. In the search bar, type "format on save" -5. Be sure the "format on save" option is ticked! +1. U VS Code, pritisnite `CTRL/CMD + SHIFT + P`. +2. Ukucajte "settings" +3. Pritisnite Enter +4. U pretraživaču, ukucajte "format on save" +5. Budite sigurni da je "format on save" opcija označena! -> If your ESLint preset has formatting rules, they may conflict with Prettier. We recommend disabling all formatting rules in your ESLint preset using [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) so that ESLint is *only* used for catching logical mistakes. If you want to enforce that files are formatted before a pull request is merged, use [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) for your continuous integration. +> 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. \ No newline at end of file diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index 89208a6b..affc03a1 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -4,30 +4,31 @@ title: React Developer Tools -Use React Developer Tools to inspect React [components](/learn/your-first-component), edit [props](/learn/passing-props-to-a-component) and [state](/learn/state-a-components-memory), and identify performance problems. +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. -* How to install React Developer Tools +* Kako da instalirate React Developer Tools -## Browser extension {/*browser-extension*/} +## Browser ekstenzija {/*browser-extension*/} -The easiest way to debug websites built with React is to install the React Developer Tools browser extension. It is available for several popular browsers: +Najlakši način da debagujete sajtove napravljene sa React-om je da instalirate React Developer Tools ekstenziju za pretraživač. Dostupna je za nekoliko popularnih pretraživača: -* [Install for **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) -* [Install for **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) -* [Install for **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) +* [Instalirajte za **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) +* [Instalirajte za **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) +* [Instalirajte za **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) -Now, if you visit a website **built with React,** you will see the _Components_ and _Profiler_ panels. +Sada, ako posetite sajt **napravljen sa React-om,** videćete _Components_ i _Profiler_ panele. -![React Developer Tools extension](/images/docs/react-devtools-extension.png) +![React Developer Tools ekstenzija](/images/docs/react-devtools-extension.png) -### Safari and other browsers {/*safari-and-other-browsers*/} -For other browsers (for example, Safari), install the [`react-devtools`](https://www.npmjs.com/package/react-devtools) npm package: +### Safari i drugi pretraživači {/*safari-and-other-browsers*/} + +Za svaki pretraživač (na primer, Safari), instalirajte [`react-devtools`](https://www.npmjs.com/package/react-devtools) npm paket: ```bash # Yarn yarn global add react-devtools @@ -36,26 +37,26 @@ yarn global add react-devtools npm install -g react-devtools ``` -Next open the developer tools from the terminal: +Sledeće, otvorite developer tools iz terminala: ```bash react-devtools ``` -Then connect your website by adding the following ` ``` -Reload your website in the browser now to view it in developer tools. +Reloadujte vaš sajt u pretraživaču da bi ga videli u developer tools. ![React Developer Tools standalone](/images/docs/react-devtools-standalone.png) -## Mobile (React Native) {/*mobile-react-native*/} -React Developer Tools can be used to inspect apps built with [React Native](https://reactnative.dev/) as well. +## Mobilni telefoni (React Native) {/*mobile-react-native*/} +React Developer Tools može se koristiti za inspekciju aplikacija napravljenih sa [React Native](https://reactnative.dev/). -The easiest way to use React Developer Tools is to install it globally: +Najlakeši način da koristite React Developer Tools je da ga instalirate globalno: ```bash # Yarn yarn global add react-devtools @@ -64,13 +65,14 @@ yarn global add react-devtools npm install -g react-devtools ``` -Next open the developer tools from the terminal. +Zatim otvorite Developer Tools iz terminala: ```bash react-devtools ``` -It should connect to any local React Native app that's running. +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. -> Try reloading the app if developer tools doesn't connect after a few seconds. +[Naučite više o debagovanju React Native.](https://reactnative.dev/docs/debugging) -[Learn more about debugging React Native.](https://reactnative.dev/docs/debugging) From 7a29823ff5947e546d710c355c9d72adacd7c120 Mon Sep 17 00:00:00 2001 From: cvijandj Date: Mon, 5 Jun 2023 10:04:53 +0200 Subject: [PATCH 3/3] Describing-the-ui translation --- src/content/learn/describing-the-ui.md | 140 +++++++++++++------------ 1 file changed, 71 insertions(+), 69 deletions(-) diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 6df4c047..04b1a8be 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -1,29 +1,29 @@ --- -title: Describing the UI +title: Opisivanje korisničkog interfejsa (UI) --- -React is a JavaScript library for rendering user interfaces (UI). UI is built from small units like buttons, text, and images. React lets you combine them into reusable, nestable *components.* From web sites to phone apps, everything on the screen can be broken down into components. In this chapter, you'll learn to create, customize, and conditionally display React components. +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. -* [How to write your first React component](/learn/your-first-component) -* [When and how to create multi-component files](/learn/importing-and-exporting-components) -* [How to add markup to JavaScript with JSX](/learn/writing-markup-with-jsx) -* [How to use curly braces with JSX to access JavaScript functionality from your components](/learn/javascript-in-jsx-with-curly-braces) -* [How to configure components with props](/learn/passing-props-to-a-component) -* [How to conditionally render components](/learn/conditional-rendering) -* [How to render multiple components at a time](/learn/rendering-lists) -* [How to avoid confusing bugs by keeping components pure](/learn/keeping-components-pure) +* [Kako da napišete svoju prvu React komponentu](/learn/your-first-component) +* [Kada i kako da kreirate više komponenti u jednom fajlu](/learn/importing-and-exporting-components) +* [Kako da dodate markup u JavaScript pomoću JSX](/learn/writing-markup-with-jsx) +* [Kako da koristite vitičaste zagrade u JSX-u da biste pristupili funkcionalnosti JavaScript-a iz vaših komponenti](/learn/javascript-in-jsx-with-curly-braces) +* [Kako da konfigurišete komponente sa props](/learn/passing-props-to-a-component) +* [Kako da uslovno prikažete komponente](/learn/conditional-rendering) +* [Kako da prikažete više komponenti odjednom](/learn/rendering-lists) +* [Kako da izbegnete zbunjujuće greške tako što ćete komponente držati čistim](/learn/keeping-components-pure) -## Your first component {/*your-first-component*/} +## Vaša prva komponenta {/*your-first-component*/} -React applications are built from isolated pieces of UI called *components*. A React component is a JavaScript function that you can sprinkle with markup. Components can be as small as a button, or as large as an entire page. Here is a `Gallery` component rendering three `Profile` components: +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: @@ -40,7 +40,7 @@ function Profile() { export default function Gallery() { return (
-

Amazing scientists

+

Zadivljujući naučnik

@@ -57,13 +57,13 @@ img { margin: 0 10px 10px 0; height: 90px; } -Read **[Your First Component](/learn/your-first-component)** to learn how to declare and use React components. +Pročitajte **[Vaša prva komponenta](/learn/your-first-component)** da biste naučili kako da deklarišete i koristite React komponente. -## Importing and exporting components {/*importing-and-exporting-components*/} +## Importovanje i exportovanje komponenti {/*importing-and-exporting-components*/} -You can declare many components in one file, but large files can get difficult to navigate. To solve this, you can *export* a component into its own file, and then *import* that component from another file: +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: @@ -84,7 +84,7 @@ import Profile from './Profile.js'; export default function Gallery() { return (
-

Amazing scientists

+

Zadivljujući naučnik

@@ -112,15 +112,15 @@ img { margin: 0 10px 10px 0; } -Read **[Importing and Exporting Components](/learn/importing-and-exporting-components)** to learn how to split components into their own files. +Pročitajte **[Importovanje i exportovanje komponenti](/learn/importing-and-exporting-components)** da biste naučili kako da podelite komponente u svoje fajlove. -## Writing markup with JSX {/*writing-markup-with-jsx*/} +## Pisanje markup-a sa JSX {/*writing-markup-with-jsx*/} -Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information. +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. -If we paste existing HTML markup into a React component, it won't always work: +Ako kopirate postojeći HTML markup u React komponentu, neće uvek raditi: @@ -128,16 +128,16 @@ If we paste existing HTML markup into a React component, it won't always work: export default function TodoList() { return ( // This doesn't quite work! -

Hedy Lamarr's Todos

+

Hedy Lamarr's Todo lista

Hedy Lamarr
    -
  • Invent new traffic lights -
  • Rehearse a movie scene -
  • Improve spectrum technology +
  • Izmisli nove semafore +
  • Vežbaj scenu iz filma +
  • Unapredi tehnologiju spektra
); } @@ -149,7 +149,7 @@ img { height: 90px; } -If you have existing HTML like this, you can fix it using a [converter](https://transform.tools/html-to-jsx): +Ako imate postojeći HTML kao što je ovaj, možete ga popraviti pomoću [konvertera](https://transform.tools/html-to-jsx): @@ -164,9 +164,9 @@ export default function TodoList() { className="photo" />
    -
  • Invent new traffic lights
    • -
  • Rehearse a movie scene
    • -
  • Improve spectrum technology
    • +
  • Izmisli nove semafore
    • +
  • Vežbaj scenu iz filma
    • +
  • Unapredi tehnologiju spektra
); @@ -181,13 +181,13 @@ img { height: 90px; } -Read **[Writing Markup with JSX](/learn/writing-markup-with-jsx)** to learn how to write valid JSX. +Pročitajte **[Pisanje markup-a sa JSX](/learn/writing-markup-with-jsx)** da biste naučili kako da napišete validan JSX. -## JavaScript in JSX with curly braces {/*javascript-in-jsx-with-curly-braces*/} +## JavaScript u JSX-u sa vitičastim zagradama {/*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 dozvoljava da pišete HTML sličan markup 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: @@ -210,9 +210,9 @@ export default function TodoList() { alt="Gregorio Y. Zara" />
    -
  • Improve the videophone
    • -
  • Prepare aeronautics lectures
    • -
  • Work on the alcohol-fuelled engine
    • +
  • Unapredi the videophone
    • +
  • Pripremi predavanja iz aeronautike
    • +
  • Radi na motoru koji radi na alkohol
); @@ -229,13 +229,13 @@ body > div > div { padding: 20px; } -Read **[JavaScript in JSX with Curly Braces](/learn/javascript-in-jsx-with-curly-braces)** to learn how to access JavaScript data from JSX. +Pročitajte **[JavaScript u JSX-u sa vitičastim zagradama](/learn/javascript-in-jsx-with-curly-braces)** da biste naučili kako da pristupite JavaScript podacima iz JSX-a. -## Passing props to a component {/*passing-props-to-a-component*/} +## Prosleđivanje props-a komponenti {/*passing-props-to-a-component*/} -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, functions, and even JSX! +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! @@ -310,15 +310,15 @@ export function getImageUrl(person, size = 's') { -Read **[Passing Props to a Component](/learn/passing-props-to-a-component)** to learn how to pass and read props. +Pročitajte **[Prosleđivanje props-a komponenti](/learn/passing-props-to-a-component)** da biste naučili kako da prosledite i čitate props. -## Conditional rendering {/*conditional-rendering*/} +## Uslovno prikazivanje komponenti {/*conditional-rendering*/} -Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators. +Vaše komponente će često morati da prikažu različite stvari u zavisnosti od različitih uslova. U React-u, možete uslovno prikazati JSX koristeći JavaScript sintaksu kao što su `if` naredbe, `&&` i `? :` operatori. -In this example, the JavaScript `&&` operator is used to conditionally render a checkmark: +U ovom primeru, JavaScript `&&` operator se koristi da bi se uslovno prikazala kvačica: @@ -334,19 +334,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
-

Sally Ride's Packing List

+

Sally Ride lista za pakovanje

@@ -358,15 +358,15 @@ export default function PackingList() { -Read **[Conditional Rendering](/learn/conditional-rendering)** to learn the different ways to render content conditionally. +Pročitajte **[Uslovno prikazivanje komponenti](/learn/conditional-rendering)** da biste naučili različite načine za uslovno prikazivanje sadržaja. -## Rendering lists {/*rendering-lists*/} +## Renderovanje liste {/*rendering-lists*/} -You will often want to display multiple similar components from a collection of data. You can use JavaScript's `filter()` and `map()` with React to filter and transform your array of data into an array of components. +Često ćete želeti da prikažete više sličnih komponenti iz kolekcije podataka. Možete koristiti JavaScript `filter()` i `map()` sa React-om da biste filtrirali i transformisali vaš niz podataka u niz komponenti. -For each array item, you will need to specify a `key`. Usually, you will want to use an ID from the database as a `key`. Keys let React keep track of each item's place in the list even if the list changes. +Za svaki element u nizu, moraćete da odredite `key` prop. Obično ćete koristiti ID iz baze podataka kao `key`. Ključevi omogućavaju React-u da prati mesto svakog elementa u listi čak i ako se lista promeni. @@ -384,7 +384,7 @@ export default function List() {

{person.name}: {' ' + person.profession + ' '} - known for {person.accomplishment} + poznat je zbog {person.accomplishment}

); @@ -402,31 +402,31 @@ export const people = [{ id: 0, name: 'Creola Katherine Johnson', profession: 'mathematician', - accomplishment: 'spaceflight calculations', + accomplishment: 'formula za svemirske letove', imageId: 'MK3eW3A' }, { id: 1, name: 'Mario José Molina-Pasquel Henríquez', profession: 'chemist', - accomplishment: 'discovery of Arctic ozone hole', + accomplishment: 'otkriće Arktičke rupe u ozonu', imageId: 'mynHUSa' }, { id: 2, name: 'Mohammad Abdus Salam', profession: 'physicist', - accomplishment: 'electromagnetism theory', + accomplishment: 'teorija o elektromagnetizmu', imageId: 'bE7W1ji' }, { id: 3, name: 'Percy Lavon Julian', profession: 'chemist', - accomplishment: 'pioneering cortisone drugs, steroids and birth control pills', + accomplishment: 'pionirski kortizon, steroide i pilule za kontrolu rađanja', imageId: 'IOjWm71' }, { id: 4, name: 'Subrahmanyan Chandrasekhar', profession: 'astrophysicist', - accomplishment: 'white dwarf star mass calculations', + accomplishment: 'računanje mase belog patuljka', imageId: 'lrWQx8l' }]; ``` @@ -458,18 +458,19 @@ h2 { font-size: 20px; } -Read **[Rendering Lists](/learn/rendering-lists)** to learn how to render a list of components, and how to choose a key. +Pročitajte **[Renderovanje liste](/learn/rendering-lists)** da biste naučili kako da renderujete listu komponenti i kako da odaberete ključ. -## Keeping components pure {/*keeping-components-pure*/} +## Održavanje komponenti čistim (Pure components) {/*keeping-components-pure*/} -Some JavaScript functions are *pure.* A pure function: +Neke JavaScript funkcije su *čiste.* Čista funkcija: -* **Minds its own business.** It does not change any objects or variables that existed before it was called. -* **Same inputs, same output.** Given the same inputs, a pure function should always return the same result. +* **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. + +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: -By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. Here is an example of an impure component: @@ -479,7 +480,7 @@ let guest = 0; function Cup() { // Bad: changing a preexisting variable! guest = guest + 1; - return

Tea cup for guest #{guest}

; + return

Šolja čaja za gosta #{guest}

; } export default function TeaSet() { @@ -495,13 +496,13 @@ export default function TeaSet() { -You can make this component pure by passing a prop instead of modifying a preexisting variable: +Možete napraviti ovu komponentu čistom tako što ćete proslediti prop umesto što ćete modifikovati prethodno postojeću promenljivu: ```js function Cup({ guest }) { - return

Tea cup for guest #{guest}

; + return

Šolja čaja za gosta #{guest}

; } export default function TeaSet() { @@ -519,12 +520,13 @@ export default function TeaSet() { -Read **[Keeping Components Pure](/learn/keeping-components-pure)** to learn how to write components as pure, predictable functions. +Pročitajte **[Održavanje komponenti čistim](/learn/keeping-components-pure)** da biste naučili kako da napišete komponente kao čiste funkcije. -## What's next? {/*whats-next*/} +## Šta dalje? {/*whats-next*/} + +Idite do [Vaša prva komponenta](/learn/your-first-component) da biste počeli da čitate ovo poglavlje stranicu po stranicu! -Head over to [Your First Component](/learn/your-first-component) to start reading this chapter page by page! +Ili ako ste već upoznati sa ovim temama, zašto ne biste pročitali o [Dodavanju interaktivnosti](/learn/adding-interactivity)? -Or, if you're already familiar with these topics, why not read about [Adding Interactivity](/learn/adding-interactivity)?