REACT 17 WZORCE PROJEKTOWE I NAJLEPSZE PRAKTYKI W.3

Spis treści

O autorze

O korektorach merytorycznych

Przedmowa

Część I. Witaj, React!

Rozdział 1. Pierwsze kroki z biblioteką React

• Wymagania techniczne
• Różnica między programowaniem imperatywnym i deklaratywnym
• Sposób działania elementów biblioteki React
• Zapomnieć o wszystkim
• Problem znużenia kodem w JavaScripcie
• Wprowadzenie do języka TypeScript
  • Elementy języka TypeScript
  • Przekształcanie kodu w JavaScripcie w kod w TypeScripcie
  • Typy
  • Interfejsy
• Podsumowanie

Rozdział 2. Czyszczenie kodu

• Wymagania techniczne
• Zastosowanie składni JSX
  • Babel 7
  • Tworzenie pierwszego elementu
  • Elementy modelu DOM i komponenty biblioteki React
  • Własności
  • Elementy potomne
  • Różnice względem języka HTML
  • Atrybuty rozwinięcia
  • Literały szablonów
  • Typowe wzorce
• Określanie stylu kodu
  • EditorConfig
  • Prettier
  • ESLint
• Programowanie funkcyjne
  • Funkcje pierwszoklasowe
  • Czystość
  • Niezmienność
  • Rozwijanie funkcji
  • Kompozycja
  • Programowanie funkcyjne i interfejsy użytkownika
• Podsumowanie

Część II. Działanie biblioteki React

Rozdział 3. React Hooks

• Wymagania techniczne
• Wprowadzanie do dodatku React Hooks
  • Bez przełomowych zmian
  • Zastosowanie funkcji Hook useState
  • Reguły funkcji Hook
• Migracja komponentu klasowego pod kątem użycia dodatku React Hooks
• Efekty biblioteki React
  • Funkcja Hook useEffect
  • Warunkowe aktywowanie efektu
• Funkcje useCallback, useMemo i memo
  • Zapamiętywanie komponentu za pomocą funkcji memo
  • Zapamiętywanie wartości za pomocą funkcji useMemo
  • Zapamiętywanie definicji funkcji za pomocą funkcji useCallback
  • Zapamiętywanie funkcji przekazanej jako argument funkcji useEffect
• Funkcja Hook useReducer
• Podsumowanie

Rozdział 4. Przegląd popularnych wzorców kompozycji

• Wymagania techniczne
• Zapewnienie komunikacji między komponentami
  • Zastosowanie własności children
• Wzorce kontenerowe i prezentacyjne
• Komponenty wyższego rzędu
• Komponent FunctionAsChild
• Podsumowanie

Rozdział 5. Omówienie języka GraphQL na przykładzie rzeczywistego projektu

• Wymagania techniczne
• Instalowanie systemu baz danych PostgreSQL
  • Najlepsze narzędzia do zarządzania bazą danych PostgreSQL
• Tworzenie pliku .env i plików konfiguracyjnych
  • Konfigurowanie pliku .env
  • Tworzenie podstawowego pliku konfiguracyjnego
• Konfigurowanie serwera Apollo Server
• Definiowanie typów, zapytań i przekształceń języka GraphQL
  • Zapytania
  • Przekształcenia
• Scalanie definicji typów
• Tworzenie resolverów
  • Tworzenie zapytania getUsers
  • Tworzenie zapytania getUserData
  • Tworzenie przekształceń
• Scalanie resolverów
• Tworzenie modeli narzędzia Sequelize
• Nawiązywanie połączenia przez narzędzie Sequelize z bazą danych PostgreSQL
• Funkcje uwierzytelniania
  • Czym jest standard JSON Web Token?
  • Funkcje JWT
  • Tworzenie funkcji uwierzytelniania
  • Typy i interfejsy
• Uruchamianie projektu po raz pierwszy
• Testowanie zapytań i przekształceń języka GraphQL
  • Sprawdzanie poprawności
• Wykonywanie operacji logowania
• Tworzenie interfejsowego systemu logowania z wykorzystaniem klienta Apollo
  • Konfigurowanie narzędzia Webpack 5
  • Konfigurowanie interpretera języka TypeScript
  • Konfigurowanie serwera Express
  • Tworzenie konfiguracji interfejsu
  • Tworzenie elementu pośredniczącego użytkownika
  • Tworzenie funkcji tokenów JWT
  • Tworzenie zapytań i przekształceń języka GraphQL
  • Tworzenie kontekstu użytkownika do obsługi operacji logowania i połączonego użytkownika
  • Konfigurowanie klienta Apollo Client
  • Tworzenie ścieżek aplikacji
  • Tworzenie stron
  • Tworzenie komponentów procesu logowania
  • Tworzenie komponentów panelu sterowania
  • Testowanie systemu logowania
