REACT
Seminár z programovania v sieťach
Dominik Dorčák
Čo je React.js?
-
JavaScript knižnica na vytváranie frontend aplikácií, používajúca virtualizáciu DOM
-
Efektívny JavaScript pre spúštanie vo web browseroch
-
Prekresľuje sa iba tá časť DOM, ktorá sa zmenila
Trochu histórie...
-
React.js vytvoril Jordan Walke zo spoločnosti Facebook
-
Prvý krát použitá v roku 2011
-
Vydaná ako open source projekt pod MIT licenziou v máji 2013
-
React native - pre mobilné telefóny
Ako to funguje?
-
React neprekresľuje DOM iteratívne
-
Programátor iba delkaruje ako má vyzerať finálne UI resp. stránka, React sa postará o to aby sa DOM vykreslil podľa tejto deklarácie
-
Nepoužíva injekciu do innerHTML ako klasický JavaScript
-
React virtualizuje celý DOM a používa Javascript na renderovanie html cez triedy rozžirujúce Component
-
Ako programátori ju pravdepodobne nikdy nepoužijeme, ale React používa internú funkciu React.createElement() funkciu na generovanie html kódu
JSX
-
Vyzerá podobne html, správa sa podobne JavaScriptu
-
Ideálny pre frontend aplikácie
-
Prehľadnosť - namiesto volania React.createElement kód veľmi podobný html
Component
-
Atomické elementy stránky, kombinujú layout, stav a parametre
-
Môžeme ich vytvárať ako funkcie alebo ako triedy
-
Hierarchicky sa usporadúvajú - dáta sa dajú prelievať medzi parent a child elemntami
Funkcionálne componenty
function Hello(props) {
return (
Helllo, {props.name}
);
}
Objektové/triedové componenty
class Welcome extends React.Component {
render() {
return Hello, {this.props.name}
;
}
}
State
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {brand: "Ford"};
}
render() {
return (
My Car
);
}
}