REACT W DZIAŁANIU TWORZENIE APLIKACJI INTERNETOWYCH

SPIS TREŚCI

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