React zosta

Zobacz także:

• TypeScript i React. Kurs video. Tworzenie nowoczesnych komponent 129,00 zł, (51,60 zł -60%)
• Testowanie aplikacji w React.js. Kurs video. Praca z biblioteką Jest.js 69,00 zł, (27,60 zł -60%)
• React Redux. Kurs video. Praktyczny przewodnik 129,00 zł, (58,05 zł -55%)
• React Native. Kurs video. Zostań programistą aplikacji mobilnych 169,00 zł, (84,50 zł -50%)
• Frontend developer. Kurs video. React. Poziom podstawowy 129,00 zł, (64,50 zł -50%)

Spis treści

React i TypeScript. Reaktywne tworzenie stron internetowych dla początkujących. Wydanie II -- 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