Merge pull request #85 from reactjs/features/importing-and-exporting-components

Author: lxmarinkovic

src/content/learn/importing-and-exporting-components.md

@@ -1,26 +1,26 @@
 ---
-title: Importing and Exporting Components
+title: Import-ovanje i export-ovanje komponenata
 ---
 
 <Intro>
 
-The magic of components lies in their reusability: you can create components that are composed of other components. But as you nest more and more components, it often makes sense to start splitting them into different files. This lets you keep your files easy to scan and reuse components in more places.
+Magija komponenata leži u njihovoj upotrebljivosti: možete kreirati komponente koje se sastoje iz drugih komponenata. Međutim, ugnježdavanjem novih i novih komponenata, često ima smisla započeti njihovu podelu u različite fajlove. Ovo vam omogućava da fajlove lakše skenirate i koristite komponente na više mesta.
 
 </Intro>
 
 <YouWillLearn>
 
-* What a root component file is
-* How to import and export a component
-* When to use default and named imports and exports
-* How to import and export multiple components from one file
-* How to split components into multiple files
+* Šta je to fajl root komponente
+* Kako da import-ujete i export-ujete komponentu
+* Kada da koristite default i imenovane import-e i export-e
+* Kako da import-ujete i export-ujete više komponenata iz jednog fajla
+* Kako da podelite komponente u više fajlova
 
 </YouWillLearn>
 
-## The root component file {/*the-root-component-file*/}
+## Fajl root komponente {/*the-root-component-file*/}
 
-In [Your First Component](/learn/your-first-component), you made a `Profile` component and a `Gallery` component that renders it:
+U [Vaša prva komponenta](/learn/your-first-component), napravili ste `Profile` komponentu i `Gallery` komponentu koja je renderuje:
 
 <Sandpack>
 
