React.createRef()/useRef

React.createRef() oraz hook useRef pozwala na dostęp do elementów drzewa DOM (faktycznego, a nie wirtualnego) w sposób bezpośredni

Dokumentacja Reacta wspomina o 3 głównych przypadkach, w których warto skorzystać z funkcji referencji - zarządzanie focusem, wyborem tekstu, uruchamianiem mediów - zarządzanie animacjami - integracja z bibliotekami (DOM) -> patrz: przekazywanie …

Wymagania wstępne: git, GitHub, Create React App, Node.js, NPM

Poniżej wypunktuje jak w prosty sposób można opublikować na GitHub-Pages swoją aplikację reactową stworzoną przy pomocy narzędzia Create React App

! W pierwszej kolejności warto ustawić środowisko Routera aby dopasowało się do hostującego środowiska (PUBLIC_URL zostanie podstawione przez ścieżkę absolutną folderu …

Jedną z moich ulubionych wtyczek w Gulpie/Webpacku bez wątpienia jest ta przy pomocy której jestem wstanie w szybki sposób dojść do tego, w którym pliku/linijce znajduje się frapująca mnie deklaracja stylu -> sourceMap

Wykorzystując opcję tworzenia aplikacji przy pomocy narzędzie Create React App nie mamy jednak możliwości skorzystania z …

Routing - "ścieżkowanie", rozpoznawanie na podstawie ścieżki zasobów jaki serwer może zwrócić, inaczej to określając jest procesem rozpoznawania zasobów serwera

React Router jest tzw high order component i dostarcza nam szereg innych komponentów, które można wykorzystać w trakcie tworzenia nawigacji tworzonej aplikacji

    HashRouter lub BrowserRouter - główny komponent "opakowujący" nawigację
    Route, - komponent …

Przy pomocy Create React APP oraz jednej komendy tworzymy repopozytorium z szkielet aplikacji, instalacją zależności oraz inicjalizujemy git

npx create-react-app <nazwa-aplikacji/projektu>

Jeśli chcemy wypushować do GitHuba to odwiedzamy własne konto tworzymy nowe repo nadajemy mu nazwę (licencję, readme i inne informacje pomijamy) następnie kopiujemy link do wypuszowania (wypchnięcia na …

Context API

Kontekst/Context API pozwala komponentowi na pozyskanie danych z kontekstu a nie przez props poprzez tworzenie globalnych danych dostępnych dla całości drzewa komponentu [innymi słowy uniknięcia sytuacji, w której przekazujemy informację do wielowarstwowo-zagnieżdżonego komponentu przez wiele pośredniczących komponentów (tzn. przez każdy poziom struktury)]. Na jakiego typu danych może …

props.children pozwala nam na tworzenie komponentów otwartych na uzupełniania nowym kodem, wystarczy wykorzystać {props.children} w ramach komponentu aby wskazać, w którym miejscu istnieje możliwość uzupełnienia/wstawienia kodu

Komponent otwarty na ew. rozszerzenia o nową treść

function TestComposition(props) {
  let {children} = props;
  return (<div>
      <h1>Test Kompozycji</h1>
      {children …

Warunkowe renderowanie pozwala na zmianie zachowania się komponentu w zależności od informacji zawartych w stanie komponentu lub w propsie. Jest parę prostych zasad, o których warto pamiętać w tym kontekście.

W zależności od złożoności sytuacji, w której chcemy wykorzystać warunkowe renderowanie możemy:

1) wykorzystać operator trójargumentowy w formie in-linowej walidacji …

W kontekście Reacta można stosować dwa rodzaje formularzy - tzw. kontorolowane i niekontorlowane

Formularze niekontorlowane to są te, których logika nie jest sterowana przy pomocy JS/Reacta innymi słowy, których dane nie są przechwytywane przez stworzone komponenty aplikacji -> przeciwieństwem tego podejścia są formularze kontrolowane

Stany ponad wszystko -> stan jako “wyłączne źródło …

Przekazywanie informacji pomiędzy komponentami

W React przekazywanie informacji pomiędzy komponentami odbywa się w dół -> od rodzica do dziecka (przy pomocy propsu), aby móc odwrócić ten proces należy w propsie przekazać referencję do funkcji modyfikującej stan rodzica i następnie wywołać ją w komponencie dziecka przekazując do niej odpowiedni argument - w ten …

Haki/Przyczepienia (hooks)

Hooki mogą być używane jedynie w komponentach funkcyjnych i pozwalają na przechowanie stanu pomiędzy kolejnymi wywołaniami funkcji zawartych w komponentach! Podstawowe dwa z nich pozwalają na wprowadzenie stanów (useState) podczas gdy inny pozwala na zarządzanie automatycznym zachowaniem się danego komponentu (useEffect) - kompensując brak funkcji znanych z komponentów …

Stateful components (komponenty ze stanami)

Stan (ang. state) jest miejscem przechowywania aktualnego stanu (wewnętrznego) komponentu Reacta - jest wykorzystywany gdy komponent wymaga aktualizacji (np. licznik, godzina, ukrywanie/pokazywanie części komponentu) -> dla przypomnienia: Props/Informacje przekazywane do komponentu nie ulegają zmianie w ramach niego (props przekazuje informacje z góry na dół - od …

Zdarzenia w React obsługiwane są w podobny sposób jak w HTML -> oznacza to, że inlinowo wpisywane są "nasłuchiwacze" (używając camelCase) do którego przekazywany jest atrybut w nawiasach klamrowych -> przekazywanie funkcji jako props

<button onClick={buttonClick}>Button</button>

Metoda, do której się odwołujemy poprzez atrybut może znaleźć swoje miejsca w ramach …

Wiele elementów można tworzyć na różne sposoby. W tym kontekście należy wspomnieć o kluczach (ang key), których przypisanie do poszczególnego elementu pozwala na wskazanie Reactowi, które z elementów są stabilne (nie uległy zmianie) - jeśli React sam znajdzie zmianę (bez stosowania klucza) uzna, że każdy kolejny element również został zmieniony usunie …

Aplikacje/strony tworzone przy pomocy Reacta składają się z komponentów. Komponenty tworzą strukturę aplikacji i są interaktywny - mogą przyjmować dane i na ich podstawie zwracać zmienione komponenty (tworzona są przy pomocy klas lub funkcji)

Komponenty są elementami strony, które się powtarzają i stanowią spójną całość, warto podzielić dany komponent na …

Konfiguracja środowiska

Inicjalizacja projektu

npm init -y

Przygotowanie Webpacka

npm i webpack@4 --save-dev
npm i webpack-cli@3 --save-dev
npm i webpack-dev-server --save-dev

Dodanie do package.json skrótu uruchamiającego webpack-serwer

"scripts": {
[..],
"start": "webpack-dev-server --hot -d"

},

Przygotowanie Babel (core/preset-env/loader) Babel loader pozwala na …