包含使用與不使用 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 技術的學生
講師簡介
Maximilian Schwarzmüller 專業的 Web 開發者與講師 ( 更多講師主講課程介紹 )
作為 Web 開發人員的經驗
從13歲起，我不間斷地學習新的程式設計技巧和語言。 早期我只是因為好玩開始為朋友做網站。 這種熱情一直持續下去，並導致我成為一個自由的 Web 開發人員和顧問的決定。 我在這份工作上獲得的成功和樂趣很豐盛，也引燃並持續這份熱情。
我從後端的 Web 開發 ( PHP 的 Laravel、NodeJS ) 開始，漸漸也做越來越多的前端開發，在很多專案中使用 Angular 或 VueJS 2 等現代框架。 我現在兩個世界都愛！
作為一名自學的開發人員，我有機會通過攻讀工商管理碩士拓寬視野，也取得學位。 這使我能夠在一家重要的戰略諮詢公司和一家銀行工作。 這段時間大大提升了我的整體經驗和技能。
身為教練的經驗
由於自我學習成為專業人士的經驗，我真正了解在學習新知識或改進已知語言時的困難部分和難題。 這種背景和經驗使我能夠專注於最相關的關鍵概念和主題。 我有很多五星級的課程記錄，在 Udemy 有超過10萬名學生以及成功的 YouTube 頻道，是最好的證明。
無論是作為開發的指導員，還是工商管理教學，我都收到很好的反饋。 最有意義的經驗是看到人們因此找到新的、更好的工作、建立很棒的網路應用程式、獲取令人驚奇的專案，或只是在我的教學幫助下把開發網頁當成嗜好享受其中的樂趣。
英文字幕：有
- 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To
報名參加課程
也許你會有興趣
- 網頁前端開發學習地圖
- ★英語學習地圖 – 練好英文是最大的學習槓桿
- 如何找工作學習地圖 – 找工作不要靠運氣！
發表迴響