REACT I TYPESCRIPT REAKTYWNE TWORZENIE STRON INTERNETOWYCH DLA POCZĄTKUJĄCYCH

Spis treści

O autorze

O korektorze merytorycznym

Wprowadzenie

CZĘŚĆ 1. Wprowadzenie

Rozdział 1. Wprowadzenie do Reacta

Wymagania techniczne
Zalety biblioteki React
JSX
Tworzenie komponentu
Tworzenie projektu w CodeSandboxie
Punkt wejścia w Reaccie
Drzewo komponentów Reacta
Tworzenie podstawowego komponentu alertu
Import i eksport
Dlaczego moduły są ważne?
Definiowanie modułów
Korzystanie z importu
Dodawanie komponentu Alert do komponentu App
Korzystanie z propsów
Propsy
Dodawanie propsa do komponentu Alert
Korzystanie ze stanów komponentu
Koncepcja stanu
Wprowadzanie stanu widoczności w komponencie Alert
Dodawanie przycisku zamykania do komponentu Alert
Korzystanie ze zdarzeń komponentu
Koncepcja zdarzeń
Implementacja funkcji obsługującej kliknięcie dla przycisku zamykania w alercie
Implementacja zdarzenia zamykania alertu
Podsumowanie
Pytania
Odpowiedzi

Rozdział 2. Wprowadzenie do TypeScriptu

Wymagania techniczne
Zalety TypeScriptu
Typy w TypeScripcie
Wczesne wykrywanie błędów typów
Zwiększenie komfortu i produktywności programisty za pomocą IntelliSense
Typowanie w JavaScripcie
Podstawy typowania w TypeScripcie
Jak korzystać z adnotacji typów?
Wnioskowanie typów
Typ Date
Typ any
Typ unknown
Typ void
Typ never
Tablice w TypeScripcie
Tworzenie własnych typów w TypeScripcie
Typy obiektów TypeScriptu
Alias typu
Tworzenie interfejsów
Klasy
Typ wyliczeniowy
Unia
Korzystanie z kompilatora TypeScriptu
Podsumowanie
Pytania
Odpowiedzi

Rozdział 3. Konfiguracja Reacta i TypeScriptu

Wymagania techniczne
Tworzenie projektu przy użyciu webpacka
Poznaj webpacka
Tworzenie struktury katalogów
Tworzenie pliku package.json
Dodawanie strony internetowej
Wprowadzanie TypeScriptu
Instalowanie Reacta
Dodawanie Babla
Dodawanie webpacka
Tworzenie projektu za pomocą narzędzia Create React App
Korzystanie z Create React App
Integracja lintu z Visual Studio Code
Formatowanie kodu
Uruchamianie aplikacji w trybie deweloperskim
Przygotowywanie wersji produkcyjnej
Tworzenie komponentu w Reaccie i TypeScripcie
Dodawanie typów do propsów
Dodawanie typu dla stanu
Korzystanie z narzędzia React DevTools
Podsumowanie
Pytania
Odpowiedzi

Rozdział 4. Korzystanie z hooków Reacta

Wymagania techniczne
Hook efektów
Kluczowe aspekty hooka efektów
Zasady stosowania hooków
Czyszczenie po hooku efektów
Tworzenie nowego projektu
Pobieranie informacji przy użyciu hooka efektów
Hooki stanów
Użycie hooka useState
Hook useReducer
Użycie hooka useReducer
Hook ref
Koncepcja hooka ref
Użycie hooka ref
Hook memo
Koncepcja hooka memo
Użycie hooka memo
Hook callback
Koncepcja hooka callback
Kiedy komponent jest renderowany ponownie?
Użycie hooka callback
Podsumowanie
Pytania
Odpowiedzi

CZĘŚĆ 2. Podstawy tworzenia aplikacji

Rozdział 5. Stylizacja interfejsów w Reaccie

Wymagania techniczne
CSS
Tworzenie projektu
Jak odnieść się do CSS?
CSS w komponencie alertu
Kolizje w CSS
Moduły CSS
Co to są moduły CSS?
Zastosowanie modułów CSS w komponencie alertu
CSS w JS
Koncepcja CSS w JS
Stosowanie Emotiona w komponencie alertu
Tailwind CSS
Co to jest Tailwind CSS?
Jak zainstalować i ustawić narzędzie Tailwind CSS?
Korzystanie z narzędzia Tailwind CSS
Grafiki SVG
Jak korzystać z SVG w Reaccie?
Dodawanie SVG do alertu
Podsumowanie
Pytania
Odpowiedzi

Rozdział 6. Routing przy użyciu biblioteki React Router

