REACT KLUCZOWE KONCEPCJE PRZEWODNIK PO NAJWAŻNIEJSZYCH MECHANIZMACH BIBLIOTEKI

Spis treści

Wprowadzenie

ROZDZIAŁ 1. React – co, jak i dlaczego?

Wprowadzenie
Czym jest React?
Problem z czystym JavaScriptem
React i kod deklaratywny
W jaki sposób React operuje modelem DOM?
Wprowadzenie do aplikacji jednostronicowych
Tworzenie projektu Reacta
Podsumowanie i najważniejsze informacje do zapamiętania
Co dalej?
Sprawdź swoją wiedzę!

ROZDZIAŁ 2. Komponenty Reacta i składnia JSX

Wprowadzenie
Czym są komponenty?
Po co stosować komponenty?
Budowa komponentu
Czym dokładnie są funkcje tworzące komponenty?
Co React robi z tymi wszystkimi komponentami?
Wbudowane komponenty
Konwencje nazewnicze
JSX, HTML i czysty JavaScript
Używanie Reacta bez składni JSX
Elementy JSX są traktowane jak zwykłe wartości z JavaScriptu
Elementy JSX muszą być samozamykające
Zwracanie dynamicznych treści
Kiedy należy dzielić komponenty?
Podsumowanie i najważniejsze informacje do zapamiętania
Co dalej?
Sprawdź swoją wiedzę!
Zastosuj zdobytą wiedzę
Ćwiczenie 2.1. Utwórz aplikację Reacta z własną prezentacją
Ćwiczenie 2.2. Tworzenie aplikacji Reacta do zapisywania celów związanych z tą książką

ROZDZIAŁ 3. Komponenty i propy

Wprowadzenie
To jeszcze nie koniec
Używanie propów w komponentach
Przekazywanie propów do komponentów
Używanie propów w komponencie
Komponenty, propy i możliwość wielokrotnego użytku
Specjalny prop children
W których komponentach potrzebne są propy?
Jak zarządzać wieloma propami?
Stosowanie operatora rozwijania do propów
Łańcuchy propów
Podsumowanie i najważniejsze informacje do zapamiętania
Co dalej?
Sprawdź swoją wiedzę!
Zastosuj zdobytą wiedzę
Ćwiczenie 3.1. Tworzenie aplikacji wyświetlającej Twoje cele związane z tą książką

ROZDZIAŁ 4. Praca ze zdarzeniami i stanem

Wprowadzenie
Na czym polega problem?
Jak nie rozwiązywać tego problemu
Lepsze, ale wciąż niepoprawne rozwiązanie
Poprawne reagowanie na zdarzenia
Poprawne aktualizowanie stanu
Więcej o haczyku useState()
Spojrzenie na wewnętrzne mechanizmy Reacta
Konwencje nazewnicze
Dozwolone typy wartości stanu
Praca z wieloma wartościami stanu
Używanie wielu wycinków stanu
Zarządzanie połączonymi obiektami stanu
Poprawne aktualizowanie stanu na podstawie jego wcześniejszej wartości
Wiązanie dwukierunkowe
Generowanie wartości na podstawie stanu
Praca z formularzami i przesyłanie formularzy
Przenoszenie stanu wyżej
Podsumowanie i najważniejsze informacje do zapamiętania
Co dalej?
Sprawdź swoją wiedzę!
Zastosuj zdobytą wiedzę
Ćwiczenie 4.1. Tworzenie prostego kalkulatora
Ćwiczenie 4.2. Rozbudowywanie kalkulatora

ROZDZIAŁ 5. Wyświetlanie list i warunkowe wyświetlanie treści

Wprowadzenie
Czym są warunkowo wyświetlane treści i dane z list?
Warunkowe wyświetlanie treści
Różne sposoby warunkowego wyświetlania treści
Warunkowe ustawianie znaczników elementów
Wyświetlanie danych z list
Przekształcanie danych z list za pomocą metody map()
Aktualizowanie list
Problem z elementami list
Ratunek ze strony kluczy
Podsumowanie i najważniejsze informacje do zapamiętania
Co dalej?
Sprawdź swoją wiedzę!
Zastosuj zdobytą wiedzę
Ćwiczenie 5.1. Warunkowe wyświetlanie komunikatu o błędzie
Ćwiczenie 5.2. Wyświetlanie listy produktów

ROZDZIAŁ 6. Dodawanie stylów do aplikacji Reacta

Wprowadzenie
Jak działają style w aplikacjach Reacta?
Używanie stylów wewnątrzwierszowych
Ustawianie stylów za pomocą klas CSS
Dynamiczne ustawianie stylów
Warunkowe dodawanie stylów
Łączenie kilku klas CSS w dynamiczny sposób
Scalanie obiektów zawierających style wewnątrzwierszowe
Tworzenie komponentów umożliwiających modyfikowanie stylów
Problem ze stylami bez ograniczenia zasięgu
Ograniczanie zasięgu stylów za pomocą modułów CSS
Biblioteka styled-components
Używanie innych bibliotek i platform stylów CSS lub JavaScriptu
Podsumowanie i kluczowe informacje do zapamiętania
Co dalej?
Sprawdź swoją wiedzę!
Zastosuj zdobytą wiedzę
Ćwiczenie 6.1. Wyświetlanie informacji o poprawności danych wejściowych po przesłaniu formularza
Ćwiczenie 6.2. Używanie modułów CSS do ograniczania zasięgu stylów

