Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve existing translations #74

Merged
merged 9 commits into from
Sep 17, 2024
Merged

Improve existing translations #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a8991ac
Improve translation of learn/index.md
rammba Sep 16, 2024
aa6d38d
Improve translation of learn/installation.md
rammba Sep 16, 2024
17c4d83
Improve translation of start-a-new-react-project.md
rammba Sep 16, 2024
63d95cf
Improve translation of add-react-to-an-existing-project.md
rammba Sep 16, 2024
81c684f
Improve translation of editor-setup.md
rammba Sep 16, 2024
d6b8cb8
Improve translation of react-developer-tools.md
rammba Sep 16, 2024
478e04b
Improve translation of describing-the-ui.md
rammba Sep 16, 2024
be7841c
Improve translation of javascript-in-jsx-with-curly-braces.md
rammba Sep 16, 2024
eca77bd
Fix typo in javascript-in-jsx-with-curly-braces.md
rammba Sep 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions src/content/learn/add-react-to-an-existing-project.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading