React: kluczowe koncepcje. Przewodnik po najważniejszych mechanizmach biblioteki React - ebook

Spośród bibliotek JavaScriptu na szczególną uwagę zasługuje React, który służy do tworzenia nowoczesnych, interaktywnych interfejsów użytkownika. W relatywnie prosty sposób pozwala wykorzystywać możliwości współczesnych przeglądarek internetowych. Niestety, pierwsze kroki w obsłudze tej technologii bywają trudne i łatwo się zniechęcić. Właśnie dlatego warto podczas pracy z Reactem mieć przy sobie ten przewodnik!

Dzięki niemu szybko odnajdziesz się w najnowszej, 18. edycji biblioteki React. Książka zawiera informacje o jego najważniejszych narzędziach, podane w przystępny sposób, z naciskiem na wymiar praktyczny. Dowiesz się, jak przebiega tworzenie projektów i z jakich opcji można skorzystać podczas tego procesu. Przejrzyste objaśnienia, zilustrowane starannie opracowanymi przykładami, ułatwią usystematyzowanie wiedzy każdemu zapracowanemu programiście. To atrakcyjna propozycja dla osób, które korzystają z wielu różnych materiałów i chcą mieć wszystkie istotne informacje o bibliotece React zebrane w jednym miejscu.

W książce między innymi:

• budowa nowoczesnych aplikacji internetowych
• komponenty, zdarzenia i warunkowe zarządzanie wyświetlanymi treściami
• warunkowe stosowanie dynamicznych stylów
• zaawansowane techniki zarządzania stanem
• biblioteki Reacta, dobre praktyki i optymalizacja aplikacji

React: interaktywne i dynamiczne frontendy w zasięgu ręki!

Wprowadzenie

ROZDZIAŁ 1. React - co, jak i dlaczego?

• Wprowadzenie
• Czym jest React?
• Problem z czystym JavaScriptem
• React i kod deklaratywny
  • W jaki sposób React operuje modelem DOM?
• Wprowadzenie do aplikacji jednostronicowych
  • Tworzenie projektu Reacta
• Podsumowanie i najważniejsze informacje do zapamiętania
  • Co dalej?
  • Sprawdź swoją wiedzę!

ROZDZIAŁ 2. Komponenty Reacta i składnia JSX

• Wprowadzenie
• Czym są komponenty?
  • Po co stosować komponenty?
  • Budowa komponentu
  • Czym dokładnie są funkcje tworzące komponenty?
• Co React robi z tymi wszystkimi komponentami?
  • Wbudowane komponenty
  • Konwencje nazewnicze
• JSX, HTML i czysty JavaScript
  • Używanie Reacta bez składni JSX
  • Elementy JSX są traktowane jak zwykłe wartości z JavaScriptu
  • Elementy JSX muszą być samozamykające
• Zwracanie dynamicznych treści
  • Kiedy należy dzielić komponenty?
• Podsumowanie i najważniejsze informacje do zapamiętania
  • Co dalej?
  • Sprawdź swoją wiedzę!
• Zastosuj zdobytą wiedzę
  • Ćwiczenie 2.1. Utwórz aplikację Reacta z własną prezentacją
  • Ćwiczenie 2.2. Tworzenie aplikacji Reacta do zapisywania celów związanych z tą książką

ROZDZIAŁ 3. Komponenty i propy

• Wprowadzenie
• To jeszcze nie koniec
• Używanie propów w komponentach
  • Przekazywanie propów do komponentów
  • Używanie propów w komponencie
• Komponenty, propy i możliwość wielokrotnego użytku
  • Specjalny prop children
  • W których komponentach potrzebne są propy?
• Jak zarządzać wieloma propami?
  • Stosowanie operatora rozwijania do propów
  • Łańcuchy propów
• Podsumowanie i najważniejsze informacje do zapamiętania
  • Co dalej?
  • Sprawdź swoją wiedzę!
• Zastosuj zdobytą wiedzę
  • Ćwiczenie 3.1. Tworzenie aplikacji wyświetlającej Twoje cele związane z tą książką

ROZDZIAŁ 4. Praca ze zdarzeniami i stanem

• Wprowadzenie
• Na czym polega problem?
  • Jak nie rozwiązywać tego problemu
  • Lepsze, ale wciąż niepoprawne rozwiązanie
  • Poprawne reagowanie na zdarzenia
• Poprawne aktualizowanie stanu
  • Więcej o haczyku useState()
