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í
    
    JavaScript

    export default <jméno komponenty>;

    1	export default <jméno komponenty>;

  • named – pokud vyjmenovává více
    
    JavaScript

    export const <jméno komponenty> = () => {}<br>export const <jméno další komponenty> = () => {}

    1	export const <jméno komponenty> = () => {}<br>export const <jméno další komponenty> = () => {}

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“)
    
    {`${promenna} text`}

    1	{`${promenna} 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
  JavaScript

  const AppXy = (props) => {

  1	const AppXy = (props) => {

• lze udělat defaultní nastavení props v rámci komponenty
  JavaScript

  const Komponenta = (props)=>{ return <div>:)</div>; } Komponenta.defaultProps = {};

  1 2 3 4

  const 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

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 
  
  Shell

  npm install --save axios

  1	npm install --save 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