React w działaniu

React w działaniu

by Stoyan Stefanov
Released April 2017
Publisher(s): Helion
ISBN: 9781098125332

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

Do niedawna utworzenie interfejsu użytkownika było prawdziwym wyzwaniem. Interfejs musi przecież działać w przewidywalny sposób na różnych przeglądarkach i urządzeniach, musi zapewniać adekwatną obsługę wprowadzanych danych oraz umożliwiać płynne i niezawodne komunikowanie się aplikacji z użytkownikiem. Na szczęście dziś programiści mogą skupić się na działaniu aplikacji jako takiej — interfejs użytkownika można szybko, łatwo i przyjemnie zbudować za pomocą React, specjalnej biblioteki służącej do tego celu.

Niniejsza książka jest przydatnym przewodnikiem po bibliotece React i jej zastosowaniach w tworzeniu aplikacji internetowych. Z publikacji tej dowiesz się, jak można jednorazowo zdefiniować interfejs, który będzie automatycznie się przebudowywał w reakcji na zmianę stanu aplikacji. Nauczysz się tworzyć rozbudowane aplikacje z wykorzystaniem małych, łatwych w zarządzaniu komponentów. Zapoznasz się również z JSX — technologią świetnie uzupełniającą React. Nauczysz się też korzystać z dodatkowych narzędzi pomocniczych, takich jak Browserify, Jest, ESLint, Flow, Flux czy Immutable.js. Dzięki temu znakomicie wzbogacisz swój warsztat programisty aplikacji WWW!

