React Components

Komponenty jsou jako funkce, které vracejí prvky HTML.

React Components

Komponenty jsou nezávislé a opakovaně použitelné bity kódu. Slouží stejnému účelu jako funkce JavaScriptu, ale fungují izolovaně a vracejí HTML.

Komponenty se dodávají ve dvou typech, komponenty třídy a komponenty Function, v tomto tutoriálu se zaměříme na komponenty Function.

Vytvořte svou první komponentu

Při vytváření komponenty React MUSÍ název komponenty začínat velkým písmenem.

Komponenta třídy

Komponenta třídy musí obsahovat extends React.Componentpříkaz. Tento příkaz vytváří dědictví React.Component a dává vaší komponentě přístup k funkcím React.Component.

Komponenta také vyžaduje render()metodu, tato metoda vrací HTML.

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

Funkční komponenta

Zde je stejný příklad jako výše, ale vytvořený pomocí komponenty Function.

Komponenta Function také vrací HTML a chová se v podstatě stejně jako komponenta Class, ale komponenty Function mohou být napsány s použitím mnohem menšího množství kódu, jsou snadněji pochopitelné a v tomto tutoriálu budou preferovány.

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

Vykreslování komponenty

Nyní má vaše aplikace React komponentu nazvanou Car, která vrací <h2>prvek.

Chcete-li použít tuto komponentu ve své aplikaci, použijte podobnou syntaxi jako normální HTML: <Car />

ReactDOM.render(<Car />, document.getElementById('root'));

Rekvizity

Komponenty lze předávat jako props, což je zkratka pro vlastnosti.

Podpěry jsou jako argumenty funkcí a posíláte je do komponenty jako atributy.

Více se dozvíte propsv další kapitole.

function Car(props) {
  return <h2>I am a {props.color} Car!</h2>;
}

ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

Komponenty v komponentách

Můžeme odkazovat na komponenty uvnitř jiných komponent:

function Car() {
  return <h2>I am a Car!</h2>;
}

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car />
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Komponenty v souborech

React je o opětovném použití kódu a doporučuje se rozdělit komponenty do samostatných souborů.

Chcete-li to provést, vytvořte nový soubor s .js příponou souboru a vložte do něj kód:

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

export default Car;

Abyste mohli komponentu Car používat, musíte soubor importovat do aplikace.

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';

ReactDOM.render(<Car />, document.getElementById('root'));

function (props) {
  return <h2>Hi, I'm {props.name}</h2>;
}