E-Books ProgramowanieDetails zum E-Book: React w działaniu. Tworzenie aplikacji internetowych

Details zum E-Book

Einloggen wenn Sie am Inhalt des Artikels interessiert sind.

React w działaniu. Tworzenie aplikacji internetowych

Stoyan Stefanov

E-BOOK

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 (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 (111) </li> <li>Wartość elementu <select> (113)</li> </ul> </li> <li>Komponent Excel w JSX (114)</li> </ul> <p><strong>5. Konfiguracja na potrzeby rozwoju aplikacji (115)</strong> </p> <ul> <li>Aplikacja wzorcowa (116)<br> <ul> <li>Pliki i foldery (116) </li> <li>index.html (117) </li> <li>CSS (118) </li> <li>JavaScript (119) </li> <li>Zmodernizowany JavaScript (119)</li> </ul> </li> <li>Instalowanie wymagań wstępnych (123)<br> <ul> <li>Node.js (123) </li> <li>Browserify (124) </li> <li>Babel (124) </li> <li>React itd. (125)</li> </ul> </li> <li>Zabierzmy się do budowania (125)<br> <ul> <li>Transpilacja JavaScriptu (125) </li> <li>Pakowanie JavaScriptu (126) </li> <li>Pakowanie CSS (126) </li> <li>Efekty! (126) </li> <li>Wersja dla systemu Windows (127) </li> <li>Budowanie podczas rozwijania aplikacji (127)</li> </ul> </li> <li>Wdrożenie (128) </li> <li>Dalsze kroki (129)</li> </ul> <p><strong>6. Budowanie aplikacji (131)</strong> </p> <ul> <li>Whinepad v.0.0.1 (132)<br> <ul> <li>Konfiguracja (132) </li> <li>Zacznij pisać kod (132)</li> </ul> </li> <li>Komponenty (134)<br> <ul> <li>Konfiguracja (135) </li> <li>Wykrywanie (135) </li> <li>Komponent <Button> (137) </li> <li>Button.css (138) </li> <li>Button.js (139) </li> <li>Formularze (142) </li> <li><Suggest> (143) </li> <li>Komponent <Rating> (145) </li> <li>"Fabryka" <FormInput> (149) </li> <li><Form> (152) </li> <li><Actions> (155) </li> <li>Okna dialogowe (156)</li> </ul> </li> <li>Konfiguracja aplikacji (160) </li> <li>Nowy i ulepszony <Excel> (161) </li> <li><Whinepad> (170) </li> <li>Czynności końcowe (174)</li> </ul> <p><strong>7. Lint, przepływ, testowanie, powtarzanie (175)</strong> </p> <ul> <li>package.json (175)<br> <ul> <li>Konfiguracja narzędzia Babel (176) </li> <li>scripts (176)</li> </ul> </li> <li>ESLint (177)<br> <ul> <li>Konfiguracja (177) </li> <li>Uruchamianie (178) </li> <li>Wszystkie reguły (179)</li> </ul> </li> <li>Flow (180)<br> <ul> <li>Konfiguracja (180) </li> <li>Uruchamianie (180) </li> <li>Subskrypcja pod kątem weryfikacji typów (181) </li> <li>Poprawki w komponencie <Button> (182) </li> <li>app.js (183) </li> <li>Więcej właściwości i stanów związanych z weryfikacją typów (185) </li> <li>Typy eksportu i importu (187) </li> <li>Rzutowanie typów (188) </li> <li>Niezmienniki (189)</li> </ul> </li> <li>Testowanie (190)<br> <ul> <li>Konfiguracja (190) </li> <li>Pierwszy test (192) </li> <li>Pierwszy test Reacta (192) </li> <li>Testowanie komponentu <Button> (194) </li> <li>Testowanie komponentu <Actions> (198) </li> <li>Więcej symulowanych interakcji (201) </li> <li>Testowanie kompletnych interakcji (202) </li> <li>Pokrycie (204)</li> </ul> </li> </ul> <p><strong>8. Flux (207)</strong> </p> <ul> <li>Wielka idea (208) </li> <li>Kolejne spojrzenie na Whinepad (208) </li> <li>Magazyn, czyli komponent Store (209)<br> <ul> <li>Zdarzenia magazynu (212) </li> <li>Użycie magazynu w <Whinepad> (214) </li> <li>Użycie magazynu w komponencie <Excel> (216) </li> <li>Użycie magazynu w komponencie <Form> (217) </li> <li>Nakreślanie granicy (218)</li> </ul> </li> <li>Akcje (219)<br> <ul> <li>Akcje CRUD (219) </li> <li>Wyszukiwanie i sortowanie (220) </li> <li>Użycie akcji w module <Whinepad> (222) </li> <li>Użycie akcji w module <Excel> (224)</li> </ul> </li> <li>Podsumowanie architektury Flux (226) </li> <li>Niezmienność (227)<br> <ul> <li>Niezmienny magazyn danych (228) </li> <li>Manipulowanie danymi niezmiennymi (229)</li> </ul> </li> </ul> <p><strong>Skorowidz (233)</strong> </p> </body> </html> </div> <div role="tabpanel" class="tab-pane fade px-3 py-5" id="szczegoly" aria-labelledby="szczegoly-tab"> <ul class="details"> <li class="mb-2"><span class="text-success fw-bolder me-2">Titel:</span>React w działaniu. Tworzenie aplikacji internetowych</li> <li class="mb-2"><span class="text-success fw-bolder me-2">Autor:</span>Stoyan Stefanov</li> <li class="mb-2"><span class="text-success fw-bolder me-2">Originaler Titel:</span>React: Up & Running: Building Web Applications</li> <li class="mb-2"><span class="text-success fw-bolder me-2">Übersetzung:</span>Joanna Zatorska</li> <li class="mb-2"><span class="text-success fw-bolder me-2">ISBN:</span>978-83-283-3302-4, 9788328333024</li> <li class="mb-2"><span class="text-success fw-bolder me-2">Veröffentlichungsdatum:</span>2017-04-28</li> <li class="mb-2"><span class="text-success fw-bolder me-2">Format:</span>E-Book</li> <li class="mb-2"><span class="text-success fw-bolder me-2">Artikel-ID:</span> reacwd</li> <li class="mb-2"><span class="text-success fw-bolder me-2">Verleger:</span> <a href="/wydawca/helion">Helion</a></li> </ul> </div> <div role="tabpanel" class="tab-pane fade px-3 py-5" id="opinie-i-oceny" aria-labelledby="opinie-i-oceny-tab"> <turbo-frame id="reviews_reacwd_ebook_frame" src="/laduj-opinie/reacwd_ebook/reacwd/p" data-turbo-prefetch="false"> <div class="frame-loading-show d-flex justify-content-middle align-items-center w-100 h-100"> <span class="loader loader--default loader--big"></span> <div class="visually-hidden">Wird geladen...</div> </div> </turbo-frame> </div> <div role="tabpanel" class="tab-pane fade px-3 py-5" id="biblioteki" aria-labelledby="biblioteki-tab"> <turbo-frame id="libraries_reacwd_ebook_frame" src="/laduj-biblioteki/reacwd_ebook" data-turbo-prefetch="false"> <div class="frame-loading-show d-flex justify-content-middle align-items-center w-100 h-100"> <span class="loader loader--default loader--big"></span> <div class="visually-hidden">Wird geladen...</div> </div> </turbo-frame> </div> </div> </div> </div> </div> </div> </div> </div> </div> </main> <footer class="footer mt-auto mb-0" id="footer"> <div class="bg-primary py-2"> <div class="px-sm-5 container-lg"> <div class="row align-items-center text-light footer--main"> <div class="col-6 col-md-2 d-flex justify-content-center"> <a href="/"><img src="/build/images/biblio_logo_w.09412a36.svg" alt="BIBLIO" class="biblio_logo w-100 p-lg-2"></a> </div> <div class="col-6 col-md-2 d-flex justify-content-center"> <a href="/aplikacja" class="btn btn-sm btn-success text-white fw-bold rounded-pill px-4 ms-2">laden sie die anwendung herunter</a> </div> <div class="col-7 col-sm-8 col-md-6 d-flex justify-content-center"> <div class="text-white"> <a class="footer_link" href="/regulamin">vorschriften</a> <span class="footer_separator">|</span> <a class="footer_link" href="/polityka-prywatnosci">datenschutz-bestimmungen</a> <span class="footer_separator">|</span> <a class="footer_link" href="/pomoc">hilfe</a> </div> </div> <div class="col-5 col-sm-4 col-md-2 d-flex g-0 justify-content-center justify-content-md-end align-items-center"> <a href="https://www.facebook.com/ebookpointBIBLIO/" target="_blank" title=""><span class="footer_logo footer_logo--fb me-1 me-sm-3"></a> <a href="https://www.instagram.com/biblio_ebookpoint/" target="_blank" title=""><span class="footer_logo footer_logo--inst me-1 me-sm-3"></a> <a href="https://www.linkedin.com/company/ebookpointbiblio/" target="_blank" title=""><span class="footer_logo footer_logo--in me-1 me-sm-3"></a> </div> </div> </div> </div> <div class="bg-white"> <div class="container-lg"> <div class="row justify-content-start text-primary footer--helion"> <div class="col-12 d-flex text-center"> <img src="/build/images/logos/grupa_helion_w.6b1efc28.svg" alt="HELION - logo" class="helion_logo p-2"> <ul class="d-flex justify-content-evenly flex-fill m-0 "> <li class="p-2"> <a href="https://helion.pl/" rel="nofollow" class="helion_link d-block h-100 align-content-center"> <img src="/build/images/logos/helion_w.026bb026.svg" class="helion_image"> Helion.pl </a> </li> <li class="p-2"> <a href="https://ebookpoint.pl/" rel="nofollow" class="helion_link d-block h-100 align-content-center"> <img src="/build/images/logos/ebookpoint_w.9c9f3190.svg" class="helion_image"> Ebookpoint.pl </a> </li> <li class="p-2"> <a href="https://beya.pl/" rel="nofollow" class="helion_link d-block h-100 align-content-center"> <img src="/build/images/logos/beya_w.977e8a5b.svg" class="helion_image"> Beya.pl </a> </li> <li class="p-2"> <a href="https://bezdroza.pl/" rel="nofollow" class="helion_link d-block h-100 align-content-center"> <img src="/build/images/logos/bezdroza_w.16552673.svg" class="helion_image"> Bezdroza.pl </a> </li> <li class="p-2"> <a href="https://czytalisek.pl/" rel="nofollow" class="helion_link d-block h-100 align-content-center"> <img src="/build/images/logos/czytalisek_w.c75a5fba.svg" class="helion_image"> Czytalisek.pl </a> </li> <li class="p-2"> <a href="https://sensus.pl/" rel="nofollow" class="helion_link d-block h-100 align-content-center"> <img src="/build/images/logos/sensus_w.95157f02.svg" class="helion_image"> Sensus.pl </a> </li> <li class="p-2"> <a href="https://onepress.pl/" rel="nofollow" class="helion_link d-block h-100 align-content-center"> <img src="/build/images/logos/onepress_w.b3f74bc2.svg" class="helion_image"> Onepress.pl </a> </li> <li class="p-2"> <a href="https://videopoint.pl/" rel="nofollow" class="helion_link d-block h-100 align-content-center"> <img src="/build/images/logos/videopoint_w.9b787c86.svg" class="helion_image"> Videopoint.pl </a> </li> <li class="p-2"> <a href="https://editio.pl/" rel="nofollow" class="helion_link d-block h-100 align-content-center"> <img src="/build/images/logos/editio_w.a055f124.svg" class="helion_image"> Editio.pl </a> </li> </ul> </div> </div> </div> </div> <div class="bg-white"> <div class="container-lg px-5"> <div class="row align-items-center text-muted footer--copyright"> <div class="col-12 d-flex justify-content-end"> © Helion 1991-2026 </div> </div> </div> </div> </footer> <div id="cookie-consent-wrapper" data-turbo-permanent> <button class="consent-button btn btn-primary" type="button" data-controller="cookie-consent" aria-label="cookie_settings" data-action="click->cookie-consent#showPreferences"><span class="consent-image"></span></button> </div> </body> </html>