Home-theater-designers
ওয়েব ডেভেলপমেন্টের জগৎ বিশৃঙ্খল—ফ্রেমওয়ার্কগুলি পপ ইন এবং অস্তিত্বের বাইরে এবং জিনিসগুলি নতুন এবং অভিজ্ঞ উভয় বিকাশকারীদের জন্য একইভাবে অপ্রতিরোধ্য হতে পারে।
বেশিরভাগ ওয়েব ডেভেলপমেন্ট ফ্রেমওয়ার্কের বিপরীতে, Alpine.js এর লক্ষ্য যতটা সম্ভব সহজ হওয়া, তবে প্রতিক্রিয়াশীলতা এবং পার্শ্ব প্রতিক্রিয়াগুলির মত ধারণাগুলি মোকাবেলা করার জন্য যথেষ্ট শক্তিশালী।
দিনের মেকইউজের ভিডিও কন্টেন্টের সাথে চালিয়ে যেতে স্ক্রোল করুন
Alpine.js দিয়ে শুরু করা
Alpine.js ইনস্টল করা বেশ সহজ। আপনি শুধুমাত্র নিম্নলিখিত অন্তর্ভুক্ত করতে হবে লিপি আপনার HTML এ ট্যাগ করুন:
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
বিকল্পভাবে, আপনি নোড প্যাকেজ ম্যানেজার ব্যবহার করে আপনার প্রকল্পে Alpine.js ইনস্টল করতে পারেন:
npm install alpinejs
Alpine.js এ প্রতিক্রিয়াশীলতা
তৈরি একটি index.htm ফাইল করুন এবং নিম্নলিখিত বয়লারপ্লেট কোড যোগ করুন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alpine.js</title>
</head>
<body>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</body>
</html>
দ্য বিলম্বিত করা মধ্যে বৈশিষ্ট্য লিপি ট্যাগ ব্রাউজারকে ডকুমেন্ট পার্সিং শেষ করার পরেই স্ক্রিপ্টটি চালাতে বলে।
Alpine.js যেমন বিভিন্ন নির্দেশ প্রদান করে x-ডেটা যা এটি ডেটা সংরক্ষণ করতে ব্যবহার করে এবং x-টেক্সট যা এটি সেট করতে ব্যবহার করে অভ্যন্তরীণ পাঠ্য সংযুক্ত উপাদানের। এই নির্দেশাবলী ব্যবহার করতে, আপনার HTML এ নিম্নলিখিত কোড যোগ করুন।
<div x-data="{name:'David Uzondu', organisation:'Make Use Of'}">
My name is <strong x-text="name"></strong>
and <i x-text="organisation"></i> is Awesome
</div>
এক্স-ডেটা নির্দেশিকা কীগুলির সাথে একটি বস্তু সংরক্ষণ করে নাম এবং সংগঠন . তারপর আপনি x-টেক্সট নির্দেশিকায় সেই কীগুলি পাস করতে পারেন। যখন আপনি কোডটি চালাবেন, তখন Alpine.js মানগুলি পূরণ করবে:
কিভাবে Alpine.js প্রতিক্রিয়া সঙ্গে তুলনা
Alpine.js হল একটি লাইটওয়েট ফ্রেমওয়ার্ক যা এটিকে ছোট প্রকল্প এবং প্রোটোটাইপ তৈরির জন্য উপযুক্ত করে তোলে।
ওয়াইফাই সংযোগ করে কিন্তু ইন্টারনেট অ্যাক্সেস নেই
প্রতিক্রিয়া মত বড় ফ্রেমওয়ার্ক, আপনি ব্যবহার করুন হুক মত ইফেক্ট ব্যবহার করুন() উপাদান জীবনচক্রে পার্শ্ব প্রতিক্রিয়া পরিচালনা করতে. এই হুক একটি কলব্যাক ফাংশন চালায় যখনই নির্ভরতা অ্যারের উপাদানগুলির একটি পরিবর্তন হয়:
import {useEffect} from "React";
function MyComponent() {
useEffect(() => {
/* Callback function goes here */
}, [ /* The dependency array is optional */ ]);
}
Alpine.js-এ পার্শ্ব প্রতিক্রিয়াগুলি পরিচালনা করতে, আপনি ব্যবহার করতে পারেন x-প্রভাব নির্দেশ উদাহরণস্বরূপ, ধরা যাক আপনি একটি ভেরিয়েবল দেখতে চান এবং মানটি যখনই পরিবর্তন হয় তখন লগ করুন:
<div x-data="{number: 1}" x-effect="console.log(number)">
<h1 x-text="number"></h1>
<button @click="number = number + 1">Add new number</button>
</div>
আপনি লক্ষ্য করতে পারেন যে প্রথম জিনিস আপনি একটি নির্ভরতা নির্দিষ্ট করার প্রয়োজন নেই. Alpine শুধুমাত্র পাস করা সমস্ত ভেরিয়েবলের পরিবর্তনের জন্য শুনবে x-প্রভাব . দ্য @ক্লিক নির্দেশিকা সংখ্যা পরিবর্তনশীলকে 1 দ্বারা বৃদ্ধি করে।
Alpine.js-এ শর্তসাপেক্ষ রেন্ডারিং
শর্তসাপেক্ষে উপাদান রেন্ডারিং আপনি প্রতিক্রিয়া মত ফ্রেমওয়ার্ক করতে পারেন কিছু. Alpine.js আপনাকে শর্তসাপেক্ষে উপাদান রেন্ডার করার অনুমতি দেয়। এটি একটি প্রদান করে x-যদি নির্দেশিকা এবং একটি বিশেষ টেমপ্লেট উপাদান যা আপনি শর্তসাপেক্ষে উপাদান রেন্ডার করতে ব্যবহার করতে পারেন।
আরেকটি তৈরি করুন index.htm ফাইল করুন এবং আগের মতো একই বয়লারপ্লেট কোড যোগ করুন। HTML এর বডিতে নিম্নলিখিত কোড যোগ করুন।
<div x-data="{shown:true}">
<button @click="shown=!shown" x-text="shown ? 'Hide Element' : 'Show Element'">Toggle</button>
<template x-if="shown">
<div>The quick brown fox jumped over the dog.</div>
</template>
</div>
দ্য x-যদি নির্দেশিকা পাস করা হয় টেমপ্লেট উপাদান এটি গুরুত্বপূর্ণ কারণ এটি Alpine.js-কে পৃষ্ঠা থেকে যুক্ত বা সরানো একটি উপাদানের ট্র্যাক রাখতে দেয়। দ্য টেমপ্লেট উপাদান একটি রুট-স্তরের উপাদান থাকা উচিত; নিম্নলিখিত কোড সেই নিয়ম লঙ্ঘন করবে:
<template x-if="shown">
<div>This element will be rendered just fine.</div>
<div>This element will be ignored by Alpine.js</div>
</template>
Alpine.js এর সাথে একটি করণীয় অ্যাপ্লিকেশন তৈরি করা
আপনি এখন পর্যন্ত যা শিখেছেন তা একত্রিত করার এবং স্থানীয় স্টোরেজ সমর্থন সহ একটি সহজ করণীয় অ্যাপ্লিকেশন তৈরি করার সময়। প্রথমে একটি ফোল্ডার তৈরি করুন এবং এটি একটি দিয়ে পপুলেট করুন index.htm ফাইল এবং ক style.css ফাইল index.htm ফাইলে বয়লারপ্লেট কোড যোগ করুন এবং একটি রেফারেন্স অন্তর্ভুক্ত করুন style.css ফাইল:
<link rel="stylesheet" href="style.css">