React (webový framework)
JavaScriptová knihovna From Wikipedia, the free encyclopedia
Remove ads
React (také známý jako React.js nebo ReactJS) je knihovna jazyka JavaScript[1] pro tvorbu uživatelského rozhraní. Je vyvíjený Facebookem a komunitou samostatných vývojářů a společností.[2][3][4]
React se mimo jiné využívá při tvorbě single-page nebo mobilních aplikací.
Remove ads
Základní použití
Následná ukázka je triviální příklad použití Reactu s HTML a JavaScriptem:
<div id="myReactApp"></div>
<script type="text/babel">
class Greeter extends React.Component {
render() {
return <h1>{this.props.greeting}</h1>
}
}
ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));
</script>
Třída Greeter je komponenta Reactu, která přijímá vlastnost greeting. Metoda ReactDOM.render vytváří instanci komponenty Greeter, nastavuje vlastnost greeting na hodnotu 'Hello World' a vkládá vykreslenou komponentu jako potomka DOM prvku s id myReactApp.
Tato ukázka se ve webovém prohlížeči zobrazí jako následující:
<div id="myReactApp">
<h1>Hello World!</h1>
</div>
Remove ads
Historie
V roce 2011 se vývojáři na Facebooku začali potýkat s problémy s údržbou kódu. Vzhledem k tomu, že aplikace Facebook Ads měla narůstající počet funkcí, potřeboval tým více lidí, aby fungovala bezchybně.[5]
React byl nasazen na Facebook Feed v roce 2011 a později na Instagram v roce 2012. V roce 2013 byl React uvolněn jako open source a během konference JS ConfUS, která se konala od 29. do 31. května, představil Jordan Walke React veřejnosti.[6] Byl ovlivněn XHP, knihovnou komponent HTML pro PHP. React v0.13 byl vydán v březnu 2015. Tato verze Reactu měla vítanou novou funkcionalitu, kterou byla podpora tříd ES6. Ve stejném měsíci vydání React v0.13 byl světu představen React Native.
Remove ads
Instalace a Spuštění React aplikace
K vytvoření React aplikace je potřeba Node.js a NPM. Samotné vytvoření se provede příkazem:
$ npm install create-react-app
$ create-react-app <project-name>
Alternativou může být příkaz npx create-react-app <project-name>, který provede přípravu projektu a konfiguraci s tím spojenou. Npx je nástroj pro běh balíčků, který je součástí npm 5.2+. [7]
Pro spuštění stačí uvnitř složky s projektem opět zadat příkaz npm start . Příkaz npm start spustí aplikaci v rámci lokálního serveru standardně na adrese http://localhost:3000/ a otevře je ve výchozím prohlížeči.
Komponenta
Při návrhu React aplikací začínáme tím, že si musíme aplikaci rozkouskovat do jednotlivých komponent. V Reactu je možné vytvořit komponentu pomocí třídy anebo pomocí funkcí. Jde o předpřipravené prvky jako je například text, tlačítko nebo textové pole, které univerzálně fungují na všech podporovaných platformách. Kromě těchto základních komponentů lze definovat vlastní komponenty, nebo importovat komponenty tvořené komunitou.
Nejjednodušší způsob, jak definovat komponentu, je napsat funkci JavaScriptu:
function Welcome(props){
return <h1>Hello, {props.name}</h1>;
}
K definování komponenty lze také použít třídu ES6:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>
}
}
Komponenty mohou v sobě obsahovat další komponenty. Z menších komponent můžeme poskládat složitější komponenty.
Například můžeme vytvořit komponentu App, ve která se další komponenta Welcome vykreslí několikrát:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
Remove ads
JSX
JSX neboli JavaScript XML je rozšíření syntaxe jazyka JavaScript. Podobný vzhled jako HTML umožňuje JSX způsob, jak strukturovat vykreslování komponent pomocí syntaxe známé mnoha vývojářům. Komponenty React jsou obvykle psány pomocí JSX, i když nemusí být (komponenty mohou být také psány v čistém JavaScriptu).
Příklad kódu JSX:
class App extends React.Component {
render() {
return (
<div>
<p>Header</p>
<p>Content</p>
<p>Footer</p>
</div>
);
}
}
Remove ads
Stavy
Komponenty využívají states neboli stavy pro data měnící se v průběhu času. Konkrétně by tedy měly být stavy využity pouze v případě, kdy aplikace přijme vstup od uživatele, nebo se obsah mění na základě časovače. Při práci se stavy je běžnou praktikou vytvoření několika bezstavových komponent, které pouze vykreslují data a mají nad sebou jednu komponentu, který stavů využívá a posílá tyto stavy svým potomkům pomocí props. Tato stavová komponenta zapouzdřuje veškerou interakční logiku, zatímco se ty bezstavové starají o vykreslení dat deklarativní cestou.[8]
Prvním krokem k použití stavů je inicializace. Ta by měla být provedena v konstruktoru komponentu. Kvůli jednoduchosti je doporučeno používat jako hodnotu stavů booleanovské hodnoty.
class Container extends Component {
constructor() {
super();
this.state = {viditelny: true};
}
}
Stavy mají k dispozici několik funkcí a proměnných umožňujících jednoduchou manipulaci. Funkci this.setState({ klic: hodnota }) sloužící ke změně stavu, proměnnou this.state.klic sloužící k získání aktuálního stavu a proměnnou prevState.klic k získání předchozího stavu. Proměnná this.state.klic obsahuje aktuální hodnotu stavu a slouží pro předání stavu k dalším operacím, jako je například uložení tohoto stavu do props komponenty.
Remove ads
Zpracování událostí
Zpracování událostí pomocí React elementů je velmi podobné zpracování událostí u prvků DOM. Existuje několik rozdílů v syntaxi: [9]
- React události jsou pojmenovány pomocí camelCase
- S JSX předáte funkci jako obslužnou rutinu události (event handler), nikoli jako řetězec.
Například HTML:
<button onclick="activateLasers()">
Activate Lasers
</button>
je mírně odlišný v React:
<button onClick={activateLasers}>
Activate Lasers
</button>
Remove ads
Podmíněné renderování
V Reactu lze vytvořit odlišné komponenty, které zapouzdřují chování. Podmíněné vykreslování v Reactu funguje stejně jako podmínky v JavaScriptu. Příkazy if – else nelze použít uvnitř JSX, ale místo toho lze použít podmíněné výrazy.
class App extends React.Component {
render() {
const i = 1;
return (
<div>
<h1>{ i === 1 ? 'true' : 'false' }</h1>ky
</div>
)
}
}
Ternární operátor je vhodný pro jednoduché podmínky. Pokud by se podmínky více větvily, je lepší zvolit if/else.
function App(props) {
const podminka = props.hodnotaProps;
if (podminka) {
return (
<div>
<h1>pravda</h1>
</div>
);
}
return (
<div>
<h1>nepravda</h1>
</div>
);
}
ReactDOM.render(
<App hodnotaProps={true} />,
document.getElementById('root')
);
Tento příklad vykresluje pravda nebo nepravda v závislosti na hodnotě hodnotaProps.
Remove ads
React Hooks
Cílem Hooks („háčků“) je zjednodušit tvorbu React aplikací. Umožňují použít state a lifecycle metody ve funkcionálních komponentách. Nahrazují HOC (higher order components) a téměř ve většině případech také render props. React komponenty nejsou nejvhodnější na sdílení kódu, protože jejich hlavním úkolem je vykreslovat UI (uživatelské rozhraní). React Hooks dovolují lepší sdílení kódu napříč aplikací.[10]
Díky useState můžeme používat stav i v rámci funkcionálních komponent. Hook useState očekává parametr, který se stane iniciální hodnotou stavu, která je nastavená pouze poprvé, když je komponenta vytvořena. Hook nám vrátí dvojici, kterou získáme pomocí destrukturalizace. První je aktuální hodnota stavu. Druhá je funkce, kterou můžeme zavolat a předat ji nějakou hodnotu, která se stane novým stavem.[11]
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Tento příklad vykresluje počítadlo. Když kliknete na tlačítko, zvýší se hodnota o jedničku. Jediným argumentem useState je počáteční stav; ve výše uvedeném příkladu je to 0, počítadlo začne na nule.
Reference
Externí odkazy
Wikiwand - on
Seamless Wikipedia browsing. On steroids.
Remove ads