Wymagania techniczne
Wprowadzenie do biblioteki React Router
Tworzenie nowego projektu
Co to jest React Router?
Instalowanie biblioteki React Router
Definiowanie tras
Tworzenie strony z listą produktów
Działanie routera w bibliotece React Router
Deklarowanie trasy dla listy produktów
Projektowanie nawigacji
Korzystanie z komponentu Link
Korzystanie z komponentu NavLink
Praca z zagnieżdżonymi trasami
Koncepcja zagnieżdżonych tras
Zagnieżdżone trasy w aplikacji
Parametry tras
Czym są parametry tras?
Stosowanie parametrów tras w aplikacji
Tworzenie strony błędu
Co warto wiedzieć o stronach błędu?
Dodawanie strony błędu
Praca z indeksowanymi trasami
Koncepcja tras indeksowanych
Wprowadzanie trasy indeksowanej do aplikacji
Parametry wyszukiwania
Koncepcja parametrów wyszukiwania
Dodawanie funkcji wyszukiwania do aplikacji
Nawigowanie programowe
Nawigowanie za pomocą formularza
Implementacja leniwego ładowania
Jak działa leniwe ładowanie w Reaccie?
Dodawanie leniwego ładowania strony administratora
Podsumowanie
Pytania
Odpowiedzi

Rozdział 7. Praca z formularzami

Wymagania techniczne
Pola kontrolowane
Tworzenie projektu
Tworzenie formularza kontaktowego
Pola niekontrolowane
Formularze z biblioteki React Router
Natywna walidacja
React Hook Form
Działanie biblioteki React Hook Form
Jak korzystać z biblioteki React Hook Form?
Ustawianie walidacji
Podsumowanie
Pytania
Odpowiedzi

CZĘŚĆ 3. Dane

Rozdział 8. Zarządzanie stanem w aplikacji

Wymagania techniczne
Tworzenie projektu
Prop driling
Kontekst w Reaccie
Czym jest kontekst w Reaccie?
Jak używać kontekstu w Reaccie?
Redux
Poznajmy Reduxa
Instalowanie Reduxa
Zastosowanie Reduxa
Podsumowanie
Pytania
Odpowiedzi

Rozdział 9. Praca z interfejsami RESTful API

Wymagania techniczne
Tworzenie projektu
Konfiguracja projektu
Budowa komponentów aplikacji
Tworzenie REST API
Interakcja z REST API przy użyciu hooka useEffect i funkcji fetch
Pobieranie postów z użyciem funkcji fetch
Silne określenie typu odpowiedzi
Tworzenie komponentu listy postów
Tworzenie komponentu strony wyświetlającej posty
Przesyłanie danych przy użyciu funkcji fetch
Dodawanie nowych postów za pomocą funkcji fetch
Tworzenie komponentu formularza posta
React Router
Mechanizm ładowania danych w bibliotece React Router
Ładowanie danych za pomocą biblioteki React Router
Opóźnione ładowanie danych przez bibliotekę React Router
React Query
Instalowanie biblioteki React Query
Dodawanie providera biblioteki React Query
Pobieranie danych z biblioteki React Query
Aktualizowanie danych przy użyciu biblioteki React Query
Użycie biblioteki React Router z biblioteką React Query
Podsumowanie
Pytania
Odpowiedzi

Rozdział 10. Praca z API GraphQL

Wymagania techniczne
Składnia GraphQL
Zwracanie prostych danych
Zwracanie danych hierarchicznych
Określanie parametrów zapytania
Mutacje w GraphQL
Przygotowanie projektu
Tworzenie projektu
Tworzenie tokena dostępu dla API GraphQL GitHuba
Tworzenie zmiennych środowiskowych
React Query z funkcją fetch
Przygotowywanie nagłówka
Budowa strony z repozytorium
Praca z biblioteką Apollo Client
Czym jest Apollo Client?
Jak zainstalować bibliotekę Apollo Client?
Modyfikowanie komponentu App
Modyfikowanie strony z repozytorium
Podsumowanie
Pytania
Odpowiedzi

CZĘŚĆ 4. Zaawansowany React

Rozdział 11. Komponenty wielokrotnego użytku

Wymagania techniczne
Tworzenie projektu
Użycie generycznych propsów
Co to są typy generyczne?
Tworzenie prostej listy
Zastosowanie rozprzestrzeniania propsów
Użycie propsów renderujących
Koncepcja wzorca propsów renderujących
Dodawanie właściwości renderItem
Funkcje zaznaczania
Tworzenie własnych hooków
Koncepcja własnych hooków
Przenoszenie logiki pól wyboru do własnego hooka
Kontrolowanie wewnętrznego stanu komponentu
Jak kontrolować wewnętrzny stan komponentu?
Kontrola checkedIds
Podsumowanie
Pytania
Odpowiedzi

Rozdział 12. Testy jednostkowe z użyciem frameworka Jest i biblioteki React Testing Library

Wymagania techniczne
Testowanie funkcji
Testy za pomocą frameworka Jest
Testowanie isChecked
Testowanie wyjątków
Uruchamianie testów
Testowanie komponentów
Testy za pomocą biblioteki React Testing Library
Implementacja testów komponentu listy kontrolnej
Stosowanie identyfikatorów testowych
Symulowanie interakcji użytkowników
Funkcja fireEvent i pakiet user-event
Implementacja testów listy kontrolnej do sprawdzania elementów
Pokrycie kodu testami
Uruchamianie pokrycia kodu testami
Raport pokrycia kodu
Uzyskanie pełnego pokrycia komponentu listy kontrolnej
Ignorowanie plików w raporcie pokrycia kodu
Podsumowanie
Pytania
Odpowiedzi