১. ভূমিকা
ম্যাটেরিয়াল কম্পোনেন্টস (MDC) ডেভেলপারদের ম্যাটেরিয়াল ডিজাইন বাস্তবায়ন করতে সাহায্য করে। গুগলের একদল ইঞ্জিনিয়ার এবং ইউএক্স ডিজাইনার দ্বারা তৈরি, MDC-তে কয়েক ডজন সুন্দর এবং কার্যকরী UI কম্পোনেন্ট রয়েছে এবং এটি অ্যান্ড্রয়েড, আইওএস, ওয়েব এবং ফ্লাটারের জন্য উপলব্ধ। material.io/develop |
MDC Web-কে ম্যাটেরিয়াল ডিজাইনের নীতিগুলি বজায় রেখে যেকোনো ফ্রন্ট-এন্ড ফ্রেমওয়ার্কের সাথে একীভূত হওয়ার জন্য ডিজাইন করা হয়েছে। নিম্নলিখিত কোডল্যাবটি আপনাকে একটি React কম্পোনেন্ট তৈরি করার পদ্ধতি দেখাবে, যার ভিত্তি হিসেবে MDC Web ব্যবহৃত হয়েছে। এই কোডল্যাবে শেখা নীতিগুলি যেকোনো জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কে প্রয়োগ করা যেতে পারে।
এমডিসি ওয়েব কীভাবে তৈরি করা হয়
MDC Web-এর জাভাস্ক্রিপ্ট লেয়ার প্রতিটি কম্পোনেন্টের জন্য তিনটি ক্লাস নিয়ে গঠিত: Component , Foundation এবং Adapter । এই প্যাটার্নটি MDC Web-কে ফ্রন্টএন্ড ফ্রেমওয়ার্কগুলোর সাথে ইন্টিগ্রেট করার নমনীয়তা প্রদান করে।
ফাউন্ডেশনে ম্যাটেরিয়াল ডিজাইন বাস্তবায়নকারী বিজনেস লজিক থাকে। ফাউন্ডেশন কোনো HTML এলিমেন্টকে রেফারেন্স করে না। এর ফলে আমরা HTML ইন্টারঅ্যাকশন লজিককে অ্যাডাপ্টারের মধ্যে অ্যাবস্ট্রাক্ট করতে পারি। ফাউন্ডেশনের একটি অ্যাডাপ্টার আছে।
অ্যাডাপ্টার হলো একটি ইন্টারফেস। ম্যাটেরিয়াল ডিজাইন বিজনেস লজিক বাস্তবায়নের জন্য ফাউন্ডেশন অ্যাডাপ্টার ইন্টারফেসটিকে রেফারেন্স হিসেবে ব্যবহার করে। আপনি অ্যাঙ্গুলার বা রিঅ্যাক্টের মতো বিভিন্ন ফ্রেমওয়ার্কে অ্যাডাপ্টার ইমপ্লিমেন্ট করতে পারেন। অ্যাডাপ্টারের একটি ইমপ্লিমেন্টেশন DOM স্ট্রাকচারের সাথে ইন্টারঅ্যাক্ট করে।
উপাদানটির একটি ভিত্তি রয়েছে, এবং এর ভূমিকা হলো
- নন-ফ্রেমওয়ার্ক জাভাস্ক্রিপ্ট ব্যবহার করে অ্যাডাপ্টারটি বাস্তবায়ন করুন, এবং
- পাবলিক মেথড সরবরাহ করুন যা ফাউন্ডেশন- এর মেথডগুলোর প্রক্সি হিসেবে কাজ করে।
এমডিসি ওয়েব যা প্রদান করে
MDC Web-এর প্রতিটি প্যাকেজের সাথে একটি Component , Foundation এবং Adapter থাকে। একটি Component ইনস্ট্যানশিয়েট করতে হলে আপনাকে অবশ্যই Component-এর কনস্ট্রাক্টর মেথডে রুট এলিমেন্টটি পাস করতে হবে। Component- টি একটি Adapter ইমপ্লিমেন্ট করে, যা DOM এবং HTML এলিমেন্টগুলোর সাথে ইন্টারঅ্যাক্ট করে। এরপর Component- টি Foundation ইনস্ট্যানশিয়েট করে, যা Adapter-এর মেথডগুলোকে কল করে।
কোনো ফ্রেমওয়ার্কে MDC Web-কে সংহত করতে হলে, আপনাকে সেই ফ্রেমওয়ার্কের ভাষা/সিনট্যাক্সে আপনার নিজস্ব কম্পোনেন্ট তৈরি করতে হবে। ফ্রেমওয়ার্ক কম্পোনেন্টটি MDC Web-এর অ্যাডাপ্টার ইমপ্লিমেন্ট করে এবং MDC Web-এর ফাউন্ডেশন ব্যবহার করে।
আপনি যা তৈরি করবেন
এই কোডল্যাবটি দেখায় কিভাবে ফাউন্ডেশন লজিক ব্যবহার করে একটি ম্যাটেরিয়াল ডিজাইন রিয়্যাক্ট কম্পোনেন্ট তৈরির জন্য একটি কাস্টম অ্যাডাপ্টার নির্মাণ করতে হয়। এতে "ইন্টিগ্রেটিং ইনটু ফ্রেমওয়ার্কস" অংশে থাকা উন্নত বিষয়গুলো আলোচনা করা হয়েছে। এই কোডল্যাবে উদাহরণ ফ্রেমওয়ার্ক হিসেবে রিয়্যাক্ট ব্যবহার করা হয়েছে, কিন্তু এই পদ্ধতিটি অন্য যেকোনো ফ্রেমওয়ার্কের ক্ষেত্রেও প্রয়োগ করা যেতে পারে।
এই কোডল্যাবে, আপনি টপ অ্যাপ বার তৈরি করবেন এবং টপ অ্যাপ বারের ডেমো পেজটি পুনরায় তৈরি করবেন। ডেমো পেজের লেআউটটি ইতিমধ্যেই সেটআপ করা আছে, তাই আপনি টপ অ্যাপ বারের কাজ শুরু করতে পারেন। টপ অ্যাপ বারে যা যা থাকবে:
- নেভিগেশন আইকন
- করণীয় বিষয়সমূহ
- এর ৪টি ভ্যারিয়েন্ট উপলব্ধ আছে: শর্ট , অলওয়েজ কলাপসড , ফিক্সড এবং প্রমিনেন্ট ভ্যারিয়েন্ট।
আপনার যা যা লাগবে:
- Node.js- এর একটি সাম্প্রতিক সংস্করণ (যা npm , একটি জাভাস্ক্রিপ্ট প্যাকেজ ম্যানেজার, সহ আসে)
- নমুনা কোড (যা পরবর্তী ধাপে ডাউনলোড করতে হবে)
- HTML, CSS, JavaScript, এবং React সম্পর্কে প্রাথমিক জ্ঞান
ওয়েব ডেভেলপমেন্টে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?
২. ডেভেলপমেন্ট পরিবেশ সেট আপ করুন
স্টার্টার কোডল্যাব অ্যাপটি ডাউনলোড করুন
স্টার্টার অ্যাপটি material-components-web-codelabs-master/mdc-112/starter ডিরেক্টরির মধ্যে অবস্থিত।
...অথবা গিটহাব থেকে এটি ক্লোন করুন
গিটহাব থেকে এই কোডল্যাবটি ক্লোন করতে, নিম্নলিখিত কমান্ডগুলো চালান:
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/ খুলুন।
সফল! টপ অ্যাপ বার রিয়্যাক্ট ডেমো পেজের স্টার্টার কোডটি এখন আপনার ব্রাউজারে চালু থাকা উচিত। আপনি লরেম ইপসাম টেক্সটের একটি দেয়াল, একটি কন্ট্রোলস বক্স (নিচের ডানদিকে), এবং একটি অসম্পূর্ণ টপ অ্যাপ বার দেখতে পাবেন:
কোড এবং প্রজেক্টটি দেখুন।
আপনি যদি আপনার কোড এডিটর খোলেন, তাহলে প্রজেক্ট ডিরেক্টরিটি দেখতে অনেকটা এইরকম হবে:
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 মেথডসহ একটি সাধারণ React Component ক্লাস:
TopAppBar.js
import React from 'react';
export default class TopAppBar extends React.Component {
render() {
return (
<header>
TOP APP BAR
</header>
);
}
}
৩. উপাদানের গঠন
React-এ, render মেথডটি Component-এর HTML আউটপুট করে। Top App Bar Component-টি একটি <header /> ট্যাগ রেন্ডার করবে, এবং এটি ২টি প্রধান অংশ নিয়ে গঠিত হবে:
- নেভিগেশন আইকন এবং শিরোনাম বিভাগ
- অ্যাকশন আইকন বিভাগ
টপ অ্যাপ বার-এর উপাদানগুলো সম্পর্কে আপনার কোনো প্রশ্ন থাকলে, গিটহাব- এ দেওয়া ডকুমেন্টেশন দেখুন।
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>
);
}
একজন ডেভেলপার তার React অ্যাপ্লিকেশনে TopAppBar ইম্পোর্ট করবেন এবং TopAppBar এলিমেন্টে অ্যাকশন আইকনগুলো পাস করবেন। আপনি App.js এ একটি TopAppBar ইনিশিয়ালাইজ করার উদাহরণ কোড দেখতে পারেন।
getMergedStyles মেথডটি অনুপস্থিত, যা render মেথডে ব্যবহৃত হয়। অনুগ্রহ করে TopAppBar ক্লাসে নিম্নলিখিত জাভাস্ক্রিপ্ট মেথডটি যোগ করুন:
getMergedStyles = () => {
const {style} = this.props;
const {style: internalStyle} = this.state;
return Object.assign({}, internalStyle, style);
}
render মেথড থেকে this.classes ও অনুপস্থিত, তবে এটি পরবর্তী কোনো অংশে আলোচনা করা হবে। এই অনুপস্থিত getter মেথড this.classes ছাড়াও, TopAppBar App Bar সঠিকভাবে রেন্ডার হওয়ার জন্য এর আরও কিছু অংশ আপনাকে ইমপ্লিমেন্ট করতে হবে।
টপ অ্যাপ বার থেকে রিয়্যাক্ট কম্পোনেন্টের যে অংশগুলো এখনও অনুপস্থিত, সেগুলো হলো:
- একটি প্রারম্ভিক ভিত্তি
- ফাউন্ডেশনে পাস করার জন্য অ্যাডাপ্টার মেথডসমূহ
- JSX মার্কআপ
- ভেরিয়েন্ট ম্যানেজমেন্ট (স্থির, সংক্ষিপ্ত, সর্বদা সংকুচিত, সুস্পষ্ট)
পদ্ধতি
- অ্যাডাপ্টার মেথডগুলো বাস্তবায়ন করুন।
-
componentDidMountএ ফাউন্ডেশনটি ইনিশিয়ালাইজ করুন। -
componentWillUnmountএর মধ্যে Foundation.destroy মেথডটি কল করুন। - উপযুক্ত ক্লাস নামগুলোকে একত্রিত করে একটি গেটার মেথডের মাধ্যমে ভ্যারিয়েন্ট ম্যানেজমেন্ট প্রতিষ্ঠা করুন।
৪. অ্যাডাপ্টার পদ্ধতিসমূহ বাস্তবায়ন করুন
নন-ফ্রেমওয়ার্ক JS TopAppBar কম্পোনেন্টটি নিম্নলিখিত অ্যাডাপ্টার মেথডগুলো ইমপ্লিমেন্ট করে (যা এখানে বিস্তারিতভাবে তালিকাভুক্ত করা হয়েছে):
-
hasClass() -
addClass() -
removeClass() -
registerNavigationIconInteractionHandler() -
deregisterNavigationIconInteractionHandler() -
notifyNavigationIconClicked() -
setStyle() -
getTopAppBarHeight() -
registerScrollHandler() -
deregisterScrollHandler() -
registerResizeHandler() -
deregisterResizeHandler() -
getViewportScrollY() -
getTotalActionItems()
যেহেতু React-এ সিন্থেটিক ইভেন্ট এবং ভিন্ন সেরা কোডিং অনুশীলন ও প্যাটার্ন রয়েছে, তাই Adapter মেথডগুলোকে পুনরায় ইমপ্লিমেন্ট করতে হবে।
অ্যাডাপ্টার গেটার পদ্ধতি
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,
};
}
স্ক্রল এবং রিসাইজ ইভেন্ট রেজিস্ট্রেশনের জন্য অ্যাডাপ্টার এপিআইগুলো নন-ফ্রেমওয়ার্ক জেএস ভার্সনের মতোই প্রয়োগ করা হয়, কারণ রিয়্যাক্টে স্ক্রলিং বা রিসাইজিংয়ের জন্য কোনো সিন্থেটিক ইভেন্ট নেই এবং এটি নেটিভ ডম ইভেন্ট সিস্টেমের উপর নির্ভর করে। getViewPortScrollY কেও নেটিভ ডমের উপর নির্ভর করতে হয়, কারণ এটি window অবজেক্টের একটি ফাংশন, যা রিয়্যাক্টের এপিআই-তে নেই। প্রতিটি ফ্রেমওয়ার্কের জন্য অ্যাডাপ্টারের প্রয়োগ ভিন্ন হবে।
আপনি হয়তো লক্ষ্য করবেন যে 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 ক্লাস যোগ এবং অপসারণ করার পদ্ধতি সম্পর্কে নির্দেশনা দেওয়া হবে।
৫. কম্পোনেন্ট মেথডগুলো বাস্তবায়ন করুন
ভেরিয়েন্ট এবং ক্লাস পরিচালনা করা
React-এ ক্লাস ম্যানেজ করার জন্য কোনো API নেই। নেটিভ জাভাস্ক্রিপ্টের add/remove CSS ক্লাস মেথডগুলোর অনুকরণ করতে, 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 বহু ডেভেলপারের জন্য ব্যবহারযোগ্য করে তোলে। ডেভেলপাররা CSS ক্লাসের বাস্তবায়নের খুঁটিনাটি নিয়ে চিন্তা না করেই TopAppBar API-এর সাথে ইন্টারঅ্যাক্ট করতে পারেন।
আপনি এখন সফলভাবে অ্যাডাপ্টারটি প্রয়োগ করেছেন। পরবর্তী বিভাগে একটি ফাউন্ডেশন ইনস্ট্যানশিয়েট করার পদ্ধতি সম্পর্কে আপনাকে নির্দেশনা দেওয়া হবে।
কম্পোনেন্টটি মাউন্ট এবং আনমাউন্ট করা
componentDidMount মেথডে ফাউন্ডেশন ইনস্ট্যানসিয়েশন সম্পন্ন হয়।
প্রথমে, TopAppBar.js এ বিদ্যমান ইম্পোর্টগুলোর পরে নিম্নলিখিত ইম্পোর্টটি যোগ করে MDC Top App Bar-এর ভিত্তিগুলো ইম্পোর্ট করুন:
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();
}
...
}
React কোডিং-এর একটি ভালো অভ্যাস হলো propTypes এবং defaultProps নির্ধারণ করা। TopAppBar.js-এ বিদ্যমান ইম্পোর্টগুলোর পরে নিম্নলিখিত ইম্পোর্টটি যোগ করুন:
import PropTypes from 'prop-types';
এরপর TopAppBar.js ফাইলের একদম শেষে (Component ক্লাসের পরে) নিম্নলিখিত কোডটি যোগ করুন:
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- এ গেলে ডেমো পেজটি নিয়ে পরীক্ষা করতে পারবেন। ডেমো পেজটি এমডিসি ওয়েব-এর ডেমো পেজের মতোই কাজ করবে। ডেমো পেজটি দেখতে এইরকম হবে:
৬. উপসংহার
এই টিউটোরিয়ালে আমরা একটি React অ্যাপ্লিকেশনে ব্যবহারের জন্য MDC Web-এর Foundation-কে কিভাবে র্যাপ করতে হয় তা আলোচনা করেছি। Github এবং npm-এ এমন কিছু লাইব্রেরি রয়েছে যা MDC Web Components-কে র্যাপ করে, যেমনটি "Integrating into Frameworks" অংশে বর্ণনা করা হয়েছে। আমরা আপনাকে এখানে দেওয়া তালিকাটি ব্যবহার করার পরামর্শ দিচ্ছি। এই তালিকায় React ছাড়াও Angular এবং Vue-এর মতো অন্যান্য ফ্রেমওয়ার্কও অন্তর্ভুক্ত রয়েছে।
এই টিউটোরিয়ালে MDC ওয়েব কোডকে ফাউন্ডেশন , অ্যাডাপ্টার এবং কম্পোনেন্ট—এই তিনটি অংশে বিভক্ত করার আমাদের সিদ্ধান্তটি তুলে ধরা হয়েছে। এই আর্কিটেকচারটি কম্পোনেন্টগুলোকে সকল ফ্রেমওয়ার্কের সাথে কাজ করার সময় সাধারণ কোড শেয়ার করার সুযোগ দেয়। ম্যাটেরিয়াল কম্পোনেন্টস রিয়্যাক্ট ব্যবহার করার জন্য ধন্যবাদ এবং অনুগ্রহ করে আমাদের নতুন লাইব্রেরি MDC রিয়্যাক্ট দেখুন। আমরা আশা করি আপনি এই কোডল্যাবটি উপভোগ করেছেন!