React Functional Components, Props, and JSX – React.js Tutorial for Beginners

React je jednou z nejoblíbenějších knihoven JavaScriptu pro tvorbu uživatelských rozhraní.

Pokud se chcete stát front-endovým vývojářem nebo si najít práci v oblasti vývoje webových stránek, pravděpodobně by se vám hodilo naučit se React do hloubky.

V tomto příspěvku se naučíte některé základy Reactu, jako je vytváření komponent, syntaxe JSX a Props. Pokud nemáte s Reactem žádné nebo jen malé zkušenosti, je tento příspěvek určen právě vám.

Pro začátek vám ukážeme, jak si React nainstalovat.

Co je JSX?

První věc, kterou si po instalaci prvního projektu React uvědomíte, je, že funkce JavaScriptu vrací nějaký kód HTML:

function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> </header> </div> );}

Jde o speciální a platné rozšíření syntaxe pro React, které se nazývá JSX (JavaScript XML). Obvykle v projektech souvisejících s frontendem uchováváme kód HTML, CSS a JavaScript v samostatných souborech. V Reactu to však funguje trochu jinak.

V projektech React nevytváříme samostatné soubory HTML, protože JSX nám umožňuje psát HTML a JavaScript kombinovaně v jednom souboru, jako ve výše uvedeném příkladu. CSS však můžete oddělit v jiném souboru.

Na začátku může JSX působit trochu zvláštně. Ale nebojte se, zvyknete si na něj.

JSX je velmi praktický, protože můžeme také spouštět libovolný kód JavaScriptu (logiku, funkce, proměnné atd.) přímo uvnitř jazyka HTML pomocí kudrlinkových závorek { }, například takto:

function App() { const text = 'Hello World'; return ( <div className="App"> <p> {text} </p> </div> );}

Proměnným JavaScriptu můžete také přiřadit značky HTML:

const message = <h1>React is cool!</h1>;

Nebo můžete vracet HTML uvnitř logiky JavaScriptu (například v případech if-else):

render() { if(true) { return <p>YES</p>; } else { return <p>NO</p>; }}

Dalšími podrobnostmi JSX se zabývat nebudu, ale při psaní JSX dbejte na následující pravidla:

• Tagy HTML a komponenty musí být vždy uzavřené < />
• Některé atributy jako „class“ se stanou „className“ (protože class odkazuje na třídy JavaScriptu), „tabindex“ se stane „tabIndex“ a měly by se psát camelCase
• Nemůžeme vrátit více než jeden element HTML najednou, takže se ujistěte, že jsou zabaleny uvnitř nadřazeného tagu:

return ( <div> <p>Hello</p> <p>World</p> </div>);

• nebo je můžete alternativně obalit prázdnými značkami:

return ( <> <p>Hello</p> <p>World</p> </>);

Můžete se také podívat na můj výukový kurz React pro začátečníky, kde najdete více informací:

Co jsou funkční komponenty třídy &?

Po tom, co si zvyknete na syntaxi JSX, je další věcí, kterou je třeba pochopit, struktura Reactu založená na komponentách.

Pokud se vrátíte k příkladu kódu v horní části tohoto příspěvku, uvidíte, že kód JSX je vracen funkcí. Funkce App( ) však není obyčejná funkce – je to vlastně komponenta. Co je to tedy komponenta?

Co je to komponenta?

Komponenta je nezávislý, opakovaně použitelný blok kódu, který rozděluje uživatelské rozhraní na menší části. Kdybychom například vytvářeli uživatelské rozhraní Twitteru pomocí Reactu:

Namísto vytváření celého uživatelského rozhraní v rámci jednoho souboru můžeme a měli bychom všechny části (označené červeně) rozdělit na menší nezávislé části. Jinými slovy, jedná se o komponenty.

Recept má dva typy komponent: funkční a třídní. Podívejme se nyní na každý z nich podrobněji.

Funkční komponenty

