Wstęp

Rozdział 1. Witaj, świecie

• Konfiguracja
• Witaj, świecie React
• Co tu się wydarzyło?
• React.createElement()
• JSX
  • Konfiguracja biblioteki Babel
  • Witaj, świecie JSX
  • O transpilacji
• Co dalej: niestandardowe komponenty

Rozdział 2. Życie komponentu

• Niestandardowy komponent funkcyjny
  • Wersja JSX
• Niestandardowy komponent klasowy
  • Którą składnię wybrać?
• Właściwości
  • Właściwości w komponentach funkcyjnych
  • Domyślne właściwości
• Stan
• Komponent obszaru tekstowego
• Komponent ze stanem
• Uwaga na temat zdarzeń DOM
  • Obsługa zdarzeń w dawnych czasach
  • Obsługa zdarzeń w bibliotece React
  • Składnia obsługi zdarzeń
• Props kontra state
• Props w stanie początkowym: antywzorzec
• Dostęp do komponentu z zewnątrz
• Metody cyklu życia
• Przykład cyklu życia: zaloguj wszystko
  • Paranoiczna ochrona stanu
• Przykład cyklu życia: użycie komponentu potomnego
• Zysk wydajnościowy: zapobieganie aktualizacjom komponentów
• Co się stało z komponentami funkcyjnymi?

Rozdział 3. Excel - komponent eleganckiej tabeli

• Przede wszystkim dane
• Pętla nagłówków tabeli
• Krótka wersja pętli nagłówków tabeli
• Debugowanie ostrzeżeń konsoli
• Dodawanie zawartości <td>
  • propTypes
  • Jak ulepszyć komponent?
• Sortowanie
  • Jak ulepszyć komponent?
• Oznaczenia sortowania w interfejsie użytkownika
• Edycja danych
  • Komórka edytowalna
  • Komórka z polem tekstowym
  • Zapisywanie
  • Konkluzje i różnice w wirtualnym drzewie DOM
• Wyszukiwanie
  • Stan i interfejs użytkownika
  • Filtrowanie zawartości
  • Aktualizowanie metody save()
  • Jak ulepszyć wyszukiwanie?
• Natychmiastowa odpowiedź
  • Czyszczenie metod obsługi zdarzeń
  • Sprzątanie
  • Jak ulepszyć ponowne odtwarzanie?
  • Alternatywna implementacja?
• Pobieranie danych tablicy
• Pobieranie danych

Rozdział 4. Funkcyjny komponent Excel

• Krótkie przypomnienie: komponenty funkcyjne kontra komponenty klasowe
• Renderowanie danych
• Hook stanu
• Sortowanie tabeli
• Edycja danych
• Wyszukiwanie
• Cykl życia w świecie hooków
  • Problemy związane z metodami cyklu życia
  • useEffect()
  • Sprzątanie skutków ubocznych
  • Bezproblemowe cykle życia
  • useLayoutEffect()
• Niestandardowy hook
• Finalizowanie odtwarzania
• useReducer
  • Funkcje typu reducer
  • Akcje
  • Przykładowy reducer
  • Testy jednostkowe funkcji typu reducer
• Komponent Excel z użyciem funkcji typu reducer
• Kilka narzędzi

Rozdział 5. JSX

• Białe znaki w JSX
• Komentarze w JSX
• Encje HTML
  • Zapobieganie XSS
• Atrybuty rozszczepiania
  • Atrybuty rozszczepiania przekazywane przez obiekt nadrzędny do potomka
• Zwracanie wielu węzłów w JSX
  • Wrapper
  • Fragment
  • Tablica
• Różnice między JSX a HTML
  • Brak słów class i for
  • style jest obiektem
  • Znaczniki zamykające
  • Atrybuty w notacji camelCase
• Komponenty z przestrzeniami nazw
• JSX i formularze
  • Obsługa zdarzenia onChange
  • value a defaultValue
  • Parametr value elementu <textarea>
  • Wartość elementu <select>
  • Komponenty kontrolowane i niekontrolowane

Rozdział 6. Konfiguracja na potrzeby rozwoju aplikacji

• Create React App
  • Node.js
  • Witaj, CRA
  • Budowanie i wdrażanie
  • Pojawiły się pomyłki
• package.json i node_modules
• Przeglądamy kod
  • Indeksy
  • Zmodernizowany JavaScript
  • CSS
• Dalsze kroki

Rozdział 7. Budowanie komponentów aplikacji

• Konfiguracja
• Zacznij pisać kod
• Refaktoryzacja komponentu Excel
• Wersja 0.0.1 nowej aplikacji
• CSS
• Magazyn lokalny
• Komponenty
  • Wykrywanie
• Logo i ciało
  • Logo
  • Body
  • Wykrywalność
• Komponent <Button>
  • Button.js
  • Pakiet classnames
• Formularze
  • <Suggest>
  • Komponent <Rating>
  • "Fabryka" <FormInput>
  • <Form>
• <Actions>
• Okna dialogowe
• Nagłówek
• Konfiguracja aplikacji
• Nowy i ulepszony <Excel>
  • Ogólna struktura
  • Renderowanie
  • React.Strict i funkcje typu reducer
  • Funkcje pomocnicze komponentu Excel

Rozdział 8. Gotowa aplikacja

• Uaktualniony plik App.js
• Komponent DataFlow
  • Ciało funkcji DataFlow
• Zadanie gotowe
  • Whinepad v2
• Kontekst
• Następne kroki
  • Dane cykliczne
• Dostarczanie kontekstu
• Konsumowanie kontekstu
  • Kontekst w komponencie Header
  • Kontekst w tabeli danych
• Aktualizacja komponentu Discovery
• Routing
  • Kontekst trasy
  • Korzystanie z adresu URL Filter
  • Konsumowanie kontekstu trasy w komponencie Header
  • Konsumowanie kontekstu trasy w tabeli danych
  • useCallback()
• Koniec

• Titel: React w działaniu. Tworzenie aplikacji internetowych. Wydanie II
• Autor: Stoyan Stefanov
• Originaler Titel: React: Up & Running: Building Web Applications, 2nd Edition
• Übersetzung: Joanna Zatorska
• ISBN: 978-83-8322-040-6, 9788383220406
• Veröffentlichungsdatum: 2023-02-14
• Format: E-book
• Artikelkennung: reacw2
• Verleger: Helion