React 17 Wzorce projektowe i najlepsze praktyki Projektowanie i rozwijanie nowoczesnych aplikacji internetowych Legionowo

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! 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 O autorze: Carlos Santana Roldán od kilkunastu lat projektuje aplikacje internetowe, obecnie pracuje jako główny inżynier oprogramowania w firmie Snapchat. Jest twórcą serwisu http://js.education/, na którym publikuje materiały do nauki nowoczesnych technologii internetowych, takich jak React, Node.js, JavaScript i TypeScript.