Zadanie 1: Pobieranie danych z Airtable
Utwórz aplikację React, która pobiera dane z Airtable za pomocą REST API i wyświetla je na stronie.
Instrukcje:
- Skonfiguruj połączenie z API Airtable, aby pobrać zestaw danych (np. produkty, zamówienia, kategorie).
- Utwórz komponent, który pobierze dane z Airtable i wyświetli je w formie listy na stronie.
- Zadbaj o obsługę ładowania danych oraz ewentualne błędy komunikacji z API.
- Spróbuj skorzystać również z biblioteki axios.
Zadanie 2: Usługi pobierania danych
Zorganizuj logikę pobierania danych z poprzedniego zadania poprzez utworzenie usług do obsługi zapytań do API.
Instrukcje:
- Utwórz usługę do pobierania danych z API Airtable.
- Zorganizuj kod komponentów poprzez przeniesienie logiki pobierania danych do utworzonej usługi.
- Wykorzystaj usługę w komponentach do pobierania i wyświetlania danych.
- Spróbuj skorzystać również z biblioteki axios.
Zadanie 3: Obsługa stanu ładowania i błędów
Dodaj obsługę stanów ładowania i błędów podczas pobierania danych z API.
Instrukcje:
- Dodaj flagi
isLoadingiisErrordo monitorowania stanu ładowania danych i ewentualnych błędów. - Zaktualizuj komponenty tak, aby odpowiednio reagowały na te stany.
- Wyświetl komunikaty informujące użytkownika o procesie ładowania danych oraz ewentualnych problemach.
Zadanie 4: Użycie hooka useApi
Stwórz hook useApi, który będzie enkapsulował logikę pobierania danych z API.
Instrukcje:
- Utwórz hook
useApi, który będzie obsługiwał pobieranie danych z wybranego API. - Zwróć stan ładowania, dane oraz ewentualne błędy z hooka
useApi. - Wykorzystaj ten hook w odpowiednich komponentach aplikacji.
Zadanie 5: Edycja rekordu
W zadaniu pierwszym pobieramy konkretne stworzone przez Ciebie rekordy (produkty, zamówienia, kategorie). Przygotuj formularz, za pomocą którego będzie można zmodyfikować dowolnie wybrany rekord.
Instrukcje:
- Przygotuj formularz edycji rekordu
- Formularz powinien posiadać walidację
- Po wysłaniu formularza rekord powinien zostać zaktualizowany w Airtable
- Po prawidłowym zaktualizowaniu produktu wyświetl toast z biblioteki react-toastify
Zadanie 1: Pobieranie danych z Airtable
Utwórz aplikację React, która pobiera dane z Airtable za pomocą REST API i wyświetla je na stronie.
Instrukcje:
- Skonfiguruj połączenie z API Airtable, aby pobrać zestaw danych (np. produkty, zamówienia, kategorie).
- Utwórz komponent, który pobierze dane z Airtable i wyświetli je w formie listy na stronie.
- Zadbaj o obsługę ładowania danych oraz ewentualne błędy komunikacji z API.
- Spróbuj skorzystać również z biblioteki axios.
Zadanie 2: Usługi pobierania danych
Zorganizuj logikę pobierania danych z poprzedniego zadania poprzez utworzenie usług do obsługi zapytań do API.
Instrukcje:
- Utwórz usługę do pobierania danych z API Airtable.
- Zorganizuj kod komponentów poprzez przeniesienie logiki pobierania danych do utworzonej usługi.
- Wykorzystaj usługę w komponentach do pobierania i wyświetlania danych.
- Spróbuj skorzystać również z biblioteki axios.
Zadanie 3: Obsługa stanu ładowania i błędów
Dodaj obsługę stanów ładowania i błędów podczas pobierania danych z API.
Instrukcje:
- Dodaj flagi
isLoadingiisErrordo monitorowania stanu ładowania danych i ewentualnych błędów. - Zaktualizuj komponenty tak, aby odpowiednio reagowały na te stany.
- Wyświetl komunikaty informujące użytkownika o procesie ładowania danych oraz ewentualnych problemach.
Zadanie 4: Użycie hooka useApi
Stwórz hook useApi, który będzie enkapsulował logikę pobierania danych z API.
Instrukcje:
- Utwórz hook
useApi, który będzie obsługiwał pobieranie danych z wybranego API. - Zwróć stan ładowania, dane oraz ewentualne błędy z hooka
useApi. - Wykorzystaj ten hook w odpowiednich komponentach aplikacji.
Zadanie 5: Edycja rekordu
W zadaniu pierwszym pobieramy konkretne stworzone przez Ciebie rekordy (produkty, zamówienia, kategorie). Przygotuj formularz, za pomocą którego będzie można zmodyfikować dowolnie wybrany rekord.
Instrukcje:
- Przygotuj formularz edycji rekordu
- Formularz powinien posiadać walidację
- Po wysłaniu formularza rekord powinien zostać zaktualizowany w Airtable
- Po prawidłowym zaktualizowaniu produktu wyświetl toast z biblioteki react-toastify
Zadanie 1: Pobieranie danych z Airtable
Utwórz aplikację React, która pobiera dane z Airtable za pomocą REST API i wyświetla je na stronie.
Instrukcje:
- Skonfiguruj połączenie z API Airtable, aby pobrać zestaw danych (np. produkty, zamówienia, kategorie).
- Utwórz komponent, który pobierze dane z Airtable i wyświetli je w formie listy na stronie.
- Zadbaj o obsługę ładowania danych oraz ewentualne błędy komunikacji z API.
- Spróbuj skorzystać również z biblioteki axios.
Zadanie 2: Usługi pobierania danych
Zorganizuj logikę pobierania danych z poprzedniego zadania poprzez utworzenie usług do obsługi zapytań do API.
Instrukcje:
- Utwórz usługę do pobierania danych z API Airtable.
- Zorganizuj kod komponentów poprzez przeniesienie logiki pobierania danych do utworzonej usługi.
- Wykorzystaj usługę w komponentach do pobierania i wyświetlania danych.
- Spróbuj skorzystać również z biblioteki axios.
Zadanie 3: Obsługa stanu ładowania i błędów
Dodaj obsługę stanów ładowania i błędów podczas pobierania danych z API.
Instrukcje:
- Dodaj flagi
isLoadingiisErrordo monitorowania stanu ładowania danych i ewentualnych błędów. - Zaktualizuj komponenty tak, aby odpowiednio reagowały na te stany.
- Wyświetl komunikaty informujące użytkownika o procesie ładowania danych oraz ewentualnych problemach.
Zadanie 4: Użycie hooka useApi
Stwórz hook useApi, który będzie enkapsulował logikę pobierania danych z API.
Instrukcje:
- Utwórz hook
useApi, który będzie obsługiwał pobieranie danych z wybranego API. - Zwróć stan ładowania, dane oraz ewentualne błędy z hooka
useApi. - Wykorzystaj ten hook w odpowiednich komponentach aplikacji.
Zadanie 5: Edycja rekordu
W zadaniu pierwszym pobieramy konkretne stworzone przez Ciebie rekordy (produkty, zamówienia, kategorie). Przygotuj formularz, za pomocą którego będzie można zmodyfikować dowolnie wybrany rekord.
Instrukcje:
- Przygotuj formularz edycji rekordu
- Formularz powinien posiadać walidację
- Po wysłaniu formularza rekord powinien zostać zaktualizowany w Airtable
- Po prawidłowym zaktualizowaniu produktu wyświetl toast z biblioteki react-toastify
Szczegóły o kursie oraz programie możesz przeczytać tutaj: https://www.webamigos.pl/szkola-reacta
Szkoła Reacta to program nauki Reacta w formie lekcji wideo, praktycznych ćwiczeń, zadań domowych i konsultacji zgrupowych mentorem. Otrzymujesz również dostęp do społeczności na komunikatorze Discord, aby efektywniej uczyć się w grupie.
.jpg){kind=avatar}
Jestem Senior Fullstack Developerem specjalizującym się w tworzeniu aplikacji internetowych w stacku TypeScript, React, Next.js, NestJS. Realizowałem wiele ciekawych i wymagających projektów m. in. dla znanej akademii filmowej z USA oraz startupów z Doliny Krzemowej.
Od 8 lat dzielę się swoją wiedzą jako ekspert na konferencjach i trener IT. Prowadzę też szkolenia dla programistów w Bottega IT Minds, firmie która zrzesza najlepszych ekspertów IT. Jestem także pomysłodawcą i założycielem Szkoły Reacta oraz kanału Web Amigos na YouTube.
Na codzień oprócz kodowania, zajmuję się weryfikacją IT, czyli w trakcie procesów rekrutacyjnych sprawdza poziom wiedzy kandydatów na stanowiska Junior, Regular, jak i Senior developerów.