Definiowanie komponentu

git checkout 5-component -f

Obecnie mamy jeden komponent (App), ale jak obiecywałem komponenty mogą zawierać logikę w sobie i zapewniają nam reużywalność. Zdefiniujmy naszą obecną funkcjonalność (3 przyciski + licznik) jako osobny komponent i wyświetlmy go parę razy!

Zrobimy to etapami by się nie pogubić.

W tym samym pliku, podobnie jak jest zdefiniowana klasa App zdefiniujmy osobną klasę CounterButtons, która zwróci diva z napisem "tu będzie mój przycisk". Zwróć uwagę, że komponenty w React zawsze zaczynają się z wielkiej litery

class CounterButtons extends React.Component {
  render() {
    return <div>Tu będą moje przyciski</div>;
  }
}

Następnie wyświetlmy tem komponent w App. Wyświetlamy go podobnie jak normalnego elementy w html, różnica polega na tym, że komponent React jest z wielkiej litery.

class App extends React.Component {
  // reszta

  render() {
    return (
      <div className="App">
        // przyciski tutaj
        <CounterButtons />
      </div>
    );
  }
}

Mamy teraz osobny komponent w hierarchii. App jest rodzicem CounterButton. Może mieć kilka egzemplarzy tego samego komponentu i każdy z nich będzie miał osobny stan!