نحوه ساخت اجزای قابل استفاده مجدد و مقیاس پذیر که کوچک و سریع هستند را بیابید.
اجزای وب مجموعه ای از فناوری ها هستند که به شما امکان می دهند عناصر قابل استفاده مجدد را ایجاد کرده و از آنها در برنامه های مختلف وب استفاده مجدد کنید.
Stencil.js یک کامپایلر است که اجزای وب را تولید می کند که با تمام مرورگرهای مدرن سازگار است. این ابزارها و API هایی را برای کمک به شما در ساخت اجزای وب سریع، کارآمد و مقیاس پذیر فراهم می کند.
شروع کار با Stencil.js
برای شروع کار با Stencil.js، ابتدا باید آن را در رایانه خود مقداردهی اولیه کنید.
این کار را با اجرای دستور زیر در ترمینال node.js خود انجام دهید:
npm init stencil
پس از اجرای دستور، یک اعلان بر روی صفحه نمایش شما ظاهر می شود تا بتوانید پروژه ای را که می خواهید شروع کنید انتخاب کنید:
برای ادامه، گزینه جزء را انتخاب کنید، نام پروژه خود را وارد کنید و انتخاب خود را تأیید کنید:
سپس، به دایرکتوری پروژه خود تغییر دهید و وابستگی های خود را با اجرای این دستورات نصب کنید:
cd first-stencil-project
npm install
ایجاد یک کامپوننت وب جدید
برای ایجاد یک کامپوننت وب جدید در Stencil.js، یک مسیر پوشه مانند src/components ایجاد کنید. پوشه اجزا حاوی یک فایل TypeScript به نام کامپوننت شما خواهد بود، زیرا Stencil.js از زبان TypeScript و JSX برای توسعه کامپوننت استفاده می کند. این پوشه همچنین حاوی یک فایل CSS است که حاوی استایل کامپوننت شما است.
به عنوان مثال، اگر می خواهید یک کامپوننت به نام “my-button” بسازید، یک فایل به نام my-button.tsx و یک فایل CSS به نام my-button.css ایجاد کنید. در فایل my-button.tsx، جزء خود را با استفاده از 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>
);
}
}
این کد توابع Component و h را از Stencil.js وارد می کند. تابع Component کامپوننت را تعریف می کند، در حالی که تابع h نشانه گذاری خود را با استفاده از HTML ایجاد می کند.
کامپوننت خود را با استفاده از دکوراتور @Component تعریف کنید، که یک شی با سه ویژگی می گیرد: tag، styleUrl و shadow.
ویژگی تگ حاوی نام تگ جزء است. ویژگی styleUrl فایل CSS را برای استایل دادن به عنصر سفارشی مشخص می کند. در نهایت، ویژگی shadow یک مقدار بولی است که نشان می‌دهد آیا مؤلفه از Shadow DOM برای کپسوله کردن سبک‌ها و رفتار عنصر سفارشی استفاده می‌کند یا خیر. در روش رندر، یک عنصر دکمه ایجاد می کنید.
علاوه بر ویژگی styleUrl، می توانید از دو ویژگی دیگر برای استایل دادن به کامپوننت خود استفاده کنید: style و styleUrls.
ویژگی style استایل های درون خطی را برای جزء تعریف می کند. یک مقدار رشته ای می گیرد که نشان دهنده سبک های CSS برای مؤلفه است:
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>
);
}
}
ویژگی styleUrls چندین فایل CSS خارجی را برای استایل دادن به کامپوننت مشخص می کند. آرایه ای از مقادیر رشته ای را می گیرد که مسیرهای فایل های 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>
);
}
}
رندر کردن کامپوننت وب
هنگامی که کامپوننت وب خود را ایجاد کردید، می توانید با افزودن یک تگ عنصر سفارشی، آن را در یک فایل HTML رندر کنید. در اینجا نحوه وارد کردن مولفه 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>
اکنون می توانید با استفاده از Stencil.js اجزای وب ایجاد کنید
Stencil.js یک ابزار قدرتمند برای ساخت اجزای وب سریع، کارآمد و مقیاس پذیر است. API و ابزارهای آن ایجاد و مدیریت اجزای وب را آسان می کند و سازگاری آن با تمام مرورگرهای مدرن تضمین می کند که اجزای شما در برنامه های مختلف وب به خوبی کار می کنند.
همانطور که اجزای وب روز به روز محبوب تر می شوند، Stencil.js چارچوبی است که باید هنگام ساخت عناصر قابل استفاده مجدد برای وب در نظر بگیرید.