Niektóre zagadnienia omówione w książce:
przygotowywanie biblioteki React do pracy
komponenty, ich właściwości, stan i cykl życia
wykorzystywanie komponentów do budowy UI
korzystanie z narzędzi pomocniczych przy budowie aplikacji
diagnostyka i testowanie kodu aplikacji
React — programowanie może być przyjemne!

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.DOM.*
    5. Specjalne atrybuty DOM
    6. Rozszerzenia przeglądarki React DevTools
    7. Co dalej: niestandardowe komponenty
  3. Rozdział 2. Życie komponentu
    1. Absolutne minimum
    2. Właściwości
    3. propTypes
      1. Domyślne wartości właściwości
    4. Stan
    5. Komponent obszaru tekstowego ze stanem
    6. Uwaga na temat zdarzeń DOM
      1. Obsługa zdarzeń w dawnych czasach
      2. Obsługa zdarzeń w bibliotece React
    7. Props kontra state
    8. Props w stanie początkowym: antywzorzec
    9. Dostęp do komponentu z zewnątrz
    10. Zmiana właściwości w locie
    11. Metody cyklu życia
    12. Przykład cyklu życia: zaloguj wszystko
    13. Przykład cyklu życia: użycie domieszki
    14. Przykład cyklu życia: użycie komponentu potomnego
    15. Zysk wydajnościowy: zapobieganie aktualizacjom komponentów
    16. PureRenderMixin
  4. Rozdział 3. Excel — komponent eleganckiej tabeli
    1. Przede wszystkim dane
    2. Pętla nagłówków tabeli
    3. Debugowanie ostrzeżeń konsoli
    4. Dodawanie zawartości <td>
      1. Jak ulepszyć komponent?
    5. Sortowanie
      1. Jak ulepszyć komponent?
    6. Oznaczenia sortowania w interfejsie użytkownika
    7. Edycja danych
      1. Komórka edytowalna
      2. Komórka z polem tekstowym
      3. Zapisywanie
      4. Konkluzje i różnice w wirtualnym drzewie DOM
    8. Wyszukiwanie
      1. Stan i interfejs użytkownika
      2. Filtrowanie zawartości
      3. Jak ulepszyć wyszukiwanie?
    9. Natychmiastowa odpowiedź
      1. Jak ulepszyć ponowne odtwarzanie?
      2. Alternatywna implementacja?
    10. Pobieranie danych tablicy
  5. Rozdział 4. JSX
    1. Witaj, JSX
    2. Transpilacja kodu JSX
    3. Babel
    4. Po stronie klienta
    5. Przekształcenia JSX
    6. JavaScript w JSX
    7. Białe znaki w JSX
    8. Komentarze w JSX
    9. Encje HTML
      1. Zapobieganie XSS
    10. Atrybuty rozszczepiania
      1. Atrybuty rozszczepiania przekazywane przez obiekt nadrzędny do potomka
      2. Zwracanie wielu węzłów w JSX
    11. 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
    12. JSX i formularze
      1. Obsługa zdarzenia onChange
      2. value a defaultValue
      3. Parametr value elementu <textarea>
      4. Wartość elementu <select>
    13. Komponent Excel w JSX
  6. Rozdział 5. Konfiguracja na potrzeby rozwoju aplikacji
    1. Aplikacja wzorcowa
      1. Pliki i foldery
      2. index.html
      3. CSS
      4. JavaScript
      5. Zmodernizowany JavaScript
        1. Moduły
        2. Moduły ECMAScriptu
          1. Klasy
          2. Wszystko razem
    2. Instalowanie wymagań wstępnych
      1. Node.js
      2. Browserify
      3. Babel
      4. React itd.
    3. Zabierzmy się do budowania
      1. Transpilacja JavaScriptu
      2. Pakowanie JavaScriptu
      3. Pakowanie CSS
      4. Efekty!
      5. Wersja dla systemu Windows
      6. Budowanie podczas rozwijania aplikacji
    4. Wdrożenie
    5. Dalsze kroki
  7. Rozdział 6. Budowanie aplikacji
    1. Whinepad v.0.0.1
      1. Konfiguracja
      2. Zacznij pisać kod
    2. Komponenty
      1. Konfiguracja
      2. Wykrywanie
      3. Komponent <Button>
      4. Button.css
      5. Button.js
        1. Pakiet classnames
        2. Przypisanie destrukturyzacyjne
        3. Bezstanowy komponent funkcyjny
        4. propTypes
      6. Formularze
      7. <Suggest>
        1. ref
      8. Komponent <Rating>
      9. „Fabryka” <FormInput>
      10. <Form>
      11. <Actions>
      12. Okna dialogowe
    3. Konfiguracja aplikacji
    4. Nowy i ulepszony <Excel>
    5. <Whinepad>
    6. Czynności końcowe
  8. Rozdział 7. Lint, przepływ, testowanie, powtarzanie
    1. package.json
      1. Konfiguracja narzędzia Babel
      2. scripts
    2. ESLint
      1. Konfiguracja
      2. Uruchamianie
      3. Wszystkie reguły
    3. Flow
      1. Konfiguracja
      2. Uruchamianie
      3. Subskrypcja pod kątem weryfikacji typów
      4. Poprawki w komponencie <Button>
      5. app.js
      6. Więcej właściwości i stanów związanych z weryfikacją typów
      7. Typy eksportu i importu
      8. Rzutowanie typów
      9. Niezmienniki
    4. Testowanie
      1. Konfiguracja
      2. Pierwszy test
      3. Pierwszy test Reacta
      4. Testowanie komponentu <Button>
        1. Pierwsza specyfikacja
        2. Druga specyfikacja
      5. Testowanie komponentu <Actions>
        1. Opakowywanie komponentów
        2. Atrapy funkcji
        3. Funkcje find i scry
      6. Więcej symulowanych interakcji
      7. Testowanie kompletnych interakcji
      8. Pokrycie
  9. Rozdział 8. Flux
    1. Wielka idea
    2. Kolejne spojrzenie na Whinepad
    3. Magazyn, czyli komponent Store
      1. Zdarzenia magazynu
      2. Użycie magazynu w <Whinepad>
      3. Użycie magazynu w komponencie <Excel>
      4. Użycie magazynu w komponencie <Form>
      5. Nakreślanie granicy
    4. Akcje
      1. Akcje CRUD
      2. Wyszukiwanie i sortowanie
      3. Użycie akcji w module <Whinepad>
      4. Użycie akcji w module <Excel>
    5. Podsumowanie architektury Flux
    6. Niezmienność
      1. Niezmienny magazyn danych
      2. Manipulowanie danymi niezmiennymi
    7. O autorze
    8. Kolofon

Product information

  • Title: React w działaniu
  • Author(s): Stoyan Stefanov
  • Release date: April 2017
  • Publisher(s): Helion
  • ISBN: 9781098125332