Cách xây dựng một thành phần web bằng Stencil.js
Các thành phần web là một tập hợp các công nghệ cho phép bạn tạo các phần tử có thể tái sử dụng và sử dụng lại chúng trên các ứng dụng web khác nhau.
Stencil.js là trình biên dịch tạo các thành phần web tương thích với tất cả các trình duyệt hiện đại. Nó cung cấp các công cụ và API để giúp bạn xây dựng các thành phần web nhanh, hiệu quả và có thể mở rộng.
Mục Lục
Bắt đầu với Stencil.js
Để bắt đầu với Stencil.js, trước tiên bạn cần khởi tạo nó trên máy tính của mình.
Làm điều này bằng cách chạy lệnh sau trong thiết bị đầu cuối node.js của bạn:
npm init stencil
Sau khi chạy lệnh, một lời nhắc sẽ xuất hiện trên màn hình của bạn để bạn chọn dự án bạn muốn bắt đầu:
Để tiếp tục, hãy chọn tùy chọn thành phần, nhập tên dự án của bạn và xác nhận lựa chọn của bạn:
Tiếp theo, thay đổi thư mục dự án của bạn và cài đặt các phụ thuộc của bạn bằng cách chạy các lệnh sau:
cd first-stencil-project
npm install
Tạo một thành phần web mới
Để tạo một thành phần web mới trong Stencil.js, hãy tạo một đường dẫn thư mục như src/thành phần. Thư mục thành phần sẽ chứa tệp TypeScript được đặt tên theo thành phần của bạn, vì Stencil.js sử dụng ngôn ngữ TypeScript và JSX để phát triển thành phần. Thư mục cũng sẽ chứa tệp CSS chứa kiểu dáng thành phần của bạn.
Ví dụ: nếu bạn muốn xây dựng một thành phần có tên là “my-button”, hãy tạo một tệp có tên my-button.tsx và một tệp CSS có tên my-button.css. bên trong my-button.tsx tệp, hãy xác định thành phần của bạn bằng API Stencil.js:
import { Component, h } from '@stencil/core';@Component({
tag: 'my-button',
styleUrl: 'my-button.css',
shadow: true,
})
export class MyButton {
render() {
return (
<button>Click Me</button>
);
}
}
Mã này nhập khẩu Thành phần Và h chức năng từ Stencil.js. Các Thành phần chức năng xác định thành phần, trong khi h chức năng tạo đánh dấu của nó bằng HTML.
Xác định thành phần của bạn bằng cách sử dụng @Thành phần decorator, lấy một đối tượng có ba thuộc tính: nhãn, phong cáchUrlVà bóng tối.
Các nhãn thuộc tính chứa tên thẻ của thành phần. Các phong cáchUrl thuộc tính chỉ định tệp CSS để tạo kiểu cho phần tử tùy chỉnh. Cuối cùng, bóng tối thuộc tính là một giá trị boolean cho biết liệu thành phần có sử dụng Shadow DOM để gói gọn các kiểu và hành vi của thành phần tùy chỉnh hay không. Trong phương thức kết xuất, bạn tạo một phần tử nút.
Ngoài các phong cáchUrl thuộc tính, bạn có thể sử dụng thêm hai thuộc tính để tạo kiểu cho thành phần của mình: phong cách Và phong cáchUrl.
Các phong cách thuộc tính xác định kiểu nội tuyến cho thành phần. Nó nhận một giá trị chuỗi đại diện cho các kiểu CSS cho thành phần:
import { Component, h } from '@stencil/core';@Component({
tag: 'my-button',
style: `
button {
padding: 1rem 0.5rem;
border-radius: 12px;
font-family: cursive;
border: none;
color: #e2e2e2;
background-color: #333333;
font-weight: bold;
}
`,
shadow: true,
})
export class MyButton {
render() {
return (
<button>Click Me</button>
);
}
}
Các phong cáchUrl thuộc tính chỉ định nhiều tệp CSS bên ngoài để tạo kiểu cho thành phần. Nó nhận một mảng các giá trị chuỗi đại diện cho các đường dẫn đến các tệp CSS:
import { Component, h } from '@stencil/core';@Component({
tag: 'my-button',
styleUrls: ['my-button.css', 'another-button.css'],
shadow: true,
})
export class MyButton {
render() {
return (
<button>Click Me</button>
);
}
}
Kết xuất thành phần web
Khi bạn đã tạo thành phần web của mình, bạn có thể hiển thị thành phần đó trong tệp HTML bằng cách thêm thẻ thành phần tùy chỉnh. Đây là cách bạn có thể bao gồm thành phần my-button:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<link href="<https://fonts.googleapis.com/css2?family=Montserrat&display=swap>" rel="stylesheet">
<title>Stencil Component Starter</title>
<script type="module" src="/build/first-stencil-project.esm.js"></script>
<script nomodule src="/build/first-stencil-project.js"></script>
</head>
<body>
<my-button></my-button>
</body>
</html>
Bây giờ bạn có thể tạo các thành phần web bằng Stencil.js
Stencil.js là một công cụ mạnh mẽ để xây dựng các thành phần web nhanh, hiệu quả và có thể mở rộng. API và các công cụ của nó giúp dễ dàng tạo và quản lý các thành phần web, đồng thời khả năng tương thích của nó với tất cả các trình duyệt hiện đại đảm bảo các thành phần của bạn sẽ hoạt động tốt trên các ứng dụng web khác nhau.
Khi các thành phần web ngày càng trở nên phổ biến, Stencil.js là một khung mà bạn nên cân nhắc khi xây dựng các thành phần có thể tái sử dụng cho web.