>>[Wstępny zarys/szkielet]<<

Tworzenie projektu przy pomocy CRA + instalacja ANTD

Ant Design jest biblioteką do stylowania komponentów Reactowych (współpracuje również z VUE oraz Angularem (NG-ZORRO)) utrzymywana przez Grupę Alibaba

Stworzenie projektu

npx create-react-app antd_form

Dodanie zależności -> antd

npm add antd

Zaimportowanie do App.js odpowiedniego komponentu oraz CSS do App …

Kolejnym sposobem na indywidualne stylowanie komponentów lub jego elementów w React są CSS Modules, który oparty jest na rozgraniczeniu warstwy CSS do osobnego pliku, następnie zaimportowania go do pliku zawierającego komponent i wykorzystywania tego importu (obiektu) w oparciu o przypisane do niego style, traktowane jako moduły.

W takim ujęciu style …

Styled components

Biblioteka styled components po wyrenderowaniu nadaje własne nazwy klas, a informację przechowuje w head dokumentu, nie jest to zatem styl inlinowy.

Instalacja

  npm i --save styled-components

1 - Import np. w App.js

import styled from 'styled-components'

2 - Użytkowanie odwołanie się do metod obiektu styled np. div, h1 etc …

"Fast 3kB React alternative with the same modern API. Components & Virtual DOM"

Preact reklamuje się jako lekka (3kb) alternatywa dla Reacta i jest uważany za bibliotekę, która renderuje Virtual-Dom w wyjątkowo, krótkim czasie.

Preact stawia na:

• wydajność (szybką)
• rozmiar (mały)
• efektywne wykorzystanie pamięci (wysoka)
• niski próg zrozumienia kodu
• zgodność z …

W poniższym poście zamieszczam linki przydane w procesie rekrutacji na Frontend'owca. Zebrane materiały zarówno omawiają wybrane zagadnienia jak i przedstawiają potencjalne pytania/zadania (oraz odpowiedzi/rozwiązania) jakie można spotkać w procesie rekrutacji na front-end developera.

CSS/HTML/JS...

Cracking the front-end interview

front-end-interview-handbook i wersja PL Podręcznik Frontend przygotowujący do …

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 …

Istotne pojęcia

Thunk jest innym słowem na funkcję, która jest zwrócona przez inną funkcję.

    function wrapper_function() {
            // >> to jest "thunk" ponieważ odracza wykonanie kodu na później:
            return function thunk() {   // >> anonimowa lub nazwana
            console.log('do stuff now');
            };
    }

W Reduxie akcje/actions są jedynie obiektami, z kolei reduktory/reducers są "czyste" (nie …

Poniżej przedstawię przykład (oraz kolejne kroki powstania) bardzo prostego projektu wykorzystującego stan kontrolowany przez Redux. Projekt bazuje na React (CRA).

1) Instalacja narzędzi/zależności

    npx create-react-app <nazwa_projektu>
    npm i redux react-redux

2) Struktura projektu (istotne pliki/te które są edytowane oraz które zostaną/ły dodane)

    {public}
    |
    |_ [...]
    {src}
        |
        |_ {actions …

Redux - kontener stanu

Redux jest biblioteką do zarządzania stanem dla całej aplikacji ("kontenerem stanu") w sposób ponadkomponentowy (współpracuje min. z Reactem oraz Angularem)

Istotnym znaczeniem Reduxa jest możliwość jasnego zdeklarowania sposoby zmiany globalnego stanu (store) [React sam w sobie nie zareagowałby na zmianę zmiennej].

Poniżej opiszę parę kluczowych pojęć do …

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 …