ROZDZIAŁ 7. Portale i referencje

Wprowadzenie
Świat bez referencji
Referencje a stan
Używanie referencji w celach innych niż dostęp do modelu DOM
Przekazywanie referencji
Komponenty kontrolowane i niekontrolowane
Gdzie elementy z Reacta trafiają w modelu DOM
Ratunek ze strony portali
Podsumowanie i najważniejsze informacje do zapamiętania
Co dalej?
Sprawdź swoją wiedzę!
Zastosuj zdobytą wiedzę
Ćwiczenie 7.1. Pobieranie wartości wejściowych od użytkownika
Ćwiczenie 7.2. Dodawanie menu bocznego

ROZDZIAŁ 8. Zarządzanie efektami ubocznymi

Wprowadzenie
Czego dotyczy problem?
Efekty uboczne
Efekty uboczne dotyczą nie tylko żądań HTTP
Zarządzanie efektami ubocznymi za pomocą haczyka useEffect()
Jak używać haczyka useEffect()?
Efekty uboczne i zależności
Zbędne zależności
Porządkowanie stanu po wystąpieniu efektów ubocznych
Zarządzanie wieloma funkcjami powodującymi efekty uboczne
Zależności w postaci funkcji
Unikanie niepotrzebnego wykonywania funkcji powodującej efekty uboczne
Efekty uboczne i kod asynchroniczny
Reguły związane z haczykami
Podsumowanie i najważniejsze informacje do zapamiętania
Co dalej?
Sprawdź swoją wiedzę!
Zastosuj zdobytą wiedzę
Ćwiczenie 8.1. Tworzenie prostego bloga

ROZDZIAŁ 9. Na zapleczu Reacta i możliwości optymalizacji

Wprowadzenie
Jeszcze o przetwarzaniu i aktualizowaniu komponentów
Co się dzieje w momencie wywołania funkcji tworzącej komponent?
Wirtualna wersja modelu DOM a rzeczywisty model DOM
Grupowanie zmian stanu
Unikanie niepotrzebnego wykonywania komponentów podrzędnych
Unikanie kosztownych obliczeń
Haczyk useCallback()
Unikanie niepotrzebnego pobierania kodu
Zmniejszanie wielkości pakietów dzięki podziałowi kodu (i leniwemu wczytywaniu)
Tryb strict
Debugowanie kodu i narzędzia dla deweloperów Reacta
Podsumowanie i najważniejsze informacje do zapamiętania
Co dalej?
Sprawdź swoją wiedzę!
Zastosuj zdobytą wiedzę
Ćwiczenie 9.1. Optymalizowanie istniejącej aplikacji

ROZDZIAŁ 10. Praca ze złożonym stanem

Wprowadzenie
Problem ze stanem używanym dla kilku komponentów
Korzystanie z kontekstu do zarządzania stanem używanym przez wiele komponentów
Udostępnianie wartości kontekstu i zarządzanie nimi
Używanie kontekstu w komponentach zagnieżdżonych
Zmiana kontekstu z poziomu komponentów zagnieżdżonych
Lepsze automatyczne uzupełnianie kodu
Kontekst czy przenoszenie stanu wyżej?
Przenoszenie logiki zarządzania kontekstem do odrębnych komponentów
Łączenie wielu kontekstów
Ograniczenia funkcji useState()
Zarządzanie stanem za pomocą haczyka useReducer()
Funkcje redukujące
Zgłaszanie operacji
Podsumowanie i najważniejsze informacje do zapamiętania
Co dalej?
Sprawdź swoją wiedzę!
Zastosuj zdobytą wiedzę
Ćwiczenie 10.1. Modyfikowanie aplikacji,
Ćwiczenie 10.2. Zastępowanie haczyka useState()

ROZDZIAŁ 11. Tworzenie niestandardowych haczyków Reacta

Wprowadzenie
Po co tworzyć niestandardowe haczyki?
Czym są niestandardowe haczyki?
Pierwszy niestandardowy haczyk
Niestandardowe haczyki dają dużo swobody
Parametry w niestandardowych haczykach
Wartości zwracane przez niestandardowe haczyki
Bardziej złożony przykład
Podsumowanie i najważniejsze informacje do zapamiętania
Co dalej?
Sprawdź swoją wiedzę!
Zastosuj zdobytą wiedzę
Ćwiczenie 11.1. Utwórz niestandardowy haczyk dla danych wejściowych z klawiatury

ROZDZIAŁ 12. Aplikacje wielostronicowe oparte na bibliotece React Router

