W ostatnich latach JavaScript stał się pełnoprawnym i pełnowartościowym językiem programowania. Jest wszechstronny, elastyczny i pozwala na tworzenie znakomitego kodu. Uzyskanie dobrych efektów wymaga jednak od programisty sporych umiejętności. Wyjątkowo przydatnym rozwiązaniem okazują się frameworki, które ułatwiają pisanie nawet bardzo złożonych aplikacji. Na szczególną uwagę zasługuje React - popularny framework do tworzenia dynamicznych aplikacji w JavaScripcie. React jest narzędziem, które w stosunkowo prosty sposób pozwala w pełni wykorzystać możliwości nowoczesnych przeglądarek i urządzeń mobilnych.

W książce przystępnie wyjaśniono zasady i techniki programowania w tym frameworku. Opisano szczegóły jego architektury oraz przedstawiono korzyści płynące z pracy z Reactem. Sporo miejsca poświęcono projektowaniu aplikacji oraz korzystaniu zarówno z samego frameworka, jak i towarzyszących mu narzędzi i najpopularniejszych bibliotek. Poszczególne zagadnienia są tu omawiane od podstaw, które następnie płynnie przechodzą do najbardziej zaawansowanych i wyszukanych technik programowania. Wszystkie informacje przedstawiono bardzo starannie, z zachowaniem ważnych szczegółów, dzięki czemu łatwo uzyskać wiedzę niezbędną do pisania aplikacji na wysokim, profesjonalnym poziomie. Nie zabrakło również wskazówek, dzięki którym można łatwo zdiagnozować najczęściej występujące problemy i skutecznie je rozwiązywać.

W książce między innymi:

• szczegółowe wyjaśnienie architektury aplikacji Reacta
• tworzenie dynamicznych aplikacji klienta
• korzystanie z magazynu danych Redux
• usługi RESTful i GraphQL
• testowanie i wdrażanie projektów

React: dynamiczne aplikacje w profesjonalnym wydaniu!

Rozdziały:

O autorze 17

O recenzencie technicznym 18

CZĘŚĆ I. ROZPOCZYNANIE PRAC Z FRAMEWORKIEM REACT 19

Rozdział 1. Twoja pierwsza aplikacja Reacta 21

• Przygotowanie środowiska programistycznego 21
  • Instalacja Node.js 21
  • Instalacja pakietu create-react-app 22
  • Instalacja Git 23
  • Instalacja edytora 23
  • Instalacja przeglądarki 23
• Tworzenie projektu 24
  • Prezentacja struktury projektu 25
  • Dodanie frameworka CSS Bootstrap 26
  • Uruchamianie narzędzi dla programistów 27
• Usuwanie treści zastępczej 28
• Wyświetlanie treści dynamicznych 29
  • Wyjaśnienie zmian danych stanu 30
• Dodawanie możliwości aplikacji listy zadań 33
  • Wyświetlanie zadań do zrobienia 35
• Wprowadzanie dodatkowych komponentów 38
  • Stosowanie komponentów podrzędnych 40
• Ostatnie szlify 41
  • Zarządzanie prezentacją zakończonych zadań 42
  • Trwałe przechowywanie danych 44
• Podsumowanie 47

Rozdział 2. Zrozumieć React 49

• Czy powinienem używać Reacta? 50
  • Aplikacje z komunikacją dwukierunkową 50
  • Aplikacje jednostronicowe 50
  • Problem złożoności aplikacji 51
• Co muszę wiedzieć? 52
• Jak skonfigurować środowisko programistyczne? 52
• Jaka jest struktura tej książki? 52
  • Część 1. Początki stosowania frameworka React 52
  • Część 2. Praca z frameworkiem React 52
  • Część 3. Tworzenie złożonych aplikacji Reacta 53
• Czy w książce jest dużo przykładów? 53
• Skąd pobrać kody źródłowe przykładów? 54
• Gdzie szukać informacji o poprawkach? 55
• Podsumowanie 55

Rozdział 3. Podstawy HTML, JSX i CSS 57

• Przygotowania do prac w tym rozdziale 57
  • Przygotowanie pliku HTML i komponentu 58
  • Uruchamianie przykładowej aplikacji 59
