Stažení knihovny „create-react-app„ a následné vygenerování nového projektu s její pomocí.
1 |
npm install create-react-app |
1 |
.\node_modules\.bin\create-react-app <project-name> |
Alternativou může být příkaz npx, který příkaz rovnou vykoná
1 |
npx create-react-app <project-name> |
Základní obsah souboru src/index.js
1 2 3 4 5 6 7 8 9 10 11 |
//import React (pojmenování importu) from 'react' (jméno závislosti nebo cesta k souboru) import React from 'react'; import ReactDOM from 'react-dom'; //definování komponenty const App = () => { //const App = function() { return ( //zabalení do závorek, kdyby za returnem nic nebylo, vrátí se undefined <div>Hello</div>; ) } //vykreslení komponenty ReactDOM.render(<App/>,document.querySelector("#root")); |
- pomocí importu lze přidat i css soubory import ‚./soubor.css‘
- named vs default export
- default – pokud obsahuje jeden defaultní
1export default <jméno komponenty>; - named – pokud vyjmenovává více
1export const <jméno komponenty> = () => {}<br>export const <jméno další komponenty> = () => {}
- default – pokud obsahuje jeden defaultní
JSX
JSX přidává do JavaScriptu XML syntax. Předchozí zápis App se tak zkompiluje do následujícího JS kódu, aby byl v prohlížeči funkční.
https://babeljs.io/repl | http://buildwithreact.com/tutorial/jsx
1 2 3 4 5 6 |
"use strict"; var App = function App() { //const App = function() { return React.createElement("div", null, "Hello"); }; |
HTML a JSX zápis není úplně stejný, jsou tam drobné odlišnosti.
- style=“font-weight:bold“ => style={{fontWeight:’bold‘,color:’grey‘}}
- {} = proměnná, {{}} = proměnná obsahující js objekt, kterému musí odpovídat zápis
- class – v JS vyhrazené slovo, pro HTML class by se mělo použít className (v budoucnu bude možná odstraněno)
- proměnné z JS jsou zobrazované v „{proměnné/fce}“
- vypsání proměnné a textu (pokud promenna = 5, tak výstup bude „5 text“)
1{`${promenna} text`}
- vypsání proměnné a textu (pokud promenna = 5, tak výstup bude „5 text“)
- pro <label> místo for použít htmlFor
Props
- předávání dat do podřazených komponent
- jako atribut elementu
- v rámci komponenty získané z prvního parametru
1const AppXy = (props) => {
- lze udělat defaultní nastavení props v rámci komponenty
1234const Komponenta = (props)=>{return <div>:)</div>;}Komponenta.defaultProps = {};
State
- objekt, držící data komponenty
- pokud komponenta obsahuje input s kterým se pracuje – drží se jeho data ve state a pro jejich získání se nepřistupuje do DOMu
- inicializace v konstruktoru this.state = {}
- plnění vždy přes this.setState({})
- vyvolá opětovné vykreslení komponenty
Class-based
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { //automaticky volane pred vsim ostatnim constructor(props){ super(props); } render() { //pro caste volani neni vhodne zde cokoli inicializovat return ( <div>:)</div> ) } }; ReactDOM.render(<App/>, document.querySelector("#root")); |
Lifecycle
- základní
- constructor – jednorázové nastavení
- render – pouze vykreslení
- componentDidMount – načítání dat
- componentDidUpdate – při změně state, props, případně pro další načítání dat
- componentWillUnmount
- méně časté
- shouldComponentUpdate
- getDrivedStateFromProps
- getSnapshotBeforeUpdate
API požadavky
Redux
- action creator (vytvoří objekt action)
- action (objekt popisující jaké změny dat se mají provést)
- dispatch (vytvoří kopii objektu akce a rozešle ho na všechny ‚reducers‘)
- reducers (zpracovávají data z objektu akce, vracejí nová data)
- state (aktualizovaná data z reducerů se ukládají do stavu)
Pravidla reducerů
- musí vrátit nějakou hodnotu mimo hodnoty undefined
- reducer přebírá vždy předchozí stav a akci (vyjma první inicializace, kdy je předchozím stavem undefined
- jednoduchost; pro rozhodnutí o tom, jakou hodnotu vrátit, nesmí dělat volání dalších funkcí mimo (hledat v imputu, vyvolat api request,…)
- nesmí se měnit první vstupní parametr reduceru (state) – může pak dojít k nepřerenderování reactí aplikace (je potřeba vrátit nový objekt/pole/hodnotu… pokud chceme, aby si redux uvědomil, že došlo ke změně… při vrácení stejného o/p/h to redux vyhodnotí jako že nedošlo ke změně a neaktualizuje zbytek aplikace)
Zdroje