react & reduxhomel.vsb.cz/~fry0050/it/frydl_fry0050_prezentace_it.pdf · react & redux bc....
TRANSCRIPT
![Page 1: React & Reduxhomel.vsb.cz/~fry0050/it/frydl_fry0050_prezentace_it.pdf · React & Redux Bc. Martin Frydl´ Vysok´a skola bˇ a´nskˇ a - Technick´ a Univerzita Ostrava´ 19. bˇrezna](https://reader034.vdocuments.pub/reader034/viewer/2022042222/5ec849684d100b3d31392444/html5/thumbnails/1.jpg)
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
![Page 2: React & Reduxhomel.vsb.cz/~fry0050/it/frydl_fry0050_prezentace_it.pdf · React & Redux Bc. Martin Frydl´ Vysok´a skola bˇ a´nskˇ a - Technick´ a Univerzita Ostrava´ 19. bˇrezna](https://reader034.vdocuments.pub/reader034/viewer/2022042222/5ec849684d100b3d31392444/html5/thumbnails/2.jpg)
Obsah
Obsah
ReactReduxChrome developer toolsUkazka
Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 2 / 21
![Page 3: React & Reduxhomel.vsb.cz/~fry0050/it/frydl_fry0050_prezentace_it.pdf · React & Redux Bc. Martin Frydl´ Vysok´a skola bˇ a´nskˇ a - Technick´ a Univerzita Ostrava´ 19. bˇrezna](https://reader034.vdocuments.pub/reader034/viewer/2022042222/5ec849684d100b3d31392444/html5/thumbnails/3.jpg)
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
![Page 4: React & Reduxhomel.vsb.cz/~fry0050/it/frydl_fry0050_prezentace_it.pdf · React & Redux Bc. Martin Frydl´ Vysok´a skola bˇ a´nskˇ a - Technick´ a Univerzita Ostrava´ 19. bˇrezna](https://reader034.vdocuments.pub/reader034/viewer/2022042222/5ec849684d100b3d31392444/html5/thumbnails/4.jpg)
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
![Page 5: React & Reduxhomel.vsb.cz/~fry0050/it/frydl_fry0050_prezentace_it.pdf · React & Redux Bc. Martin Frydl´ Vysok´a skola bˇ a´nskˇ a - Technick´ a Univerzita Ostrava´ 19. bˇrezna](https://reader034.vdocuments.pub/reader034/viewer/2022042222/5ec849684d100b3d31392444/html5/thumbnails/5.jpg)
Struktura aplikace
Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 5 / 21
![Page 6: React & Reduxhomel.vsb.cz/~fry0050/it/frydl_fry0050_prezentace_it.pdf · React & Redux Bc. Martin Frydl´ Vysok´a skola bˇ a´nskˇ a - Technick´ a Univerzita Ostrava´ 19. bˇrezna](https://reader034.vdocuments.pub/reader034/viewer/2022042222/5ec849684d100b3d31392444/html5/thumbnails/6.jpg)
Komponenty
Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 6 / 21
![Page 7: React & Reduxhomel.vsb.cz/~fry0050/it/frydl_fry0050_prezentace_it.pdf · React & Redux Bc. Martin Frydl´ Vysok´a skola bˇ a´nskˇ a - Technick´ a Univerzita Ostrava´ 19. bˇrezna](https://reader034.vdocuments.pub/reader034/viewer/2022042222/5ec849684d100b3d31392444/html5/thumbnails/7.jpg)
React router
Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 7 / 21
![Page 8: React & Reduxhomel.vsb.cz/~fry0050/it/frydl_fry0050_prezentace_it.pdf · React & Redux Bc. Martin Frydl´ Vysok´a skola bˇ a´nskˇ a - Technick´ a Univerzita Ostrava´ 19. bˇrezna](https://reader034.vdocuments.pub/reader034/viewer/2022042222/5ec849684d100b3d31392444/html5/thumbnails/8.jpg)
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
![Page 9: React & Reduxhomel.vsb.cz/~fry0050/it/frydl_fry0050_prezentace_it.pdf · React & Redux Bc. Martin Frydl´ Vysok´a skola bˇ a´nskˇ a - Technick´ a Univerzita Ostrava´ 19. bˇrezna](https://reader034.vdocuments.pub/reader034/viewer/2022042222/5ec849684d100b3d31392444/html5/thumbnails/9.jpg)
Props - generovanı komponent
Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 9 / 21
![Page 10: React & Reduxhomel.vsb.cz/~fry0050/it/frydl_fry0050_prezentace_it.pdf · React & Redux Bc. Martin Frydl´ Vysok´a skola bˇ a´nskˇ a - Technick´ a Univerzita Ostrava´ 19. bˇrezna](https://reader034.vdocuments.pub/reader034/viewer/2022042222/5ec849684d100b3d31392444/html5/thumbnails/10.jpg)
Props - generovanı komponent
Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 10 / 21
![Page 11: React & Reduxhomel.vsb.cz/~fry0050/it/frydl_fry0050_prezentace_it.pdf · React & Redux Bc. Martin Frydl´ Vysok´a skola bˇ a´nskˇ a - Technick´ a Univerzita Ostrava´ 19. bˇrezna](https://reader034.vdocuments.pub/reader034/viewer/2022042222/5ec849684d100b3d31392444/html5/thumbnails/11.jpg)
State
Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 11 / 21
![Page 12: React & Reduxhomel.vsb.cz/~fry0050/it/frydl_fry0050_prezentace_it.pdf · React & Redux Bc. Martin Frydl´ Vysok´a skola bˇ a´nskˇ a - Technick´ a Univerzita Ostrava´ 19. bˇrezna](https://reader034.vdocuments.pub/reader034/viewer/2022042222/5ec849684d100b3d31392444/html5/thumbnails/12.jpg)
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
![Page 13: React & Reduxhomel.vsb.cz/~fry0050/it/frydl_fry0050_prezentace_it.pdf · React & Redux Bc. Martin Frydl´ Vysok´a skola bˇ a´nskˇ a - Technick´ a Univerzita Ostrava´ 19. bˇrezna](https://reader034.vdocuments.pub/reader034/viewer/2022042222/5ec849684d100b3d31392444/html5/thumbnails/13.jpg)
Redux
Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 13 / 21
![Page 14: React & Reduxhomel.vsb.cz/~fry0050/it/frydl_fry0050_prezentace_it.pdf · React & Redux Bc. Martin Frydl´ Vysok´a skola bˇ a´nskˇ a - Technick´ a Univerzita Ostrava´ 19. bˇrezna](https://reader034.vdocuments.pub/reader034/viewer/2022042222/5ec849684d100b3d31392444/html5/thumbnails/14.jpg)
Akce a konstanty
Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 14 / 21
![Page 15: React & Reduxhomel.vsb.cz/~fry0050/it/frydl_fry0050_prezentace_it.pdf · React & Redux Bc. Martin Frydl´ Vysok´a skola bˇ a´nskˇ a - Technick´ a Univerzita Ostrava´ 19. bˇrezna](https://reader034.vdocuments.pub/reader034/viewer/2022042222/5ec849684d100b3d31392444/html5/thumbnails/15.jpg)
Reducer
Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 15 / 21
![Page 16: React & Reduxhomel.vsb.cz/~fry0050/it/frydl_fry0050_prezentace_it.pdf · React & Redux Bc. Martin Frydl´ Vysok´a skola bˇ a´nskˇ a - Technick´ a Univerzita Ostrava´ 19. bˇrezna](https://reader034.vdocuments.pub/reader034/viewer/2022042222/5ec849684d100b3d31392444/html5/thumbnails/16.jpg)
Chrome developer tools
Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 16 / 21
![Page 17: React & Reduxhomel.vsb.cz/~fry0050/it/frydl_fry0050_prezentace_it.pdf · React & Redux Bc. Martin Frydl´ Vysok´a skola bˇ a´nskˇ a - Technick´ a Univerzita Ostrava´ 19. bˇrezna](https://reader034.vdocuments.pub/reader034/viewer/2022042222/5ec849684d100b3d31392444/html5/thumbnails/17.jpg)
Chrome developer tools
Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 17 / 21
![Page 18: React & Reduxhomel.vsb.cz/~fry0050/it/frydl_fry0050_prezentace_it.pdf · React & Redux Bc. Martin Frydl´ Vysok´a skola bˇ a´nskˇ a - Technick´ a Univerzita Ostrava´ 19. bˇrezna](https://reader034.vdocuments.pub/reader034/viewer/2022042222/5ec849684d100b3d31392444/html5/thumbnails/18.jpg)
Chrome developer tools
Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 18 / 21
![Page 19: React & Reduxhomel.vsb.cz/~fry0050/it/frydl_fry0050_prezentace_it.pdf · React & Redux Bc. Martin Frydl´ Vysok´a skola bˇ a´nskˇ a - Technick´ a Univerzita Ostrava´ 19. bˇrezna](https://reader034.vdocuments.pub/reader034/viewer/2022042222/5ec849684d100b3d31392444/html5/thumbnails/19.jpg)
Ukazka
Ukazka behu aplikace v Google Chrome
Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 19 / 21
![Page 20: React & Reduxhomel.vsb.cz/~fry0050/it/frydl_fry0050_prezentace_it.pdf · React & Redux Bc. Martin Frydl´ Vysok´a skola bˇ a´nskˇ a - Technick´ a Univerzita Ostrava´ 19. bˇrezna](https://reader034.vdocuments.pub/reader034/viewer/2022042222/5ec849684d100b3d31392444/html5/thumbnails/20.jpg)
Zaver
Dekuji za pozornostQ & A
Bc. Martin Frydl (VSB - TUO) React & Redux 19. brezna 2018 20 / 21
![Page 21: React & Reduxhomel.vsb.cz/~fry0050/it/frydl_fry0050_prezentace_it.pdf · React & Redux Bc. Martin Frydl´ Vysok´a skola bˇ a´nskˇ a - Technick´ a Univerzita Ostrava´ 19. bˇrezna](https://reader034.vdocuments.pub/reader034/viewer/2022042222/5ec849684d100b3d31392444/html5/thumbnails/21.jpg)
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