• Spojrzenie na wewnętrzne mechanizmy Reacta
  • Konwencje nazewnicze
  • Dozwolone typy wartości stanu
• Praca z wieloma wartościami stanu
  • Używanie wielu wycinków stanu
  • Zarządzanie połączonymi obiektami stanu
  • Poprawne aktualizowanie stanu na podstawie jego wcześniejszej wartości
  • Wiązanie dwukierunkowe
• Generowanie wartości na podstawie stanu
  • Praca z formularzami i przesyłanie formularzy
  • Przenoszenie stanu wyżej
• Podsumowanie i najważniejsze informacje do zapamiętania
  • Co dalej?
  • Sprawdź swoją wiedzę!
• Zastosuj zdobytą wiedzę
  • Ćwiczenie 4.1. Tworzenie prostego kalkulatora
  • Ćwiczenie 4.2. Rozbudowywanie kalkulatora

ROZDZIAŁ 5. Wyświetlanie list i warunkowe wyświetlanie treści

• Wprowadzenie
• Czym są warunkowo wyświetlane treści i dane z list?
• Warunkowe wyświetlanie treści
  • Różne sposoby warunkowego wyświetlania treści
  • Warunkowe ustawianie znaczników elementów
• Wyświetlanie danych z list
  • Przekształcanie danych z list za pomocą metody map()
  • Aktualizowanie list
• Problem z elementami list
  • Ratunek ze strony kluczy
• Podsumowanie i najważniejsze informacje do zapamiętania
  • Co dalej?
  • Sprawdź swoją wiedzę!
• Zastosuj zdobytą wiedzę
  • Ćwiczenie 5.1. Warunkowe wyświetlanie komunikatu o błędzie
  • Ćwiczenie 5.2. Wyświetlanie listy produktów

ROZDZIAŁ 6. Dodawanie stylów do aplikacji Reacta

• Wprowadzenie
• Jak działają style w aplikacjach Reacta?
  • Używanie stylów wewnątrzwierszowych
  • Ustawianie stylów za pomocą klas CSS
  • Dynamiczne ustawianie stylów
  • Warunkowe dodawanie stylów
  • Łączenie kilku klas CSS w dynamiczny sposób
  • Scalanie obiektów zawierających style wewnątrzwierszowe
  • Tworzenie komponentów umożliwiających modyfikowanie stylów
  • Problem ze stylami bez ograniczenia zasięgu
• Ograniczanie zasięgu stylów za pomocą modułów CSS
  • Biblioteka styled-components
  • Używanie innych bibliotek i platform stylów CSS lub JavaScriptu
• Podsumowanie i kluczowe informacje do zapamiętania
  • Co dalej?
  • Sprawdź swoją wiedzę!
• Zastosuj zdobytą wiedzę
  • Ćwiczenie 6.1. Wyświetlanie informacji o poprawności danych wejściowych po przesłaniu formularza
  • Ćwiczenie 6.2. Używanie modułów CSS do ograniczania zasięgu stylów

ROZDZIAŁ 7. Portale i referencje

• Wprowadzenie
• Świat bez referencji
• Referencje a stan
• Używanie referencji w celach innych niż dostęp do modelu DOM
  • Przekazywanie referencji
  • Komponenty kontrolowane i niekontrolowane
• Gdzie elementy z Reacta trafiają w modelu DOM
  • Ratunek ze strony portali
• Podsumowanie i najważniejsze informacje do zapamiętania
  • Co dalej?
  • Sprawdź swoją wiedzę!
• Zastosuj zdobytą wiedzę
  • Ćwiczenie 7.1. Pobieranie wartości wejściowych od użytkownika
  • Ćwiczenie 7.2. Dodawanie menu bocznego

ROZDZIAŁ 8. Zarządzanie efektami ubocznymi

• Wprowadzenie
• Czego dotyczy problem?
• Efekty uboczne
  • Efekty uboczne dotyczą nie tylko żądań HTTP
• Zarządzanie efektami ubocznymi za pomocą haczyka useEffect()
  • Jak używać haczyka useEffect()?
• Efekty uboczne i zależności
  • Zbędne zależności
  • Porządkowanie stanu po wystąpieniu efektów ubocznych
  • Zarządzanie wieloma funkcjami powodującymi efekty uboczne
  • Zależności w postaci funkcji
  • Unikanie niepotrzebnego wykonywania funkcji powodującej efekty uboczne
  • Efekty uboczne i kod asynchroniczny
  • Reguły związane z haczykami
