Skip to content

Commit

Permalink
Merge pull request #74 from reactjs/features/improve-existing-transla…
Browse files Browse the repository at this point in the history 
…tions
  • Loading branch information
@lxmarinkovic
lxmarinkovic authored Sep 17, 2024
2 parents fbb7e9d + eca77bd commit eb5f04d
Show file tree
Hide file tree
Showing 8 changed files with 176 additions and 177 deletions.
26 changes: 13 additions & 13 deletions src/content/learn/add-react-to-an-existing-project.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand All @@ -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.
Expand All @@ -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 `<div />` 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 `<div />` 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](<https://github.com/vitejs/awesome-vite#integrations-with-backends>), 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](<https://github.com/vitejs/awesome-vite#integrations-with-backends>), 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:

<TerminalBlock>
npm install react react-dom
Expand All @@ -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 = '<div id="app"></div>';

// Render your React component instead
// Renderovanje vaše React komponente umesto toga
const root = createRoot(document.getElementById('app'));
root.render(<h1>Zdravo, svete!</h1>);
```
Expand All @@ -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 = '<div id="app"></div>';

// Render your React component instead
// Renderovanje vaše React komponente umesto toga
const root = createRoot(document.getElementById('app'));
root.render(<h1>Zdravo, svete!</h1>);
```
Expand All @@ -112,9 +112,9 @@ Umesto toga, verovatno želite da renderujete vaše React komponente na specifi

```html

<!-- ... somewhere in your html ... -->
<!-- ... negde u vašem HTML-u ... -->
<nav id="navigation"></nav>
<!-- ... more html ... -->
<!-- ... ostatak HTML-a ... -->
```

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:
Expand All @@ -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 <h1>Pozdrav od React-a!</h1>;
}

Expand Down
52 changes: 26 additions & 26 deletions src/content/learn/describing-the-ui.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Opisivanje korisničkog interfejsa (UI)

<Intro>

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.

</Intro>

Expand All @@ -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:

<Sandpack>

Expand Down Expand Up @@ -62,9 +62,9 @@ Pročitajte **[Vaša prva komponenta](/learn/your-first-component)** da biste na

</LearnMore>

## 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:


<Sandpack>
Expand Down Expand Up @@ -113,13 +113,13 @@ img { margin: 0 10px 10px 0; }

<LearnMore path="/learn/importing-and-exporting-components">

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.

</LearnMore>

## 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:

Expand All @@ -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!
<h1>Hedy Lamarr's Todo lista</h1>
// Ovo baš i ne radi!
<h1>Hedy Lamarr-ina Todo lista</h1>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
Expand Down Expand Up @@ -158,7 +158,7 @@ Ako imate postojeći HTML kao što je ovaj, možete ga popraviti pomoću [konver
export default function TodoList() {
return (
<>
<h1>Hedy Lamarr's Todos</h1>
<h1>Hedy Lamarr-ina Todo lista</h1>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
Expand Down Expand Up @@ -188,7 +188,7 @@ Pročitajte **[Pisanje markup-a sa JSX](/learn/writing-markup-with-jsx)** da bis

## JavaScript u JSX-u sa vitičastim zagradama {/*javascript-in-jsx-with-curly-braces*/}

JSX vam dozvoljava da pišete 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:
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:

<Sandpack>

Expand All @@ -211,9 +211,9 @@ export default function TodoList() {
alt="Gregorio Y. Zara"
/>
<ul>
<li>Unapredi the videophone</li>
<li>Pripremi predavanja iz aeronautike</li>
<li>Radi na motoru koji radi na alkohol</li>
<li>Unaprediti video-telefon</li>
<li>Pripremiti predavanja iz aeronautike</li>
<li>Raditi na motoru na alkohol</li>
</ul>
</div>
);
Expand All @@ -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!
<Sandpack>
Expand Down Expand Up @@ -347,7 +347,7 @@ export default function PackingList() {
/>
<Item
isPacked={false}
name="Foto od Tam"
name="Fotografija od Tam"
/>
</ul>
</section>
Expand Down Expand Up @@ -391,7 +391,7 @@ export default function List() {
);
return (
<article>
<h1>Scientists</h1>
<h1>Naučnici</h1>
<ul>{listItems}</ul>
</article>
);
Expand All @@ -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'
}];
Expand Down Expand Up @@ -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:

Expand All @@ -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 <h2>Šolja čaja za gosta #{guest}</h2>;
}
Expand All @@ -497,7 +497,7 @@ export default function TeaSet() {

</Sandpack>

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:

<Sandpack>

Expand Down Expand Up @@ -548,7 +548,7 @@ Primer modul zavisnosti stabla.

</Diagram>

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.

<LearnMore path="/learn/understanding-your-ui-as-a-tree">

Expand Down
6 changes: 3 additions & 3 deletions src/content/learn/editor-setup.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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*/}

Expand All @@ -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.
Loading

0 comments on commit eb5f04d

Please sign in to comment.