Angular umożliwia stworzenie 2 rodzajów formularzy tzw. reaktywnych (reactive) oraz szablonowych (template-driven)

Reaktywne formularze -zapewniają bezpośredni dostęp do obiektów modelu. Są bardziej skalowalne i łatwiejsze w ponownym użytkowaniu. [forma walidacji: funkcja, przewidywalność: synchroniczna, model danych: ustrukturyzowany i niezmienny]

Szablonowe formularze - uzależnione są od dyrektyw w tworzeniu i manipulowaniu obiektu modelu …

@Input oraz @Output

1) przekazanie danych 'w dół' (od rodzica do dziecka)

@Input - Dekoratory pozwalające na rozbicie logiki aplikacji na mniejsze części/komponenty i komunikowanie się danymi pomiędzy nimi. Dekorator @Input można porównać do właściwość (property/props) komponentu w React tzn. pozwala na przekazanie do komponentu danych np.

// rodzic
<app …

Angular wprowadzenie

Angular opraty jest o TypeScript

Aplikacje budowane są z modułów, które składają się komponentów (w przypadku małej aplikacji może istnieć jeden moduł - root module). Każdy z komponentów składa się z klasy pisanej w TS oraz szablonu w HTML. Pierwszy z nich odpowiada za informacje, które powinny być widoczne …

Formularz

"Łapanie" formularza na 2 sposoby = poprzez odwołanie się do forms lub poprzez "klasyczne" selektory

const firstForm1 = document.forms[0]
const firstForm2 = document.querySelector("form")

Właściwości formularza (wybrane)

Użytkowanie

Link do biblioteki jQuery należy umieścić w sekcji head strony internetowej, w tym celu można wykorzystać dostępny kod (jQuery Core – All Versions) i przekopiować go do opracowywanego projektu lub wykorzystać link CDN

jQuery CDN – Latest Stable Versions

Składania

$ - znak dostępu do biblioteki jQuery

selektory (np. ) - przeszukują dokument w celu …

Bootstrap - jest biblioteką CSSwą Twittera, jej możliwości oparte są na 3 podstawowych cechach 1) responsywnym układzie (opartym na grid + flex) strony 2) na elementach, z których może powstać strona (np. formularze, komponenty(np. buttons, carousel, dropdowns, navs), oraz narzędziach(np. scrollspy, tooltips)) - stworzonych z html/css/js (dla v < 5 …

>>[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 …

Migracja z JS do TS

Przykład 1 - deklarowanie typów

1.1. Funkcja definiująca argumenty jako typ Number TS - podkreśli num2 w wywołaniu (res) ze względu na to, że nie spełnia zdefiniowanego typu number (po transpilacji w JS (TS jej nie zablokuje) problem nie będzie sygnalizowany i wynik będzie wynosił "12 …

Klasy w TypeScript nie różnią od klas w JS ES6

TS transpiluje do klasy jeśli wybrany jest standard ES6 lub nowszy albo do funkcja konstruktora dla ES5 i starszych (symuluje klasy choć jest funkcją (egzekucja podobna do klas))

Przykładowa klasa

constructor - funkcja wykonywana w trakcie inicjalizacji/tworzenia obiektu

class Droid …

Typy generyczne ("dynamiczne") wprowadzenie

Tablica w TS również jest typem (podobnie jak np. obiekt) i do tego generycznym (dopasowuje się do danych, które przechowuje)

const names: Array = [] // Array/ przedstawiony tutaj zapis faktycznie nie zostanie przyjęty przez TS, który będzie domagał się podania jakiegokolwiek typu np. any -> const names: any[] = [] ten …

Spis treści

* interface

* enum

* Funkcje jako typy

* Funkcje - zwracanie typów oraz 'void' & 'undefined'

TypeScript jest supersetem (nadzbiorem) JavaScript - oznacza to, że jest swego rodzaju "rozszerzeniem" JS posiadającym własne reguły (nowe możliwości) ale ulega kompilacji do JS.

TS wprowadza/charakteryzuje

1. Statyczne typowanie - kompilator sprawdza błędy przed wykonaniem kodu (jest to opcjonalne …

Docker - odtwarzanie/reprodukcja środowiska, wirtualizuje system operacyjny a nie hardware (jak np. virtual machine) -> docker tworzy "odizolowane mikrokomputery"

Docker-file - plan pozwalający na stworzenie docker-image/ tu znajduje się definicja środowiska (lista zależności) dla Docker-image

Docker-image - środowisko obsługujące docker-kontenerów/ niezmienne "snapshot" środowiska

Docker-Container - proces/pracujący (running process) Docker-imag'a

Podstawowe komendy

docker ps …

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 …