• Podsumowanie

Rozdział 6. Zarządzanie danymi

• Wymagania techniczne
• Wprowadzenie do składnika React Context API
  • Tworzenie pierwszego kontekstu
  • Opakowywanie komponentów za pomocą dostawcy
  • Korzystanie z kontekstu za pomocą funkcji useContext
• Wprowadzenie do stosowania składnika React Suspense z wykorzystaniem biblioteki SWR
  • Wprowadzenie do biblioteki SWR
  • Budowanie aplikacji Pokedex!
  • Testowanie składnika React Suspense
• Podsumowanie

Rozdział 7. Tworzenie kodu dla przeglądarki

• Wymagania techniczne
• Zastosowanie formularzy
  • Komponenty niekontrolowane
  • Komponenty kontrolowane
• Obsługa zdarzeń
• Referencje
• Implementowanie animacji
  • React Motion
• Format SVG
• Podsumowanie

Część III. Wydajność, ulepszenia i środowisko produkcyjne

Rozdział 8. Zapewnianie ładnego wyglądu komponentów

• Wymagania techniczne
• Style CSS w kodzie w JavaScripcie
• Zastosowanie stylów lokalnych
• Biblioteka Radium
• Zastosowanie modułów stylów CSS
  • Webpack 5
  • Przygotowywanie projektu
  • Style CSS o zasięgu lokalnym
  • Moduły Atomic CSS
  • Moduły CSS biblioteki React
• Zastosowanie biblioteki styled-components
• Podsumowanie

Rozdział 9. Renderowanie serwerowe dla zabawy i zarobku

• Wymagania techniczne
• Uniwersalne aplikacje
• Powody implementowania opcji SSR
  • Implementowanie optymalizacji pod kątem wyszukiwarki internetowej
  • Wspólna baza kodu
  • Lepsza wydajność
  • Nie lekceważ złożoności
• Tworzenie prostego przykładu użycia opcji SSR
• Implementowanie pobierania danych
• Zastosowanie środowiska Next.js do tworzenia aplikacji opartych na bibliotece React
• Podsumowanie

Rozdział 10. Zwiększanie wydajności aplikacji

• Wymagania techniczne
• Uzgadnianie
• Klucze
• Techniki optymalizacji
• Narzędzia i biblioteki
  • Niezmienność
  • Dodatki narzędzia Babel
• Podsumowanie

Rozdział 11. Testowanie i debugowanie

• Wymagania techniczne
• Korzyści wynikające z testowania
• Bezproblemowe testowanie kodu w JavaScripcie za pomocą środowiska Jest
• Testowanie zdarzeń
• Zastosowanie rozszerzenia React DevTools
• Stosowanie rozszerzenia Redux DevTools
• Podsumowanie

Rozdział 12. React Router

• Wymagania techniczne
• Instalowanie i konfigurowanie biblioteki React Router
• Tworzenie sekcji
• Dodawanie parametrów do ścieżek
• Podsumowanie

Rozdział 13. Antywzorce, jakich należy unikać

• Wymagania techniczne
• Inicjalizowanie stanu za pomocą właściwości
• Stosowanie indeksów jako klucza
• Rozmieszczanie właściwości w elementach modelu DOM
• Podsumowanie

Rozdział 14. Wdrażanie aplikacji w środowisku produkcyjnym

• Wymagania techniczne
• Tworzenie pierwszego Dropletu usługi DigitalOcean
  • Rejestrowanie w usłudze DigitalOcean
  • Tworzenie pierwszego Dropletu
  • Instalowanie środowiska Node.js
  • Konfigurowanie serwisów Git i GitHub
  • Wyłączanie Dropletu
• Konfigurowanie serwera nginx, narzędzia PM2 i domeny
  • Instalowanie i konfigurowanie serwera nginx
  • Konfigurowanie serwera odwrotnego proxy
  • Dodawanie domeny do Dropletu
• Implementowanie narzędzia CircleCI do zapewnienia ciągłej integracji
  • Dodawanie klucza SSH do narzędzia CircleCI
  • Konfigurowanie narzędzia CircleCI
  • Tworzenie zmiennych środowiskowych w narzędziu CircleCI
• Podsumowanie

Rozdział 15. Kolejne kroki

• Wymagania techniczne
• Uczestniczenie w rozwoju biblioteki React
• Dystrybucja kodu
  • Znajomość najlepszych praktyk związanych z publikowaniem kodu open source
• Publikowanie pakietu za pomocą narzędzia npm
• Podsumowanie