React w działaniu. Tworzenie aplikacji internetowych. Wydanie 2 - ebook

React jest biblioteką służącą do tworzenia interfejsów użytkownika. Ułatwia pisanie aplikacji internetowych, natywnych aplikacji dla iOS i Androida, oprogramowania dla telewizorów czy też natywnych aplikacji dla komputerów stacjonarnych. Dzięki tej bibliotece można szybko zbudować interfejs, który automatycznie będzie reagował na zmiany stanu aplikacji. Idea polega na użyciu małych, zarządzalnych komponentów do budowy nawet dużych i bardzo złożonych aplikacji. Aby zacząć pracę z Reactem, wystarczy znajomość składni JavaScriptu - i lektura tej książki.

Z tym przewodnikiem nauczysz się stosowania Reacta w praktyce. Dowiesz się, w jaki sposób zbudować jednostronicową, złożoną aplikację internetową, i zdobędziesz wiedzę umożliwiającą używanie tej biblioteki w codziennej pracy. Pokazano tu, jak rozpocząć projekt i rozwijać rzeczywistą aplikację. Zaprezentowano także technologie, które znakomicie uzupełniają możliwości Reacta: JSX i narzędzie create-react-app. Omówiono również zagadnienia dotyczące komponentów funkcyjnych i klasowych i szczegółowo przedstawiono proces budowy aplikacji z tych komponentów. Szybko się przekonasz, jak duży potencjał tkwi w bibliotece React i jak bardzo ułatwia ona tworzenie łatwych w utrzymaniu, wielkoskalowych, atrakcyjnych aplikacji!

W książce między innymi:

• przygotowanie Reacta do pracy
• tworzenie komponentów Reacta i łączenie ich z komponentami DOM
• składnia JSX i hooki
• przepływ danych w aplikacji
• tworzenie aplikacji zapisujących dane po stronie klienta

React: naucz się raz, używaj zawsze!

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