К содержанию

Podstawowy samouczek React

Samouczek dotyczący frameworka JavaScript React. Dla początkujących. Dużo teorii i zadań.

Уроки

Wprowadzenie do frameworka React

Instalacja frameworka React

Podłączenie wtyczki react-devtools

Wprowadzenie do podejścia komponentowego w React

Makieta strony frameworka React

Rezultat działania komponentu

Język JSX

Wprowadzenie do języka JSX w React

Zwracanie zagnieżdżonych tagów JSX przez funkcje

Zasady zwracania przez funkcję przy przenoszeniu tagu w dół w JSX

Specyfika zwracania wielu tagów w JSX

Zwracanie niezamkniętego tagu JSX

Zwracanie pustego znacznika przez funkcję w JSX

Wstawianie wartości zmiennych i stałych w JSX

Niuanse przy wstawianiu wartości zmiennych

Wstawianie tablic w JSX

Wstawianie obiektów w JSX

Wstawianie zmiennych i stałych do atrybutów tagów w JSX

Przechowywanie tagów w zmiennych i stałych JSX

Specyfika przechowywania wielu tagów w stałych JSX

Znaczniki na różnych liniach w JSX

Zwracanie znaczników przez return w JSX

Zamykanie tagów JSX

Poprawność składni w React

Wykonywanie kodu JavaScript

Warunki

Zastosowanie warunków w JSX

Renderowanie warunkowe w React

Warunki zwracania znacznika w JSX

Operator trójargumentowy w JSX

Użycie operatora && w JSX

Inwersja dla skróconych warunków w JSX

Funkcje

Używanie funkcji w React

Wywoływanie funkcji wewnątrz znaczników w React

Obsługa zdarzeń w JSX

Parametry w funkcji JSX

Obiekt Event w React

Obiekt Event przy przekazywaniu parametrów

Tworzenie znaczników

Znaczniki w tablicach JSX

Tworzenie tablicy tagów w pętli React

Tworzenie tagów z tablicy danych w React

Unikalne klucze w tablicy tagów w React

Wyświetlanie tablicy obiektów w React

Unikalne klucze przez id w React

Wyświetlanie tablicy obiektów jako tabeli HTML w React

Unikalne id

Dyskusja na temat unikalnych id w React

Problemy z nowymi id w React

Losowe ciągi znaków dla id w React

Generowanie id w React

Funkcja do generowania id w React

Użycie funkcji id w React

Nieprawidłowe użycie funkcji id w React

Stany

Wprowadzenie do stanów w React

Używanie stanów w React

Reaktywność stanów w React

Wartość logiczna w stanie w React

Licznik na stanach w React

Formularze

Praca z inputami w React

Zmiana danych wejściowych przy ich wyświetlaniu w React

Modyfikowanie danych za pomocą funkcji w React

Praca z wieloma inputami w React

Przetwarzanie danych formularza po kliknięciu przycisku w React

Praca z textarea w React

Praca z checkbox w React

Checkboxy i renderowanie warunkowe w React

Praca z select w React

Elementy select z tablicy w React

Atrybuty value w selektorze w React

Atrybuty value select z tablicy w React

Praca z radio w React

Wartości domyślne w React

Powiązanie inputów z tablicą w React

Powiązanie inputów z obiektem w React

Dane

Reaktywność danych w React

Reaktywne dodawanie do tablicy w React

Reaktywne operacje na tablicach w React

Reaktywne dodawanie do tablicy obiektów w React

Reaktywne operacje na tablicach obiektów w React

Reaktywne wyświetlanie danych w React

Komponenty

Wprowadzenie do komponentów React

Używanie komponentów w React

Wiele instancji komponentu w React

Propsy komponentów w React

Tworzenie komponentów potomnych w React

Tablica do tworzenia komponentów potomnych w React

Komponenty potomne w pętli React

Przekazywanie stanów do komponentów potomnych w React

Przekazywanie id do komponentu w React

Zmiana stanu rodzica w komponencie potomnym w React

Edycja stanu rodzica w komponencie potomnym w React

Edycja stanu w komponencie wnuka w React

Tryby pracy przez stany komponentów potomnych w React

Koncepcje

Koncepcje React przy pracy z komponentami

Dane komponentów w React

Typy komponentów w React

Jednokierunkowy przepływ danych w React

Podnoszenie stanu w React

Jedno źródło prawdy w React

Stylizacja

Metody stylowania komponentów React

Używanie globalnego CSS do stylowania w React

Wstawianie danych do atrybutu style z obiektu w React

Wstawianie danych do atrybutu style z osobnego pliku w React

Praca ze stylami CSS w atrybucie style w React

Wstawianie danych do atrybutu style ze zmiennych w React

Stylizacja za pomocą Styled Components w React

Używanie propsów ze Styled Components w React

Wykorzystanie props w renderowaniu warunkowym ze Styled Components w React

Zaawansowane stylowanie komponentów w React

Rozpoczęcie nauki stylowania z CSS modules w React

Kontynuacja nauki stylizacji z modułami CSS w React

Reguła composes dla klas w CSS modules w React

Dyrektywa composes dla plików w CSS modules w React

Projekty

Projekt Checklista w React

Projekt Notatnik w React