React w działaniu

React w działaniu

by Stoyan Stefanov
Released February 2023
Publisher(s): Helion
ISBN: 9788383220406

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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!

Table of contents

  1. Wstęp
    1. O tej książce
    2. Konwencje stosowane w tej książce
    3. Korzystanie z przykładowego kodu
    4. Podziękowania
  2. Rozdział 1. Witaj, świecie
    1. Konfiguracja
    2. Witaj, świecie React
    3. Co tu się wydarzyło?
    4. React.createElement()
    5. JSX
      1. Konfiguracja biblioteki Babel
      2. Witaj, świecie JSX
      3. O transpilacji
    6. Co dalej: niestandardowe komponenty
  3. Rozdział 2. Życie komponentu
    1. Niestandardowy komponent funkcyjny
      1. Wersja JSX
    2. Niestandardowy komponent klasowy
      1. Którą składnię wybrać?
    3. Właściwości
      1. Właściwości w komponentach funkcyjnych
      2. Domyślne właściwości
    4. Stan
    5. Komponent obszaru tekstowego
    6. Komponent ze stanem
    7. Uwaga na temat zdarzeń DOM
      1. Obsługa zdarzeń w dawnych czasach
      2. Obsługa zdarzeń w bibliotece React
      3. Składnia obsługi zdarzeń
    8. Props kontra state
    9. Props w stanie początkowym: antywzorzec
    10. Dostęp do komponentu z zewnątrz
    11. Metody cyklu życia
    12. Przykład cyklu życia: zaloguj wszystko
      1. Paranoiczna ochrona stanu
    13. Przykład cyklu życia: użycie komponentu potomnego
    14. Zysk wydajnościowy: zapobieganie aktualizacjom komponentów
    15. Co się stało z komponentami funkcyjnymi?
  4. Rozdział 3. Excel — komponent eleganckiej tabeli
    1. Przede wszystkim dane
    2. Pętla nagłówków tabeli
    3. Krótka wersja pętli nagłówków tabeli
    4. Debugowanie ostrzeżeń konsoli
    5. Dodawanie zawartości <td>
      1. propTypes
      2. Jak ulepszyć komponent?
    6. Sortowanie
      1. Jak ulepszyć komponent?
    7. Oznaczenia sortowania w interfejsie użytkownika
    8. Edycja danych
      1. Komórka edytowalna
      2. Komórka z polem tekstowym
      3. Zapisywanie
      4. Konkluzje i różnice w wirtualnym drzewie DOM
    9. Wyszukiwanie
      1. Stan i interfejs użytkownika
      2. Filtrowanie zawartości
      3. Aktualizowanie metody save()
      4. Jak ulepszyć wyszukiwanie?
    10. Natychmiastowa odpowiedź
      1. Czyszczenie metod obsługi zdarzeń
      2. Sprzątanie
      3. Jak ulepszyć ponowne odtwarzanie?
      4. Alternatywna implementacja?
    11. Pobieranie danych tablicy
    12. Pobieranie danych
  5. Rozdział 4. Funkcyjny komponent Excel
    1. Krótkie przypomnienie: komponenty funkcyjne kontra komponenty klasowe
    2. Renderowanie danych
    3. Hook stanu
    4. Sortowanie tabeli
    5. Edycja danych
    6. Wyszukiwanie
    7. Cykl życia w świecie hooków
      1. Problemy związane z metodami cyklu życia
      2. useEffect()
      3. Sprzątanie skutków ubocznych
      4. Bezproblemowe cykle życia
      5. useLayoutEffect()
    8. Niestandardowy hook
    9. Finalizowanie odtwarzania
    10. useReducer
      1. Funkcje typu reducer
      2. Akcje
      3. Przykładowy reducer
      4. Testy jednostkowe funkcji typu reducer
    11. Komponent Excel z użyciem funkcji typu reducer
  6. Rozdział 5. JSX
    1. Kilka narzędzi
    2. Białe znaki w JSX
    3. Komentarze w JSX
    4. Encje HTML
      1. Zapobieganie XSS
    5. Atrybuty rozszczepiania
      1. Atrybuty rozszczepiania przekazywane przez obiekt nadrzędny do potomka
    6. Zwracanie wielu węzłów w JSX
      1. Wrapper
      2. Fragment
      3. Tablica
    7. Różnice między JSX a HTML
      1. Brak słów class i for
      2. style jest obiektem
      3. Znaczniki zamykające
      4. Atrybuty w notacji camelCase
    8. Komponenty z przestrzeniami nazw
    9. JSX i formularze
      1. Obsługa zdarzenia onChange
      2. value a defaultValue
      3. Parametr value elementu <textarea>
      4. Wartość elementu <select>
      5. Komponenty kontrolowane i niekontrolowane
        1. Przykład komponentu niekontrolowanego
        2. Przykład komponentu niekontrolowanego z funkcją obsługi zdarzenia onSubmit
        3. Przykład kontrolowany
  7. Rozdział 6. Konfiguracja na potrzeby rozwoju aplikacji
    1. Create React App
      1. Node.js
      2. Witaj, CRA
      3. Budowanie i wdrażanie
      4. Pojawiły się pomyłki
    2. package.json i node_modules
    3. Przeglądamy kod
      1. Indeksy
      2. Zmodernizowany JavaScript
      3. CSS
    4. Dalsze kroki
  8. Rozdział 7. Budowanie komponentów aplikacji
    1. Konfiguracja
    2. Zacznij pisać kod
    3. Refaktoryzacja komponentu Excel
    4. Wersja 0.0.1 nowej aplikacji
    5. CSS
    6. Magazyn lokalny
    7. Komponenty
      1. Wykrywanie
    8. Logo i ciało
      1. Logo
      2. Body
      3. Wykrywalność
    9. Komponent <Button>
      1. Button.js
      2. Pakiet classnames
    10. Formularze
      1. <Suggest>
      2. Komponent <Rating>
      3. „Fabryka” <FormInput>
      4. <Form>
        1. Typy: shape, objectOf, arrayOf
        2. Atrybuty ref
        3. Finalizacja komponentu <Form>
    11. <Actions>
    12. Okna dialogowe
    13. Nagłówek
    14. Konfiguracja aplikacji
    15. Nowy i ulepszony <Excel>
      1. Ogólna struktura
      2. Renderowanie
        1. Renderowanie nagłówka tabeli
        2. Renderowanie ciała tabeli
        3. Poprawki i filtrowanie treści
      3. React.Strict i funkcje typu reducer
      4. Funkcje pomocnicze komponentu Excel
        1. sort()
        2. showEditor()
        3. save()
        4. handleAction()
        5. reducer()
  9. Rozdział 8. Gotowa aplikacja
    1. Uaktualniony plik App.js
    2. Komponent DataFlow
      1. Ciało funkcji DataFlow
    3. Zadanie gotowe
      1. Whinepad v2
    4. Kontekst
    5. Następne kroki
      1. Dane cykliczne
    6. Dostarczanie kontekstu
    7. Konsumowanie kontekstu
      1. Kontekst w komponencie Header
      2. Kontekst w tabeli danych
    8. Aktualizacja komponentu Discovery
    9. Routing
      1. Kontekst trasy
      2. Korzystanie z adresu URL Filter
      3. Konsumowanie kontekstu trasy w komponencie Header
      4. Konsumowanie kontekstu trasy w tabeli danych
      5. useCallback()
    10. Koniec
    11. O autorze
    12. Kolofon

Product information

  • Title: React w działaniu
  • Author(s): Stoyan Stefanov
  • Release date: February 2023
  • Publisher(s): Helion
  • ISBN: 9788383220406