Skip to content

Commit 4d58a2a

Browse files
Apply suggestions from code review
Co-Authored-By: Orsi <punkah@gmail.com>
1 parent be7dc9a commit 4d58a2a

File tree

1 file changed

+24
-24
lines changed

1 file changed

+24
-24
lines changed

content/docs/add-react-to-a-website.md

+24-24
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ Használj pont annyi Reactet, amennyit szeretnél. Se többet, se kevesebbet.
1212

1313
A React a kezdetektől fogva úgy lett tervezve, hogy fokozatosan lehessen adoptálni és **pontosan annyi Reactet kelljen használnod, amennyire szükség van**. Talán csak néhány "csipetnyi interaktivitást" szeretnél hozzáadni egy meglévő oldalhoz. A React komponensek erre tökéletesen megfelelnek.
1414

15-
A legtöbb weblap nem single-page alkalmazás, és nem is kell annak lenniük. Próbáld a Reactet **csak pár sornyi kóddal és bárminemű kód transzformáló eszköz nélkül** hozzáadni a weblapod egy kis részéhez. Eztuán fokozatosan tudod növelni a jelenlétét, vagy megtarthatod néhány dinamikus widgetként.
15+
A legtöbb weblap nem single-page alkalmazás, és nem is kell annak lenniük. Próbáld a Reactet **csak pár sornyi kóddal és bárminemű kód transzformáló eszköz nélkül** hozzáadni a weblapod egy kis részéhez. Eztután fokozatosan tudod növelni a jelenlétét, vagy megtarthatod néhány dinamikus widgetként.
1616

1717
---
1818

@@ -21,15 +21,15 @@ A legtöbb weblap nem single-page alkalmazás, és nem is kell annak lenniük. P
2121

2222
## React hozzáadása egy perc alatt {#add-react-in-one-minute}
2323

24-
Ebben a fejezetben megmutatjuk hogyan adhatsz hozzá egy React komponenst egy meglévő HTML oldalhoz. Tarts velünk a saját weboldaladdal, vagy készíts egy üres HTML fájlt a gyakorláshoz.
24+
Ebben a fejezetben megmutatjuk, hogyan adhatsz hozzá egy React komponenst egy meglévő HTML oldalhoz. Tarts velünk a saját weboldaladdal, vagy készíts egy üres HTML fájlt a gyakorláshoz.
2525

26-
Nem lesz szükség se komplikált eszközökre vagy követelmények telepítésére -- **ahhoz hogy be tudd fejezni ezt a fejezetet, csak egy internetelérésre lesz szükség és egy szabad percedre.**
26+
Nem lesz szükség komplikált eszközökre vagy követelmények telepítésére -- **ahhoz, hogy be tudd fejezni ezt a fejezetet, csak internetelérésre lesz szükség és egy szabad percedre.**
2727

2828
Választható: [Töltsd le a teljes példát (Tömörítve 2KB)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)
2929

3030
### Első lépés: Adj hozzá egy DOM konténert a HTML-hez {#step-1-add-a-dom-container-to-the-html}
3131

32-
Először nyisd meg a HTML oldalt amit szerkeszteni szeretnél. Adj hozzá egy üres `<div>` címkét és jelöld meg azt a helyet ahol valamit Reacttel szeretnél megjeleníteni. Például:
32+
Először nyisd meg a HTML oldalt, amit szerkeszteni szeretnél. Adj hozzá egy üres `<div>` címkét és jelöld meg azt a helyet, ahol valamit Reacttel szeretnél megjeleníteni. Például:
3333

3434
```html{3}
3535
<!-- ... meglévő HTML ... -->
@@ -39,7 +39,7 @@ Először nyisd meg a HTML oldalt amit szerkeszteni szeretnél. Adj hozzá egy
3939
<!-- ... meglévő HTML ... -->
4040
```
4141

42-
Ennek a `<div>`-nek adtunk egy egyedi `id` HTML attribútumot. Ez lehetővé teszi számunkra hogy ezt később könnyen megtaláljuk JavaScript kódból, és egy React komponenst jelenítsünk meg benne.
42+
Ennek a `<div>`-nek adtunk egy egyedi `id` HTML attribútumot. Ez lehetővé teszi számunkra, hogy ezt később könnyen megtaláljuk JavaScript kódból, és egy React komponenst jelenítsünk meg benne.
4343

