More

    Jak używać Web Components w Reactcie i Angularze

    Kontynuujemy temat użycia Web Components w budowaniu aplikacji. W tym wpisie przyjrzymy się ich zastosowaniu wraz z popularnymi frameworkami JS-wymi.

    W poprzednich artykułach zaznaczyłem, że jedną z korzyści, jakie dają nam Web Components, jest możliwość używania ich w różnych aplikacjach. Nie ma znaczenia, czy tworzymy projekt z użyciem czystego JS-a, czy korzystamy z któregoś z bardziej lub mniej popularnych frameworków. W tym wpisie pokażę, jak używać Web Components z Reactem i Angularem.

    Użycie Web Components w React

    Najpierw zajmiemy się zastosowaniem komponentów w Reactcie.

    Instalacja komponentu w aplikacji

    Na początku musimy utworzony przez nas Web Component dodać do aplikacji. W tym celu skorzystamy z error boxa, którego wcześniej opublikowaliśmy w NPM. Jest to komponent, który znamy już z poprzedniego wpisu na temat Web Components, gdzie opisywałem technologię Shadow DOM.

    Error box instalujemy za pomocą komendy:

    npm i @xkamis/error-box

    Ważne jest to, że sam error box na potrzeby użycia w Reactcie musiał zostać delikatnie zmodyfikowany. Jeśli chcemy używać naszego komponentu w tym frameworku, import stylów w HTML oraz samo pobranie pliku HTML za pomocą fetch niestety nie zadziała. Dlatego wszystko zostało zdefiniowane w jednym pliku JS poprzez zapisanie stylów oraz HTML-a za pomocą template string.

    Po instalacji error boxa, możemy już użyć komponentu w Reactcie. Całość kodu będzie wyglądała następująco:

    Wyświetlanie komponentu

    W tym momencie możemy już wyświetlić nasz komponent. W JSX wygląda to tak samo, jak w zwykłym HTML – argumenty określamy w ten sam sposób. Nasz komponent error box korzysta ze slotów, dlatego treść błędu przekazujemy wewnątrz error-box

    Używając Web Componentów musimy pamiętać o dwóch różnicach. Po pierwsze, jeśli chcemy określić klasę dla naszego komponentu, korzystamy ze standardowego argumentu class, a nie className, do którego jesteśmy przyzwyczajeni w Reactcie. Działa to w następujący sposób:

    Po drugie, co już można zauważyć w naszym kodzie, stworzone przez nas eventy wewnątrz komponentu nie będą przechwytywane przez zdefiniowanie odpowiedniej akcji w JSX. Zamiast tego, musimy użyć bardziej standardowego podejścia z addEventListener. W tym celu używamy ref, na którym dodajemy eventListener.

    Użycie Web Components wraz z Angularem

    Przejdźmy teraz do wykorzystania Web Componentów w Angulerze.

    Instalacja kompenentu

    Tak jak poprzednio, musimy rozpocząć od instalacji komponentu. W module, w którym chcemy użyć naszego komponentu, musimy go zaimportować. 

    Dodatkowo do tablicy schemas musimy dodać CUSTOM_ELEMENTS_SCHEMA zaimportowane z @angular/core. To pozwoli nam na używanie w tym module komponentów nie-angularowych, zapisanych z użyciem “-”, oraz argumentów komponentów zapisanych w ten sam sposób. W skrócie, pozwala nam to na używanie Custom Elements w Angularze. 

    Teraz już tylko pozostaje użyć naszego error boxa w komponencie Angulara – na przykładzie w AppComponent.

    Kod raczej nie wymaga żadnego komentarza. Warto jednak zauważyć, że w Angularze obsługa eventów pochodzących z Web Components jest standardowa dla Angulara.

    Podsumowanie

    W powyższej instrukcji pokazałem, w jaki sposób możemy używać Web Components w Reactcie i Angular. Takie ich zastosowanie pozwala na tworzenie uniwersalnych komponentów, których będziemy mogli użyć w dowolnej aplikacji. Myślę, że taka droga stanie się popularna, ponieważ umożliwia uzyskanie niezależności od frameworka i jednorazowe stworzenie uniwersalnych komponenty, których będzie można używać w wielu różnych aplikacjach, zamiast tworzyć je za każdym razem od nowa.

    Kamil Wilk
    Programowanie to jego pasja. Zaczynał jako samouk, poświęcił dużo czasu na własny rozwój. Obecnie pracuje w dużej korporacji jako Front-end Developer, ale back-end w JavaScript nie jest mu obcy. Nie boi się trudnych wyzwań w swojej karierze. Na bieżąco stara się śledzić nowości w branży. Lubi wyszukiwać ciekawostki ze świata dev.

    Latest articles

    Automatyzacja z Pythonem – pobieranie kolekcji filmów z YouTube

    Automatyzacja czynności, które są czasochłonne, to według mnie największa zaleta nauki programowania. Często zadania wymagające od nas klikania, czekania i przepisywania captchy...

    Programowanie funkcyjne w JS

    Jeśli bierzesz udział w rozmowach rekrutacyjnych na stanowisko regular lub senior developera, to pewnie niejednokrotnie miałeś lub miałaś do czynienia z takimi...

    Własny plugin do Figmy w React.js

    Jeśli udało Ci się kiedykolwiek pracować z Figmą, istnieje spora szansa, że narzędzie przypadło Ci do gustu. Tak przynajmniej było w moim...

    Wykorzystanie Virtual DOM na przykładzie Reacta

    Virtual DOM to bardzo popularne rozwiązanie znane z Reacta. Co to dokładnie jest? W jaki sposób działa w Reactcie? O tym opowie...

    Leave a reply

    Please enter your comment!
    Please enter your name here

    Related articles

    X