Riot.js দিয়ে একটি বেসিক ট্যাগ তৈরি করা খুবই সহজ এবং সরল। এখানে একটি বেসিক উদাহরণ দেয়া হলো, যা আপনাকে Riot.js দিয়ে প্রথম ট্যাগ তৈরি করতে সহায়তা করবে।
1. প্রথমে Riot.js ইনস্টল বা CDN ব্যবহার করা:
আপনি যদি একটি নতুন প্রকল্প তৈরি করছেন, তবে আপনি Riot.js ইনস্টল করতে পারেন NPM এর মাধ্যমে বা CDN ব্যবহার করতে পারেন।
CDN ব্যবহার করে:
<script src="https://cdn.jsdelivr.net/npm/riot@6.0.0/riot.min.js"></script>
NPM এর মাধ্যমে ইনস্টল:
npm install riot
2. বেসিক Riot.js ট্যাগ তৈরি করা:
Riot.js তে একটি ট্যাগ তৈরি করতে .riot এক্সটেনশনের একটি ফাইল তৈরি করতে হয়। এর মধ্যে HTML, JavaScript, এবং CSS কোড থাকে। এখানে একটি সিম্পল ট্যাগ তৈরি করা হলো:
বেসিক ট্যাগ উদাহরণ:
<!-- my-tag.riot -->
<my-tag>
<h1>Hello, {opts.name}!</h1>
<p>This is a basic Riot.js tag.</p>
<button onclick={changeMessage}>Change Message</button>
<script>
export default {
onMounted() {
this.message = 'Welcome to Riot.js!';
},
changeMessage() {
this.message = 'Message has been changed!';
}
}
</script>
</my-tag>
3. এটি HTML ডকুমেন্টে ব্যবহার করা:
এখন, আপনি আপনার HTML ফাইলে এই my-tag.riot কম্পোনেন্টটি ব্যবহার করতে পারেন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Riot.js Basic Tag</title>
<script src="https://cdn.jsdelivr.net/npm/riot@6.0.0/riot.min.js"></script>
<script type="riot/tag" src="my-tag.riot"></script>
</head>
<body>
<!-- এখানে ট্যাগ ব্যবহার করা হবে -->
<my-tag name="John"></my-tag>
<script>
// Riot.js ট্যাগ মাউন্টিং
riot.mount('my-tag');
</script>
</body>
</html>
বিস্তারিত ব্যাখ্যা:
- HTML অংশ:
<my-tag>হল একটি কাস্টম ট্যাগ, যাmy-tag.riotফাইলের মধ্যে সংজ্ঞায়িত।{opts.name}এখানেopts.nameব্যবহার করা হয়েছে, যাname="John"হিসেবে প্রেরিত হচ্ছে এবং "Hello, John!" দেখাবে।
- JavaScript অংশ:
onMounted()ফাংশনটি কম্পোনেন্ট মাউন্ট হওয়ার পর চালু হয়। এখানে, আমরা একটি শুরুতে প্রদর্শিত বার্তাWelcome to Riot.js!সেট করেছি।changeMessage()ফাংশনটি বোতামে ক্লিক করলে বার্তা পরিবর্তন করবে এবং এটিMessage has been changed!দেখাবে।
- Riot.mount():
riot.mount('my-tag')এই কমান্ডের মাধ্যমে, আমরা Riot.js কম্পোনেন্টটি DOM এ মাউন্ট করেছি।
ফলাফল:
এখন আপনি যখন ব্রাউজারে এই HTML ফাইলটি ওপেন করবেন, আপনি একটি সাইট দেখতে পাবেন যেখানে লেখা থাকবে "Hello, John!" এবং একটি বোতাম থাকবে যা ক্লিক করলে বার্তাটি পরিবর্তিত হবে।
এই হল একটি বেসিক Riot.js ট্যাগ তৈরির উদাহরণ। আপনি এই ট্যাগটি আরও কাস্টমাইজ এবং ডায়নামিক করতে পারেন।
আপনি কি Riot.js এর আরও কোনো দিক সম্পর্কে জানতে চান?
Read more
