React & Redux

Bc. Martin Frydl

Vysoka skola banska - Technicka Univerzita Ostrava

19. brezna 2018

Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 1 / 21

Obsah

Obsah

ReactReduxChrome developer toolsUkazka

Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 2 / 21

React framework

React je JavaScriptova knihovna pro vyvoj uzivatelskych rozhranıVirtualnı DOMStruktura stranky zalozena na komponentachJSX (ES6)Webpack

Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 3 / 21

Zalozenı projektu

Instalace Node.js https://nodejs.org/en/Instalace a pouzitı balıcku create-react-app

Spustenı aplikace pomocı prıkazu npm start

Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 4 / 21

Struktura aplikace

Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 5 / 21

Komponenty

Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 6 / 21

React router

Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 7 / 21

State & Props

Stav (state)komponenty”Promenne”Zmena stavu = zmena komponentyOpetovne vykreslenı komponenty

Vlastnosti (props) komponentyVlastnost, parametrVzajemna komunikace mezi komponentami

Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 8 / 21

Props - generovanı komponent

Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 9 / 21

Props - generovanı komponent

Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 10 / 21

State

Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 11 / 21

Redux framework

Nahrazuje statePoskytuje uloziste (store)Zadna komponenta nezist’uje stav jinestejna data = stejny stav aplikacesnadne ladenı

Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 12 / 21

Redux

Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 13 / 21

Akce a konstanty

Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 14 / 21

Reducer

Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 15 / 21

Chrome developer tools

Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 16 / 21

Chrome developer tools

Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 17 / 21

Chrome developer tools

Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 18 / 21

Ukazka

Ukazka behu aplikace v Google Chrome

Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 19 / 21

Zaver

Dekuji za pozornostQ & A

Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 20 / 21

Zdroje a odkazy

https://reactjs.org/docs/state-and-lifecycle.htmlhttps://www.zdrojak.cz/clanky/redux-react-33-react/https://redux.js.org/introductionhttps://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljdhttps://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 21 / 21