Riot.js প্রজেক্টের ফোল্ডার স্ট্রাকচার সাধারণত বেশ সরল এবং মডুলার থাকে, কারণ Riot.js কম্পোনেন্ট-ভিত্তিক আর্কিটেকচার অনুসরণ করে। একটি সাধারণ Riot.js প্রজেক্টের ফোল্ডার স্ট্রাকচার নিম্নরূপ হতে পারে:
১. সাধারণ ফোল্ডার স্ট্রাকচার
my-riot-project/
│
├── src/ # সোর্স কোডের জন্য ফোল্ডার
│ ├── components/ # কম্পোনেন্ট ফোল্ডার
│ │ ├── App.riot # প্রধান অ্যাপ কম্পোনেন্ট
│ │ └── Header.riot # হেডার কম্পোনেন্ট
│ ├── assets/ # স্ট্যাটিক ফাইল যেমন ছবি, ফন্ট, ইত্যাদি
│ ├── index.js # অ্যাপের এন্ট্রি পয়েন্ট (জাভাস্ক্রিপ্ট)
│ └── index.html # HTML ফাইল যা ব্রাউজারে লোড হবে
│
├── dist/ # বিল্ড এবং কম্পাইলড ফাইলের জন্য ফোল্ডার
│ ├── index.html # বিল্ড করা HTML ফাইল
│ └── bundle.js # বিল্ড করা JavaScript ফাইল
│
├── node_modules/ # npm প্যাকেজ
│
├── package.json # npm প্যাকেজ কনফিগারেশন
└── .gitignore # গিট এর জন্য ignore ফাইল
২. বিস্তারিত ব্যাখ্যা:
src/:- এই ফোল্ডারে আপনি সমস্ত সোর্স কোড রাখবেন, যেমন কম্পোনেন্ট এবং অন্যান্য স্ক্রিপ্ট ফাইল।
components/ফোল্ডারে আপনার Riot.js কম্পোনেন্ট থাকবে, যেমনApp.riotএবংHeader.riotফাইলগুলো। প্রতিটি কম্পোনেন্ট.riotএক্সটেনশনে লেখা হয়, যাতে HTML, CSS, এবং JavaScript একসাথে থাকে।
dist/:- এই ফোল্ডারটি আপনার বিল্ড করা ফাইল সংরক্ষণ করতে ব্যবহৃত হয়। যখন আপনি আপনার প্রজেক্টটি কম্পাইল করেন বা বিল্ড করেন, তখন এখানে কম্পাইল করা HTML, CSS, এবং JavaScript ফাইলগুলি থাকবে।
- সাধারণত আপনি
webpackবা অন্য কোন বিল্ড টুল ব্যবহার করলে এই ফোল্ডারে আপনারbundle.jsবাmain.jsফাইলটি থাকবে।
node_modules/:- এখানে সমস্ত npm প্যাকেজ ইনস্টল হয়। যখন আপনি
npm installকমান্ড ব্যবহার করবেন, তখন এই ফোল্ডারে সমস্ত নির্ভরশীলতা ডাউনলোড হবে।
- এখানে সমস্ত npm প্যাকেজ ইনস্টল হয়। যখন আপনি
package.json:- এই ফাইলটি আপনার প্রজেক্টের জন্য npm প্যাকেজ এবং স্ক্রিপ্টগুলি সংরক্ষণ করে। এখানে আপনি কোন প্যাকেজগুলি ব্যবহার করছেন, সেটির তালিকা, প্রজেক্টের নাম, সংস্করণ, এবং অন্যান্য কনফিগারেশন প্যারামিটার থাকবে।
.gitignore:- এই ফাইলটি গিট রেপোজিটরিতে না যোগ করার জন্য কিছু ফাইল বা ফোল্ডারের নির্দেশনা দেয়, যেমন
node_modules/এবং বিল্ড ফোল্ডারগুলো (dist/)।
- এই ফাইলটি গিট রেপোজিটরিতে না যোগ করার জন্য কিছু ফাইল বা ফোল্ডারের নির্দেশনা দেয়, যেমন
৩. উদাহরণ: App.riot কম্পোনেন্ট
<!-- src/components/App.riot -->
<app>
<h1>Hello, Riot.js!</h1>
<p>{message}</p>
<button onclick={changeMessage}>Change Message</button>
<script>
export default {
onMounted() {
this.message = 'Welcome to Riot.js';
},
changeMessage() {
this.message = 'Message Changed!';
}
}
</script>
<style>
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</app>
৪. index.js (এন্ট্রি পয়েন্ট)
// src/index.js
import riot from 'riot';
import './components/App.riot';
// Riot.js অ্যাপ্লিকেশন মাউন্ট করা
riot.mount('app');
৫. index.html
<!-- src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Riot.js App</title>
<script src="/dist/bundle.js" defer></script>
</head>
<body>
<app></app> <!-- Riot.js কম্পোনেন্ট এখানে রেন্ডার হবে -->
</body>
</html>
এই ধরনের একটি ফোল্ডার স্ট্রাকচার দিয়ে আপনি সহজে Riot.js প্রজেক্ট তৈরি করতে পারেন এবং আপনার কম্পোনেন্টগুলো মডুলার ও রিইউজেবল রাখতে পারেন।
এছাড়াও, আপনি যদি একটি বিল্ড টুল (যেমন webpack) ব্যবহার করেন, তাহলে বিল্ড এবং ডিপ্লয়মেন্টের জন্য কিছু অতিরিক্ত কনফিগারেশন ফাইলও থাকবে।
Content added By
Read more