Wprowadzenie
Jedna strona to za mało
Rozpoczynanie pracy z pakietem React Router i definiowanie tras
Dodawanie nawigacji do strony
Od komponentu Link do komponentu NavLink
Komponenty Route a „zwykłe” komponenty
Od tras statycznych do dynamicznych
Pobieranie parametrów trasy
Tworzenie dynamicznych odsyłaczy
Programowe nawigowanie po witrynie
Przekierowania
Trasy zagnieżdżone
Obsługa niezdefiniowanych tras
Leniwe wczytywanie
Podsumowanie i najważniejsze informacje do zapamiętania
Co dalej?
Sprawdź swoją wiedzę!
Zastosuj zdobytą wiedzę
Ćwiczenie 12.1. Tworzenie prostej trzystronicowej witryny
Ćwiczenie 12.2. Wzbogacanie podstawowej witryny

ROZDZIAŁ 13. Zarządzanie danymi za pomocą biblioteki React Router

Wprowadzenie
Pobieranie danych i routing są ze sobą ściśle powiązane
Wysyłanie żądań HTTP bez biblioteki React Router
Wczytywanie danych z użyciem biblioteki React Router
Włączanie dodatkowych mechanizmów biblioteki React Router
Wczytywanie danych na potrzeby tras dynamicznych
Funkcje wczytujące dane, żądania i kod po stronie klienta
Jeszcze o układach stron
Ponowne używanie danych w trasach
Obsługa błędów
A teraz o przesyłaniu danych
Używanie funkcji action() i metody formData()
Zwracanie danych zamiast przekierowywania użytkownika
Kontrolowanie, które operacje mają być uruchamiane przez poszczególne elementy <Form>
Wyświetlanie obecnego stanu nawigacji
Programowe przesyłanie formularzy
Pobieranie i przesyłanie danych od kuchni
Odraczanie wczytywania danych
Podsumowanie i najważniejsze informacje do zapamiętania
Co dalej?
Sprawdź swoją wiedzę!
Zastosuj zdobytą wiedzę
Ćwiczenie 13.1. Aplikacja z listą zadań do wykonania

ROZDZIAŁ 14. Dalsze kroki i dodatkowe materiały

Wprowadzenie
Co teraz?
Ciekawe problemy do zbadania
Często używane i popularne biblioteki Reacta
Inne materiały
React umożliwia tworzenie nie tylko aplikacji internetowych
Zakończenie

Dodatek

Rozdział 2. Komponenty Reacta i składnia JSX
Ćwiczenie 2.1. Tworzenie aplikacji Reacta do zapisywania celów związanych z tą książką
Ćwiczenie 2.2. Tworzenie aplikacji Reacta do zapisywania celów związanych z tą książką
Rozdział 3. Komponenty i propy
Ćwiczenie 3.1. Tworzenie aplikacji wyświetlającej Twoje cele związane z tą książką
Rozdział 4. Praca ze zdarzeniami i stanem
Ćwiczenie 4.1. Tworzenie prostego kalkulatora
Ćwiczenie 4.2. Rozbudowywanie kalkulatora
Rozdział 5. Wyświetlanie list i warunkowe wyświetlanie treści
Ćwiczenie 5.1. Warunkowe wyświetlanie komunikatu o błędzie
Ćwiczenie 5.2. Wyświetlanie listy produktów
Rozdział 6. Dodawanie stylów do aplikacji Reacta
Ćwiczenie 6.1. Wyświetlanie informacji o poprawności danych wejściowych po przesłaniu formularza
Ćwiczenie 6.2. Używanie modułów CSS do ograniczania zasięgu stylów
Rozdział 7. Portale i referencje
Ćwiczenie 7.1. Pobieranie wartości wejściowych od użytkownika
Ćwiczenie 7.2. Dodawanie menu bocznego
Rozdział 8. Zarządzanie efektami ubocznymi
Ćwiczenie 8.1. Tworzenie prostego bloga
Rozdział 9. Na zapleczu Reacta i możliwości optymalizacji
Ćwiczenie 9.1. Optymalizowanie istniejącej aplikacji
Rozdział 10. Praca ze złożonym stanem
Ćwiczenie 10.1. Modyfikowanie aplikacji, aby używała API kontekstu
Ćwiczenie 10.2. Zastępowanie haczyka useState() haczykiem useReducer()
Rozdział 11. Tworzenie niestandardowych haczyków Reacta
Ćwiczenie 11.1. Utwórz niestandardowy haczyk dla danych wejściowych z klawiatury
Rozdział 12. Aplikacje wielostronicowe oparte na bibliotece React Router
Ćwiczenie 12.1. Tworzenie prostej trzystronicowej witryny
Ćwiczenie 12.2. Wzbogacanie podstawowej witryny
Rozdział 13. Zarządzanie danymi za pomocą biblioteki React Router
Ćwiczenie 13.1. Aplikacja z listą zadań do wykonania

Odpowiedzi

Rozdział 1.
Rozdział 2.
Rozdział 3.
Rozdział 4.
Rozdział 5.
Rozdział 6.
Rozdział 7.
Rozdział 8.
Rozdział 9.
Rozdział 10.
Rozdział 11.
Rozdział 12.
Rozdział 13.