Zadanie 1: Własny hook

Stwórz własny hook, który będzie zarządzał logiką związaną z sortowaniem danych w aplikacji. Będzie wykorzystywany przez komponenty, które przyjmują kolekcję danych jako propsy. Dla przykładu taki komponent może dostać kolekcję: 

const users = [{ id: 1, nickname: 'john', age: 45 }, { id: 2, nickname: 'olivier', age: 32 }, { id: 3, nickname: 'macgyver', age: 65 }];

a następnie hook będzie w stanie posortować tę kolekcję na podstawie dwóch wartości - pola oraz kierunku sortowania (malejąco lub rosnąco). Pole oraz kierunek powinny być argumentami hooka.

Instrukcje:

1. Utwórz custom hook, który przyjmuje dane do sortowania jako argumenty.
2. Zaimplementuj sortowania filtrowania danych wewnątrz hooka.
3. Użyj tego hooka w komponencie i wykonaj sortowanie danych na podstawie określonych warunków.

‍

Zadanie 2: Zarządzanie kontekstami

Wyobraź sobie, że przygotowujesz aplikację internetową, z której będzie korzystało kilku klientów. Każdy z klientów ma swoje logo, nazwę firmy oraz zestaw kolorów (np. Coca-Cola, Starbucks, IBM mają odmienne logotypy i kolory do identyfikacji widualnej). Niech Twoja aplikacja React skorzysta z kontekstów do zmiany wyglądu interfejsu w zależności od wybranej opcji pod konkretnego klienta. Będzie to podobne do skórek, czyli możesz przygotować 3 warianty kolorystyczne aplikacji (skorzystaj np. z https://flatuicolors.com/).

Instrukcje:

1. Utwórz kontekst, który będzie przechowywał informacje o wybranej opcji kolorystycznej wyglądu. Dodatkowo niech przechowuje informacje o nazwie firmy oraz posiada ścieżkę do logotypu, który będzie można wyświetlić.
2. Stwórz komponent, który pozwoli użytkownikowi wybrać preferowany motyw.
3. Wykorzystaj konteksty do dynamicznej zmiany motywu interfejsu w zależności od wyboru użytkownika.

‍

Zadanie 3: Wykorzystanie useReducer

‍Stwórz system zarządzania użytkownikami przy użyciu hooka useReducer. Ten system będzie przechowywał informacje o użytkownikach wewnątrz hooka i umożliwi: dodawanie, usuwanie, oraz edycję konkretnego użytkownika. Możesz skorzystać z podobnej struktury, jak w zadaniu 1.

Instrukcje:

1. Stwórz reducer z logiką do dodawania, usuwania oraz modyfikacji użytkowników.
2. Do dodawania oraz modyfikacji użytkownika skorzystaj z formularzy (możesz użyć np. React Hook Form oraz Zod).
3. Stworzy nowy komponent, którego zadaniem będzie wyświetlenie wszystkich użytkowników z reducera.

‍

Zadanie 4: Integracja z Redux

‍Rozbuduj istniejącą aplikację o zarządzanie stanem przy użyciu biblioteki Redux.

Instrukcje:

1. Dodaj Redux Tookit do swojego projektu.
2. Przygotuj podobny mechanizm zarządzania użytkownikami, jak w poprzednim zadaniu, ale oparty o store'a Redux.
3. Zastosuj reducer i akcje Redux do zarządzania stanem użytkownikami.
4. Sprawdź, czy aplikacja poprawnie korzysta z Redux do przechowywania stanu i obsługi akcji.

‍

Zadanie 5: Dodaj routing do projektu

Rozbuduj zadanie 3 oraz 4 w taki sposób, aby lista użytkowników, dodawanie oraz edycja użytkowników była na osobym route.

Instrukcje:

1. Zainstaluj bibliotekę React Router DOM.
2. Przygotuj strukturę ścieżek URL w aplikacji
3. Przygotuj menu nawigacyjne
4. Sprawdź, czy aplikacja działa poprawnie i można odwiedzić poszczególne strony

‍

Powodzenia! 💪

‍

Zadanie 1: Własny hook

Stwórz własny hook, który będzie zarządzał logiką związaną z sortowaniem danych w aplikacji. Będzie wykorzystywany przez komponenty, które przyjmują kolekcję danych jako propsy. Dla przykładu taki komponent może dostać kolekcję: 

const users = [{ id: 1, nickname: 'john', age: 45 }, { id: 2, nickname: 'olivier', age: 32 }, { id: 3, nickname: 'macgyver', age: 65 }];

a następnie hook będzie w stanie posortować tę kolekcję na podstawie dwóch wartości - pola oraz kierunku sortowania (malejąco lub rosnąco). Pole oraz kierunek powinny być argumentami hooka.

Instrukcje:

1. Utwórz custom hook, który przyjmuje dane do sortowania jako argumenty.
2. Zaimplementuj sortowania filtrowania danych wewnątrz hooka.
3. Użyj tego hooka w komponencie i wykonaj sortowanie danych na podstawie określonych warunków.

‍

Zadanie 2: Zarządzanie kontekstami

Wyobraź sobie, że przygotowujesz aplikację internetową, z której będzie korzystało kilku klientów. Każdy z klientów ma swoje logo, nazwę firmy oraz zestaw kolorów (np. Coca-Cola, Starbucks, IBM mają odmienne logotypy i kolory do identyfikacji widualnej). Niech Twoja aplikacja React skorzysta z kontekstów do zmiany wyglądu interfejsu w zależności od wybranej opcji pod konkretnego klienta. Będzie to podobne do skórek, czyli możesz przygotować 3 warianty kolorystyczne aplikacji (skorzystaj np. z https://flatuicolors.com/).

Instrukcje:

1. Utwórz kontekst, który będzie przechowywał informacje o wybranej opcji kolorystycznej wyglądu. Dodatkowo niech przechowuje informacje o nazwie firmy oraz posiada ścieżkę do logotypu, który będzie można wyświetlić.
2. Stwórz komponent, który pozwoli użytkownikowi wybrać preferowany motyw.
3. Wykorzystaj konteksty do dynamicznej zmiany motywu interfejsu w zależności od wyboru użytkownika.

‍

Zadanie 3: Wykorzystanie useReducer

‍Stwórz system zarządzania użytkownikami przy użyciu hooka useReducer. Ten system będzie przechowywał informacje o użytkownikach wewnątrz hooka i umożliwi: dodawanie, usuwanie, oraz edycję konkretnego użytkownika. Możesz skorzystać z podobnej struktury, jak w zadaniu 1.

Instrukcje:

1. Stwórz reducer z logiką do dodawania, usuwania oraz modyfikacji użytkowników.
2. Do dodawania oraz modyfikacji użytkownika skorzystaj z formularzy (możesz użyć np. React Hook Form oraz Zod).
3. Stworzy nowy komponent, którego zadaniem będzie wyświetlenie wszystkich użytkowników z reducera.

‍

Zadanie 4: Integracja z Redux

‍Rozbuduj istniejącą aplikację o zarządzanie stanem przy użyciu biblioteki Redux.

Instrukcje:

1. Dodaj Redux Tookit do swojego projektu.
2. Przygotuj podobny mechanizm zarządzania użytkownikami, jak w poprzednim zadaniu, ale oparty o store'a Redux.
3. Zastosuj reducer i akcje Redux do zarządzania stanem użytkownikami.
4. Sprawdź, czy aplikacja poprawnie korzysta z Redux do przechowywania stanu i obsługi akcji.

‍

Zadanie 5: Dodaj routing do projektu

Rozbuduj zadanie 3 oraz 4 w taki sposób, aby lista użytkowników, dodawanie oraz edycja użytkowników była na osobym route.

Instrukcje:

1. Zainstaluj bibliotekę React Router DOM.
2. Przygotuj strukturę ścieżek URL w aplikacji
3. Przygotuj menu nawigacyjne
4. Sprawdź, czy aplikacja działa poprawnie i można odwiedzić poszczególne strony

‍

Powodzenia! 💪

‍