আপনি যদি Riot.js দিয়ে আপনার প্রথম ওয়েব প্রজেক্ট তৈরি করতে চান, তাহলে নিচে ধাপে ধাপে নির্দেশিকা দেওয়া হল। এতে আপনি একটি সাধারণ প্রজেক্ট তৈরি করবেন যেখানে Riot.js এর কম্পোনেন্ট ব্যবহার করে একটি ইউজার ইন্টারফেস তৈরি করা হবে।
ধাপ ১: Riot.js ইনস্টলেশন
প্রথমে, আপনার প্রজেক্টে Riot.js যোগ করতে হবে। আপনি এটি দুটি উপায়ে করতে পারেন:
১.1. NPM দিয়ে ইনস্টল করুন (যদি আপনি Node.js ব্যবহার করছেন)
npm init -y
npm install riot
এটি node_modules ফোল্ডারে Riot.js ইন্সটল করবে এবং আপনি আপনার প্রজেক্টে ব্যবহার করতে পারবেন।
১.2. CDN দিয়ে ইনস্টল করুন (যদি আপনি কোনো বিল্ড টুল ব্যবহার না করেন)
আপনি Riot.js লাইব্রেরি CDN ব্যবহার করেও আপনার HTML ফাইলে যোগ করতে পারেন। এটি সহজ এবং দ্রুত উপায়।
<script src="https://cdn.jsdelivr.net/npm/riot@6.1.0/riot+compiler.min.js"></script>
ধাপ ২: Riot.js কম্পোনেন্ট তৈরি
এখন, আপনি একটি .riot ফাইল তৈরি করতে পারেন, যা আপনার কম্পোনেন্টের HTML, CSS, এবং JavaScript কোড ধারণ করবে। উদাহরণস্বরূপ:
<!-- MyComponent.riot -->
<my-component>
<h1>{opts.title}</h1>
<p>{message}</p>
<button onclick={changeMessage}>Change Message</button>
<style>
h1 {
color: blue;
}
button {
padding: 10px;
background-color: lightblue;
}
</style>
<script>
export default {
onMounted() {
this.message = 'Hello, World!';
},
changeMessage() {
this.message = 'Message changed!';
}
}
</script>
</my-component>
এখানে:
opts.titleআপনার কম্পোনেন্টের বাইরের ডাটা বা প্রোপস হিসেবে ব্যবহার হচ্ছে।messageএকটি ইন্টারনাল স্টেট যা ব্যবহারকারী বাটন টিপলে পরিবর্তিত হবে।
ধাপ ৩: Riot.js কম্পোনেন্ট রেন্ডার করা
এখন, আপনার HTML ফাইলে Riot.js কম্পোনেন্ট রেন্ডার করতে হবে। উদাহরণস্বরূপ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Riot.js Project</title>
<script src="https://cdn.jsdelivr.net/npm/riot@6.1.0/riot+compiler.min.js"></script>
</head>
<body>
<!-- HTML অংশ যেখানে কম্পোনেন্ট রেন্ডার হবে -->
<my-component title="My First Riot.js Project"></my-component>
<script type="module">
import MyComponent from './MyComponent.riot';
Riot.mount('my-component', { title: 'Hello from Riot.js!' });
</script>
</body>
</html>
এখানে:
<my-component>ট্যাগটি আমাদের তৈরি করা কম্পোনেন্টটিকে HTML পেজে রেন্ডার করবে।Riot.mountব্যবহার করে আমরা কম্পোনেন্টে ডাটা (এখানেtitle) পাস করছি।
ধাপ ৪: প্রজেক্ট রান করা
এখন, যদি আপনি আপনার প্রজেক্ট রান করতে চান, তাহলে আপনাকে একটি লাইট সার্ভার চালাতে হবে। আপনি যে কোন সার্ভার ব্যবহার করতে পারেন, যেমন:
৪.১. Live Server (VS Code extension)
আপনি যদি VS Code ব্যবহার করেন, তাহলে Live Server এক্সটেনশন ব্যবহার করে সহজেই প্রজেক্ট চালাতে পারেন।
৪.২. বেসিক HTTP সার্ভার
আপনি একটি সিম্পল HTTP সার্ভার চালানোর জন্য http-server ব্যবহার করতে পারেন (Node.js ইনস্টল করা থাকলে):
npx http-server
এটি আপনার প্রজেক্ট ফোল্ডারে একটি লোকাল সার্ভার চালাবে, এবং আপনি ব্রাউজারে গিয়ে আপনার প্রজেক্ট দেখতে পারবেন।
ধাপ ৫: প্রজেক্ট টেস্টিং
এখন আপনি ব্রাউজারে গিয়ে আপনার প্রথম Riot.js প্রজেক্ট দেখতে পারবেন। যখন আপনি Change Message বোতামে ক্লিক করবেন, তখন বার্তাটি আপডেট হয়ে যাবে।
এই প্রক্রিয়াটি আপনার প্রথম Riot.js প্রজেক্ট তৈরি করার জন্য একটি মৌলিক গাইডলাইন। এটি আপনাকে Riot.js কম্পোনেন্ট তৈরি, ইনস্টলেশন, এবং ডাটা বাইন্ডিংয়ের ধারণা দিতে সাহায্য করবে।
আপনি যদি আরও কিছু জানতে চান বা কিছু নির্দিষ্ট বিষয়ে সাহায্য চান, আমাকে জানাবেন!
Read more
