Własne komponenty internetowe i Stencil.js: Tworzenie elementów HTML wielokrotnego użytku

Twórz niezależne od platformy, wielokrotnego użytku niestandardowe tagi HTML za pomocą natywnych interfejsów API przeglądarki i Stencil.js, aby usprawnić proces tworzenia stron internetowych w dowolnej nowoczesnej platformie.

4.9 (3,920) ⏱ 1 godz 54 min 📚 6 lekcji

O tym kursie

Standardowe znaczniki HTML są bardzo funkcjonalne, ale nowoczesne układy stron internetowych często wymagają specjalistycznych elementów interfejsu, takich jak niestandardowe zakładki, modale lub boczne szuflady, które nie istnieją w stanie gotowym.Komponenty internetowe rozwiązują ten problem, umożliwiając tworzenie własnych niestandardowych elementów HTML natywnie, dzięki czemu kod interfejsu użytkownika można wielokrotnie wykorzystywać w różnych projektach i konfiguracjach. W tym kursie tekstowym przejdziesz od pisania standardowych znaczników do projektowania własnych, solidnych, hermetyzowanych elementów niestandardowych.Zrozumiesz, jak wykorzystać natywne technologie przeglądarki wraz z Stencil.js, aby skompilować wysoce wydajne, zgodne ze standardami komponenty, które działają bezproblemowo w zwykłym JavaScript lub w dowolnej głównej strukturze. Czego się nauczysz: - Zapoznaj się z podstawowymi specyfikacjami natywnych komponentów internetowych, w tym elementów niestandardowych, Shadow DOM i szablonów HTML. - Twórz w pełni hermetyzowane, izolowane stylem niestandardowe tagi, które nie są sprzeczne z resztą CSS aplikacji. - Zarządzaj stanem komponentu, przesyłaj dane za pomocą atrybutów i komunikuj zmiany za pomocą niestandardowych zdarzeń. - Zastosuj najlepsze praktyki dotyczące dostępności, w tym role ARIA i zarządzanie fokusem, aby zapewnić, że elementy niestandardowe są użyteczne dla wszystkich. - Wykorzystaj Stencil.js, aby przyspieszyć rozwój za pomocą TypeScript, JSX i wydajnego reaktywnego wiązania danych. - Zintegruj i wdrażaj niestandardowe elementy w dowolnej nowoczesnej aplikacji lub strukturze internetowej. Zaczniesz od zbadania podstawowych definicji i natywnych interfejsów API, które zasilają niestandardowe elementy, zanim przejdziesz do zaawansowanych przepływów pracy za pomocą Stencil.js.Dzięki jasnym pisemnym wyjaśnieniom i praktycznym fragmentom kodu nauczysz się struktury, stylu i wysyłania gotowych do produkcji komponentów. Ten kurs jest przeznaczony dla programistów i projektantów stron internetowych, którzy chcą budować modułowe interfejsy użytkownika; podstawowa znajomość HTML, CSS i wprowadzający JavaScript to wszystko, czego potrzebujesz, aby rozpocząć. Zacznij czytać już dziś, aby opanować przyszłość modułowego tworzenia stron internetowych.

Co otrzymasz

  • 📜 Certyfikat ukończenia
    Dodaj do profilu LinkedIn
  • 💬 Personal AI tutor
    Stuck on a lesson? Ask your built-in tutor anything, any time.
  • ♾️ Dożywotni dostęp
    Wracaj, kiedy chcesz — bez wygaśnięcia
  • 📱 Telefon lub komputer
    Działa wszędzie, na każdym urządzeniu
  • 💸 Zwrot w 30 dni
    Bez pytań
  • Krótko i konkretnie
    1 godz 54 min praktycznej treści

Recenzje (7)

Despina Nikolaidou GR
★ 4 · 2025-10-21T17:44:52+00:00

Really enjoyed the flow of this. The examples were spot on and helped me grasp the material quickly. Great value.

Stefan Pretorius ZA Zweryfikowany kursant
★ 4 · 2025-09-05T21:13:52+00:00

Solidna treść tutaj. Chociaż kilka modułów mogło być bardziej szczegółowych, ogólna wartość i zastosowanie są wysokie.

Noah Johnson AU Zweryfikowany kursant
★ 4 · 2025-08-23T06:36:52+00:00

Fantastic resource! The examples were super clear and really helped solidify the concepts. Definitely worth the time invested.

Ana Silva PT Zweryfikowany kursant
★ 5 · 2025-06-14T20:52:52+00:00

I'm so glad I took this. The way concepts were broken down made it super accessible. Great value for the effort.

Emma Ruiz UY Zweryfikowany kursant
★ 3 · 2025-02-18T12:45:52+00:00

Found it useful for a refresher. Not sure it would be the best starting point for a complete beginner, tbh.

Leonardo De Luca IT
★ 3 · 2025-01-02T23:07:52+00:00

Solid content and presented clearly. I appreciated the real-world applications shown. Could have used a few more practice opportunities.

Romain Michel MC Zweryfikowany kursant
★ 3 · 2024-12-21T02:35:52+00:00

It's a decent introduction. Could benefit from more diverse examples and a slightly better flow between modules.

Napisz recenzję

Po wysłaniu poprosimy o zalogowanie — szkic zostanie zapisany.

Inni uczyli się też

Najczęstsze pytania

Czego potrzebuję, by wziąć udział w tym kursie? +

Wystarczy telefon lub komputer z internetem. Bez instalacji i specjalnego sprzętu.

Jak zapłacić? +

Kartą przez Stripe lub kryptowalutą. Nie przechowujemy danych karty — robi to bezpiecznie Stripe.

Czy mogę otrzymać zwrot? +

Tak — pełen zwrot w 30 dni, bez pytań.

Jak długo będę mieć dostęp? +

Na zawsze. Po zakupie kurs jest twój — wracaj, kiedy chcesz.

Czy dostanę certyfikat? +

Tak. Po ukończeniu otrzymasz certyfikat, który możesz dodać do profilu LinkedIn.

Stworzony dla uczących się w
IT Design Finanse Marketing Ochrona zdrowia Edukacja Hotelarstwo Produkcja