React w działaniu. Tworzenie aplikacji internetowych - 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 https//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)