React – základ – poznámky

Stažení knihovny create-react-app a následné vygenerování nového projektu s její pomocí.

Alternativou může být příkaz npx, který příkaz rovnou vykoná

Základní obsah souboru src/index.js

  • pomocí importu lze přidat i css soubory import ‚./soubor.css‘
  • named vs default export
    • default – pokud obsahuje jeden defaultní
    • named – pokud vyjmenovává více

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

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“)
  • 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
  • lze udělat defaultní nastavení props v rámci komponenty

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

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

  • fetch
  • Axios 

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

  1. https://www.udemy.com/react-redux/
  2. https://stackoverflow.com/questions/50605219/difference-between-npx-and-npm
  3. https://reactjs.org/docs/introducing-jsx.html
  4. React component lifecycle
  5. Named Export vs Default Export in ES6
Příspěvek byl publikován v rubrice Nezařazené se štítky , . Můžete si uložit jeho odkaz mezi své oblíbené záložky.