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.

 

Osoby które kupowały "React w działaniu. Tworzenie aplikacji internetowych", wybierały także:

• React Native. Kurs video. ZostaÅ„ programistÄ… aplikacji mobilnych 169,00 zÅ‚, (50,70 zÅ‚ -70%)
• Testowanie aplikacji w React.js. Kurs video. Praca z bibliotekÄ… Jest.js 69,00 zÅ‚, (20,70 zÅ‚ -70%)
• TypeScript i React. Kurs video. Tworzenie nowoczesnych komponent 125,42 zÅ‚, (45,15 zÅ‚ -64%)
• React i GatsbyJS. Kurs video. Nowoczesne strony internetowe w oparciu o headless CMS i GraphQL 148,98 zÅ‚, (59,59 zÅ‚ -60%)
• React z AI. Kurs video. Programowanie wspomagane sztuczn 119,00 zÅ‚, (53,55 zÅ‚ -55%)

• 
• 
• 
• 
• 

Spis treści

React w działaniu. Tworzenie aplikacji internetowych -- spis treści

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)