E-book details

React 17. Wzorce projektowe i najlepsze praktyki. Projektowanie i rozwijanie nowoczesnych aplikacji internetowych. Wydanie III

React 17. Wzorce projektowe i najlepsze praktyki. Projektowanie i rozwijanie nowoczesnych aplikacji internetowych. Wydanie III

Carlos Santana Roldán

Ebook

JavaScript pozwala na tworzenie znakomitego kodu, ale wymaga od programisty sporych umiejętności. Tworzenie nawet bardzo złożonych aplikacji jest jednak łatwiejsze dzięki dostępnym narzędziom. Szczególnym uznaniem cieszy się React - popularna biblioteka open source służąca do tworzenia dynamicznych aplikacji na bazie niewielkich komponentów wielokrotnego użytku. React jest narzędziem, które w stosunkowo prosty sposób pozwala w pełni skorzystać z możliwości nowoczesnych przeglądarek i urządzeń mobilnych.

To książka przeznaczona dla średnio zaawansowanych użytkowników biblioteki React, którzy chcą tworzyć elastyczniejsze i łatwiejsze w utrzymaniu aplikacje. Wyjaśniono tu sposób działania wewnętrznych mechanizmów biblioteki React. Zaprezentowano, jak należy budować komponenty możliwe do wielokrotnego użycia, jak projektować strukturę aplikacji, a także omówiono zasady tworzenia poprawnych formularzy. Opisano też procesy definiowania stylów dla komponentów biblioteki React, jak również ich optymalizowania w celu przyspieszenia aplikacji i zwiększenia ich responsywności. Nie zabrakło szczegółowego omówienia technik tworzenia zestawów efektywnych testów, ponadto znalazły się tutaj informacje na temat korzystania z takich narzędzi jak służący do testowania Enzyme, React Router czy ułatwiający ciągłą integrację CircleCI. Zdobywanie umiejętności niezbędnych do zbudowania działającej aplikacji ułatwiają liczne przykłady, wskazówki i fragmenty kodu.

W książce między innymi:

  • składniki biblioteki React, w tym Context API i React hooks
  • tworzenie i optymalizacja komponentów
  • stosowanie języka GraphQL w projektach
  • renderowanie po stronie serwera
  • tworzenie wydajnego zestawu testów
  • techniki optymalizacji komponentów

React: nowy wymiar efektywnego programowania aplikacji!

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
  • Title: React 17. Wzorce projektowe i najlepsze praktyki. Projektowanie i rozwijanie nowoczesnych aplikacji internetowych. Wydanie III
  • Author: Carlos Santana Roldán
  • Original title: React 17 Design Patterns and Best Practices: Design, build, and deploy production-ready web applications using industry-standard practices, 3rd Edition
  • Translation: Piotr Pilch
  • ISBN: 978-83-283-8746-1, 9788328387461
  • Date of issue: 2022-05-04
  • Format: Ebook
  • Item ID: rea173
  • Publisher: Helion