1. ভূমিকা
মেটেরিয়াল কম্পোনেন্টস (MDC) ডেভেলপারদের ম্যাটেরিয়াল ডিজাইন বাস্তবায়নে সহায়তা করে। Google-এ প্রকৌশলী এবং UX ডিজাইনারদের একটি দল দ্বারা তৈরি, MDC কয়েক ডজন সুন্দর এবং কার্যকরী UI উপাদান বৈশিষ্ট্যযুক্ত এবং এটি Android, iOS, ওয়েব এবং Flutter.material.io/develop-এর জন্য উপলব্ধ |
MDC ওয়েব মেটেরিয়াল ডিজাইনের নীতিগুলিকে সমুন্নত রেখে যেকোন ফ্রন্ট এন্ড ফ্রেমওয়ার্কের সাথে একীভূত করার জন্য ইঞ্জিনিয়ার করা হয়েছে। নিম্নলিখিত কোডল্যাব আপনাকে একটি রিঅ্যাক্ট কম্পোনেন্ট তৈরি করার জন্য গাইড করে, যা ভিত্তি হিসেবে MDC ওয়েব ব্যবহার করে। এই কোডল্যাবে শেখা নীতিগুলি যেকোনো জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কে প্রয়োগ করা যেতে পারে।
কিভাবে MDC ওয়েব তৈরি করা হয়
MDC ওয়েবের জাভাস্ক্রিপ্ট স্তর প্রতি কম্পোনেন্টে তিনটি ক্লাস নিয়ে গঠিত: কম্পোনেন্ট , ফাউন্ডেশন এবং অ্যাডাপ্টার । এই প্যাটার্নটি MDC ওয়েবকে ফ্রন্টএন্ড ফ্রেমওয়ার্কের সাথে একীভূত করার নমনীয়তা দেয়।
ফাউন্ডেশনে ব্যবসায়িক যুক্তি রয়েছে যা মেটেরিয়াল ডিজাইন বাস্তবায়ন করে। ফাউন্ডেশন কোনো HTML উপাদান উল্লেখ করে না। এটি আমাদের অ্যাডাপ্টারের মধ্যে HTML ইন্টারঅ্যাকশন লজিককে বিমূর্ত করতে দেয়। ফাউন্ডেশনের একটি অ্যাডাপ্টার রয়েছে।
অ্যাডাপ্টার একটি ইন্টারফেস। অ্যাডাপ্টার ইন্টারফেসটি উপাদান ডিজাইন ব্যবসায়িক যুক্তি বাস্তবায়নের জন্য ফাউন্ডেশন দ্বারা উল্লেখ করা হয়েছে। আপনি অ্যাডাপ্টারটিকে বিভিন্ন ফ্রেমওয়ার্ক যেমন কৌণিক বা প্রতিক্রিয়াতে প্রয়োগ করতে পারেন। একটি অ্যাডাপ্টারের বাস্তবায়ন DOM কাঠামোর সাথে যোগাযোগ করে।
উপাদান একটি ভিত্তি আছে, এবং এর ভূমিকা হল
- অ-ফ্রেমওয়ার্ক জাভাস্ক্রিপ্ট ব্যবহার করে অ্যাডাপ্টার প্রয়োগ করুন, এবং
- ফাউন্ডেশনের পদ্ধতির প্রক্সি পাবলিক পদ্ধতি প্রদান করুন।
MDC ওয়েব কি প্রদান করে
MDC ওয়েবের প্রতিটি প্যাকেজ একটি কম্পোনেন্ট , ফাউন্ডেশন এবং অ্যাডাপ্টারের সাথে আসে। একটি কম্পোনেন্ট ইনস্ট্যান্টিয়েট করার জন্য আপনাকে অবশ্যই কম্পোনেন্টের কনস্ট্রাক্টর পদ্ধতিতে রুট এলিমেন্ট পাস করতে হবে। কম্পোনেন্ট একটি অ্যাডাপ্টার প্রয়োগ করে, যা DOM এবং HTML উপাদানগুলির সাথে ইন্টারঅ্যাক্ট করে। কম্পোনেন্ট তারপর ফাউন্ডেশনকে ইনস্ট্যান্টিয়েট করে, যেটিকে অ্যাডাপ্টার পদ্ধতি বলা হয়।
একটি ফ্রেমওয়ার্কের মধ্যে MDC ওয়েবকে একীভূত করতে আপনাকে সেই কাঠামোর ভাষা/সিনট্যাক্সে আপনার নিজস্ব উপাদান তৈরি করতে হবে। ফ্রেমওয়ার্ক কম্পোনেন্ট এমডিসি ওয়েবের অ্যাডাপ্টার প্রয়োগ করে এবং এমডিসি ওয়েবের ফাউন্ডেশন ব্যবহার করে।
আপনি কি নির্মাণ করবেন
এই কোডল্যাবটি দেখায় কিভাবে একটি মেটেরিয়াল ডিজাইন রিঅ্যাক্ট কম্পোনেন্ট অর্জন করতে ফাউন্ডেশন লজিক ব্যবহার করার জন্য একটি কাস্টম অ্যাডাপ্টার তৈরি করতে হয়। এটি ফ্রেমওয়ার্কগুলিতে ইন্টিগ্রেটিং এ পাওয়া উন্নত বিষয়গুলিকে কভার করে৷ প্রতিক্রিয়া এই কোডল্যাবে একটি উদাহরণ ফ্রেমওয়ার্ক হিসাবে ব্যবহার করা হয়, তবে এই পদ্ধতিটি অন্য কোনও কাঠামোতে প্রয়োগ করা যেতে পারে।
এই কোডল্যাবে, আপনি শীর্ষ অ্যাপ বার তৈরি করবেন এবং শীর্ষ অ্যাপ বার ডেমো পৃষ্ঠাটি পুনরায় তৈরি করবেন। ডেমো পৃষ্ঠার বিন্যাস ইতিমধ্যেই সেটআপ করা হয়েছে যাতে আপনি শীর্ষ অ্যাপ বারে কাজ শুরু করতে পারেন৷ শীর্ষ অ্যাপ বারে অন্তর্ভুক্ত থাকবে:
- নেভিগেশন আইকন
- কর্ম আইটেম
- এখানে 4টি বৈকল্পিক উপলব্ধ রয়েছে: সংক্ষিপ্ত , সর্বদা ভেঙে পড়া , স্থির এবং বিশিষ্ট বৈকল্পিক
আপনার যা লাগবে:
- Node.js এর একটি সাম্প্রতিক সংস্করণ (যা npm , একটি জাভাস্ক্রিপ্ট প্যাকেজ ম্যানেজার দিয়ে বান্ডিল করা হয়)
- নমুনা কোড (পরবর্তী ধাপে ডাউনলোড করতে হবে)
- এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট এবং প্রতিক্রিয়া সম্পর্কে প্রাথমিক জ্ঞান
ওয়েব ডেভেলপমেন্টের সাথে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?
2. ডেভ এনভায়রনমেন্ট সেট আপ করুন
স্টার্টার কোডল্যাব অ্যাপটি ডাউনলোড করুন
স্টার্টার অ্যাপটি material-components-web-codelabs-master/mdc-112/starter ডিরেক্টরির মধ্যে অবস্থিত।
...অথবা GitHub থেকে ক্লোন করুন
GitHub থেকে এই কোডল্যাব ক্লোন করতে, নিম্নলিখিত কমান্ডগুলি চালান:
git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-112/starter
প্রকল্প নির্ভরতা ইনস্টল করুন
স্টার্টার ডিরেক্টরি থেকে material-components-web-codelabs/mdc-112/starter , চালান:
npm install
আপনি অনেক কার্যকলাপ দেখতে পাবেন এবং শেষে, আপনার টার্মিনালটি একটি সফল ইনস্টল দেখাবে:
স্টার্টার অ্যাপটি চালান
একই ডিরেক্টরিতে, চালান:
npm start
webpack-dev-server শুরু হবে। পৃষ্ঠাটি দেখতে আপনার ব্রাউজারটিকে http://localhost:8080/- এ নির্দেশ করুন।
সফলতার ! শীর্ষ অ্যাপ বার প্রতিক্রিয়া ডেমো পৃষ্ঠার জন্য স্টার্টার কোড আপনার ব্রাউজারে চলমান হওয়া উচিত। আপনি lorem ipsum পাঠ্যের একটি প্রাচীর, একটি নিয়ন্ত্রণ বাক্স (নীচে ডানদিকে), এবং একটি অসমাপ্ত শীর্ষ অ্যাপ বার দেখতে পাবেন:
কোড এবং প্রকল্পটি একবার দেখুন
আপনি যদি আপনার কোড এডিটর খোলেন, তাহলে প্রজেক্ট ডিরেক্টরীটি দেখতে এরকম কিছু হওয়া উচিত:
App.js ফাইলটি খুলুন এবং render পদ্ধতিটি দেখুন, যার মধ্যে রয়েছে <TopAppBar> উপাদান:
App.js
render() {
const {isFixed, isShort, isRtl, isProminent, isAlwaysCollapsed, shouldReinit} = this.state;
return (
<section
dir={isRtl ? 'rtl' : 'ltr'}
className='mdc-typography'>
{
shouldReinit ? null :
<TopAppBar
navIcon={this.renderNavIcon()}
short={isShort}
prominent={isProminent}
fixed={isFixed}
alwaysCollapsed={isAlwaysCollapsed}
title='Mountain View, CA'
actionItems={this.actionItems}
/>
}
<div className={classnames('mdc-top-app-bar--fixed-adjust', {
'mdc-top-app-bar--short-fixed-adjust': isShort || isAlwaysCollapsed,
'mdc-top-app-bar--prominent-fixed-adjust': isProminent,
})}>
{this.renderDemoParagraphs()}
</div>
{this.renderControls()}
</section>
);
}
এটি অ্যাপ্লিকেশনটিতে TopAppBar এর প্রবেশ বিন্দু।
TopAppBar.js ফাইলটি খুলুন যা একটি render পদ্ধতি সহ একটি বেয়ার রিঅ্যাক্ট Component ক্লাস:
TopAppBar.js
import React from 'react';
export default class TopAppBar extends React.Component {
render() {
return (
<header>
TOP APP BAR
</header>
);
}
}
3. উপাদানের রচনা
প্রতিক্রিয়ায়, render পদ্ধতিটি কম্পোনেন্টের এইচটিএমএল আউটপুট করে। টপ অ্যাপ বার কম্পোনেন্ট একটি <header /> ট্যাগ রেন্ডার করবে এবং 2টি প্রধান বিভাগ নিয়ে গঠিত হবে:
- নেভিগেশন আইকন এবং শিরোনাম বিভাগ
- অ্যাকশন আইকন বিভাগ
টপ অ্যাপ বারে থাকা উপাদানগুলি সম্পর্কে আপনার যদি প্রশ্ন থাকে, GitHub- এ ডকুমেন্টেশন দেখুন।
এইরকম দেখতে TopAppBar.js এ render() পদ্ধতি পরিবর্তন করুন:
render() {
const {
title,
navIcon,
} = this.props;
return (
<header
className={this.classes}
style={this.getMergedStyles()}
ref={this.topAppBarElement}
>
<div className='mdc-top-app-bar__row'>
<section className='mdc-top-app-bar__section mdc-top-app-bar__section--align-start'>
{navIcon ? navIcon : null}
<span className="mdc-top-app-bar__title">
{title}
</span>
</section>
{this.renderActionItems()}
</div>
</header>
);
}
এই HTML এ দুটি সেকশন এলিমেন্ট আছে। প্রথমটিতে একটি নেভিগেশন আইকন এবং শিরোনাম রয়েছে৷ দ্বিতীয়টিতে অ্যাকশন আইকন রয়েছে।
পরবর্তী, renderActionItems পদ্ধতি যোগ করুন:
renderActionItems() {
const {actionItems} = this.props;
if (!actionItems) {
return;
}
return (
<section className='mdc-top-app-bar__section mdc-top-app-bar__section--align-end' role='toolbar'>
{/* need to clone element to set key */}
{actionItems.map((item, key) => React.cloneElement(item, {key}))}
</section>
);
}
একজন বিকাশকারী তাদের প্রতিক্রিয়া অ্যাপ্লিকেশনে TopAppBar আমদানি করবে এবং TopAppBar উপাদানে অ্যাকশন আইকনগুলি পাস করবে। আপনি App.js এ একটি TopAppBar শুরু করার উদাহরণ কোড দেখতে পারেন।
getMergedStyles পদ্ধতি অনুপস্থিত, যা render পদ্ধতিতে ব্যবহৃত হয়। TopAppBar ক্লাসে নিম্নলিখিত জাভাস্ক্রিপ্ট পদ্ধতি যোগ করুন:
getMergedStyles = () => {
const {style} = this.props;
const {style: internalStyle} = this.state;
return Object.assign({}, internalStyle, style);
}
this.classes render পদ্ধতি থেকেও অনুপস্থিত, কিন্তু পরবর্তী বিভাগে কভার করা হবে। অনুপস্থিত গেটার পদ্ধতি ছাড়াও, this.classes , TopAppBar এর কিছু অংশ এখনও রয়েছে যা আপনাকে Top App Bar সঠিকভাবে রেন্ডার করার আগে প্রয়োগ করতে হবে৷
রিঅ্যাক্ট কম্পোনেন্টের যে অংশগুলি এখনও টপ অ্যাপ বার থেকে অনুপস্থিত তা হল:
- একটি প্রাথমিক ভিত্তি
- ফাউন্ডেশনে প্রবেশ করার জন্য অ্যাডাপ্টার পদ্ধতি
- JSX মার্কআপ
- বৈকল্পিক ব্যবস্থাপনা (স্থির, সংক্ষিপ্ত, সর্বদা ভেঙে পড়া, বিশিষ্ট)
পন্থা
- অ্যাডাপ্টার পদ্ধতি প্রয়োগ করুন।
-
componentDidMountফাউন্ডেশন শুরু করুন। -
componentWillUnmountএ Foundation.destroy পদ্ধতিতে কল করুন। - উপযুক্ত শ্রেণীর নামগুলিকে একত্রিত করে এমন একটি গেটার পদ্ধতির মাধ্যমে বৈকল্পিক ব্যবস্থাপনা স্থাপন করুন।
4. অ্যাডাপ্টার পদ্ধতি প্রয়োগ করুন
নন-ফ্রেমওয়ার্ক JS TopAppBar কম্পোনেন্ট নিম্নলিখিত অ্যাডাপ্টার পদ্ধতি প্রয়োগ করে ( এখানে বিস্তারিত তালিকাভুক্ত):
-
hasClass() -
addClass() -
removeClass() -
registerNavigationIconInteractionHandler() -
deregisterNavigationIconInteractionHandler() -
notifyNavigationIconClicked() -
setStyle() -
getTopAppBarHeight() -
registerScrollHandler() -
deregisterScrollHandler() -
registerResizeHandler() -
deregisterResizeHandler() -
getViewportScrollY() -
getTotalActionItems()
যেহেতু প্রতিক্রিয়া সিন্থেটিক ইভেন্ট এবং বিভিন্ন সেরা কোডিং অনুশীলন এবং নিদর্শন রয়েছে, তাই অ্যাডাপ্টার পদ্ধতিগুলি পুনরায় প্রয়োগ করা দরকার।
অ্যাডাপ্টার গেটার পদ্ধতি
TopAppBar.js ফাইলে TopAppBar এ নিম্নলিখিত জাভাস্ক্রিপ্ট পদ্ধতি যোগ করুন:
get adapter() {
const {actionItems} = this.props;
return {
hasClass: (className) => this.classes.split(' ').includes(className),
addClass: (className) => this.setState({classList: this.state.classList.add(className)}),
removeClass: (className) => {
const {classList} = this.state;
classList.delete(className);
this.setState({classList});
},
setStyle: this.setStyle,
getTopAppBarHeight: () => this.topAppBarElement.current.clientHeight,
registerScrollHandler: (handler) => window.addEventListener('scroll', handler),
deregisterScrollHandler: (handler) => window.removeEventListener('scroll', handler),
registerResizeHandler: (handler) => window.addEventListener('resize', handler),
deregisterResizeHandler: (handler) => window.removeEventListener('resize', handler),
getViewportScrollY: () => window.pageYOffset,
getTotalActionItems: () => actionItems && actionItems.length,
};
}
স্ক্রোল এবং রিসাইজ ইভেন্ট রেজিস্ট্রেশনের জন্য অ্যাডাপ্টার APIগুলি নন-ফ্রেমওয়ার্ক JS সংস্করণে অভিন্নভাবে প্রয়োগ করা হয়, কারণ স্ক্রলিং বা আকার পরিবর্তন করার জন্য প্রতিক্রিয়ার কোনো সিন্থেটিক ইভেন্ট নেই এবং নেটিভ DOM ইভেন্ট সিস্টেমে স্থগিত করে। getViewPortScrollY নেটিভ DOM-এ পিছিয়ে দিতে হবে কারণ এটি window অবজেক্টের একটি ফাংশন, যা React এর API-এ নেই। অ্যাডাপ্টার বাস্তবায়ন প্রতিটি কাঠামোর জন্য ভিন্ন হবে।
আপনি লক্ষ্য করতে পারেন this.setStyle অনুপস্থিত, যাকে get adapter পদ্ধতি বলে। TopAppBar.js ফাইলে, TopAppBar ক্লাসে অনুপস্থিত জাভাস্ক্রিপ্ট পদ্ধতি যোগ করুন:
setStyle = (varName, value) => {
const updatedStyle = Object.assign({}, this.state.style);
updatedStyle[varName] = value;
this.setState({style: updatedStyle});
}
আপনি শুধু অ্যাডাপ্টার বাস্তবায়ন করেছেন! মনে রাখবেন যে আপনি এই সময়ে আপনার কনসোলে ত্রুটি দেখতে পারেন কারণ সম্পূর্ণ বাস্তবায়ন এখনও সম্পূর্ণ হয়নি। পরবর্তী বিভাগ আপনাকে কিভাবে CSS ক্লাস যোগ এবং অপসারণ করতে হয় সে সম্পর্কে গাইড করবে।
5. উপাদান পদ্ধতি বাস্তবায়ন
ভেরিয়েন্ট এবং ক্লাস পরিচালনা
ক্লাস পরিচালনা করার জন্য প্রতিক্রিয়ার একটি API নেই। নেটিভ জাভাস্ক্রিপ্টের সিএসএস ক্লাস মেথড অ্যাড/রিমুভ করতে, classList স্টেট ভেরিয়েবল যোগ করুন। TopAppBar এ তিনটি টুকরো কোড রয়েছে যা CSS ক্লাসের সাথে ইন্টারঅ্যাক্ট করে:
-
classNameপ্রপের মাধ্যমে<TopAppBar />কম্পোনেন্ট। - অ্যাডাপ্টার পদ্ধতি
addClassবাremoveClassমাধ্যমে। -
<TopAppBar />প্রতিক্রিয়া উপাদানের মধ্যে হার্ড কোডেড।
প্রথমে, বিদ্যমান আমদানির নীচে, TopAppBar.js এর শীর্ষে নিম্নলিখিত আমদানি যোগ করুন:
import classnames from 'classnames';
তারপর TopAppBar উপাদানের ক্লাস ঘোষণার ভিতরে নিম্নলিখিত কোড যোগ করুন:
export default class TopAppBar extends React.Component {
constructor(props) {
super(props);
this.topAppBarElement = React.createRef();
}
state = {
classList: new Set(),
style: {},
};
get classes() {
const {classList} = this.state;
const {
alwaysCollapsed,
className,
short,
fixed,
prominent,
} = this.props;
return classnames('mdc-top-app-bar', Array.from(classList), className, {
'mdc-top-app-bar--fixed': fixed,
'mdc-top-app-bar--short': short,
'mdc-top-app-bar--short-collapsed': alwaysCollapsed,
'mdc-top-app-bar--prominent': prominent,
});
}
...
}
আপনি যদি http://localhost:8080- এ যান কন্ট্রোল চেকবক্সগুলি এখন DOM থেকে ক্লাসের নামগুলি চালু/বন্ধ করতে হবে।
এই কোডটি অনেক ডেভেলপার দ্বারা TopAppBar ব্যবহারযোগ্য করে তোলে। বিকাশকারীরা TopAppBar এপিআই-এর সাথে যোগাযোগ করতে পারে, সিএসএস ক্লাসের বাস্তবায়নের বিবরণ নিয়ে চিন্তা না করে।
আপনি এখন সফলভাবে অ্যাডাপ্টার বাস্তবায়ন করেছেন। পরবর্তী বিভাগ আপনাকে একটি ফাউন্ডেশন ইনস্ট্যান্টিয়েট করার মাধ্যমে গাইড করবে।
কম্পোনেন্ট মাউন্ট করা এবং আনমাউন্ট করা
ফাউন্ডেশন ইনস্ট্যান্টেশন componentDidMount পদ্ধতিতে ঘটে।
প্রথমে, TopAppBar.js এ বিদ্যমান আমদানির পরে নিম্নলিখিত আমদানি যোগ করে MDC শীর্ষ অ্যাপ বার ফাউন্ডেশন আমদানি করুন:
import {MDCTopAppBarFoundation, MDCFixedTopAppBarFoundation, MDCShortTopAppBarFoundation} from '@material/top-app-bar';
এরপর, TopAppBar ক্লাসে নিম্নলিখিত জাভাস্ক্রিপ্ট কোড যোগ করুন:
export default class TopAppBar extends React.Component {
...
foundation_ = null;
componentDidMount() {
this.initializeFoundation();
}
componentWillUnmount() {
this.foundation_.destroy();
}
initializeFoundation = () => {
if (this.props.short) {
this.foundation_ = new MDCShortTopAppBarFoundation(this.adapter);
} else if (this.props.fixed) {
this.foundation_ = new MDCFixedTopAppBarFoundation(this.adapter);
} else {
this.foundation_ = new MDCTopAppBarFoundation(this.adapter);
}
this.foundation_.init();
}
...
}
একটি ভাল প্রতিক্রিয়া কোডিং অনুশীলন হল propTypes এবং defaultProps সংজ্ঞায়িত করা। TopAppBar.js-এ বিদ্যমান আমদানির পরে নিম্নলিখিত আমদানি যোগ করুন:
import PropTypes from 'prop-types';
তারপর নিম্নলিখিত কোডটি TopAppBar.js এর নীচে যোগ করুন (কম্পোনেন্ট ক্লাসের পরে):
import PropTypes from 'prop-types';
TopAppBar.propTypes = {
alwaysCollapsed: PropTypes.bool,
short: PropTypes.bool,
fixed: PropTypes.bool,
prominent: PropTypes.bool,
title: PropTypes.string,
actionItems: PropTypes.arrayOf(PropTypes.element),
navIcon: PropTypes.element,
};
TopAppBar.defaultProps = {
alwaysCollapsed: false,
short: false,
fixed: false,
prominent: false,
title: '',
actionItems: null,
navIcon: null,
};
আপনি এখন সফলভাবে টপ অ্যাপ বার রিঅ্যাক্ট কম্পোনেন্ট বাস্তবায়ন করেছেন। আপনি যদি http://localhost:8080 এ নেভিগেট করেন তাহলে আপনি ডেমো পৃষ্ঠার সাথে খেলতে পারবেন। ডেমো পৃষ্ঠাটি MDC ওয়েবের ডেমো পৃষ্ঠার মতোই কাজ করবে। ডেমো পৃষ্ঠাটি এইরকম হওয়া উচিত:
6. মোড়ানো
এই টিউটোরিয়ালে আমরা একটি প্রতিক্রিয়া অ্যাপ্লিকেশনে ব্যবহারের জন্য এমডিসি ওয়েবের ফাউন্ডেশন কীভাবে মোড়ানো যায় তা কভার করেছি। Github এবং npm-এ কয়েকটি লাইব্রেরি রয়েছে যেগুলি MDC ওয়েব কম্পোনেন্টগুলিকে ফ্রেমওয়ার্কের মধ্যে ইন্টিগ্রেটিং -এ বর্ণিত হিসাবে মোড়ানো। আমরা আপনাকে এখানে পাওয়া তালিকা ব্যবহার করার পরামর্শ দিই। এই তালিকায় Angular এবং Vue-এর মতো React ছাড়াও অন্যান্য ফ্রেমওয়ার্কও রয়েছে।
এই টিউটোরিয়ালটি MDC ওয়েব কোডকে 3টি অংশে বিভক্ত করার সিদ্ধান্তকে হাইলাইট করে, ফাউন্ডেশন , অ্যাডাপ্টার এবং কম্পোনেন্ট। এই আর্কিটেকচারটি সমস্ত ফ্রেমওয়ার্কের সাথে কাজ করার সময় উপাদানগুলিকে সাধারণ কোড ভাগ করার অনুমতি দেয়। উপাদান উপাদান প্রতিক্রিয়া চেষ্টা করার জন্য ধন্যবাদ এবং আমাদের নতুন লাইব্রেরি MDC প্রতিক্রিয়া দেখুন দয়া করে. আমরা আশা করি আপনি এই কোডল্যাব উপভোগ করেছেন!