Web 元件與 Stencil.js - 建立自訂的 HTML 元素

包含使用與不使用 StencilJS 如何建構自訂 HTML 元素 / Web 元件的完整介紹

從這 8.5 小時的課程，你會學到

建構可重用的 HTML 元素，運用到自己的專案，或者共享這些元素給其他開發人員
克服內建 HTML 元素的侷限 – 只使用 HTML、 CSS 和 JavaScript 賦予的元素

要求

需要具備基本的 JavaScript 知識( 基本語法、 DOM 基礎、物件基礎)
Es6 + JavaScript 知識( classes 等)將有幫助，但不是必備的

課程說明

讓我們面對現實: 你有成千上萬的 HTML 標籤( tags )可以選擇，但是一些真正有用的 (<tabs>, <side-drawer>, <modal>, …) 卻不見了。

如果你可以建構自己的 HTML 標籤( tags )？

如果不用像 Angular 這樣的框架、如 React 這樣的程式庫或者通用的 JavaScript 專家知識，只需要一個神奇的原生 javascript 功能，稱為 “Web 元件” (或”自訂 HTML 元素”)。

Web 元件是嵌入到瀏覽器中的各種規格的組合。開始使用這些功能是一件輕而易舉的事情，你將很快就能夠建構自己的強大和可重用的功能 (甚至在整個專案中) 自訂 HTML 元素。

這樣的自訂元素不會取代 Angular、 React 或 Vue – 相反地，你可以在任何 Web 專案中輕鬆地使用它們，包括使用這些框架或程式庫的專案。

在本課程中，你將從頭學習這個技術

但我們不會在此止步。雖然起步相當容易，但是建立更復雜的元件將更加困難。Stencil.js 是一個工具，它通過使用諸如 TypeScript 和 JSX (不知道嗎? 別擔心，你會在課程中學到的!) 這樣的現代功能，使得建立這樣的原生 Web 元件變得更加容易。

具體來說，在本課程中，你將學到:

如何建構具有原生瀏覽器功能的可重用、輕量級自訂的 HTML 元素
如何建立所有複雜的網頁元件 – 從一個簡單的工具提示( tooltip )到模型或側抽( side drawers )
如何傳遞資料到你自己的網路元件，並於其使用
如何發出你自己的定製的多個事件，可以在 JavaScript 中監聽
如何使用 Shadow DOM 將 CSS 樣式作用於自訂元素
如何使用 Stencil.js 使開發工作流更加容易
如何使用 Stencil.js 提供的許多功能來更有效地建構原生 Web 元件
如何在任何專案中佈署 / 重用你自己的Ｗeb 元件，即使這些專案有使用任何 JavaScript 框架或程式庫，如 Angular、 React 或 Vue (或者根本都沒有用到 !)

先決條件:

基本的 JavaScript 知識是必備的
Javascript 知識( const、let、classes、…)是強烈推薦的，但不是嚴格要求的 – 課程中提供了這部分簡介以供複習
不需要 JavaScript 框架知識(例如，Angular，React，Vue)
不需要 TypeScript 或 JSX 知識

讓我們一起探索這項令人興奮的技術吧！

目標受眾

每個有興趣建構自訂 HTML 標籤的人！
希望深入瞭解可用於任何 Web 應用程式的未來性 Web 技術的學生

講師簡介

Academind by Maximilian Schwarzmüller 線上教育

將課程和成功講師的專業知識結合，Academind 致力於提供高品質的線上教育。

運用線上教育幫助人們在現實生活中成功——是 Academind 所主張的。以有趣且引人入勝的方式學習 Web 開發、資料分析等主題。

我們已經為超過 3,000,000 名學生教授過各種各樣的主題。我們也很樂意教你！

保持學習！

Maximilian Schwarzmüller AWS 認證、專業 Web 開發人員和講師更多講師主講課程介紹

作為（Web）開發人員的經驗

從 12 歲開始，我從未停止學習新的程式設計技能和語言。我很早就開始為朋友創建網站，也只是為了好玩。除了 Web 開發之外，我還探索了 Python 和其他非 Web 語言。這種熱情一直持續至今，並促使我決定成為自由網路開發人員和顧問。我在這份工作中獲得的成功和樂趣是巨大的，並且真正讓我的熱情永遠燃燒。

從後端開始 Web 開發（PHP 與 Laravel、NodeJS、Python），我也越來越成為在許多專案中使用 React、Angular 或 VueJS 等現代框架的前端開發人員。我現在喜歡兩個世界！

我還建立了全棧應用程式並獲得了專業的 DevOps 和雲端運算知識 – 我持有的許多 AWS 認證（包括頂級解決方案架構師專業認證）證明了這一點。

作為一名自學成才的開發人員，我有機會透過學習工商管理來拓寬我的視野，並獲得碩士學位。這使我能夠在一家大型策略諮詢公司和一家銀行工作。在了解到我比這些領域更享受發展的同時，在這個領域的時間大大提高了我的整體經驗和技能。

擔任講師的經驗

作為一名自學成才的專業人士，我確實知道學習新語言或改進已知語言時的困難部分和困難主題。這種背景和經驗使我能夠專注於最相關的關鍵概念和主題。我在 Udemy 上擁有許多 5 星級課程和超過 2,000,000 名學生的記錄就是最好的證明。

無論是擔任發展講師還是教授工商管理，我總是收到很好的回饋。最有價值的體驗是看到人們如何在我的內容的幫助下找到新的、更好的工作，構建出色的網絡應用程序，獲得令人驚嘆的項目或只是享受他們的愛好。

我與 Manuel Lorenz 一起創立了 Academind，為我們超過 3,000,000 名學生提供盡可能最好的學習體驗。

英文字幕：有

想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To

Udemy 永久擁有課程許多課程約 NT400(點擊連結看更多)
✨年訂閱每月 NT350(再享特別優惠：年度訂閱首年享 25% 折扣) 🌈 悠遊 Udemy 的 26000+ 門課，最大化學習 ( 原價 NT635/月 )
Udemy 現在越來越多課程有中文字幕，請參考 Soft & Share 中文線上課程
手機上點選優惠連結看到的價格比電腦上看到的貴
＄代表當地貨幣, 如在台灣為 NT
點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上，請稍等刷新或重新點選就會出現