• Język HTML i elementy DOM 60
  • Treść elementu 61
  • Atrybuty 63
  • Dynamiczne zmienianie elementów HTML 63
  • Dynamiczne tworzenie elementów przy użyciu klasy Component 65
• Stosowanie wyrażeń w elementach Reacta 66
  • Łączenie wyrażeń i treści statycznych 67
  • Wykonywanie obliczeń w wyrażeniach 67
  • Dostęp do właściwości i metod komponentu 69
  • Stosowanie wyrażeń do ustawiania wartości właściwości 70
  • Stosowanie wyrażeń do obsługi zdarzeń 71
• Prezentacja frameworka Bootstrap 72
  • Stosowanie klas frameworka Bootstrap 72
  • Stosowanie frameworka Bootstrap do tworzenia siatek 74
  • Stosowanie frameworka Bootstrap w tabelach 75
  • Stosowanie frameworka Bootstrap w formularzach 77
• Podsumowanie 78

Rozdział 4. Podstawy JavaScriptu 79

• Przygotowania do lektury tego rozdziału 79
• Stosowanie instrukcji 82
• Definiowanie i stosowanie funkcji 82
  • Definiowanie funkcji z parametrami 83
  • Definiowanie funkcji zwracających wyniki 85
  • Stosowanie funkcji jako argumentów innych funkcji 86
• Stosowanie zmiennych i typów 87
  • Stosowanie typów prostych 89
• Stosowanie operatorów JavaScriptu 91
  • Stosowanie instrukcji warunkowych 92
  • Porównanie operatorów równości i identyczności 93
  • Jawna konwersja typów 94
• Stosowanie tablic 95
  • Stosowanie literału tablicowego 96
  • Odczyt i modyfikacja zawartości tablic 96
  • Wyliczanie zawartości tablic 97
  • Stosowanie operatora rozproszenia 97
  • Stosowanie wbudowanych metod tablicowych 98
• Stosowanie obiektów 100
  • Stosowanie literałów obiektowych 101
  • Stosowanie funkcji jako metod 102
  • Stosowanie klas 103
  • Kopiowanie właściwości z jednego obiektu do drugiego 104
  • Przechwytywanie nazw parametrów z obiektów 106
• Tworzenie i stosowanie modułów JavaScript 107
  • Tworzenie i użycie modułu JavaScript 107
  • Eksportowanie z modułów możliwości nazwanych 109
  • Definiowanie wielu możliwości nazwanych w jednym module 110
• Obietnice języka JavaScript 112
  • Wyjaśnienie problemu operacji asynchronicznych 112
  • Stosowanie obietnic 113
  • Upraszczanie kodu asynchronicznego 114
• Podsumowanie 115

Rozdział 5. SportsStore - prawdziwa aplikacja Reacta 117

• Przygotowanie projektu 118
  • Instalacja dodatkowych pakietów NPM 118
  • Dodanie do projektu arkuszy stylów CSS 120
  • Przygotowanie usługi internetowej 121
  • Uruchomienie przykładowej aplikacji 123
• Tworzenie magazynu danych 123
  • Tworzenie akcji magazynu danych oraz kreatorów akcji 124
• Tworzenie możliwości funkcjonalnych sklepu 126
  • Tworzenie komponentów produktu i kategorii 127
  • Połączenie magazynu danych z mechanizmem trasowania 130
  • Dodanie komponentu Shop do aplikacji 132
  • Poprawa przycisków wyboru kategorii 133
• Dodawanie koszyka 135
  • Rozbudowa magazynu danych 135
  • Tworzenie komponentu CartSummary 137
  • Dodawanie komponentu szczegółów koszyka 141
  • Dodanie koszyka do konfiguracji trasowania 143
• Podsumowanie 145

Rozdział 6. SportsStore - REST i kasa 147

• Przygotowania do prac w tym rozdziale 147
• Korzystanie z internetowej usługi typu RESTful 147
  • Tworzenie pliku konfiguracyjnego 149
  • Tworzenie źródła danych 149
  • Rozszerzanie możliwości magazynu danych 150
  • Aktualizacja kreatorów akcji 151
