Skip to content

Commit

Permalink
Improve the Slovak translation of "Why Do We Write super(props)" (#167)
Browse files Browse the repository at this point in the history 
* Improve the Slovak translation

Co-authored-by: Jozko <24671911+JosefWaida@users.noreply.github.com>

* Improve the Slovak translation

* Improve the Slovak translation

Co-authored-by: Jozko <24671911+JosefWaida@users.noreply.github.com>
  • Loading branch information
@sterekai @JosefWaida @gaearon
2 people authored and gaearon committed Jan 27, 2019
1 parent 3cebabb commit 177ea93
Showing 1 changed file with 30 additions and 32 deletions.
62 changes: 30 additions & 32 deletions src/pages/why-do-we-write-super-props/index.sk.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ date: '2018-11-30'
spoiler: Koniec bude prekvapujúci.
---

Vraj sú v Reacte [Hooks](https://reactjs.org/docs/hooks-intro.html) trendy. Ale blog začínam vysvetlením ako fungujú komponenty vytvorené pomocou *tried*.
Vraj je funkcia [Hooks](https://reactjs.org/docs/hooks-intro.html) v Reacte trendy. Ale blog začínam vysvetlením ako fungujú komponenty vytvorené pomocou *triedy*.

**Tieto veci *nie* sú dôležité na to aby ste boli produktívni pri používaní Reactu. Ale budete radi ak viete ako veci fungujú.**
**Tieto veci *nie sú* dôležité na to, aby ste boli produktívni pri používaní Reactu. Ale budete radi ak viete, ako veci fungujú.**

Tu je prvý príspevok.

---

Do kódu som napísal `super(props)` toľko krát, že už to ani nerátam:
Do kódu som napísal `super(props)` toľkokrát, že už to ani nerátam:

```jsx{3}
class Checkbox extends React.Component {
Expand All @@ -24,7 +24,7 @@ class Checkbox extends React.Component {
}
```

Samozrejme, nemusíme to robiť, keď použijeme [vlastnosti tried](https://github.com/tc39/proposal-class-fields):
Samozrejme, nemusíme to robiť, keď použijeme [vlastnosti triedy](https://github.com/tc39/proposal-class-fields):

```jsx
class Checkbox extends React.Component {
Expand All @@ -33,7 +33,7 @@ class Checkbox extends React.Component {
}
```

Podobná syntax bola [naplánovaná](https://reactjs.org/blog/2015/01/27/react-v0.13.0-beta-1.html#es7-property-initializers) ešte keď React 0.13 pridal podporu pre triedy v roku 2015. Použitie konštruktora a `super(props)` bolo len dočasným riešením dokým vlastnosti tried neposkytli pohodlnejšiu alternatívu.
Syntax podobná tomuto bola v Reacte [plánovaná](https://reactjs.org/blog/2015/01/27/react-v0.13.0-beta-1.html#es7-property-initializers) už vo verzii 0.13, ktorý pridal podporu pre triedy v roku 2015. Použitie konštruktora a `super(props)` bolo len dočasným riešením dokiaľ vlastnosti triedy neposkytli pohodlnejšiu alternatívu.

Ale vráťme sa k príkladu, ktorý používa iba funkcie štandardu ES2015:

Expand All @@ -47,27 +47,27 @@ class Checkbox extends React.Component {
}
```

**Prečo vlastne používame funkciu `super`? Môžeme ju *ne*použiť? Ak ju musíme používať, čo sa stane ak jej neposkytneme `props`? Používajú sa aj iné parametre?** Pozrime sa na to.
**Prečo vlastne používame funkciu `super`? Môžeme ju *ne*používať? Ak ju musíme používať, čo sa stane keď jej neposkytneme `props`? Používajú sa aj iné parametre?** Pozrime sa na to…

---

V JavaScripte je funkcia `super` konštruktor triedy, ktorú rozširujeme. (V tomto príklade sa jedná o implementáciu `React.Component`.)

Je dôležité vedieť, že v konštruktore nemôžete používať `this` *až pokým* ste nepoužili funkciu `super`:
Je dôležité vedieť, že v konštruktore nemôžeme používať `this` dovtedy, *pokým* nepoužijeme funkciu `super`:

```jsx
class Checkbox extends React.Component {
constructor(props) {
// 🔴 Nemôžeme používať `this`
super(props);
// ✅ Až teraz to môžeme používať
// ✅ Až teraz môžeme používať `this`
this.state = { isOn: true };
}
// ...
}
```

Existuje dobrý dôvod prečo JavaScript chce, aby ste použili konštruktor rozširovanej triedy predtým, než použijete `this`. Predstavme si takú hierarchiu:
Existuje dobrý dôvod, prečo JavaScript chce, aby sme zavolali konštruktor rozširovanej triedy *predtým*, než použijeme `this`. Predstavme si hierarchiu:

```jsx
class Person {
Expand All @@ -82,7 +82,7 @@ class PolitePerson extends Person {
super(name);
}
greetColleagues() {
alert('Dobré ráno, priatelia!');
alert('Dobrý deň, priatelia!');
}
}
```
Expand All @@ -91,14 +91,14 @@ Teraz si predstavme, že použijeme `this` pred funkciou `super`. O mesiac nesk

```jsx
greetColleagues() {
alert('Dobré ráno, priatelia!');
alert('Volám sa ' + this.name + ', rád Vás spoznávam!');
alert('Dobrý deň, priatelia!');
alert('Teší ma, volám sa ' + this.name + '!');
}
```

Ale zabudli sme, že funkcia `this.greetColleagues()` bola použitá predtým, než funkcia `super()` definovala vlastnosť `this.name`. To znamená, že vlastnosť `this.name` nie je definovaná! Ako vidíte, pri takom kóde sa veľmi ťažko rozmýšľa.
Dovtedy sme už aj zabudli, že funkcia `this.greetColleagues()` bola použitá predtým, než funkcia `super()` definovala `this.name`. To znamená, že vlastnosť `this.name` nie je definovaná! Ako vidíte, pri takom kóde sa veľmi ťažko premýšľa.

Aby sme sa tomu vyhli, **JavaScript chce, aby ste použili `super` _predtým_, než použijete `this`.** Nech si trieda, ktorá bola rozšírená, robí čo len chce! To obmedzenie platí aj na komponenty, ktoré sú definované pomocou tried:
Preto **JavaScript chce, aby sme zavolali `super` *predtým*, než použijeme `this`.** Nech si trieda, ktorá bola rozšírená, robí čo len chce! To obmedzenie platí aj na komponenty, ktoré sú definované pomocou triedy:

```jsx
constructor(props) {
Expand All @@ -108,11 +108,11 @@ Aby sme sa tomu vyhli, **JavaScript chce, aby ste použili `super` _predtým_, n
}
```

Teraz máme ďalšiu otázku: prečo funkcii `super` poskytujeme `props`?
Z toho vyplýva ďalšia otázka: prečo poskytujeme funkcii `super` parameter `props`?

---

Môžete si myslieť, že aby mohol konštruktor triedy `React.Component` nastaviť `this.props`, musíme poskytnúť funkcii `super` parameter `props`:
Aby mohol konštruktor triedy `React.Component` nastaviť `this.props`, mali by sme poskytnúť [funkcii `super` parameter `props`](https://github.com/facebook/react/blob/1d25aa5787d4e19704c049c3cfa985d3b5190e0d/packages/react/src/ReactBaseClasses.js#L22):

```jsx
// Vo vnútri Reactu
Expand All @@ -124,25 +124,23 @@ class Component {
}
```

A neboli by ste ďaleko od pravdy — [aj sa to deje](https://github.com/facebook/react/blob/1d25aa5787d4e19704c049c3cfa985d3b5190e0d/packages/react/src/ReactBaseClasses.js#L22).

Ale aj keby ste použili funkciu `super()` bez parametra `props`, stále by ste vedeli používať `this.props` v metódach ako sú `render` a podobne. (Neveríte? Vyskúšajte to!)
Ale aj keby sme zavolali funkciu `super()` bez parametra `props`, stále by sme vedeli používať `this.props` v metódach ako je `render` a podobne. (Neveríte? Vyskúšajte to!)

Ako je možné, že *to* funguje? **React nastavuje vlastnosť `props` hneď potom, ako použije *váš* konštruktor:**
Ako to je možné, že *to* funguje? **React nastavuje `props` hneď potom, ako použije *váš* konštruktor:**

```jsx
// Vo vnútri Reactu
const instance = new YourComponent(props);
instance.props = props;
// Vo vnútri Reactu
const instance = new YourComponent(props);
instance.props = props;
```

Takže aj keď zabudnete poskytnúť `props` funkcii `super()`, React ich nastaví. A je na to aj dôvod.
Takže aj keď zabudneme poskytnúť `props` funkcii `super()`, React ich nastaví. Aj na to je dôvod.

Keď React pridal podporu pre triedy, nepridal podporu iba pre ES6. Cieľom bolo pridať podporu pre čo najviac abstrakcií tried. A vtedy [nebolo jasné](https://reactjs.org/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages), ako úspešné budú jazyky ako sú ClojureScript, CoffeeScript, ES6, Fable, Scala.js alebo TypeScript. Takže React bol zámerne nestranný, a nevyžadoval použitie funkcie `super()` — aj keď sú triedy štandardu ES6 iné.
Keď React pridal podporu pre triedy, nepridal podporu iba pre ES6. Cieľom bolo pridať podporu pre čo najviac abstrakcii triedy. A vtedy [nebolo jasné](https://reactjs.org/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages), ako úspešné budú jazyky ako sú ClojureScript, CoffeeScript, ES6, Fable, Scala.js alebo TypeScript. React bol zámerne nestranný, a nevyžadoval použitie funkcie `super()` — aj keď sú triedy štandardu ES6 iné.

Znamená to, že môžeme použiť `super()` namiesto `super(props)`?
Znamená to, že môžeme používať `super()` namiesto `super(props)`?

**Ani nie, pretože je to stále mätúce.** Áno, React nastaví `this.props` *potom* ako bol váš konštruktor spustený. Ale `this.props` stále nie je definovaný *od* použitia funkcie `super` *až* po koniec konštruktora:
**Ani nie, pretože je to mätúce.** Áno, React nastaví `this.props` *potom*, ako bol váš konštruktor spustený. Lenže *od* zavolania funkcie `super` *až* po koniec konštruktora nebude `this.props` definovaný:

```jsx{14}
// Vo vnútri Reactu
Expand All @@ -164,7 +162,7 @@ class Button extends React.Component {
}
```

A je výzvou opraviť chybu, ktorá nastane v nejakej funkcii, ktorá je použitá *v konštruktore*. **Práve preto vždy odporúčam používať `super(props)`, aj keď to nie je nevyhnutné:**
A je výzvou opraviť chybu, ktorá nastane, keď je nejaká funkcia volaná *v konštruktore*. **Práve preto vždy odporúčam používať `super(props)`:**

```jsx
class Button extends React.Component {
Expand All @@ -181,12 +179,12 @@ Vďaka tomu bude `this.props` dostupný ešte predtým, než bude konštruktor u

-----

Tu je ešte jedna vec o ktorú sa môžu dlhodobí používatelia Reactu zaujímať.
Je ešte jedna vec, o ktorú sa môžu zaujímať dlhodobí používatelia Reactu.

Mohli ste si všimnúť, že keď v triedach použijete Context API (či už pomocou zastaralého API `contextTypes` alebo moderného API `contextType`, pridaného v Reacte 16.6), `context` je druhým parametrom konštruktora.
Mohli ste si všimnúť, že keď sa v triede použije Context API (či už pomocou zastaralého `contextTypes` alebo moderného `contextType`, pridaného vo verzii 16.6), `context` je druhým parametrom konštruktora.

Prečo teda nepoužívame `super(props, context)`? Môžeme, ale `context` sa nepoužíva až tak často.

**Aj tak je vďaka vlastnostiam triedy tento problém vyriešený.** Bez daného konštruktora sú všetky parametre dané rozširovanej funkcii. Kvôli tomu môže `state = {}` použiť `this.props` alebo `this.context`.
**Vďaka vlastnostiam triedy je tento problém vyriešený.** Bez daného konštruktora sú všetky parametre dané rozširovanej triede. Kvôli tomu môže `state = {}` použiť `this.props` alebo `this.context`.

Keď používame Hooks, nepoužívame ani `super`, ani `this`. Ale to je téma do budúcna.
Keď používame funkciu Hooks, nepoužívame ani `super`, ani `this`. Ale to je téma do budúcna.

0 comments on commit 177ea93

Please sign in to comment.