• Podsumowanie i najważniejsze informacje do zapamiętania
  • Co dalej?
  • Sprawdź swoją wiedzę!
• Zastosuj zdobytą wiedzę
  • Ćwiczenie 8.1. Tworzenie prostego bloga

ROZDZIAŁ 9. Na zapleczu Reacta i możliwości optymalizacji

• Wprowadzenie
• Jeszcze o przetwarzaniu i aktualizowaniu komponentów
  • Co się dzieje w momencie wywołania funkcji tworzącej komponent?
• Wirtualna wersja modelu DOM a rzeczywisty model DOM
  • Grupowanie zmian stanu
  • Unikanie niepotrzebnego wykonywania komponentów podrzędnych
  • Unikanie kosztownych obliczeń
  • Haczyk useCallback()
• Unikanie niepotrzebnego pobierania kodu
  • Zmniejszanie wielkości pakietów dzięki podziałowi kodu (i leniwemu wczytywaniu)
• Tryb strict
• Debugowanie kodu i narzędzia dla deweloperów Reacta
• Podsumowanie i najważniejsze informacje do zapamiętania
  • Co dalej?
  • Sprawdź swoją wiedzę!
• Zastosuj zdobytą wiedzę
  • Ćwiczenie 9.1. Optymalizowanie istniejącej aplikacji

ROZDZIAŁ 10. Praca ze złożonym stanem

• Wprowadzenie
• Problem ze stanem używanym dla kilku komponentów
• Korzystanie z kontekstu do zarządzania stanem używanym przez wiele komponentów
  • Udostępnianie wartości kontekstu i zarządzanie nimi
  • Używanie kontekstu w komponentach zagnieżdżonych
  • Zmiana kontekstu z poziomu komponentów zagnieżdżonych
  • Lepsze automatyczne uzupełnianie kodu
  • Kontekst czy przenoszenie stanu wyżej?
  • Przenoszenie logiki zarządzania kontekstem do odrębnych komponentów
  • Łączenie wielu kontekstów
• Ograniczenia funkcji useState()
• Zarządzanie stanem za pomocą haczyka useReducer()
  • Funkcje redukujące
  • Zgłaszanie operacji
• Podsumowanie i najważniejsze informacje do zapamiętania
  • Co dalej?
  • Sprawdź swoją wiedzę!
• Zastosuj zdobytą wiedzę
  • Ćwiczenie 10.1. Modyfikowanie aplikacji,
  • Ćwiczenie 10.2. Zastępowanie haczyka useState()

ROZDZIAŁ 11. Tworzenie niestandardowych haczyków Reacta

• Wprowadzenie
• Po co tworzyć niestandardowe haczyki?
  • Czym są niestandardowe haczyki?
  • Pierwszy niestandardowy haczyk
• Niestandardowe haczyki dają dużo swobody
  • Parametry w niestandardowych haczykach
  • Wartości zwracane przez niestandardowe haczyki
• Bardziej złożony przykład
• Podsumowanie i najważniejsze informacje do zapamiętania
  • Co dalej?
  • Sprawdź swoją wiedzę!
• Zastosuj zdobytą wiedzę
  • Ćwiczenie 11.1. Utwórz niestandardowy haczyk dla danych wejściowych z klawiatury

ROZDZIAŁ 12. Aplikacje wielostronicowe oparte na bibliotece React Router

• Wprowadzenie
• Jedna strona to za mało
• Rozpoczynanie pracy z pakietem React Router i definiowanie tras
  • Dodawanie nawigacji do strony
  • Od komponentu Link do komponentu NavLink
  • Komponenty Route a "zwykłe" komponenty
• Od tras statycznych do dynamicznych
  • Pobieranie parametrów trasy
  • Tworzenie dynamicznych odsyłaczy
  • Programowe nawigowanie po witrynie
• Przekierowania
  • Trasy zagnieżdżone
  • Obsługa niezdefiniowanych tras
  • Leniwe wczytywanie
• Podsumowanie i najważniejsze informacje do zapamiętania
  • Co dalej?
  • Sprawdź swoją wiedzę!
• Zastosuj zdobytą wiedzę
  • Ćwiczenie 12.1. Tworzenie prostej trzystronicowej witryny
  • Ćwiczenie 12.2. Wzbogacanie podstawowej witryny

ROZDZIAŁ 13. Zarządzanie danymi za pomocą biblioteki React Router

• Wprowadzenie
• Pobieranie danych i routing są ze sobą ściśle powiązane
  • Wysyłanie żądań HTTP bez biblioteki React Router