• Podział danych na strony 151
  • Wyjaśnienie wsparcia dla stronicowania w usłudze internetowej 153
  • Zmiana żądania HTTP oraz akcji 155
  • Tworzenie komponentu wczytującego dane 156
  • Aktualizacja komponentu konektora sklepu 157
  • Aktualizacja przycisku kategorii Wszystkie 159
  • Tworzenie kontrolek stronicowania 160
• Dodanie obsługi składania zamówienia 165
  • Rozbudowa usługi typu RESTful i źródła danych 166
  • Tworzenie formularza zamówienia 168
• Uproszczenie komponentu konektora sklepu 175
• Podsumowanie 176

Rozdział 7. SportsStore - administracja 177

• Przygotowania do lektury tego rozdziału 177
  • Uruchamianie aplikacji 178
• Tworzenie usługi GraphQL 179
  • Definiowanie schematu GraphQL-a 179
  • Definiowanie resolwerów GraphQL-a 180
  • Aktualizacja serwera 182
• Tworzenie narzędzi administracyjnych do zarządzania zamówieniami 184
  • Definiowanie tabeli zamówień 185
  • Zdefiniowanie komponentu konektora 186
  • Konfiguracja klienta GraphQL-a 189
  • Konfigurowanie mutacji 191
• Tworzenie narzędzi zarządzania produktami 192
  • Połączenie komponentu tabeli produktów 194
  • Tworzenie komponentów do edycji 197
  • Aktualizacja konfiguracji trasowania 199
• Podsumowanie 202

Rozdział 8. SportsStore - uwierzytelnianie i wdrażanie 203

• Przygotowania do prac w tym rozdziale 203
• Dodanie uwierzytelniania do żądań GraphQL-a 206
  • Przedstawienie systemu uwierzytelniania 207
  • Tworzenie kontekstu uwierzytelniania 208
  • Tworzenie formularza uwierzytelniającego 211
  • Zabezpieczanie narzędzi administracyjnych 212
  • Dodanie odnośników do narzędzi administracyjnych 213
• Przygotowanie aplikacji do wdrożenia 214
  • Umożliwienie leniwego wczytywania narzędzi administracyjnych 214
  • Tworzenie pliku danych 216
  • Konfiguracja adresów URL żądań 217
  • Budowanie aplikacji 217
  • Tworzenie serwera aplikacji 217
  • Testowanie produkcyjnej wersji aplikacji i serwera 218
• Umieszczanie aplikacji w kontenerze 219
  • Instalowanie Dockera 219
  • Przygotowanie aplikacji 220
  • Tworzenie kontenera Dockera 220
  • Uruchamianie aplikacji 221
• Podsumowanie 222

CZĘŚĆ II. PRACA Z REACTEM 223

Rozdział 9. Prezentacja projektów Reacta 225

• Przygotowania do prac w tym rozdziale 226
• Opis struktury projektów Reacta 227
  • Katalog kodów źródłowych 229
  • Katalog pakietów 230
• Stosowanie narzędzi programistycznych Reacta 233
  • Proces kompilacji i przekształcania 234
  • Serwer HTTP do prac programistycznych 238
  • Treści statyczne 239
  • Wyświetlanie błędów 242
  • Linter 245
  • Konfiguracja narzędzi programistycznych 248
• Debugowanie aplikacji Reacta 249
  • Badanie stanu aplikacji 251
  • Stosowanie debugera przeglądarki 252
• Podsumowanie 254

Rozdział 10. Komponenty i właściwości props 255

• Przygotowania do prac w tym rozdziale 256
• Komponenty 258
  • Renderowanie treści HTML 258
  • Renderowanie innych komponentów 260
• Właściwości props 263
  • Definiowanie właściwości props w komponencie nadrzędnym 263
  • Odbieranie właściwości props w komponencie podrzędnym 265
• Łączenie kodu JavaScript i właściwości props w celu renderowania treści 266
  • Selektywne renderowanie treści 266
  • Renderowanie tablic 267
  • Renderowanie wielu elementów 271
  • Brak renderowanych treści 273
  • Próba zmiany wartości właściwości props 274
• Stosowanie funkcyjnych właściwości props 275
  • Wywoływanie funkcyjnych właściwości props z argumentami 277
• Przekazywanie właściwości props do komponentów podrzędnych 280
  • Określanie domyślnych wartości właściwości props 283
• Sprawdzanie typów wartości właściwości props 284
• Podsumowanie 287

