Jak działa react

stan + propsy = ui

Najłatwiej będzie pokazać na przykładzie. Otwórz proszę https://reactjs.org/

Czym jest komponent

Komponenty pozwalają nam na podzielenie aplikacji na reużywalne i odizolowane elementy. Zamiast pracować na jednym wielkim elementem (np. całą stroną) możemy go podzielić na mniejsze elementy (np. formularz kontaktowy, galerię, sekcję o mnie).

Można o komponencie myśleć jak o funkcji - otrzymuje jakieś dane i zwraca elementy do wyświetlanie na stronie.

Komponenty możemy zagnieżdżać tworząc hierarchię np:

Strona kontaktu > formularz > input

Komponent składa się z 3 głównych części:

• stanu
• propsów
• cyklu życia

Czym są propsy

Właściwości otrzymywane od rodzica. Komponent ich nie modyfikuje samemu, propsy traktujemy jako read-only.

Na przykład mamy formularz, w którym jest przycisk. Formularz mu może przekazać jaka jaki jest w nim tekst, co ma zrobić po kliknięciu i jakiego jest typu

class Form extends React.Component {
  submitForm ()  {
    // jakaś funkcja do wysyłania formularza
  }

  render() {
    return (
      <form>
          {/* reszta formularza */}
          <Button type="submit" onClick={this.submitForm} label="Wyślij">
      </form>
    )
  }
}

Natomiast sam button musi tylko ładnie wyglądać, dane i zachowanie przychodzą z zewnatrz

class Button extends React.Component {
  render() {
    return <Button type={this.props.type} onClick={this.props.onClick} label={this.props.label} />;
  }
}

Czym jest stan

Coś wewnętrznego i ulotnego dla komponentu. Komponent może je modyfikować

class Checkbox extends React.Component {
  state = {
    isChecked: false,
  };

  handleChange = (event) => {
    this.setState({ name: isChecked.target.checked });
  };

  render() {
    return (
      <label htmlFor="register-checkbox">
        Checkbox
        <input type="checkbox" id="register-checkbox" onChange={this.handleCheckboxChange} checked={this.state.agreementChecked} />
      </label>
    );
  }
}

Czym jest cykl życia

Komponent przechodzi przez różne fazy i na każdej z nich możemy coś zrobić. Komponent (między innymi):

1. Montuje się w DOM
2. Aktualizuje się
3. Jest usuwany z DOM

W momencie każdego z tych wydarzeń możemy coś zrobić np:

1. Po zamontowaniu strony produktów możemy zrobić zapytanie do API po listę produktów
2. Po zmianie wartości inputa możemy przeładować listę produktów
3. Przy wyjściu ze strony produktów możemy zrobić zapytanie do naszego narzędzia do analizy (np. czy użytkownik miał rzeczy w koszyku)