Skip to content

Commit ab1f02b

Browse files
committed
Editor-setup, React-developer-tools translation
1 parent 3a92659 commit ab1f02b

File tree

2 files changed

+54
-52
lines changed

2 files changed

+54
-52
lines changed

src/content/learn/editor-setup.md

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,62 @@
11
---
2-
title: Editor Setup
2+
title: Postavka Radnog okruženja (Editora)
33
---
44

55
<Intro>
66

7-
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.
7+
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.
88

99
</Intro>
1010

1111
<YouWillLearn>
1212

13-
* What the most popular editors are
14-
* How to format your code automatically
13+
* Koji editori su najpopularniji
14+
* Kako da automatski formatirate vaš kod
1515

1616
</YouWillLearn>
1717

18-
## Your editor {/*your-editor*/}
18+
## Vaš editor {/*your-editor*/}
1919

20-
[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!
20+
[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!
2121

22-
Other popular text editors used in the React community include:
22+
Drugi popularni editori koji se koriste u React zajednici su:
2323

24-
* [WebStorm](https://www.jetbrains.com/webstorm/) is an integrated development environment designed specifically for JavaScript.
25-
* [Sublime Text](https://www.sublimetext.com/) has support for JSX and TypeScript, [syntax highlighting](https://stackoverflow.com/a/70960574/458193) and autocomplete built in.
26-
* [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.
24+
* [WebStorm](https://www.jetbrains.com/webstorm/) je integrisano razvojno okruženje dizajnirano posebno za JavaScript.
25+
* [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.
26+
* [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.
2727

28-
## Recommended text editor features {/*recommended-text-editor-features*/}
28+
## Preporučene funkcije editora {/*recommended-editor-features*/}
2929

30-
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!
30+
Neki editori dolaze sa ugrađenim funkcijama, dok drugi zahtevaju dodavanje ekstenzija. Proverite koje funkcije podržava vaš editor koji ste izabrali!
3131

3232
### Linting {/*linting*/}
3333

34-
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.
34+
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.
3535

36-
* [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/))
37-
* [Integrate ESLint in VSCode with the official extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
36+
* [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/))
37+
* [Integrišite ESLint u VSCode sa zvaničnom ekstenzijom](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
3838

39-
**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.
39+
**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.
4040

41-
### Formatting {/*formatting*/}
41+
### Formatiranje {/*formatting*/}
4242

43-
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.
43+
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.
4444

45-
You can install the [Prettier extension in VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) by following these steps:
45+
Možete instalirati [Prettier ekstenziju u VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) prateći ove korake:
4646

47-
1. Launch VS Code
48-
2. Use Quick Open (press Ctrl/Cmd+P)
49-
3. Paste in `ext install esbenp.prettier-vscode`
50-
4. Press Enter
47+
1. Pokrenite VS Code
48+
2. Koristite Brzo otvaranje (pritisnite Ctrl/Cmd+P)
49+
3. Zalepite `ext install esbenp.prettier-vscode`
50+
4. Pritisnite Enter
5151

52-
#### Formatting on save {/*formatting-on-save*/}
52+
#### Formatiranje pri čuvanju {/*formatting-on-save*/}
5353

54-
Ideally, you should format your code on every save. VS Code has settings for this!
54+
Idealno, trebalo bi da formatirate vaš kod pri svakom čuvanju. VS Code ima podešavanja za ovo!
5555

56-
1. In VS Code, press `CTRL/CMD + SHIFT + P`.
57-
2. Type "settings"
58-
3. Hit Enter
59-
4. In the search bar, type "format on save"
60-
5. Be sure the "format on save" option is ticked!
56+
1. U VS Code, pritisnite `CTRL/CMD + SHIFT + P`.
57+
2. Ukucajte "settings"
58+
3. Pritisnite Enter
59+
4. U pretraživaču, ukucajte "format on save"
60+
5. Budite sigurni da je "format on save" opcija označena!
6161

62-
> 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.
62+
> 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.

src/content/learn/react-developer-tools.md

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,31 @@ title: React Developer Tools
44

55
<Intro>
66

7-
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.
7+
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.
88

99
</Intro>
1010

1111
<YouWillLearn>
1212

13-
* How to install React Developer Tools
13+
* Kako da instalirate React Developer Tools
1414

1515
</YouWillLearn>
1616

17-
## Browser extension {/*browser-extension*/}
17+
## Browser ekstenzija {/*browser-extension*/}
1818

19-
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:
19+
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:
2020

21-
* [Install for **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
22-
* [Install for **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
23-
* [Install for **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil)
21+
* [Instalirajte za **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
22+
* [Instalirajte za **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
23+
* [Instalirajte za **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil)
2424

25-
Now, if you visit a website **built with React,** you will see the _Components_ and _Profiler_ panels.
25+
Sada, ako posetite sajt **napravljen sa React-om,** videćete _Components_ i _Profiler_ panele.
2626

27-
![React Developer Tools extension](/images/docs/react-devtools-extension.png)
27+
![React Developer Tools ekstenzija](/images/docs/react-devtools-extension.png)
2828

29-
### Safari and other browsers {/*safari-and-other-browsers*/}
30-
For other browsers (for example, Safari), install the [`react-devtools`](https://www.npmjs.com/package/react-devtools) npm package:
29+
### Safari i drugi pretraživači {/*safari-and-other-browsers*/}
30+
31+
Za svaki pretraživač (na primer, Safari), instalirajte [`react-devtools`](https://www.npmjs.com/package/react-devtools) npm paket:
3132
```bash
3233
# Yarn
3334
yarn global add react-devtools
@@ -36,26 +37,26 @@ yarn global add react-devtools
3637
npm install -g react-devtools
3738
```
3839

39-
Next open the developer tools from the terminal:
40+
Sledeće, otvorite developer tools iz terminala:
4041
```bash
4142
react-devtools
4243
```
4344

44-
Then connect your website by adding the following `<script>` tag to the beginning of your website's `<head>`:
45+
Onda konektujte vaš sajt dodavanjem sledećeg `<script>` taga na početak `<head>` vašeg sajta:
4546
```html {3}
4647
<html>
4748
<head>
4849
<script src="http://localhost:8097"></script>
4950
```
5051

51-
Reload your website in the browser now to view it in developer tools.
52+
Reloadujte vaš sajt u pretraživaču da bi ga videli u developer tools.
5253

5354
![React Developer Tools standalone](/images/docs/react-devtools-standalone.png)
5455

55-
## Mobile (React Native) {/*mobile-react-native*/}
56-
React Developer Tools can be used to inspect apps built with [React Native](https://reactnative.dev/) as well.
56+
## Mobilni telefoni (React Native) {/*mobile-react-native*/}
57+
React Developer Tools može se koristiti za inspekciju aplikacija napravljenih sa [React Native](https://reactnative.dev/).
5758

58-
The easiest way to use React Developer Tools is to install it globally:
59+
Najlakeši način da koristite React Developer Tools je da ga instalirate globalno:
5960
```bash
6061
# Yarn
6162
yarn global add react-devtools
@@ -64,13 +65,14 @@ yarn global add react-devtools
6465
npm install -g react-devtools
6566
```
6667

67-
Next open the developer tools from the terminal.
68+
Zatim otvorite Developer Tools iz terminala:
6869
```bash
6970
react-devtools
7071
```
7172

72-
It should connect to any local React Native app that's running.
73+
Trebalo bi da se poveže sa bilo kojom lokalnom React Native aplikacijom koja je pokrenuta.
74+
75+
> Pokušajte da reloadujete aplikaciju ako developer tools ne uspe da se poveže nakon nekoliko sekundi.
7376
74-
> Try reloading the app if developer tools doesn't connect after a few seconds.
77+
[Naučite više o debagovanju React Native.](https://reactnative.dev/docs/debugging)
7578

76-
[Learn more about debugging React Native.](https://reactnative.dev/docs/debugging)

0 commit comments

Comments
 (0)