Rozdział 11. Komponenty ze stanem 289

• Przygotowania do prac w tym rozdziale 290
• Różne typy komponentów 291
  • Komponenty bezstanowe 292
  • Komponenty ze stanem 292
• Tworzenie komponentów ze stanem 293
  • Klasa komponentu 294
  • Instrukcja import 294
  • Metoda render 294
  • Właściwości props komponentów ze stanem 295
• Dodawanie danych stanu 295
  • Odczytywanie danych stanu 297
• Modyfikacja danych stanu 297
  • Unikanie problemów z modyfikowaniem danych stanu 299
• Definiowanie komponentów ze stanem przy użyciu hooków 304
• Podnoszenie danych stanu 306
  • Dalsze podnoszenie danych stanu 309
• Definiowanie typów i wartości domyślnych właściwości props 311
• Podsumowanie 314

Rozdział 12. Stosowanie zdarzeń 315

• Przygotowania do prac w tym rozdziale 316
• Przedstawienie zdarzeń 318
  • Wywoływanie metody w celu obsługi zdarzenia 319
  • Pobieranie obiektu zdarzenia 323
  • Wywoływanie metod obsługi zdarzeń z niestandardowymi argumentami 328
  • Zapobieganie domyślnej obsłudze zdarzeń 330
• Zarządzanie propagacją zdarzeń 332
  • Faza elementu docelowego i faza propagacji w górę 332
  • Faza przechwytywania 336
  • Określanie fazy zdarzenia 337
  • Zatrzymywanie propagacji zdarzeń 340
• Podsumowanie 341

Rozdział 13. Rekoncyliacja i cykl życia 343

• Przygotowania do prac w tym rozdziale 344
  • Tworzenie przykładowych komponentów 345
• Wyjaśnienie sposobu renderowania treści 347
  • Wyjaśnienie procesu aktualizacji 349
  • Wyjaśnienie procesu rekoncyliacji 351
  • Rekoncyliacja list 354
• Jawne wyzwalanie procesu rekoncyliacji 355
• Cykl życia komponentów 357
  • Faza montowania 358
  • Faza aktualizacji 361
  • Faza odmontowywania 362
• Hook efektów 363
• Stosowanie zaawansowanych metod cyklu życia 366
  • Unikanie niepotrzebnych aktualizacji komponentu 366
  • Ustawianie danych stanu na podstawie właściwości props 369
• Podsumowanie 371

Rozdział 14. Konstruowanie aplikacji 373

• Przygotowania do prac w tym rozdziale 374
  • Tworzenie przykładowych komponentów 375
• Podstawowe zależności pomiędzy komponentami 377
• Stosowanie właściwości props children 377
  • Operacje na właściwości props children 379
• Tworzenie komponentów wyspecjalizowanych 382
• Tworzenie komponentów wyższego rzędu 385
  • Tworzenie komponentów wyższego rzędu ze stanem 388
  • Łączenie komponentów wyższego rzędu 390
• Stosowanie renderującej właściwości props 392
  • Stosowanie renderującej właściwości props z argumentem 394
• Stosowanie kontekstu do przechowywania danych globalnych 396
  • Definiowanie kontekstu 399
  • Tworzenie konsumentów kontekstu 400
  • Tworzenie dostawcy kontekstu 401
  • Modyfikowanie wartości danych kontekstu w konsumencie 403
  • Stosowanie uproszczonego API konsumentów kontekstu 406
• Definiowanie granic błędów 408
  • Tworzenie komponentu granicy błędów 409
• Podsumowanie 412

Rozdział 15. Formularze i walidacja 413

• Przygotowania do prac w tym rozdziale 414
  • Tworzenie przykładowych komponentów 415
  • Uruchamianie narzędzi programistycznych 416
• Stosowanie elementów formularzy 417
  • Stosowanie elementów select 419
  • Stosowanie przycisków opcji 421
  • Stosowanie pól wyboru 423
  • Użycie pól wyboru do zapisywania wartości w tablicy 424
  • Stosowanie wielowierszowych pól tekstowych 426
• Walidacja danych z formularzy 427
  • Definiowanie reguł walidacji 428
  • Tworzenie komponentu kontenera 430
  • Wyświetlanie komunikatów o błędach 432
  • Zastosowanie walidacji 432
  • Walidacja innych elementów i typów danych 434
  • Przeprowadzanie całościowej walidacji formularza 439
