E-book details

React w działaniu. Tworzenie aplikacji internetowych

React w działaniu. Tworzenie aplikacji internetowych

Stoyan Stefanov

Ebook
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!


Stoyan Stefanov jest inżynierem w Facebooku. Wcześniej pracował dla Yahoo!, gdzie stworzył smush.it — narzędzie online służące do optymalizacji obrazów. Brał też udział w tworzeniu narzędzia o nazwie YSlow 2.0, przeznaczonego do pomiaru wydajności aplikacji. Jest autorem i współautorem wielu książek dotyczących programowania i tworzenia aplikacji internetowych. Prowadzi bloga dostępnego pod adresem http://phpied.com. Często zabiera głos na prestiżowych konferencjach, takich jak Velocity, JSConf, Fronteers i wielu innych.

Wstęp (11)

1. Witaj, świecie (17)

  • Konfiguracja (17)
  • Witaj, świecie React (18)
  • Co tu się wydarzyło? (20)
  • React.DOM.* (21)
  • Specjalne atrybuty DOM (25)
  • Rozszerzenia przeglądarki React DevTools (26)
  • Co dalej: niestandardowe komponenty (27)

2. Życie komponentu (29)

  • Absolutne minimum (29)
  • Właściwości (31)
  • propTypes (32)
    • Domyślne wartości właściwości (35)
  • Stan (36)
  • Komponent obszaru tekstowego ze stanem (37)
  • Uwaga na temat zdarzeń DOM (40)
    • Obsługa zdarzeń w dawnych czasach (40)
    • Obsługa zdarzeń w bibliotece React (43)
  • Props kontra state (44)
  • Props w stanie początkowym: antywzorzec (44)
  • Dostęp do komponentu z zewnątrz (45)
  • Zmiana właściwości w locie (47)
  • Metody cyklu życia (48)
  • Przykład cyklu życia: zaloguj wszystko (49)
  • Przykład cyklu życia: użycie domieszki (52)
  • Przykład cyklu życia: użycie komponentu potomnego (54)
  • Zysk wydajnościowy: zapobieganie aktualizacjom komponentów (56)
  • PureRenderMixin (59)

3. Excel - komponent eleganckiej tabeli (63)

  • Przede wszystkim dane (63)
  • Pętla nagłówków tabeli (64)
  • Debugowanie ostrzeżeń konsoli (66)
  • Dodawanie zawartości <td> (68)
    • Jak ulepszyć komponent? (70)
  • Sortowanie (71)
    • Jak ulepszyć komponent? (72)
  • Oznaczenia sortowania w interfejsie użytkownika (73)
  • Edycja danych (74)
    • Komórka edytowalna (75)
    • Komórka z polem tekstowym (77)
    • Zapisywanie (77)
    • Konkluzje i różnice w wirtualnym drzewie DOM (78)
  • Wyszukiwanie (80)
    • Stan i interfejs użytkownika (81)
    • Filtrowanie zawartości (84)
    • Jak ulepszyć wyszukiwanie? (86)
  • Natychmiastowa odpowiedź (86)
    • Jak ulepszyć ponowne odtwarzanie? (88)
    • Alternatywna implementacja? (88)
  • Pobieranie danych tablicy (88)

4. JSX (91)

  • Witaj, JSX (91)
  • Transpilacja kodu JSX (92)
  • Babel (93)
  • Po stronie klienta (94)
  • Przekształcenia JSX (95)
  • JavaScript w JSX (97)
  • Białe znaki w JSX (100)
  • Komentarze w JSX (101)
  • Encje HTML (102)
    • Zapobieganie XSS (103)
  • Atrybuty rozszczepiania (104)
    • Atrybuty rozszczepiania przekazywane przez obiekt nadrzędny do potomka (105)
    • Zwracanie wielu węzłów w JSX (106)
  • Różnice między JSX a HTML (108)
    • Brak słów class i for (108)
    • style jest obiektem (109)
    • Znaczniki zamykające (109)
    • Atrybuty w notacji camelCase (109)
  • JSX i formularze (110)
    • Obsługa zdarzenia onChange (110)
    • value a defaultValue (110)
    • Parametr value elementu <textarea> (111)
    • Wartość elementu <select> (113)
  • Komponent Excel w JSX (114)

