|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/web-components-stenciljs-build-custom-html-elements/
课程评论：没有评论
该Coursera课程“Web Components & Stencil.js - 构建自定义HTML元素”旨在教您如何使用原生浏览器功能和Stencil.js工具来创建可重用、轻量级的自定义HTML元素。 **课程亮点：** * **原生Web Components入门：** 学习如何利用浏览器内置的Web Components规范，无需依赖任何JavaScript框架或库，即可创建自己的HTML标签。 * **构建从简单到复杂的组件：** 能够从零开始，创建各种复杂度的Web Components，包括工具提示、模态框或侧边抽屉等。 * **数据传递与事件处理：** 掌握如何将数据传入自定义元素，以及如何触发自定义事件供JavaScript监听。 * **Shadow DOM的应用：** 学习使用Shadow DOM来隔离CSS样式，确保自定义元素的样式不会影响页面其他部分。 * **Stencil.js赋能：** 了解并使用Stencil.js这一强大的工具，它能够通过TypeScript和JSX（课程中会讲解）等现代特性，极大地简化Web Components的开发流程，提高效率。 * **跨框架部署与复用：** 学会如何将您构建的Web Components轻松部署和复用到任何Web项目中，无论您使用的是Angular、React、Vue还是其他任何JavaScript框架，甚至是没有框架的项目。 **先修知识：** * **必备：** 基础JavaScript知识。 * **强烈推荐：** ES6 JavaScript知识（如 `const`, `let`, `classes` 等）。课程会简要回顾。 * **无需：** JavaScript框架（如Angular, React, Vue）知识，TypeScript或JSX知识。 这门课程是您踏入Web Components和Stencil.js世界的理想选择，即使您不熟悉相关技术，也能轻松掌握并创造出强大的自定义HTML元素。
Let's face it: You got hundreds of HTML tags to choose from but some really helpful ones (, , ,...) are missing.What if you could build your own HTML tags? Without frameworks like Angular, libraries like React or expert JavaScript knowledge in general. Just with a magic, native-JavaScript feature called "Web Components" (or "custom HTML elements").Web Components are a combination of various specifications that are baked into the browser. Getting started with these features is a breeze and you'll quickly be able to build your own powerful and re-usable (even across projects!) custom HTML elements.Such custom elements don't replace Angular, React or Vue though - instead you can easily use them in ANY web project, including projects using such frameworks and libraries.In this course, you'll learn this from scratch.But we won't stop there. Whilst getting started is fairly easy, more complex components will be more difficult to create. Stencil.js is a tool that makes the creation of such native web components much easier by using modern features like TypeScript and JSX (don't know that? No worries, you'll learn it in the course!).In detail, in this course you will learn:how to build re-usable, lightweight custom HTML elements with native browser featureshow to build web components of all complexities - from a simple tooltip to modals or side drawershow to pass data into your own web components and use it therehow to emit your own custom events which you can listen to in JavaScripthow to use the Shadow DOM to scope your CSS styles to your custom elementshow to use Stencil.js to get a much easier development workflowhow to use the many features Stencil.js provides to build native web components way more efficientlyhow to deploy/ re-use your own web components in ANY project using ANY JavaScript framework like Angular, React or Vue (or none at all!)Prerequisites:Basic JavaScript knowledge is a must-haveES6 JavaScript knowledge (const, let, classes,...) is strongly recommended but not strictly required - a brief refresher is provided as part of the courseNO JavaScript framework knowledge (e.g. Angular, React, Vue) is requiredNO TypeScript or JSX knowledge is requiredLet's dive into this exciting technology together!
