Skip to content

Commit ff73457

Browse files
Merge pull request #65 from gergely-nagy/tutorial-fix
fix tutorial.md
2 parents 67e50d1 + 169d6a5 commit ff73457

File tree

1 file changed

+6
-6
lines changed

1 file changed

+6
-6
lines changed

content/tutorial/tutorial.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,7 @@ Ha most kattintasz a Square-re, egy értesítést kell láss a böngésződben.
265265
266266
Következő lépésként azt próbáljuk elérni, hogy a Square komponens "emlékezzen" arra, hogy rá lett kattintva, és töltse ki magát egy "X"-szel. Ahhoz, hogy komponensek "emlékezni" tudjanak, **state**-t (állapotot) használnak.
267267
268-
React komponensekben állapotot a `this.state` segítségével deklarálhatunk, a konstruktorban. A `this.state` állapotra úgy kell tekintenünk, hogy az privát legyen abban az osztályban, amiben az definiálva lett. Tároljuk a Square jelenlegi értékét a `this.state` objektumban, és változtassuk azt meg, ha a Square-re kattintunk.
268+
React komponensekben állapotot a `this.state` segítségével deklarálhatunk a konstruktorban. A `this.state` állapotra úgy kell tekintenünk, hogy az privát legyen abban az osztályban, amiben az definiálva lett. Tároljuk a Square jelenlegi értékét a `this.state` objektumban, és változtassuk azt meg, ha a Square-re kattintunk.
269269
270270
Először is adjunk hozzá egy konstruktort az osztályhoz, hogy inicializáljuk az állapotot:
271271
@@ -455,7 +455,7 @@ Amikor a Square komponensre rákattintanak, az `onClick` függvény meg lesz hí
455455
2. Amikor a gombra kattintanak, a React meghívja az `onClick` eseményfigyelőt, ami a Square komponens `render()` metódusában definiálva lett.
456456
3. Ez az eseményfigyelő meghívja a `this.props.onClick()` függvényt. A Square `onClick` propja a Board komponensben lett definiálva.
457457
4. Mivel a Board leküldte az `onClick={() => this.handleClick(i)}` propot a Square komponensnek, a Square meghívja a `this.handleClick(i)` függvényt, ha rákattintanak.
458-
5. Mivel a `handleClick()` metódust még nem definiáltuk, a kódunk összeomlik. Ha most kattintasz egy négyzetre, egy piros hibát kell látnod a képernyőt, ami valami olyat mond, hogy "this.handleClik is not a function", azaz "a this.handleClick nem függvény".
458+
5. Mivel a `handleClick()` metódust még nem definiáltuk, a kódunk összeomlik. Ha most kattintasz egy négyzetre, egy piros hibát kell látnod a képernyőn, ami valami olyat mond, hogy "this.handleClick is not a function", azaz "a this.handleClick nem függvény".
459459

460460
>Megjegyzés
461461
>
@@ -560,7 +560,7 @@ A változások észlelése egy megváltoztathatatlan objektum esetén jelentőse
560560

561561
#### Újrarenderelés megállapítása Reactben {#determining-when-to-re-render-in-react}
562562

563-
A megváltoztathatatlanság legfőbb előnye, hogy az segít a Reactben _tiszta komponensek_ építésében. A megváltoztathatatlan adat könnyen megállapíthatja, ha valamilyen változás történt, ami azt segít megállapítani, hogy egy komponensnek újra kell-e renderelnie.
563+
A megváltoztathatatlanság legfőbb előnye, hogy az segít a Reactben _tiszta komponensek_ építésében. A megváltoztathatatlan adat könnyen megállapíthatja, ha valamilyen változás történt, ami azt segít meghatározni, hogy egy komponensnek újra kell-e renderelnie.
564564

565565
A `shouldComponentUpdate()` metódusról, és hogy hogyan készíts *tiszta komponenseket*, a [Teljesítmény optimalizálása](/docs/optimizing-performance.html#examples) olvasásával tanulhatsz többet.
566566

@@ -717,7 +717,7 @@ function calculateWinner(squares) {
717717
}
718718
```
719719

720-
Adott egy 9 négyzetet tartalmazó tömb, ez a függvény leellenőrzi hogy van-e győztes, és ennek megfelelően visszaadhat `'X'`-szet, `'O'`-t, vagy `null` értéket.
720+
Adott egy 9 négyzetet tartalmazó tömb, ez a függvény leellenőrzi, hogy van-e győztes, és ennek megfelelően visszaadhat `'X'`-szet, `'O'`-t, vagy `null` értéket.
721721

722722
A `calculateWinner(squares)` függvényt meghívjuk a Board `render` metódusában, hogy megtudjuk van-e győztes. Ha egy játékos nyert, akkor mutathatunk valami olyan szöveget mint: "Győztes: X" vagy "Győztes: O". Cseréljük le a `status` deklarációját is a Board `render` metódusában erre a kódra:
723723

@@ -735,7 +735,7 @@ A `calculateWinner(squares)` függvényt meghívjuk a Board `render` metódusáb
735735
// más változás nincs
736736
```
737737

738-
Most már megváltoztathatjuk a Board `handleClick` metódusát is, hogy az korán térjen vissza, ignorálva a kattintásokat, ha valaki megnyerte a játékot, vagy ha a Square már ki van töltve:
738+
Most már megváltoztathatjuk a Board `handleClick` metódusát is, hogy az előbb térjen vissza, ignorálva a kattintásokat, ha valaki megnyerte a játékot, vagy ha a Square már ki van töltve:
739739

740740
```javascript{3-5}
741741
handleClick(i) {
@@ -1203,7 +1203,7 @@ Nézd meg a végeredményt itt: **[Végeredmény](https://codepen.io/gaearon/pen
12031203
Ha van egy kis extra időd, vagy szeretnéd gyakorolni a React új képességeidet, íme pár ötlet a tic-tac-toe játék tökéletesítéséhez, nehézség szerint növekvő sorrendben:
12041204

12051205
1. Mutasd minden lépés pozícióját az (oszlop, sor) formátumban a lépéstörténet listában.
1206-
2. Tedd kövérré a jelenleg kiválasztott element a lépés listában.
1206+
2. Tedd félkövérré az aktuálisan kiválasztott elemet a lépés listában.
12071207
3. Írd át a Board komponenst úgy, hogy az két ciklust használjon négyzetek készítéséhez belekódolás helyett.
12081208
4. Adj hozzá egy kapcsoló gombot, ami lehetővé teszi a lépések szortírozását növekvő vagy csökkenő sorrendben.
12091209
5. Ha valaki nyer, emeld ki a három négyzetet, ami lehetővé tette a játékosnak a nyerést.

0 commit comments

Comments
 (0)