Poniżej przedstawię przykład (oraz kolejne kroki powstania) bardzo prostego projektu wykorzystującego stan kontrolowany przez Redux. Projekt bazuje na React (CRA).

1) Instalacja narzędzi/zależności

    npx create-react-app <nazwa_projektu>
    npm i redux react-redux

2) Struktura projektu (istotne pliki/te które są edytowane oraz które zostaną/ły dodane)

    {public}
    |
    |_ [...]
    {src}
        |
        |_ {actions …

Wymagania wstępne: git, GitHub, Create React App, Node.js, NPM

Poniżej wypunktuje jak w prosty sposób można opublikować na GitHub-Pages swoją aplikację reactową stworzoną przy pomocy narzędzia Create React App

! W pierwszej kolejności warto ustawić środowisko Routera aby dopasowało się do hostującego środowiska (PUBLIC_URL zostanie podstawione przez ścieżkę absolutną folderu …

Routing - "ścieżkowanie", rozpoznawanie na podstawie ścieżki zasobów jaki serwer może zwrócić, inaczej to określając jest procesem rozpoznawania zasobów serwera

React Router jest tzw high order component i dostarcza nam szereg innych komponentów, które można wykorzystać w trakcie tworzenia nawigacji tworzonej aplikacji

    HashRouter lub BrowserRouter - główny komponent "opakowujący" nawigację
    Route, - komponent …

Przy pomocy Create React APP oraz jednej komendy tworzymy repopozytorium z szkielet aplikacji, instalacją zależności oraz inicjalizujemy git

npx create-react-app <nazwa-aplikacji/projektu>

Jeśli chcemy wypushować do GitHuba to odwiedzamy własne konto tworzymy nowe repo nadajemy mu nazwę (licencję, readme i inne informacje pomijamy) następnie kopiujemy link do wypuszowania (wypchnięcia na …

Context API

Kontekst/Context API pozwala komponentowi na pozyskanie danych z kontekstu a nie przez props poprzez tworzenie globalnych danych dostępnych dla całości drzewa komponentu [innymi słowy uniknięcia sytuacji, w której przekazujemy informację do wielowarstwowo-zagnieżdżonego komponentu przez wiele pośredniczących komponentów (tzn. przez każdy poziom struktury)]. Na jakiego typu danych może …

props.children pozwala nam na tworzenie komponentów otwartych na uzupełniania nowym kodem, wystarczy wykorzystać {props.children} w ramach komponentu aby wskazać, w którym miejscu istnieje możliwość uzupełnienia/wstawienia kodu

Komponent otwarty na ew. rozszerzenia o nową treść

function TestComposition(props) {
  let {children} = props;
  return (<div>
      <h1>Test Kompozycji</h1>
      {children …

Warunkowe renderowanie pozwala na zmianie zachowania się komponentu w zależności od informacji zawartych w stanie komponentu lub w propsie. Jest parę prostych zasad, o których warto pamiętać w tym kontekście.

W zależności od złożoności sytuacji, w której chcemy wykorzystać warunkowe renderowanie możemy:

1) wykorzystać operator trójargumentowy w formie in-linowej walidacji …

Przekazywanie informacji pomiędzy komponentami

W React przekazywanie informacji pomiędzy komponentami odbywa się w dół -> od rodzica do dziecka (przy pomocy propsu), aby móc odwrócić ten proces należy w propsie przekazać referencję do funkcji modyfikującej stan rodzica i następnie wywołać ją w komponencie dziecka przekazując do niej odpowiedni argument - w ten …

Haki/Przyczepienia (hooks)

Hooki mogą być używane jedynie w komponentach funkcyjnych i pozwalają na przechowanie stanu pomiędzy kolejnymi wywołaniami funkcji zawartych w komponentach! Podstawowe dwa z nich pozwalają na wprowadzenie stanów (useState) podczas gdy inny pozwala na zarządzanie automatycznym zachowaniem się danego komponentu (useEffect) - kompensując brak funkcji znanych z komponentów …