• Wczytywanie danych z użyciem biblioteki React Router
  • Włączanie dodatkowych mechanizmów biblioteki React Router
  • Wczytywanie danych na potrzeby tras dynamicznych
  • Funkcje wczytujące dane, żądania i kod po stronie klienta
• Jeszcze o układach stron
  • Ponowne używanie danych w trasach
• Obsługa błędów
• A teraz o przesyłaniu danych
  • Używanie funkcji action() i metody formData()
  • Zwracanie danych zamiast przekierowywania użytkownika
  • Kontrolowanie, które operacje mają być uruchamiane przez poszczególne elementy <Form>
  • Wyświetlanie obecnego stanu nawigacji
  • Programowe przesyłanie formularzy
  • Pobieranie i przesyłanie danych od kuchni
  • Odraczanie wczytywania danych
• Podsumowanie i najważniejsze informacje do zapamiętania
  • Co dalej?
  • Sprawdź swoją wiedzę!
• Zastosuj zdobytą wiedzę
  • Ćwiczenie 13.1. Aplikacja z listą zadań do wykonania

ROZDZIAŁ 14. Dalsze kroki i dodatkowe materiały

• Wprowadzenie
• Co teraz?
  • Ciekawe problemy do zbadania
  • Często używane i popularne biblioteki Reacta
  • Inne materiały
  • React umożliwia tworzenie nie tylko aplikacji internetowych
• Zakończenie

Dodatek

• Rozdział 2. Komponenty Reacta i składnia JSX
  • Ćwiczenie 2.1. Tworzenie aplikacji Reacta do zapisywania celów związanych z tą książką
  • Ćwiczenie 2.2. Tworzenie aplikacji Reacta do zapisywania celów związanych z tą książką
• Rozdział 3. Komponenty i propy
  • Ćwiczenie 3.1. Tworzenie aplikacji wyświetlającej Twoje cele związane z tą książką
• Rozdział 4. Praca ze zdarzeniami i stanem
  • Ćwiczenie 4.1. Tworzenie prostego kalkulatora
  • Ćwiczenie 4.2. Rozbudowywanie kalkulatora
• Rozdział 5. Wyświetlanie list i warunkowe wyświetlanie treści
  • Ćwiczenie 5.1. Warunkowe wyświetlanie komunikatu o błędzie
  • Ćwiczenie 5.2. Wyświetlanie listy produktów
• Rozdział 6. Dodawanie stylów do aplikacji Reacta
  • Ćwiczenie 6.1. Wyświetlanie informacji o poprawności danych wejściowych po przesłaniu formularza
  • Ćwiczenie 6.2. Używanie modułów CSS do ograniczania zasięgu stylów
• Rozdział 7. Portale i referencje
  • Ćwiczenie 7.1. Pobieranie wartości wejściowych od użytkownika
  • Ćwiczenie 7.2. Dodawanie menu bocznego
• Rozdział 8. Zarządzanie efektami ubocznymi
  • Ćwiczenie 8.1. Tworzenie prostego bloga
• Rozdział 9. Na zapleczu Reacta i możliwości optymalizacji
  • Ćwiczenie 9.1. Optymalizowanie istniejącej aplikacji
• Rozdział 10. Praca ze złożonym stanem
  • Ćwiczenie 10.1. Modyfikowanie aplikacji, aby używała API kontekstu
  • Ćwiczenie 10.2. Zastępowanie haczyka useState() haczykiem useReducer()
• Rozdział 11. Tworzenie niestandardowych haczyków Reacta
  • Ćwiczenie 11.1. Utwórz niestandardowy haczyk dla danych wejściowych z klawiatury
• Rozdział 12. Aplikacje wielostronicowe oparte na bibliotece React Router
  • Ćwiczenie 12.1. Tworzenie prostej trzystronicowej witryny
  • Ćwiczenie 12.2. Wzbogacanie podstawowej witryny
• Rozdział 13. Zarządzanie danymi za pomocą biblioteki React Router
  • Ćwiczenie 13.1. Aplikacja z listą zadań do wykonania

Odpowiedzi

• Rozdział 1.
• Rozdział 2.
• Rozdział 3.
• Rozdział 4.
• Rozdział 5.
• Rozdział 6.
• Rozdział 7.
• Rozdział 8.
• Rozdział 9.
• Rozdział 10.
• Rozdział 11.
• Rozdział 12.
• Rozdział 13.