@@ -37,7 +37,7 @@ function Profile() {
 export default function Gallery() {
   return (
     <section>
-      <h1>Amazing scientists</h1>
+      <h1>Zadivljujući naučnici</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -52,17 +52,17 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-These currently live in a **root component file,** named `App.js` in this example. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page.
+One trenutno žive u **fajlu root komponente**, koji se u ovom primeru zove `App.js`. U zavisnosti od vaših podešavanja, root komponenta može biti i u drugom fajlu. Ako koristite neki framework sa fajl rutiranjem, kao što je Next.js, vaša root komponenta će biti drugačija na svakoj stranici.
 
-## Exporting and importing a component {/*exporting-and-importing-a-component*/}
+## Export-ovanje i import-ovanje komponente {/*exporting-and-importing-a-component*/}
 
-What if you want to change the landing screen in the future and put a list of science books there? Or place all the profiles somewhere else? It makes sense to move `Gallery` and `Profile` out of the root component file. This will make them more modular and reusable in other files. You can move a component in three steps:
+Šta ako želite da promenite landing stranicu i prikažete listu naučnih knjiga na njoj? Ili da postavite sve profile na neko drugo mesto? Ima smisla pomeriti `Gallery` i `Profile` izvan fajla root komponente. To će im omogućiti da budu modularnije i reusable. Komponentu možete pomeriti u tri koraka:
 
-1. **Make** a new JS file to put the components in.
-2. **Export** your function component from that file (using either [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exports).
-3. **Import** it in the file where you’ll use the component (using the corresponding technique for importing [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) exports).
+1. **Napravite** novi JS fajl gde ćete smestiti komponente.
+2. **Export-ujte** vašu funkciju komponente iz tog fajla (koristeći ili [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) ili [imenovane](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) export-e).
+3. **Import-ujte** ih u fajl gde ćete ih koristiti (pomoću odgovarajuće tehnike import-ovanja [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) ili [imenovanih](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) export-a).
 
-Here both `Profile` and `Gallery` have been moved out of `App.js` into a new file called `Gallery.js`. Now you can change `App.js` to import `Gallery` from `Gallery.js`:
+Sada su i `Profile` i `Gallery` pomereni iz `App.js` u fajl pod imenom `Gallery.js`. Sada možete promeniti `App.js` da import-uje `Gallery` iz `Gallery.js`:
 
 <Sandpack>
 
@@ -89,7 +89,7 @@ function Profile() {
 export default function Gallery() {
   return (
     <section>
-      <h1>Amazing scientists</h1>
+      <h1>Zadivljujući naučnici</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -104,82 +104,82 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-Notice how this example is broken down into two component files now:
+Primetite da je primer sada razdvojen na dva fajla:
 
 1. `Gallery.js`:
-     - Defines the `Profile` component which is only used within the same file and is not exported.
-     - Exports the `Gallery` component as a **default export.**
+     - Definiše `Profile` komponentu koja se koristi samo u okviru istog fajla i nije export-ovana.
+     - Export-uje `Gallery` komponentu kao **default export**.
 2. `App.js`:
-     - Imports `Gallery` as a **default import** from `Gallery.js`.
-     - Exports the root `App` component as a **default export.**
+     - Import-uje `Gallery` kao **default import** iz `Gallery.js`.
+     - Export-uje root `App` komponentu kao **default export**.
 
 
 <Note>
 
-You may encounter files that leave off the `.js` file extension like so:
+Možete se susresti sa fajlovima koji ne koriste `.js` ekstenziju:
 
 ```js 
 import Gallery from './Gallery';
 ```
 
-Either `'./Gallery.js'` or `'./Gallery'` will work with React, though the former is closer to how [native ES Modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) work.
+I `'./Gallery.js'` i `'./Gallery'` će raditi u React-u, ali je prvi način bliži tome kako [native ES moduli](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) rade.
 
 </Note>
 
 <DeepDive>
 
-#### Default vs named exports {/*default-vs-named-exports*/}
+#### Default vs imenovani export-i {/*default-vs-named-exports*/}
 
-There are two primary ways to export values with JavaScript: default exports and named exports. So far, our examples have only used default exports. But you can use one or both of them in the same file. **A file can have no more than one _default_ export, but it can have as many _named_ exports as you like.**
+Postoje dva primarna načina za export-ovanje vrednosti u JavaScript-u: default export-i i imenovani export-i. Naši primeri su do sad koristili samo default export-e. Možete koristiti jedan ili oba načina u istom fajlu. **Fajl ne sme imati više od jednog _default_ export-a, ali može imati koliko god želite _imenovanih_ export-a.**
 
-![Default and named exports](/images/docs/illustrations/i_import-export.svg)
+![Default i imenovani export-i](/images/docs/illustrations/i_import-export.svg)
 
-How you export your component dictates how you must import it. You will get an error if you try to import a default export the same way you would a named export! This chart can help you keep track:
+Način na koji export-ujete komponentu diktira način za njeno import-ovanje. Dobićete grešku ako pokušate da import-ujete default export na isti način kao i imenovani export! Ova tabela vam može pomoći da bolje razumete:
 
-| Syntax           | Export statement                           | Import statement                          |
-| -----------      | -----------                                | -----------                               |
-| Default  | `export default function Button() {}` | `import Button from './Button.js';`     |
-| Named    | `export function Button() {}`         | `import { Button } from './Button.js';` |
+| Sintaksa    | Export iskaz                          | Import iskaz                            |
+| ----------- | -----------                           | -----------                             |
+| Default     | `export default function Button() {}` | `import Button from './Button.js';`     |
+| Imenovano   | `export function Button() {}`         | `import { Button } from './Button.js';` |
 
-When you write a _default_ import, you can put any name you want after `import`. For example, you could write `import Banana from './Button.js'` instead and it would still provide you with the same default export. In contrast, with named imports, the name has to match on both sides. That's why they are called _named_ imports!
+Kada koristite _default_ import, možete staviti bilo koje ime nakon `import`-a. Na primer, možete napisati `import Banana from './Button.js'`, ali ćete i dalje dobiti isti default export. Nasuprot tome, sa imenovanim import-ima, ime mora da se poklapa na obe strane. Zato se i nazivaju _imenovani_ import-i!
 
-**People often use default exports if the file exports only one component, and use named exports if it exports multiple components and values.** Regardless of which coding style you prefer, always give meaningful names to your component functions and the files that contain them. Components without names, like `export default () => {}`, are discouraged because they make debugging harder.
+**Ljudi često koriste default export-e ako fajl export-uje samo jednu komponentu, a imenovane export-e ako fajl export-uje više komponenata i vrednosti.** Koji god stil kodiranja da preferirate, uvek dajte smislena imena funkcijama komponenata i fajlovima u kojima se nalaze. Komponente bez imena poput `export default () => {}` ne bi trebale da se koriste jer otežavaju debug-ovanje.
 
 </DeepDive>
 
-## Exporting and importing multiple components from the same file {/*exporting-and-importing-multiple-components-from-the-same-file*/}
+## Export-ovanje i import-ovanje više komponenata iz istog fajla {/*exporting-and-importing-multiple-components-from-the-same-file*/}
 
-What if you want to show just one `Profile` instead of a gallery? You can export the `Profile` component, too. But `Gallery.js` already has a *default* export, and you can't have _two_ default exports. You could create a new file with a default export, or you could add a *named* export for `Profile`. **A file can only have one default export, but it can have numerous named exports!**
+Šta ako želite prikazati samo jedan `Profile` umesto galerije? Možete export-ovati `Profile` komponentu takođe. Ali `Gallery.js` već ima *default* export, a ne možete imati _dva_ default export-a. Možete kreirati novi fajl sa default export-om, ili možete dodati *imenovani* export za `Profile`. **Fajl može imati samo jedan default export, ali može imati bezbroj imenovanih export-a!**
 
 <Note>
 
-To reduce the potential confusion between default and named exports, some teams choose to only stick to one style (default or named), or avoid mixing them in a single file. Do what works best for you!
+Da bi izbegli zabunu između default i imenovanih export-a, neki timovi odluče da se drže jednog načina (default ili imenovani), ili izbegavaju upotrebu oba u istom fajlu. Koristite ono što vam najviše odgovara!
 
 </Note>
 
-First, **export** `Profile` from `Gallery.js` using a named export (no `default` keyword):
+Prvo, **export-ujte** `Profile` iz `Gallery.js` upotrebom imenovanog export-a (bez ključne reči `default`):
 
 ```js
 export function Profile() {
   // ...
 }
 ```
 
-Then, **import** `Profile` from `Gallery.js` to `App.js` using a named import (with the curly braces):
+Nakon toga, **import-ujte** `Profile` iz `Gallery.js` u `App.js` upotrebom imenovanog import-a (sa vitičastim zagradama):
 
 ```js
 import { Profile } from './Gallery.js';
 ```
 
-Finally, **render** `<Profile />` from the `App` component:
+Na kraju, **renderujte** `<Profile />` u `App` komponenti:
 
 ```js
 export default function App() {
   return <Profile />;
 }
 ```
 
-Now `Gallery.js` contains two exports: a default `Gallery` export, and a named `Profile` export. `App.js` imports both of them. Try editing `<Profile />` to `<Gallery />` and back in this example:
+Sada `Gallery.js` sadrži dva export-a: default `Gallery` export i imenovani `Profile` export. `App.js` ih oba import-uje. Probajte da menjate `<Profile />` i `<Gallery />` naizmenično:
 
 <Sandpack>
 
@@ -207,7 +207,7 @@ export function Profile() {
 export default function Gallery() {
   return (
     <section>
-      <h1>Amazing scientists</h1>
+      <h1>Zadivljujući naučnici</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -222,47 +222,45 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-Now you're using a mix of default and named exports:
+Sada koristite kombinaciju default i imenovanih export-a:
 
 * `Gallery.js`:
-  - Exports the `Profile` component as a **named export called `Profile`.**
-  - Exports the `Gallery` component as a **default export.**
+  - Export-uje `Profile` komponentu kao **imenovani export pod imenom `Profile`**.
+  - Export-uje `Gallery` komponentu kao **default export**.
 * `App.js`:
-  - Imports `Profile` as a **named import called `Profile`** from `Gallery.js`.
-  - Imports `Gallery` as a **default import** from `Gallery.js`.
-  - Exports the root `App` component as a **default export.**
+  - Import-uje `Profile` kao **imenovani import pod imenom `Profile`** iz `Gallery.js`.
+  - Import-uje `Gallery` kao **default import** iz `Gallery.js`.
+  - Export-uje root `App` komponentu kao **default export**.
 
 <Recap>
 
-On this page you learned:
+Na ovoj stranici ste naučili:
 
-* What a root component file is
-* How to import and export a component
-* When and how to use default and named imports and exports
-* How to export multiple components from the same file
+* Šta je to fajl root komponente
+* Kako da import-ujete i export-ujete komponentu
+* Kada i kako da koristite default i imenovane import-e i export-e
+* Kako da export-ujete više komponenata iz istog fajla
 
 </Recap>
 
-
-
 <Challenges>
 
-#### Split the components further {/*split-the-components-further*/}
+#### Delite komponente dalje {/*split-the-components-further*/}
 
-Currently, `Gallery.js` exports both `Profile` and `Gallery`, which is a bit confusing.
+Trenutno, `Gallery.js` export-uje i `Profile` i `Gallery`, što je malo zbunjujuće.
 
-Move the `Profile` component to its own `Profile.js`, and then change the `App` component to render both `<Profile />` and `<Gallery />` one after another.
+Pomerite `Profile` komponentu u zaseban fajl `Profile.js`, a nakon toga izmenite `App` komponentu da renderuje i `<Profile />` i `<Gallery />` komponente jednu za drugom.
 
-You may use either a default or a named export for `Profile`, but make sure that you use the corresponding import syntax in both `App.js` and `Gallery.js`! You can refer to the table from the deep dive above:
+Možete koristiti i default i imenovani export za `Profile`, ali se potrudite da iskoristite odgovarajuću import sintaksu i u `App.js` i u `Gallery.js`! Možete se osloniti na već spomenutu tabelu:
 
-| Syntax           | Export statement                           | Import statement                          |
-| -----------      | -----------                                | -----------                               |
-| Default  | `export default function Button() {}` | `import Button from './Button.js';`     |
-| Named    | `export function Button() {}`         | `import { Button } from './Button.js';` |
+| Sintaksa    | Export iskaz                          | Import iskaz                            |
+| ----------- | -----------                           | -----------                             |
+| Default     | `export default function Button() {}` | `import Button from './Button.js';`     |
+| Imenovano   | `export function Button() {}`         | `import { Button } from './Button.js';` |
 
 <Hint>
 
-Don't forget to import your components where they are called. Doesn't `Gallery` use `Profile`, too?
+Ne zaboravite da import-ujete komponente na mestu gde ih koristite. I `Gallery` koristi `Profile`, zar ne?
 
 </Hint>
 
@@ -282,7 +280,7 @@ export default function App() {
 ```
 
 ```js src/Gallery.js active
-// Move me to Profile.js!
+// Pomerite me u Profile.js!
 export function Profile() {
   return (
     <img
@@ -295,7 +293,7 @@ export function Profile() {
 export default function Gallery() {
   return (
     <section>
-      <h1>Amazing scientists</h1>
+      <h1>Zadivljujući naučnici</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -313,11 +311,11 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-After you get it working with one kind of exports, make it work with the other kind.
+Nakon što uspete sa jednim tipom export-a, napravite da radi i sa drugim.
 
 <Solution>
 
-This is the solution with named exports:
+Ovo je rešenje sa imenovanim export-ima:
 
 <Sandpack>
 
@@ -341,7 +339,7 @@ import { Profile } from './Profile.js';
 export default function Gallery() {
   return (
     <section>
-      <h1>Amazing scientists</h1>
+      <h1>Zadivljujući naučnici</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -367,7 +365,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-This is the solution with default exports:
+Ovo je rešenje sa default export-ima:
 
 <Sandpack>
 
@@ -391,7 +389,7 @@ import Profile from './Profile.js';
 export default function Gallery() {
   return (
     <section>
-      <h1>Amazing scientists</h1>
+      <h1>Zadivljujući naučnici</h1>
       <Profile />
       <Profile />
       <Profile />