Úvod > Blog > Články > Programování > React.js v pěti minutách >

React.js v pěti minutách

03.02.2019 Programování #react #programovani

Rychlé seznámení se základem React.js

Nastavení

Když začneme s Reactem, měli bysme použít nejjednodušší nastavení: soubor HTML, který importuje React a ReactDOM knihovny pomocí skriptových značek, například:

<html>
<head>
<script src="https://unpkg.com/react@15/dist/react.min.js"> </script><script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js">
</script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
    
    /* 
    ADD REACT CODE HERE 
    */
    
    </script>
</body>
</html>

Také se provedl import Babel, protože React používá pro zápis značek jazyk JSX. Ten se musí transformovat na jednoduchý JavaScript, aby jej prohlížeč pochopil.

Existuje více věcí, které jsou důležité za povšimnutí:

  1. < div > s identifikátorem #root. Toto je vstupní bod pro naši aplikaci. To je místo, kde celá aplikace bude žít.
  2. < script type="text/babel" >Tag v těle. Zde budeme psát náš React.js kód.

Komponenty

Všechno co naprogramujeme je součást Reactu. Obvykle mají podobu tříd jazyka JavaScript. Vytvoříme součást rozšířením o React-Component třídu. Vytvoříme komponentu nazvanou Hello.

class Hello extends React.Component {
    render() {
        return <h1>Hello world!</h1>;
    }
}

Pro uvedený příklad můžeme využít také obdobnou aplikaci s využitím ReactDOM.render():

ReactDOM.render ( 
    <Hello />, 
    document.getElementById ("root") 
);

Takže značka div s identifikátorem #root je místo, kde komponenta Hello je vstupním bodem aplikace ( < div id="root" >< /div > ). Výsledek je následující:

Syntaxe HTMLish, na kterou jsme se právě podívali ( < h1 >a < Hello/ > ) je kód JSX, který je zmíněn dříve. Není to vlastně HTML, i když to, co píšeme, skončí jako HTML tagy v doméně DOM.

Dalším krokem je zpracování dat.

Manipulace s daty

Existují dva typy dat, které se nachází v Reactu: props a state.

Klíčovým rozdílem je, že state je privátní a může být změněn ze samotné komponenty. Props jsou externí a nejsou kontrolovány samotnou komponentou. Je předávána v hierarchii z vyšších složek, kteří také řídí data.

Komponenty mohou přímo změnit svůj vnitřní stav (state). Nemůže přímo měnit své props.

Props

Naše komponenta Hello je statická a vykresluje pořád stejnou zprávu. Podstatná vlastnost Reactu je opětovná použitelnost, což znamená schopnost jednou napsat komponentu a pak ji znovu použít v různých případech použití - například k zobrazení různých zpráv.

Chceme-li dosáhnout tohoto typu opětovného použití, přidáme props. To je způsob, jak předat props do komponenty:

ReactDOM.render(
    <Hello message="my friend" />, 
    document.getElementById("root")
);

Tato prosp se nazývá message a obsahuje hodnotu "my friend". Můžeme také zpřístupnit tuto props uvnitř komponenty Hello odkazem  this.props.message.

class Hello extends React.Component {
    render() {
        return <h1>Hello {this.props.message}!</h1>;
    }
}

Výsledkem je zobrazení:

Důvod, proč píšeme {this.props.message} se složenými závorkami je, že musíme JSXovi říct, že chceme přidat výraz JavaScript. Toto se nazývá escaping.

Takže nyní máme znovu použitelnou součást, která může na stránce zobrazit jakoukoli zprávu, kterou chceme.

Co když chceme, aby součást mohla změnit hodnotu podle nás? Pak musíme místo toho použít state!

State

Druhý způsob ukládání dat do Reactu je ve stavu komponenty. A na rozdíl od props - které nemohou být přímo měněny komponentou - stav (state) může.

Takže pokud chceme, aby se data v aplikaci změnily - například na základě interakcí uživatelů - musí být uložena ve stavu komponenty někde v aplikaci.

Inicializace stavu

Pro inicializaci stavu, jednoduše nastavíme this.state v constructor() třídy. Náš stav je objekt, který v našem případě má pouze jeden klíč nazvaný message.

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
    }
    
    render() {
        return <h1>Hello {this.state.message}!</h1>;
    }
}

Než budeme nastavovat stav, musíme zavolat v konstruktoru super(). Je to proto, že this je před super() neinicializováno. 

Změna stavu

Chceme-li změnit stav, stačí zavolat this.setState(), předáním nového objektu stavu jako argument. Uděláme to v rámci metody, kterou budeme nazývat updateMessage.

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
        this.updateMessage = this.updateMessage.bind(this);
   }
    updateMessage() {
        this.setState({
            message: "my friend (from changed state)!"
        });
    }    
    render() {
        return <h1>Hello {this.state.message}!</h1>;
    }
}

Dalším krokem je vytvoření tlačítka, na které lze kliknout, abychom mohli metodu updateMessage() spustit.

Přidejme tedy tlačítko do render():

render() {
  return (
     <div>
       <h1>Hello {this.state.message}!</h1>
       <button onClick={this.updateMessage}>Click me!</button>
     </div>   
  )
}

Tady čekáme na událost onClick. Když je spuštěna, zavoláme metodu updateMessage.

Zde je celá část kódu:

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
        this.updateMessage = this.updateMessage.bind(this);
    }
    updateMessage() {
        this.setState({
            message: "my friend (from changed state)!"
        });
    }
    render() {
         return (
           <div>
             <h1>Hello {this.state.message}!</h1>
             <button onClick={this.updateMessage}>Click me!</button>
           </div>   
        )
    }
}

Metoda updateMessage poté volá this.setState(), která změní hodnotu this.state.message. A když klikneme na tlačítko, zobrazí se následující:

Gratuluji! Nyní máme za námi velmi základní vysvětelní Reactu.

#react #programovani