4444
>Tipp
4545
>
@@ -69,62 +69,62 @@ A két első címke a Reactet töltik be. A harmadik a komponensed kódját fogj
6969

7070
Készíts egy fájlt a HTML oldalad mellett és nevezd el `like_button.js`-nek.
7171

72-
Nyisd meg **[ezt a kezdő kódot](https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** és másold be a tartalmát a fájlba amit készítettél.
72+
Nyisd meg **[ezt a kezdő kódot](https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** és másold be a tartalmát a fájlba, amit készítettél.
7373

7474
>Tipp
7575
>
76-
> Ez a kód egy `LikeButton` nevű React komponenst definiál. Ne aggódj ha még nem érted -- később át fogjuk venni a React építőelemeit a [gyakorlati tutoriálunkban](/tutorial/tutorial.html) és a [főbb koncepciók útmutatónkban](/docs/hello-world.html). Egyenlőre elég ha meggyőződünk róla, hogy megjelenik a képernyőn!
76+
> Ez a kód egy `LikeButton` nevű React komponenst definiál. Ne aggódj, ha még nem érted -- később át fogjuk venni a React építőelemeit a [gyakorlati tutoriálunkban](/tutorial/tutorial.html) és a [főbb koncepciók útmutatónkban](/docs/hello-world.html). Egyelőre elég, ha meggyőződünk róla, hogy megjelenik a képernyőn!
7777
7878

7979
Adj hozzá két sort a `like_button.js` alján **[a kezdő kód](https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** után:
8080

8181
```js{3,4}
82-
// ... a kezdő kód amit bemásoltál ...
82+
// ... a kezdő kód, amit bemásoltál ...
8383
8484
const domContainer = document.querySelector('#like_button_container');
8585
ReactDOM.render(e(LikeButton), domContainer);
8686
```
8787

88-
Ez a két sor kód megtalálja a `<div>`-et amit a HTML-hez adtunk az első lépésben, és megjeleníti benne a "Tetszik" React komponens gombunkat.
88+
Ez a két sor kód megtalálja a `<div>`-et, amit a HTML-hez adtunk az első lépésben, és megjeleníti benne a "Tetszik" React komponens gombunkat.
8989

9090
### És ennyi! {#thats-it}
9191

9292
Nincs negyedik lépés. **Ezzel hozzáadtad az első React komponenst a weblapodhoz.**
9393

94-
Még több React integrálási tippért nézd meg a következő fejezeteket.
94+
Még több React integrálási tippért olvass tovább.
9595

9696
**[Nézd meg a példa teljes forráskódját](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)**
9797

9898
**[Töltsd le a teljes példát (Tömörítve 2KB)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)**
9999

100100
### Tipp: Egy komponens újrafelhasználása {#tip-reuse-a-component}
101101

102-
Általában több helyen akarsz React komponenseket megjeleníteni a HTML oldaladon. Íme egy példa ami a "Tetszik" gombot háromszor jeleníti meg és valamennyi adatot is átad neki:
102+
Általában több helyen akarsz React komponenseket megjeleníteni a HTML oldaladon. Íme egy példa, ami a "Tetszik" gombot háromszor jeleníti meg és valamennyi adatot is átad neki:
103103

104104
[Nézd meg a példa teljes forráskódját](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda)
105105

106106
[Töltsd le a teljes példát (Tömörítve 2KB)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip)
107107

108108
>Megjegyzés
109109
>
110-
> Ez a stratégia akkor a leghatásosabb ha az oldal Reacttel hajtott részei elzártak egymástól. A React kódon belül egyszerűbb inkább [komponens kompozíciót](/docs/components-and-props.html#composing-components) használni.
110+
> Ez a stratégia akkor a leghatásosabb, ha az oldal Reacttel hajtott részei elzártak egymástól. A React kódon belül egyszerűbb inkább [komponens kompozíciót](/docs/components-and-props.html#composing-components) használni.
111111
112112
### Tipp: Csökkentsük a JavaScript méretét a publikáláshoz {#tip-minify-javascript-for-production}
113113

114-
Mielőtt a weboldalt végstádiumba publikálod, tartsd szem előtt hogy a nem tömörített JavaScript kód jelentősen lelassíthatja az oldalad a felhasználók számára.
114+
Mielőtt a weboldalt végstádiumba publikálod, tartsd szem előtt, hogy a nem tömörített JavaScript kód jelentősen lelassíthatja az oldalad a felhasználók számára.
115115

116-
Ha már csökkented az alkalmazásod scriptjeinek a méretét, **az oldalad készen áll a végstádiumra** amennyiben a publikált HTML oldalad a `production.min.js` végződésű React verziót tölti be:
116+
Ha már csökkented az alkalmazásod scriptjeinek a méretét, **az oldalad készen áll a végstádiumra**, amennyiben a publikált HTML oldalad a `production.min.js` végződésű React verziót tölti be:
117117

118118
```js
119119
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
120120
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
121121
```
122122

123-
Ha nincs kódcsökkentő lépésed a scriptekhez, [itt egy módja hogyan tudod ezt beállítani](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3).
123+
Ha nincs kódcsökkentő lépésed a scriptekhez, [itt egy módja, hogyan tudod ezt beállítani](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3).
124124

125125
## Választható: Próbáld ki a Reactet JSX-el {#optional-try-react-with-jsx}
126126

127-
A fenti példákban csak a böngészők által alapból támogatott funkciókra hagyatkoztunk. Ezért használtunk egy JavaScript függvény meghívást, hogy közöljük a Reacttel mit jelenítsen meg:
127+
A fenti példákban csak a böngészők által alapból támogatott funkciókra hagyatkoztunk. Ezért használtunk egy JavaScript függvény meghívást, hogy közöljük a Reacttel, mit jelenítsen meg:
128128

129129
```js
130130
const e = React.createElement;
@@ -150,7 +150,7 @@ return (
150150

151151
Ez a két kódrészlet ekvivalens egymással. Bár **a JSX [teljesen szabadon választható](/docs/react-without-jsx.html)**, sok ember hasznosnak tartja felhasználói felület kód írásához -- mind a Reacttel és más könyvtárak esetében is.
152152

153-
A JSX-el [ennek az online konverternek](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3) a segítségével játszadozhatsz egy kicsit.
153+
A JSX-el [ennek az online konverternek](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3) a segítségével játszadozhatsz egy kicsit.
154154

155155
### Próbáld ki a JSX-et gyorsan {#quickly-try-jsx}
156156

@@ -160,13 +160,13 @@ Ha a leggyorsabban akarod kipróbálni a JSX-et a projektedben, add hozzá ezt a
160160
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
161161
```
162162

163-
Eztuán bármelyik `<script>` címkében használhatsz JSX-et amihez hozzáadtad a `type="text/babel"` attribútumot. Itt egy letölthető [HTML példafájl JSX-el](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html), játssz vele.
163+
Eztuán bármelyik `<script>` címkében használhatsz JSX-et, amihez hozzáadtad a `type="text/babel"` attribútumot. Itt egy letölthető [HTML példafájl JSX-el](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html), játssz vele.
164164

165-
Ez a megközelítés nem rossz tanulás és egyszerű demók készítése esetén. Azonban lelassítja a weblapodat, és **alkalmatlanná teszi azt publikálásra**. Ha készen állsz a továbblépésre, távolítsd el a `<script>` címkét és a `type="text/babel"` attribútumot amit az előbb hozzáadtál. Helyette a következő fejezetben beállítasz egy JSX preprocesszort, ami az összes `<script>` címkét automatikusan átalakítja.
165+
Ez a megközelítés nem rossz tanulás és egyszerű demók készítése esetén. Azonban lelassítja a weblapodat, és **alkalmatlanná teszi azt publikálásra**. Ha készen állsz a továbblépésre, távolítsd el a `<script>` címkét és a `type="text/babel"` attribútumot, amit az előbb hozzáadtál. Helyette a következő fejezetben beállítasz egy JSX preprocesszort, ami az összes `<script>` címkét automatikusan átalakítja.
166166

167167
### JSX hozzáadása egy projekthez {#add-jsx-to-a-project}
168168

169-
JSX-et hozzáadni egy projekthez nem igányel komplikált eszközöket mint csomagolók vagy fejlesztői szerver. Alapjában véve a JSX hozzáadása **nagyon hasonló egy CSS preprocesszor hozzáadásához.** Az egyetlen követelmény a [Node.js](https://nodejs.org/) jelenléte a számítógépeden.
169+
JSX-et hozzáadni egy projekthez nem igányel komplikált eszközöket, mint csomagolók vagy fejlesztői szerver. Alapjában véve a JSX hozzáadása **nagyon hasonló egy CSS preprocesszor hozzáadásához.** Az egyetlen követelmény a [Node.js](https://nodejs.org/) jelenléte a számítógépeden.
170170

171171
Menj a projekted mappájához a terminálban és másold be ezt a két parancsot:
172172

@@ -192,12 +192,12 @@ npx babel --watch src --out-dir . --presets react-app/prod
192192
>
193193
>Az `npx` az első sorban nem elírás -- ez egy [csomag futtató eszköz ami az npm 5.2 óta elérhető](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b).
194194
>
195-
> Ha egy hibaüzenetet látsz ami ezt írja "You have mistakenly installed the `babel` package", valószínűleg kifelejtetted [az előző lépést](#add-jsx-to-a-project). Menj rajta végig ugyanabban a mappában és próbálkozz újra.
195+
> Ha egy hibaüzenetet látsz, ami ezt írja "You have mistakenly installed the `babel` package", valószínűleg kifelejtetted [az előző lépést](#add-jsx-to-a-project). Menj rajta végig ugyanabban a mappában és próbálkozz újra.
196196
197197
Ne várj a parancs lefutására -- ez a parancs egy automatikus JSX figyelőt indít el.
198198

199-
Ha most készítesz egy `src/like_button.js` nevű fájlt ezzel a **[JSX kezdő kóddal](https://gist.github.com/gaearon/c8e112dc74ac44aac4f673f2c39d19d1/raw/09b951c86c1bf1116af741fa4664511f2f179f0a/like_button.js)**, a figyelő egy előre feldolgozott `like_button.js` fájlt fog készíteni egyszerű JavaScript kóddal ami megfelel a böngészőnek. Amikor a JSX forrásfájlt szerkeszted, a konvertálás újra le fog futni automatikusan.
199+
Ha most készítesz egy `src/like_button.js` nevű fájlt ezzel a **[JSX kezdő kóddal](https://gist.github.com/gaearon/c8e112dc74ac44aac4f673f2c39d19d1/raw/09b951c86c1bf1116af741fa4664511f2f179f0a/like_button.js)**, a figyelő egy előre feldolgozott `like_button.js` fájlt fog készíteni egyszerű JavaScript kóddal, ami a böngésző számára is olvasható. Amikor a JSX forrásfájlt szerkeszted, a konvertálás újra le fog futni automatikusan.
200200

201-
Bónuszként ez modern JavaScript szintaxis funkciók - mint például osztályok - használatát is lehetővé teszi anélkül, hogy régi böngészőkben esetlegesen fellépő hibáktól kéne tartanod. Az imént használt eszköz neve Babel és ha többet akarsz tanulni róla nézd meg [annak dokumentációját](https://babeljs.io/docs/en/babel-cli/).
201+
Bónuszként ez modern JavaScript szintaxis funkciók - mint például osztályok - használatát is lehetővé teszi anélkül, hogy régi böngészőkben esetlegesen fellépő hibáktól kéne tartanod. Az imént használt eszköz neve Babel, és ha többet akarsz tanulni róla, nézd meg [annak dokumentációját](https://babeljs.io/docs/en/babel-cli/).
202202

203-
Ha úgy érzed, hogy kezdesz megbarátkozni az építő eszközökkel és azt szeretnéd hogy több munkát végezzenek el helyetted, [a következő fejezet](/docs/create-a-new-react-app.html) a legnépszerűbb és legkönnyebben megközelíthető eszközláncokat írja le. Ha még nem érzed magad készen -- azok a script címkék tökéletesen megfelelnek!
203+
Ha úgy érzed, hogy kezdesz megbarátkozni az építő eszközökkel és azt szeretnéd, hogy több munkát végezzenek el helyetted, [a következő fejezet](/docs/create-a-new-react-app.html) a legnépszerűbb és legkönnyebben megközelíthető eszközláncokat írja le. Ha még nem érzed magad készen -- azok a script címkék tökéletesen megfelelnek!

0 commit comments

Comments
 (0)