• Podsumowanie 443

Rozdział 16. Referencje i portale 445

• Przygotowania do prac w tym rozdziale 446
• Tworzenie referencji 450
• Użycie referencji do tworzenia niekontrolowanych komponentów formularzy 452
  • Tworzenie referencji przy użyciu funkcji zwrotnych 454
  • Walidacja niekontrolowanych komponentów formularzy 457
• Referencje a cykl życia 461
• Stosowanie referencji z innymi bibliotekami lub frameworkami 467
• Dostęp do zawartości komponentów podrzędnych 470
  • Stosowanie przekazywania referencji 472
• Stosowanie portali 473
• Podsumowanie 476

Rozdział 17. Testy jednostkowe 477

• Przygotowania do prac w tym rozdziale 478
  • Tworzenie komponentów 480
  • Uruchamianie przykładowej aplikacji 481
• Uruchamianie zastępczego testu jednostkowego 482
• Testowanie komponentów z wykorzystaniem renderowania płytkiego 484
• Testowanie komponentów z użyciem pełnego renderowania 488
• Testowanie z użyciem właściwości props, stanu, metod i zdarzeń 490
  • Testowanie efektów działania metod 491
  • Testowanie efektów zdarzeń 491
  • Testowanie interakcji pomiędzy komponentami 492
• Podsumowanie 494

CZĘŚĆ III. TWORZENIE KOMPLETNYCH APLIKACJI 495

Rozdział 18. Tworzenie kompletnych aplikacji 497

• Tworzenie przykładowego projektu 498
  • Uruchamianie narzędzi programistycznych 499
• Tworzenie przykładowej aplikacji 499
  • Implementacja możliwości funkcjonalnych związanych z produktami 500
  • Implementacja możliwości funkcjonalnych związanych z dostawcami 504
  • Dokańczanie aplikacji 508
• Wyjaśnienie ograniczeń przedstawionej aplikacji 511
• Podsumowanie 511

Rozdział 19. Stosowanie magazynu danych Redux 513

• Przygotowania do prac w tym rozdziale 514
• Tworzenie magazynu danych 515
  • Definiowanie typów danych 516
  • Definiowanie początkowych danych 516
  • Definiowanie typów akcji danych modelu 517
  • Definiowanie kreatorów akcji danych modelu 517
  • Definiowanie reduktora 518
  • Tworzenie magazynu danych 520
• Stosowanie magazynu danych w aplikacji Reacta 521
  • Użycie magazynu danych w komponencie najwyższego poziomu 521
  • Podłączanie danych produktów 522
  • Podłączanie danych dostawców 524
• Rozszerzanie magazynu danych 527
  • Dodawanie stanu do magazynu danych 527
  • Definiowanie typów i kreatorów akcji dla danych stanu 528
  • Definiowanie reduktora danych stanu 529
  • Dodawanie nowych opcji obsługi danych do aplikacji 529
  • Podłączanie komponentów Reacta do danych stanu w magazynie 531
• Rozsyłanie wielu akcji 535
• Wyjaśnienie potrzeby użycia referencji 537
• Podsumowanie 539

Rozdział 20. Stosowanie API magazynu danych 541

• Przygotowania do prac w tym rozdziale 542
• Stosowanie API magazynu danych Redux 542
  • Pobieranie stanu magazynu danych 543
  • Obserwowanie zmian w magazynie danych 546
  • Rozsyłanie akcji 547
  • Tworzenie komponentu konektora 549
• Rozszerzanie możliwości reduktorów 552
• Stosowanie komponentów warstwy pośredniej magazynu danych 555
• Rozszerzanie magazynu danych 558
  • Zastosowanie funkcji rozszerzenia 560
• Stosowanie API pakietu React-Redux 562
  • Zaawansowane możliwości metody connect 562
• Podsumowanie 568

Rozdział 21. Trasowanie adresów URL 569

• Przygotowania do prac w tym rozdziale 570
• Rozpoczynanie korzystania z mechanizmu trasowania 571
  • Wprowadzenie do użycia komponentu Link 573
  • Wprowadzenie do użycia komponentu Route 573
