শুরু করা

React বা Vue থেকে এসেছেন আর কিছুই মাথায় ঢুকছে না? আগে

মানসিক মডেল পড়ুন: computed, watch, লাইফসাইকেল হুক আর ডেটা লোডিং কোথায় গেল, তার পাঁচ মিনিটের হিসাব।এই পৃষ্ঠাটি আপনাকে একটি খালি ফোল্ডার থেকে একটি চলমান, প্রতিক্রিয়াশীল $mol অ্যাপ পর্যন্ত নিয়ে যায়। এতে প্রায় পনেরো মিনিট লাগার কথা। নিচের প্রতিটি অংশ প্রকৃত, কার্যকর কোড — এটি যেমন আছে তেমনই কপি করুন।কম্পোনেন্টটি আপনি সাধারণ TypeScript-এ লিখবেন। কম্পোনেন্ট বর্ণনার জন্য $mol-এর আরও সংক্ষিপ্ত একটি ফরম্যাটও আছে, view.tree, যার সঙ্গে পরের পৃষ্ঠায় পরিচয় হবে। এখানে সেটির দরকার নেই: যেভাবেই লিখুন, $mol কম্পোনেন্ট একটি সাধারণ ক্লাসই থাকে।

আপনার যা প্রয়োজন

Node.js 18+ এবং git। পুরো তালিকা এটুকুই।আপনি কোনো গ্লোবাল CLI ইনস্টল করেন না বা এমন বয়লারপ্লেট তৈরি করেন না যা পরে বুঝতে হবে। $mol অ্যাপগুলি MAM ওয়ার্কস্পেসের ভেতরে থাকে, যা ইতিমধ্যেই সেগুলি বিল্ড এবং সার্ভ করতে জানে।

১. ওয়ার্কস্পেস পান

MAM হলো $mol-এর বিল্ড টুল ও মডিউল রেজিস্ট্রি। একবার ক্লোন করে ইনস্টল করুন।1git clone https://github.com/hyoo-ru/mam.git ./mam2cd mam3npm install4npm startnpm start http://localhost:9080/-এ ডেভ সার্ভার চালু করে। এটি আপনার ফাইল পর্যবেক্ষণ করে এবং স্বয়ংক্রিয়ভাবে আবার বিল্ড করে — নিজের টার্মিনালে এটি চলতে দিন।

২. একটি মডিউল তৈরি করুন

$mol অ্যাপ মানে শুধু একটি ফোল্ডার। একটি নেমস্পেস (আপনার নিজের, যেমন my) এবং একটি নাম (hello) বেছে নিন।1mkdir -p my/helloমনে রাখার মতো একটি নিয়ম: কম্পোনেন্টের নামে আন্ডারস্কোর হলো ফোল্ডার বিভাজক। $my_hello থাকে my/hello/-তে, আর $my_hello_form থাকত my/hello/form/-এ। মডিউল ফোল্ডারের নামে কখনোই আন্ডারস্কোর থাকে না।এখন my/hello/-এর ভেতরে দুটি ফাইল যোগ করুন।

index.html — প্রবেশবিন্দু

1<!doctype html>2<html mol_view_root>3 <head>4 <meta charset="utf-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1" />6 </head>7 <body mol_view_root>8 <div mol_view_root="$my_hello"></div>9 <script src="web.js"></script>10 </body>11</html>mol_view_root="$my_hello" অ্যাট্রিবিউটটি পৃষ্ঠা লোড হওয়ার সময় আপনার কম্পোনেন্ট মাউন্ট করে।

hello.view.ts — কম্পোনেন্ট

1namespace $ {2 3 export class $my_hello extends $mol_page {4 5 title() {6 return 'Greeting'7 }8 9 body() {10 return [ this.Name(), this.Message() ]11 }12 13 @ $mol_mem14 Name() {15 const obj = new this.$.$mol_string16 obj.hint = () => 'Enter your name'17 obj.value = ( next?: string ) => this.name( next )18 return obj19 }20 21 @ $mol_mem22 name( next?: string ) {23 return next ?? ''24 }25 26 @ $mol_mem27 Message() {28 const obj = new this.$.$mol_view29 obj.sub = () => [ this.greeting() ]30 return obj31 }32 33 greeting() {34 const name = this.name()35 return name ? `Hello, ${ name }!` : 'Please enter your name'36 }37 38 }39 40}GitHub-এ এই পৃষ্ঠা সম্পাদনা করুনএটি কি সহায়ক ছিল?হ্যাঁনাপূর্ববর্তীমানসিক মডেল পরবর্তীTypeScript থেকে view.treeএই পৃষ্ঠায়আপনার যা প্রয়োজন ১. ওয়ার্কস্পেস পান ২. একটি মডিউল তৈরি করুন index.html — প্রবেশবিন্দু hello.view.ts — কম্পোনেন্ট ৩. চালান ৪. দ্বিতীয় একটি প্রতিক্রিয়াশীল মান যোগ করুন ৫. আপনার বিল্ড যাচাই করুন আপনি একটি $mol অ্যাপ তৈরি করেছেন