React i TypeScript. Reaktywne tworzenie stron internetowych dla początkujących. Wydanie 2 - ebook
React i TypeScript. Reaktywne tworzenie stron internetowych dla początkujących. Wydanie 2 - ebook
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
Kategoria: | Programowanie |
Zabezpieczenie: |
Watermark
|
ISBN: | 978-83-289-0771-3 |
Rozmiar pliku: | 9,8 MB |