• Reagowanie na nawigację 574
  • Wybieranie komponentów i treści 574
  • Dopasowywanie adresów URL 576
  • Dopasowywanie pojedynczej trasy 581
  • Użycie przekierowań jako trasy awaryjnej 583
• Generowanie odnośników nawigacyjnych 585
  • Wskazywanie aktywnej trasy 587
• Wybór i konfiguracja mechanizmu trasowania 589
  • Stosowanie komponentu HashRouter 590
• Podsumowanie 591

Rozdział 22. Zaawansowane zagadnienia trasowania adresów URL 593

• Przygotowania do prac w tym rozdziale 594
• Tworzenie komponentów świadomych trasowania 595
  • Prezentacja właściwości props match 596
  • Prezentacja właściwości props location 598
  • Stosowanie parametrów adresów URL 599
• Dostęp do danych trasowania w innych komponentach 605
  • Bezpośredni dostęp do danych mechanizmu trasowania w komponencie 605
  • Dostęp do danych mechanizmu trasowania przy użyciu komponentu wyższego rzędu 607
• Programowe prowadzenie nawigacji 609
  • Nawigacja programowa z użyciem komponentów 610
  • Pytanie użytkownika przed wykonaniem nawigacji 611
• Programowe generowanie tras 615
• Trasowanie z komponentami podłączonymi do magazynu danych 617
  • Zastępowanie komponentów ProductDisplay i SupplierDisplay 618
  • Aktualizacja podłączonego komponentu edytora 619
  • Aktualizowanie komponentu tabeli podłączonej do magazynu danych 620
  • Dokończenie konfiguracji trasowania 622
• Podsumowanie 624

Rozdział 23. Korzystanie z usługi internetowej typu RESTful 625

• Przygotowania do prac w tym rozdziale 626
  • Dodanie pakietów do projektu 626
  • Przygotowanie usługi internetowej 627
  • Dodanie komponentu i trasy 628
  • Uruchamianie usługi internetowej i aplikacji 629
• Opis usług internetowych typu RESTful 631
• Korzystanie z usługi internetowej 632
  • Tworzenie komponentu źródła danych 633
  • Pobieranie danych w komponencie 635
  • Zapisywanie, aktualizacja i usuwanie danych 636
  • Obsługa błędów 642
• Korzystanie z usługi internetowej w magazynie danych 647
  • Tworzenie nowego komponentu warstwy pośredniej 647
  • Dodanie komponentu warstwy pośredniej do magazynu danych 648
  • Dokańczanie zmian w aplikacji 649
• Podsumowanie 651

Rozdział 24. Przedstawienie GraphQL-a 653

• Przygotowania do prac w tym rozdziale 654
• Omówienie GraphQL-a 655
• Tworzenie serwera GraphQL-a 656
  • Tworzenie schematu 657
  • Tworzenie resolwerów 658
  • Tworzenie serwera 658
• Wykonywanie zapytań GraphQL-a 660
  • Pytania dotyczące powiązanych ze sobą danych 661
  • Tworzenie zapytań z argumentami 664
• Wykonywanie mutacji GraphQL-a 669
• Inne możliwości GraphQL-a 672
  • Stosowanie zmiennych żądania 672
  • Wykonywanie wielu żądań 673
  • Stosowanie fragmentów do wybierania pól 675
• Podsumowanie 676

Rozdział 25. Korzystanie z GraphQL-a 677

• Przygotowania do prac w tym rozdziale 677
  • Dodanie niezbędnych pakietów 677
  • Zmiana danych dla serwera GraphQL-a 678
  • Aktualizacja schematu i resolwerów 678
  • Integracja serwera GraphQL-a z narzędziami programistycznymi Reacta 681
• Korzystanie z usługi GraphQL 682
  • Zdefiniowanie zapytań i mutacji 682
  • Definiowanie źródła danych 684
  • Konfiguracja komponentów izolowanych 685
• Używanie GraphQL-a z magazynem danych 687
  • Dostosowanie do formatu danych GraphQL-a 689
• Stosowanie frameworka klienta GraphQL 693
  • Konfiguracja klienta 693
  • Tworzenie komponentów korzystających z GraphQL-a 694
  • Stosowanie mutacji 698
  • Dodanie obsługi danych dostawców oraz edycji danych 702