React w działaniu. Tworzenie aplikacji internetowych

React — programowanie może być przyjemne! 

Interfejs użytkownika musi działać w przewidywalny sposób na różnych przeglądarkach i urządzeniach. Powinien zapewniać adekwatną obsługę wprowadzanych danych oraz umożliwiać płynne i niezawodne komunikowanie się aplikacji z użytkownikiem. Dziś programiści mogą skupić się na samym działaniu  aplikacji, gdyż interfejs użytkownika można szybko. łatwo i przyjemnie zbudować za pomocą biblioteki React. 

Poznasz ją dzięki temu przewodnikowi i zaczniesz wykorzystywać w tworzeniu aplikacji internetowych. Dowiesz się. jak można jednorazowo zdefiniować elastyczny interfejs, 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, takich jak Browserify, Jest. ESLint, Flow. Flux czy ImmutabIeJs. Wzbogać swój warsztat programisty aplikacji WWW! 

 

• 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 

 

W darmowy rozdziale poznamy podstawy React (React konfiguracja, React ćwiczenia). Nauczymy się tworzyć prostą stronę Witaj Świecie React. Poznamy technologii React opis, dowiemy się jak pracować na specjalnych atrybutach DOM.

Darmowy rozdział:

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)

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)

Informatyka » JavaScript