Prvním a doporučovaným typem komponent v Reactu jsou funkční komponenty. Funkční komponenta je v podstatě funkce jazyka JavaScript/ES6, která vrací prvek React (JSX). Podle oficiálních dokumentů Reactu je níže uvedená funkce platnou funkční komponentou:

function Welcome(props) { return <h1>Hello, {props.name}</h1>;}

Alternativně můžete funkční komponentu vytvořit také pomocí definice funkce arrow:

const Welcome = (props) => { return <h1>Hello, {props.name}</h1>; }

Tato funkce je platnou komponentou Reactu, protože přijímá jeden argument objektu „props“ (což znamená vlastnosti) s daty a vrací element Reactu. – reactjs.org

Abyste mohli komponentu později použít, musíte ji nejprve exportovat, abyste ji mohli importovat jinam:

function Welcome(props) { return <h1>Hello, {props.name}</h1>;}export default Welcome;

Po importu můžete komponentu zavolat jako v tomto příkladu:

import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome /> </div> );}

Takže funkční komponenta v Reactu:

• je funkce JavaScriptu/ES6
• musí vracet prvek Reactu (JSX)
• vždy začíná velkým písmenem (konvence pojmenování)
• přijímá v případě potřeby jako parametr rekvizity

Co jsou to komponenty třídy?

Druhým typem komponenty je komponenta třídy. Komponenty tříd jsou třídy ES6, které vracejí JSX. Níže vidíte naši stejnou funkci Welcome, tentokrát jako třídní komponentu:

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}

Na rozdíl od funkčních komponent musí mít třídní komponenty další metodu render( ) pro vracení JSX.

Proč používat třídní komponenty?

Třídní komponenty používáme kvůli „stavu“. Ve starších verzích Reactu (verze < 16.8) nebylo možné používat stav uvnitř funkčních komponent.

Proto jsme potřebovali funkční komponenty pouze pro vykreslování uživatelského rozhraní, zatímco pro správu dat a některé další operace (například metody životního cyklu) jsme používali komponenty tříd.

To se změnilo se zavedením React Hooks a nyní můžeme stavy používat i ve funkčních komponentách. (Stavům a háčkům se budu věnovat v následujících příspěvcích, takže si jich prozatím nevšímejte).

Třída Komponenta:

• je třída ES6, stane se komponentou, jakmile ‚rozšíří‘ komponentu React.
• v případě potřeby přebírá Props (v konstruktoru)
• musí mít metodu render( ) pro vracení JSX

Co jsou Props v Reactu?

Dalším důležitým konceptem komponent je způsob jejich komunikace. React má speciální objekt zvaný prop (zkratka pro property), který používáme k přenosu dat z jedné komponenty do druhé

Ale pozor – propy přenášejí data pouze jednosměrným tokem (pouze z rodičovských komponent do podřízených). Pomocí rekvizit není možné předávat data z dítěte do rodiče nebo do komponent na stejné úrovni.

Vraťme se k výše uvedené funkci App( ), abychom viděli, jak předávat data pomocí rekvizit.

Nejprve musíme definovat rekvizitu na komponentě Welcome a přiřadit jí hodnotu:

import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome name="John"/> <Welcome name="Mary"/> <Welcome name="Alex"/> </div> );}

Rekvizity jsou vlastní hodnoty a díky nim jsou komponenty také dynamičtější. Protože komponenta Welcome je zde potomkem, musíme definovat rekvizity na jejím rodiči (App), abychom mohli předávat hodnoty a získat výsledek jednoduše přístupem k rekvizitě „name“:

function Welcome(props) { return <h1>Hello, {props.name}</h1>;}

React Rekvizity jsou opravdu užitečné

Takže vývojáři Reactu používají rekvizity pro předávání dat a pro tuto práci jsou užitečné. Ale co správa dat? Rekvizity slouží k předávání dat, nikoli k manipulaci s nimi. Správě dat pomocí Reactu se budu věnovat ve svých budoucích příspěvcích zde na freeCodeCampu.

Pokud se mezitím chcete dozvědět více o &vývoji webových aplikací React, neváhejte se přihlásit k odběru mého kanálu YouTube.

Děkuji, že jste četli!