5. Konfiguracja na potrzeby rozwoju aplikacji (115)

  • Aplikacja wzorcowa (116)
    • Pliki i foldery (116)
    • index.html (117)
    • CSS (118)
    • JavaScript (119)
    • Zmodernizowany JavaScript (119)
  • Instalowanie wymagań wstępnych (123)
    • Node.js (123)
    • Browserify (124)
    • Babel (124)
    • React itd. (125)
  • Zabierzmy się do budowania (125)
    • Transpilacja JavaScriptu (125)
    • Pakowanie JavaScriptu (126)
    • Pakowanie CSS (126)
    • Efekty! (126)
    • Wersja dla systemu Windows (127)
    • Budowanie podczas rozwijania aplikacji (127)
  • Wdrożenie (128)
  • Dalsze kroki (129)

6. Budowanie aplikacji (131)

  • Whinepad v.0.0.1 (132)
    • Konfiguracja (132)
    • Zacznij pisać kod (132)
  • Komponenty (134)
    • Konfiguracja (135)
    • Wykrywanie (135)
    • Komponent <Button> (137)
    • Button.css (138)
    • Button.js (139)
    • Formularze (142)
    • <Suggest> (143)
    • Komponent <Rating> (145)
    • "Fabryka" <FormInput> (149)
    • <Form> (152)
    • <Actions> (155)
    • Okna dialogowe (156)
  • Konfiguracja aplikacji (160)
  • Nowy i ulepszony <Excel> (161)
  • <Whinepad> (170)
  • Czynności końcowe (174)

7. Lint, przepływ, testowanie, powtarzanie (175)

  • package.json (175)
    • Konfiguracja narzędzia Babel (176)
    • scripts (176)
  • ESLint (177)
    • Konfiguracja (177)
    • Uruchamianie (178)
    • Wszystkie reguły (179)
  • Flow (180)
    • Konfiguracja (180)
    • Uruchamianie (180)
    • Subskrypcja pod kątem weryfikacji typów (181)
    • Poprawki w komponencie <Button> (182)
    • app.js (183)
    • Więcej właściwości i stanów związanych z weryfikacją typów (185)
    • Typy eksportu i importu (187)
    • Rzutowanie typów (188)
    • Niezmienniki (189)
  • Testowanie (190)
    • Konfiguracja (190)
    • Pierwszy test (192)
    • Pierwszy test Reacta (192)
    • Testowanie komponentu <Button> (194)
    • Testowanie komponentu <Actions> (198)
    • Więcej symulowanych interakcji (201)
    • Testowanie kompletnych interakcji (202)
    • Pokrycie (204)

8. Flux (207)

  • Wielka idea (208)
  • Kolejne spojrzenie na Whinepad (208)
  • Magazyn, czyli komponent Store (209)
    • Zdarzenia magazynu (212)
    • Użycie magazynu w <Whinepad> (214)
    • Użycie magazynu w komponencie <Excel> (216)
    • Użycie magazynu w komponencie <Form> (217)
    • Nakreślanie granicy (218)
  • Akcje (219)
    • Akcje CRUD (219)
    • Wyszukiwanie i sortowanie (220)
    • Użycie akcji w module <Whinepad> (222)
    • Użycie akcji w module <Excel> (224)
  • Podsumowanie architektury Flux (226)
  • Niezmienność (227)
    • Niezmienny magazyn danych (228)
    • Manipulowanie danymi niezmiennymi (229)

Skorowidz (233)

  • Title: React w działaniu. Tworzenie aplikacji internetowych
  • Author: Stoyan Stefanov
  • Original title: React: Up & Running: Building Web Applications
  • Translation: Joanna Zatorska
  • ISBN: 978-83-283-3302-4, 9788328333024
  • Date of issue: 2017-04-28
  • Format: Ebook
  • Item ID: reacwd
  • Publisher: Helion