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

npm install create-react-app

.\node_modules\.bin\create-react-app <project-name>

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

npx create-react-app <project-name>

Základní obsah souboru src/index.js

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

    export default <jméno komponenty>;

  • named – pokud vyjmenovává více
    

    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

"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“)
    

    {`${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

  const AppXy = (props) => {

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

  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

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

• fetch
• Axios 
  

  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