React (webový framework)

React (také známý jako React.js nebo ReactJS) je JavaScriptová knihovna pro tvorbu uživatelského rozhraní. Je vyvíjený Facebookem a komunitou samostatných vývojářů a společností.

React může být využit jako základ pro tvorbu single-page nebo mobilních aplikací, protože je optimální pro práci s rychle se měnícími daty.

Základní použití

Následná ukázka je triviální příklad použití Reactu s HTML a JavaScriptem:

class Greeter extends React.Component { render { return {this.props.greeting} } }

ReactDOM.render(, document.getElementById('myReactApp'));

Třída Greeter je reactí komponenta, která přijímá propertu greeting. Metoda ReactDOM. +morerender vytváří instanci komponenty Greeter, nastavuje propertu greeting na hodnotu 'Hello World' a vkládá renderovanou komponentu jako potomka DOM prvku s id myReactApp.

Tato ukázka se ve webovém prohlížeči zobrazí jako následující:

Hello World!

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á stále větší počet funkcí, potřeboval tým více lidí, aby fungovala bezchybně. +more Rostoucí počet členů týmu a funkcí aplikací je jako společnost zpomalil. Postupem času se jejich aplikace stávala obtížně ovladatelnou, protože čelili spoustě kaskádových aktualizací.

React byl nasazen na Facebook News Feed v roce 2011 a později na Instagram v roce 2012. V roce 2013 nastal čas, aby se React stal otevřeným zdrojem, a během JS ConfUS, který se konal od 29. +more do 31. května, představil Jordan Walke React světu. Byl ovlivněn XHP, knihovnou komponent HTML pro PHP. React v0. 13 byl vydán v březnu 2015. Tato verze Reactu měla uvítanou novou funkci, kterou byla podpora tříd ES6. Ve stejném měsíci vydání React v0. 13 byl světu představen React Native.

Instalace a Spuštění React aplikace

K vytvoření React webové je potřeba Node. +morejs a NPM. Samotné vytvoření se provede příkazem: $ npm install create-react-app $ create-react-app Alternativou může být příkaz npx create-react-app který provede vytvoření celého projektu a konfiguraci s tím spojenou. Npx je nástroj pro běh balíčků, který je dodáván s npm 5. 2+.

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

a otevře je ve výchozím prohlížeči.

Komponenta

Při navrhování 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í. +more 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 Hello, {props. name}; } K definování komponenty lze také použít třídu ES6: class Welcome extends React. +moreComponent { render { return Hello, {this. props. name} } } 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 Hello, {props.name}; }

function App { return ; }

ReactDOM.render( , document.getElementById('root') );

JSX

JSX neboli JavaScript XML je rozšíření syntaxe jazyka JavaScript. Podobný vzhled jako HTML, JSX poskytuje způsob, jak strukturovat vykreslování komponent pomocí syntaxe známé mnoha vývojářům. +more 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 (

Header Content Footer

); } }

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. +more 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 jeden komponent, který stavů využívá a posílá tyto stavy svým potomkům pomocí props. Tento stavový komponent zapouzdřuje veškerou interakční logiku, zatímco se ty bez stavové starají o renderování dat deklarativní cestou.

Prvním krokem k použití stavů je incializace. Ta by měla být provedena v konstruktoru komponentu. +more 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.

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:

* React události jsou pojmenovány pomocí camelCase, spíše než malá písmena * S JSX předáte funkci jako obslužnou rutinu události (event handler), nikoli jako řetězec.

Například HTML:

Activate Lasers

je mírně odlišný v React:

Activate Lasers

Podmíněné renderování

V React lze vytvořit odlišné komponenty, které zapouzdřují chování. Podmíněné vykreslování v React funguje stejně jako podmínky v JavaScriptu. +more 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 (.

{ i === 1 ? 'true' : 'false' }

) } } Ternární operátor je vhodný pro jednoduché podmínky. Pokud by se podmínky více větvily, je lepší zvolit if/else. +more function App(props) { const podminka = props. hodnotaProps; if (podminka) { return (.

pravda

); } return (

nepravda

); } ReactDOM.render( , document.getElementById('root') );

Tento příklad vykresluje pravda nebo nepravda v závislosti na hodnotě hodnotaProps props.

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. +more 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í.

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. +more 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. import React, { useState } from 'react';.

function Counter { const [count, setCount] = useState(0);

return (

You clicked {count} times setCount(count + 1)}> Click me

); }

Tento příklad vykresluje počítadlo. Když kliknete na tlačítko, zvýší se hodnota o jedničku. +more Jediným argumentem useState je počáteční stav. Ve výše uvedeném příkladu je to 0 protože se počítá od nuly.

Reference

Externí odkazy

[url=https://reactjs.org/]Oficiální web[/url]

Kategorie:Javascriptové knihovny Kategorie:Webové aplikační frameworky Kategorie:Facebook Kategorie:Software pod licencí MIT