Dnes vyzdvihnu základy světa Reactu. Pokud jste právě začali svou cestu v ReactJS, pak bych řekl, že jste přistáli na správném místě. V tomto článku jsem se pokusil pokrýt základy Reactu velmi jednoduchým způsobem. Doufám, že na konci článku budete znát základní koncepty Reactu.
Začněme.
ReactJS — výkonná knihovna
Jak jste si již mohli přečíst na mnoha místech, React je knihovna pro vytváření webového a mobilního uživatelského rozhraní. Byl vyvinut společností Facebook.
ReactJS je řízen komponentami. Vše je komponenta, která je zodpovědná za nějakou funkčnost. Píšete malé, malé komponenty a pak je spojíte dohromady, abyste vytvořili velké komponenty. Díky tomu je kód čitelnější a srozumitelnější. Funkce, díky kterým je React výkonný a krásný, jsou:
- Používá koncept virtuálního DOM namísto skutečného DOM.
- Čitelnost kódu díky JSX. Díky použití JSX máte pocit, jako byste psali webové aplikace (připomíná JavaScript jako HTML).
- Také používá SSR (SSR pomáhá v SEO).
To jsou věci, o kterých jste možná četli, ale pochopíte a pocítíte, když si projdete tento tutoriál. Pojďme se tedy ponořit do konceptu virtuálního DOM (řekl bych, že toto je hlavní funkce, díky které je React krásnější).
Virtuální DOM ReactJS
Virtuální DOM je kopií skutečného DOM. Na rozdíl od skutečného DOM provádí virtuální DOM minimální množství manipulací s DOM, aby komponenty byly aktuální. Aktualizuje pouze část, která byla aktualizována.
Manipulace s DOM je velmi snadná. Zde je vizuální ukázka toho, jak virtuální DOM funguje:
- Virtuální DOM je kopií skutečného DOM.
2. Když se v komponentě změní data, celé uživatelské rozhraní se znovu vykreslí ve virtuálním DOM.
3. Poté proběhne srovnání mezi skutečným DOM a virtuálním DOM.
4. Jakmile je výpočet hotový, skutečný DOM se aktualizuje o věci, které se změnily.
Mluvili jsme o jedné ze skvělých funkcí Reactu – to je virtuální DOM, ale počkejte! Co bylo JSX ve druhé funkci (výše uvedené body o funkci)? Možná vás napadlo, co to bylo, jaký byl jeho vztah k Reactu a jak nám to dává pocit psaní webových aplikací...
Tentokrát se pojďme ponořit do fondu JSX.
JSX
Než budeme pokračovat, podívejme se na níže uvedený kód:
class FirstComponent extends React.Component {
render() {
return (
<span className='customSize'>My First Component</span>
);
}
}class FirstComponent extends React.Component {
render() {
return (
React.createElement('span',{className: 'customSize'}, 'My First Component')
);
}
}V prvním příkladu funkce vykreslování vypadá, jako by vracela kód HTML, ale toto je JSX. Prvním příkladem je verze JSX druhého . JSX je rozšíření JavaScriptu, které dává vašemu kódu JS vzhled HTML.
Pokud se podíváte na druhý příklad, React.createElement se používá k vytvoření prvku reakce, který představuje komponentu reakce. Druhý argument může být prázdný nebo prázdný, pokud pro prvek nejsou potřeba žádné rekvizity nebo atributy. Třetí argument definuje, co by v něm mělo být (jako každý jiný prvek React, řekněme
Pokud se podíváte na výše uvedené dva bloky kódu, zjistíte, že první z nich je známější, protože dává dojem HTML. JSX také zvyšuje čitelnost kódu. Podívejme se na další příklad, bez JSX a s JSX, abychom získali představu o čitelnosti kódu.
ReactJS bez JSX:
React.createElement("div", null,
React.createElement("img", {src: "image.jpg", alt: "Random photo"}),
React.createElement("h3", null, "Hello React"));ReactJS s verzí JSX:
<div>
<img src="image.jpg" alt="Random photo" />
<h3>Hello React</h3>
</div>Když se podíváte na výše uvedený příklad, můžete pochopit, co jsem říkal o čitelnosti kódu. Jak snadné je číst kód pomocí JSX, že? Myslím, že to na JSX stačí a doufám, že nyní budete moci lépe porozumět síle JSX ve světě Reactu.
Poznámka – Prohlížeče nejsou schopny číst JSX. Musíme to tedy převést do JavaScriptu pomocí transformátorů JSX (řekněme babel), aby tomu prohlížeč rozuměl.
Nyní víme, co je JSX. Ale byl bych rád, abyste přešli na předchozí obrázek, kde jsem psal, že React je celý o součástkách. Je poháněn komponentami. Protože komponenty jsou stavebními kameny Reactu, pojďme je prozkoumat.
ReactJS Heart – komponenty
Možná jste během výzkumu na Reactu narazili na níže uvedený kód, jak vytvářet komponenty:
class MyStatefulComponent extends React.Component {
state = {
title: ''
}
componentDidMount() {
console.log('Component mounted')
}
render() {
return <div>{this.props.name}</div>;
}
}Pokud komponentu napíšete výše uvedeným způsobem, nazývá se třída/stav/kontejner komponent. Pokud si myslíte, že toto je jediný způsob vytváření komponent, zamyslete se znovu. Ano, existuje jiný způsob vytvoření komponenty, jehož výsledkem jsou funkční / bezstavové / prezentační komponenty. Než budeme pokračovat, podívejme se, jak se píší funkční komponenty:
const MyStatelessComponent = props => <div>{props.name}</div>;Nyní se můžete divit, jaký je mezi nimi rozdíl a jak byste si měli vybrat, který typ vytvořit. Pojďme se tedy ponořit do fondu Stateful a Stateless komponent.
Bez státní příslušnosti (nebo prezentační či funkční) komponenty jsou ty komponenty, které nemají žádný stav (nevíte o stavu? Žádný strach, vysvětlím to v pozdější části). Používají se k prezentaci toho, jak chcete, aby vaše komponenta vypadala.
Komponenta je jednoduchá JavaScriptová funkce, která jako argument bere prop a vrací element React (viz výše uvedený příklad). Jeho jméno je samovysvětlující – nemá žádný stav. Nemá žádné metody životního cyklu (jako componentDidMount metoda atd., kterou jste si mohli přečíst během svého výzkumu v tutoriálech React).
Status (nebo kontejner nebo třída) komponenty jsou ty komponenty, které mají stav — zdroj dat (můžete v něm volat this.setState), metody životního cyklu (lze použít k volání API). Je to třída JavaScriptu, která rozšiřuje vaši komponentu React, což znamená, že React vytváří její instance. React inicializujte třídu komponenty, abyste mohli používat metody životního cyklu, inicializaci stavu a další.
Počkejte… teď vás možná zajímá, který z nich je lepší a co si vybrat? Na tuto otázku můžete odpovědět, pokud máte na mysli otázku, jak oddělit logickou část od prezentační. Ano, je zvláštní, že jedna otázka odpovídá na jinou otázku, ale brzy pochopíte, proč jsem to řekl.
Jak jste mohli vidět v jiných výukových programech React, používají třídy pro vytváření svých komponent. Umístili logické i prezentační části do stejné komponenty, díky čemuž je tato komponenta složitější a objemnější.
Pokud tedy chcete oddělit logické komponenty od prezentačních, pak je třída komponent nejvhodnější pro logické věci, jako je načítání dat z API nebo změny dat. Na druhou stranu, pokud je vaše komponenta zaměřena na prezentační/funkční věci, komponenta by měla vypadat dobře.
Zkrátka bych řekl použít obojí. Třídu komponenty použijte, když potřebujete jednu z věcí (metody životního cyklu, stav) a pro prezentaci použijte funkční komponentu.
To je vše o komponentách.
Nyní máme obrázek o tom, jak můžeme psát komponenty, ale neřekl jsem vám, jak v nich můžeme spravovat data. Myslím, že bez dat by byly komponenty k ničemu. Takže se podíváme na to, jak můžeme spravovat data komponenty (jako je načítání dat z API, příběh React ‚stav‘, nastavení stavu a tak dále).
Začněme.
rekvizity
„Prop“ je zkratka pro vlastnosti a to je jediný zdroj dat v naší komponentě. Lze jej použít k předávání dat různým komponentám. Počkejte! Byl bych rád, kdybyste se vrátili tam, kde jsem vám řekl o prezentačních a třídních složkách. Řekl jsem vám, abyste používali prezentační komponenty ke správě toho, jak by vaše komponenta měla vypadat, a komponenty kontejneru pro manipulaci s daty a tak dále. Správně!
Takže „rekvizita“ je ta, kterou můžeme použít k vytvoření spojení mezi těmito dvěma typy komponent. Ano, můžete použít rekvizity pro předávání dat z kontejnerové komponenty do prezentační komponenty, kde prezentační komponenta vykreslí pohled s vašimi dynamickými daty. Pro lepší pochopení se prosím podívejte na níže uvedený kód:
import {ButtonView} from './button.presentation';
class MyContainerComponent extends React.Component {
state={
text : 'Submit'
}
render() {
return (
<ButtonView btnText={this.state.text}/>
)
}
} export const ButtonView=({btnText})=>(
<div>
<button className="btn btn-info btn-lg">{btnText}</button> </div>
)Stejně jako výše uvedeným způsobem (pomocí rekvizit — ‚btnText‘) můžete oddělit logickou část od části prezentační. Dalším rysem rekvizit je, že jsou pouze pro čtení, tj. jsou neměnné. Nebudou se měnit uvnitř komponenty, ve které jsou předávány. Datový tok je také jednosměrný – což nám poskytuje jednosměrnou datovou vazbu (na rozdíl od Angular).
Mohou však nastat případy, kdy chceme data změnit (např. v některých případech uživatelem a podobně). V tomto případě tedy „Stát“ přichází na trh React. Pojďme se do toho ponořit.
Stát
Jak jsem vám řekl, rekvizity jsou neměnné, zatímco stav je pro měnitelná data – to jsou data, která se změní v reakci na určité události. Pokud tedy chcete změnit hodnotu dat, uložte je ve stavu. Stav jsou objekty, které ukládají data vaší komponenty. Pro lepší představu o tom, jak je stav definován a jak jej používat, uvádíme příklad:
class LoginContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
userName: "",
};
}
onFilluserName = event => {
this.setState({
userName: event.target.value,
});
}
render() {
return (
<div>
<input value={this.state.userName} onChange= {this.onFilluserName}
</div>
);
}
}Z výše uvedeného příkladu můžete vidět, že stav představuje objekty, kde jsou uložena data vaší komponenty. Jsou inicializovány uvnitř konstruktoru. Ke stavu se dostanete pomocí ‘this.state’. Toto je způsob použití stavu pro vykreslení vašich dat ve vaší komponentě.
Ale řekl jsem vám, že to, co dělá ze státu srdce vašich součástí, je jeho proměnlivé chování. Ano, nyní jde o to, jak můžeme změnit majetek státu. Odpověď je pomocí „this.setState“ (podívejte se prosím na výše uvedený příklad). Pomocí this.setState jsme změnili naši hodnotu dat, když uživatel píše.
Stručně řečeno, rekvizity a stav jsou oba zdroje dat, ale jejich použití a chování se liší. Kdykoli nastane případ, kdy se vaše data mohou změnit, použijte k tomu „stav“ – jinak je dobrá volba „prop“.
To je vše o základech světa React. Doufám, že lépe rozumíte základům.
Existuje velmi důležitá část komponenty třídy, o které jsem nemluvil:metody životního cyklu. Ano, metody životního cyklu jsou další kritickou součástí ReactJS, ale co to je a proč jsou důležité, to bude v mém příštím článku!
Děkuji za přečtení.