React i TypeScript. Reaktywne tworzenie stron internetowych dla początkujących. Wydanie II Toszek

React został zaprojektowany specjalnie na potrzeby Facebooka, w celu tworzenia interfejsów graficznych aplikacji internetowych. Dzisiaj jest powszechnie używany do budowania front-endów interaktywnych UI. Z kolei TypeScript, język napisany przez Microsoft, stanowi rozszerzenie JavaScriptu i cechuje się bogatym systemem typów. Ułatwia to wczesne wykrywanie błędów i refaktoryzację kodu. React i TypeScript, używane razem, pozwalają na efektywne tworzenie dużych, zaawansowanych i łatwych w utrzymaniu front-endów. To drugie wydanie przewodnika dla programistów, którzy chcą efektywnie budować atrakcyjne złożone front-endy aplikacji. Uwzględniono tu nowe elementy Reacta 18, w tym hooki, biblioteki do zarządzania stanem, jak również najnowszą wersję języka TypeScript. Dzięki tej książce nauczysz się tworzyć przejrzyste i łatwe w utrzymaniu komponenty React, które mogą być wielokrotnie używane ... dobrze zorganizowane, bazujące na nowoczesnych wzorcach projektowych. Dowiesz się też, jak projektować bezpiecznie typowane komponenty, jak zarządzać złożonymi stanami, a także jak interaktywnie korzystać z web API GraphQL . Poznasz też metody pisania solidnych testów jednostkowych dla komponentów React za pomocą JEST. W książce między innymi: gruntowny wstęp do Reacta i wprowadzenie do TypeScriptu tworzenie komponentów Reacta wielokrotnego użytku stosowanie hooków Reacta czym jest web API REST i GraphQL zarządzanie stanem aplikacji tworzenie automatycznych testów komponentów React: efektywne narzędzie dla najlepszych projektantów! Spis treści: O autorze O korektorze merytorycznym Wprowadzenie CZĘŚĆ 1. Wprowadzenie Rozdział 1. Wprowadzenie do Reacta Wymagania techniczne Zalety biblioteki React JSX Tworzenie komponentu Tworzenie projektu w CodeSandboxie Punkt wejścia w Reaccie Drzewo komponentów Reacta Tworzenie podstawowego komponentu alertu Import i eksport Dlaczego moduły są ważne? Definiowanie modułów Korzystanie z importu Dodawanie komponentu Alert do komponentu App Korzystanie z propsów Propsy Dodawanie propsa do komponentu Alert Korzystanie ze stanów komponentu Koncepcja stanu Wprowadzanie stanu widoczności w komponencie Alert Dodawanie przycisku zamykania do komponentu Alert Korzystanie ze zdarzeń komponentu Koncepcja zdarzeń Implementacja funkcji obsługującej kliknięcie dla przycisku zamykania w alercie Implementacja zdarzenia zamykania alertu Podsumowanie Pytania Odpowiedzi Rozdział 2. Wprowadzenie do TypeScriptu Wymagania techniczne Zalety TypeScriptu Typy w TypeScripcie Wczesne wykrywanie błędów typów Zwiększenie komfortu i produktywności programisty za pomocą IntelliSense Typowanie w JavaScripcie Podstawy typowania w TypeScripcie Jak korzystać z adnotacji typów? Wnioskowanie typów Typ Date Typ any Typ unknown Typ void Typ never Tablice w TypeScripcie Tworzenie własnych typów w TypeScripcie Typy obiektów TypeScriptu Alias typu Tworzenie interfejsów Klasy Typ wyliczeniowy Unia Korzystanie z kompilatora TypeScriptu Podsumowanie Pytania Odpowiedzi Rozdział 3. Konfiguracja Reacta i TypeScriptu Wymagania techniczne Tworzenie projektu przy użyciu webpacka Poznaj webpacka Tworzenie struktury katalogów Tworzenie pliku package.json Dodawanie strony internetowej Wprowadzanie TypeScriptu Instalowanie Reacta Dodawanie Babla Dodawanie webpacka Tworzenie projektu za pomocą narzędzia Create React App Korzystanie z Create React App Integracja lintu z Visual Studio Code Formatowanie kodu Uruchamianie aplikacji w trybie deweloperskim Przygotowywanie wersji produkcyjnej Tworzenie komponentu w Reaccie i TypeScripcie Dodawanie typów do propsów Dodawanie typu dla stanu Korzystanie z narzędzia React DevTools Podsumowanie Pytania Odpowiedzi Rozdział 4. Korzystanie z hooków Reacta Wymagania techniczne Hook efektów Kluczowe aspekty hooka efektów Zasady stosowania hooków Czyszczenie po hooku efektów Tworzenie nowego projektu Pobieranie informacji przy użyciu hooka efektów Hooki stanów Użycie hooka useState Hook useReducer Użycie hooka useReducer Hook ref Koncepcja hooka ref Użycie hooka ref Hook memo Koncepcja hooka memo Użycie hooka memo Hook callback Koncepcja hooka callback Kiedy komponent jest renderowany ponownie? Użycie hooka callback Podsumowanie Pytania Odpowiedzi CZĘŚĆ 2. Podstawy tworzenia aplikacji Rozdział 5. Stylizacja interfejsów w Reaccie Wymagania techniczne CSS Tworzenie projektu Jak odnieść się do CSS? CSS w komponencie alertu Kolizje w CSS Moduły CSS Co to są moduły CSS? Zastosowanie modułów CSS w komponencie alertu CSS w JS Koncepcja CSS w JS Stosowanie Emotiona w komponencie alertu Tailwind CSS Co to jest Tailwind CSS? Jak zainstalować i ustawić narzędzie Tailwind CSS? Korzystanie z narzędzia Tailwind CSS Grafiki SVG Jak korzystać z SVG w Reaccie? Dodawanie SVG do alertu Podsumowanie Pytania Odpowiedzi Rozdział 6. Routing przy użyciu biblioteki React Router Wymagania techniczne Wprowadzenie do biblioteki React Router Tworzenie nowego projektu Co to jest React Router? Instalowanie biblioteki React Router Definiowanie tras Tworzenie strony z listą produktów Działanie routera w bibliotece React Router Deklarowanie trasy dla listy produktów Projektowanie nawigacji Korzystanie z komponentu Link Korzystanie z komponentu NavLink Praca z zagnieżdżonymi trasami Koncepcja zagnieżdżonych tras Zagnieżdżone trasy w aplikacji Parametry tras Czym są parametry tras? Stosowanie parametrów tras w aplikacji Tworzenie strony błędu Co warto wiedzieć o stronach błędu? Dodawanie strony błędu Praca z indeksowanymi trasami Koncepcja tras indeksowanych Wprowadzanie trasy indeksowanej do aplikacji Parametry wyszukiwania Koncepcja parametrów wyszukiwania Dodawanie funkcji wyszukiwania do aplikacji Nawigowanie programowe Nawigowanie za pomocą formularza Implementacja leniwego ładowania Jak działa leniwe ładowanie w Reaccie? Dodawanie leniwego ładowania strony administratora Podsumowanie Pytania Odpowiedzi Rozdział 7. Praca z formularzami Wymagania techniczne Pola kontrolowane Tworzenie projektu Tworzenie formularza kontaktowego Pola niekontrolowane Formularze z biblioteki React Router Natywna walidacja React Hook Form Działanie biblioteki React Hook Form Jak korzystać z biblioteki React Hook Form? Ustawianie walidacji Podsumowanie Pytania Odpowiedzi CZĘŚĆ 3. Dane Rozdział 8. Zarządzanie stanem w aplikacji Wymagania techniczne Tworzenie projektu Prop driling Kontekst w Reaccie Czym jest kontekst w Reaccie? Jak używać kontekstu w Reaccie? Redux Poznajmy Reduxa Instalowanie Reduxa Zastosowanie Reduxa Podsumowanie Pytania Odpowiedzi Rozdział 9. Praca z interfejsami RESTful API Wymagania techniczne Tworzenie projektu Konfiguracja projektu Budowa komponentów aplikacji Tworzenie REST API Interakcja z REST API przy użyciu hooka useEffect i funkcji fetch Pobieranie postów z użyciem funkcji fetch Silne określenie typu odpowiedzi Tworzenie komponentu listy postów Tworzenie komponentu strony wyświetlającej posty Przesyłanie danych przy użyciu funkcji fetch Dodawanie nowych postów za pomocą funkcji fetch Tworzenie komponentu formularza posta React Router Mechanizm ładowania danych w bibliotece React Router Ładowanie danych za pomocą biblioteki React Router Opóźnione ładowanie danych przez bibliotekę React Router React Query Instalowanie biblioteki React Query Dodawanie providera biblioteki React Query Pobieranie danych z biblioteki React Query Aktualizowanie danych przy użyciu biblioteki React Query Użycie biblioteki React Router z biblioteką React Query Podsumowanie Pytania Odpowiedzi Rozdział 10. Praca z API GraphQL Wymagania techniczne Składnia GraphQL Zwracanie prostych danych Zwracanie danych hierarchicznych Określanie parametrów zapytania Mutacje w GraphQL Przygotowanie projektu Tworzenie projektu Tworzenie tokena dostępu dla API GraphQL GitHuba Tworzenie zmiennych środowiskowych React Query z funkcją fetch Przygotowywanie nagłówka Budowa strony z repozytorium Praca z biblioteką Apollo Client Czym jest Apollo Client? Jak zainstalować bibliotekę Apollo Client? Modyfikowanie komponentu App Modyfikowanie strony z repozytorium Podsumowanie Pytania Odpowiedzi CZĘŚĆ 4. Zaawansowany React Rozdział 11. Komponenty wielokrotnego użytku Wymagania techniczne Tworzenie projektu Użycie generycznych propsów Co to są typy generyczne? Tworzenie prostej listy Zastosowanie rozprzestrzeniania propsów Użycie propsów renderujących Koncepcja wzorca propsów renderujących Dodawanie właściwości renderItem Funkcje zaznaczania Tworzenie własnych hooków Koncepcja własnych hooków Przenoszenie logiki pól wyboru do własnego hooka Kontrolowanie wewnętrznego stanu komponentu Jak kontrolować wewnętrzny stan komponentu? Kontrola checkedIds Podsumowanie Pytania Odpowiedzi Rozdział 12. Testy jednostkowe z użyciem frameworka Jest i biblioteki React Testing Library Wymagania techniczne Testowanie funkcji Testy za pomocą frameworka Jest Testowanie isChecked Testowanie wyjątków Uruchamianie testów Testowanie komponentów Testy za pomocą biblioteki React Testing Library Implementacja testów komponentu listy kontrolnej Stosowanie identyfikatorów testowych Symulowanie interakcji użytkowników Funkcja fireEvent i pakiet user-event Implementacja testów listy kontrolnej do sprawdzania elementów Pokrycie kodu testami Uruchamianie pokrycia kodu testami Raport pokrycia kodu Uzyskanie pełnego pokrycia komponentu listy kontrolnej Ignorowanie plików w raporcie pokrycia kodu Podsumowanie Pytania Odpowiedzi O autorze: Carl Rippon od ponad dwudziestu lat tworzy skomplikowane aplikacje biznesowe dla różnych branż. Ostatnie osiem lat poświęcił na budowanie aplikacji jednostronicowych przy użyciu szerokiej gamy technologii JavaScriptu, w tym Angulara, ReactJS i TypeScriptu. Prowadzi bloga, na którym porusza różnorodną tematykę z dziedziny technologii.