1. परिचय
Material Components (एमडीसी), डेवलपर को Material Design लागू करने में मदद करते हैं. MDC को Google के इंजीनियर और UX डिज़ाइनर की टीम ने बनाया है. इसमें सुंदर और काम के कई यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट हैं. यह Android, iOS, वेब, और Flutter के लिए उपलब्ध है.material.io/develop |
MDC Web को इस तरह से बनाया गया है कि इसे किसी भी फ़्रंट-एंड फ़्रेमवर्क में इंटिग्रेट किया जा सके. साथ ही, इसमें Material Design के सिद्धांतों का पालन किया जाता है. इस कोडलैब में, आपको React कॉम्पोनेंट बनाने का तरीका बताया गया है. यह कॉम्पोनेंट, फ़ाउंडेशन के तौर पर MDC वेब का इस्तेमाल करता है. इस कोडलैब में बताए गए सिद्धांतों को किसी भी JavaScript फ़्रेमवर्क पर लागू किया जा सकता है.
एमडीसी वेब को कैसे बनाया जाता है
एमडीसी वेब की JavaScript लेयर में हर कॉम्पोनेंट के लिए तीन क्लास होती हैं: कॉम्पोनेंट, फ़ाउंडेशन, और अडैप्टर. इस पैटर्न की मदद से, MDC Web को फ़्रंटएंड फ़्रेमवर्क के साथ इंटिग्रेट करने में आसानी होती है.
फ़ाउंडेशन में, कारोबार से जुड़ा वह लॉजिक होता है जो Material Design को लागू करता है. फ़ाउंडेशन किसी भी एचटीएमएल एलिमेंट का रेफ़रंस नहीं देता. इससे, हमें अडैप्टर में एचटीएमएल इंटरैक्शन लॉजिक को अलग करने में मदद मिलती है. फ़ाउंडेशन में अडैप्टर है.
अडैप्टर एक इंटरफ़ेस है. मटीरियल डिज़ाइन बिज़नेस लॉजिक को लागू करने के लिए, अडैप्टर इंटरफ़ेस का रेफ़रंस फ़ाउंडेशन में दिया गया है. अडैप्टर को अलग-अलग फ़्रेमवर्क में लागू किया जा सकता है. जैसे, Angular या React. अडैप्टर को लागू करने पर, वह डीओएम स्ट्रक्चर के साथ इंटरैक्ट करता है.
कॉम्पोनेंट में फ़ाउंडेशन होता है और इसकी भूमिका यह है कि
- नॉन-फ़्रेमवर्क JavaScript का इस्तेमाल करके, अडैप्टर को लागू करें और
- सार्वजनिक तरीके उपलब्ध कराएं, जो फ़ाउंडेशन के तरीकों को प्रॉक्सी करते हैं.
एमडीसी वेब पर क्या-क्या सुविधाएं मिलती हैं
MDC Web में हर पैकेज में एक कॉम्पोनेंट, फ़ाउंडेशन, और अडैप्टर होता है. किसी कॉम्पोनेंट को इंस्टैंशिएट करने के लिए, आपको कॉम्पोनेंट के कन्स्ट्रक्टर मेथड में रूट एलिमेंट पास करना होगा. कॉम्पोनेंट, एक अडैप्टर लागू करता है, जो DOM और एचटीएमएल एलिमेंट के साथ इंटरैक्ट करता है. इसके बाद, कॉम्पोनेंट, फ़ाउंडेशन को इंस्टैंशिएट करता है, जो अडैप्टर के तरीकों को कॉल करता है.
किसी फ़्रेमवर्क में MDC वेब को इंटिग्रेट करने के लिए, आपको उस फ़्रेमवर्क की भाषा/सिंटैक्स में अपना कॉम्पोनेंट बनाना होगा. फ़्रेमवर्क कॉम्पोनेंट, एमडीसी वेब के अडैप्टर को लागू करता है और एमडीसी वेब के फ़ाउंडेशन का इस्तेमाल करता है.
आपको क्या बनाना है
इस कोडलैब में, कस्टम अडैप्टर बनाने का तरीका बताया गया है. इससे, Material Design React कॉम्पोनेंट बनाने के लिए, फ़ाउंडेशन लॉजिक का इस्तेमाल किया जा सकता है. इसमें फ़्रेमवर्क में इंटिग्रेट करने के बारे में बेहतर विषयों के बारे में बताया गया है. इस कोडलैब में, React का इस्तेमाल एक उदाहरण फ़्रेमवर्क के तौर पर किया जाता है. हालांकि, यह तरीका किसी दूसरे फ़्रेमवर्क पर भी लागू किया जा सकता है.
इस कोडलैब में, सबसे ऊपर मौजूद ऐप्लिकेशन बार बनाएं और सबसे ऊपर मौजूद ऐप्लिकेशन बार वाला डेमो पेज फिर से बनाएं. डेमो पेज का लेआउट पहले से ही सेटअप है. इसलिए, अब आप सबसे ऊपर मौजूद ऐप्लिकेशन बार पर काम कर सकते हैं. सबसे ऊपर मौजूद ऐप्लिकेशन बार में ये चीज़ें शामिल होंगी:
- नेविगेशन आइकॉन
- ऐक्शन आइटम
- चार वैरिएंट उपलब्ध हैं: छोटा, हमेशा छोटा, तय, और प्रमुख वैरिएंट
आपको इन चीज़ों की ज़रूरत होगी:
- Node.js का नया वर्शन (जो JavaScript पैकेज मैनेजर npm के साथ बंडल में आता है)
- सैंपल कोड (अगले चरण में डाउनलोड किया जाएगा)
- एचटीएमएल, सीएसएस, JavaScript, और React की बुनियादी जानकारी
वेब डेवलपमेंट के अपने अनुभव को आप कितनी रेटिंग देंगे?
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/ पर ले जाएं.
हो गया! आपके ब्राउज़र में, टॉप ऐप्लिकेशन बार के React डेमो पेज का स्टार्टर कोड चल रहा होना चाहिए. आपको 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 तरीके वाली एक साधारण React Component क्लास है:
TopAppBar.js
import React from 'react';
export default class TopAppBar extends React.Component {
render() {
return (
<header>
TOP APP BAR
</header>
);
}
}
3. कॉम्पोनेंट का कंपोज़िशन
React में, render तरीका कॉम्पोनेंट का एचटीएमएल आउटपुट करता है. टॉप ऐप्लिकेशन बार कॉम्पोनेंट, <header /> टैग रेंडर करेगा और इसमें दो मुख्य सेक्शन होंगे:
- नेविगेशन आइकॉन और टाइटल सेक्शन
- ऐक्शन आइकॉन का सेक्शन
अगर आपको टॉप ऐप्लिकेशन बार में शामिल एलिमेंट के बारे में कोई सवाल पूछना है, तो 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>
);
}
इस एचटीएमएल में दो सेक्शन एलिमेंट हैं. पहले में एक नेविगेशन आइकॉन और शीर्षक होता है. दूसरे में कार्रवाई के आइकॉन होते हैं.
इसके बाद, 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 क्लास में यह JavaScript तरीका जोड़ें:
getMergedStyles = () => {
const {style} = this.props;
const {style: internalStyle} = this.state;
return Object.assign({}, internalStyle, style);
}
render तरीके में भी this.classes मौजूद नहीं है. हालांकि, इसे बाद के सेक्शन में शामिल किया जाएगा. this.classes के अलावा, 'डेटा पाने का तरीका' भी मौजूद नहीं है. साथ ही, TopAppBar के कुछ हिस्से भी मौजूद नहीं हैं. इन हिस्सों को लागू करने के बाद ही, टॉप ऐप्लिकेशन बार सही तरीके से रेंडर हो पाएगा.
React कॉम्पोनेंट के ये हिस्से, अब भी टॉप ऐप्लिकेशन बार में मौजूद नहीं हैं:
- शुरू किया गया फ़ाउंडेशन
- फ़ाउंडेशन में पास करने के लिए, अडैप्टर के तरीके
- JSX मार्कअप
- वैरिएंट मैनेजमेंट (तय, छोटा, हमेशा छोटा किया गया, प्रमुख)
तरीका
- अडैप्टर के तरीके लागू करें.
componentDidMountमें फ़ाउंडेशन की शुरुआत करें.componentWillUnmountमें Foundation.destroy तरीके को कॉल करें.- सही क्लास के नामों को जोड़ने वाले गैटर तरीके की मदद से, वैरिएंट मैनेजमेंट सेट अप करें.
4. अडैप्टर के तरीके लागू करना
नॉन-फ़्रेमवर्क JS TopAppBar कॉम्पोनेंट, अडैप्टर के इन तरीकों को लागू करता है. इनके बारे में ज़्यादा जानकारी यहां दी गई है:
hasClass()addClass()removeClass()registerNavigationIconInteractionHandler()deregisterNavigationIconInteractionHandler()notifyNavigationIconClicked()setStyle()getTopAppBarHeight()registerScrollHandler()deregisterScrollHandler()registerResizeHandler()deregisterResizeHandler()getViewportScrollY()getTotalActionItems()
React में सिंथेटिक इवेंट और कोडिंग के अलग-अलग सबसे सही तरीके और पैटर्न होते हैं. इसलिए, अडैप्टर के तरीकों को फिर से लागू करना ज़रूरी है.
अडैप्टर गेटर मेथड
TopAppBar.js फ़ाइल में, TopAppBar में यह JavaScript तरीका जोड़ें:
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,
};
}
स्क्रोल और साइज़ बदलने के इवेंट रजिस्ट्रेशन के लिए, अडैप्टर एपीआई को नॉन-फ़्रेमवर्क JS वर्शन की तरह ही लागू किया जाता है. ऐसा इसलिए है, क्योंकि React में स्क्रोल करने या साइज़ बदलने के लिए कोई सिंथेटिक इवेंट नहीं होता. साथ ही, यह नेटिव DOM इवेंट सिस्टम का इस्तेमाल करता है. getViewPortScrollY को भी नेटिव DOM का इस्तेमाल करना होगा, क्योंकि यह window ऑब्जेक्ट पर मौजूद एक फ़ंक्शन है, जो React के एपीआई में नहीं है. हर फ़्रेमवर्क के लिए, अडैप्टर लागू करने का तरीका अलग-अलग होगा.
आपको this.setStyle नहीं दिखेगा, जिसे get adapter तरीके से कॉल किया जाता है. TopAppBar.js फ़ाइल में, TopAppBar क्लास में JavaScript का वह तरीका जोड़ें जो मौजूद नहीं है:
setStyle = (varName, value) => {
const updatedStyle = Object.assign({}, this.state.style);
updatedStyle[varName] = value;
this.setState({style: updatedStyle});
}
आपने अभी-अभी अडैप्टर लागू किया है! ध्यान दें कि अभी आपको अपने कंसोल में गड़बड़ियां इसलिए दिख सकती हैं, क्योंकि अभी पूरी तरह लागू नहीं हुआ है. अगले सेक्शन में, सीएसएस क्लास जोड़ने और हटाने का तरीका बताया गया है.
5. कॉम्पोनेंट के तरीके लागू करना
वैरिएंट और क्लास मैनेज करना
React में क्लास मैनेज करने के लिए कोई एपीआई नहीं है. नेटिव JavaScript के सीएसएस क्लास के जोड़ने/हटाने के तरीकों की नकल करने के लिए, classList स्टेटस वैरिएबल जोड़ें. TopAppBar में कोड के तीन हिस्से होते हैं, जो सीएसएस क्लास के साथ इंटरैक्ट करते हैं:
<TopAppBar />कॉम्पोनेंट कोclassNameप्रॉपर्टी के ज़रिए जोड़ा जा सकता है.addClassयाremoveClassके ज़रिए Adapter का तरीका.<TopAppBar />React कॉम्पोनेंट में हार्ड कोड किया गया.
सबसे पहले, 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 पर जाने पर, कंट्रोल चेकबॉक्स को अब डीओएम से क्लास के नामों को चालू/बंद करने के लिए टॉगल करना होगा.
इस कोड की मदद से, कई डेवलपर TopAppBar का इस्तेमाल कर सकते हैं. डेवलपर, सीएसएस क्लास को लागू करने की जानकारी के बारे में चिंता किए बिना, TopAppBar एपीआई के साथ इंटरैक्ट कर सकते हैं.
अब आपने अडैप्टर लागू कर लिया है. अगले सेक्शन में, आपको फ़ाउंडेशन इंस्टैंशिएट करने का तरीका बताया जाएगा.
कॉम्पोनेंट को माउंट और अनमाउंट करना
Foundation इंस्टैंशिएशन, componentDidMount मेथड में होता है.
सबसे पहले, TopAppBar.js में मौजूदा इंपोर्ट के बाद, यह इंपोर्ट जोड़कर एमडीसी टॉप ऐप्लिकेशन बार फ़ाउंडेशन इंपोर्ट करें:
import {MDCTopAppBarFoundation, MDCFixedTopAppBarFoundation, MDCShortTopAppBarFoundation} from '@material/top-app-bar';
इसके बाद, TopAppBar क्लास में यह JavaScript कोड जोड़ें:
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 (कॉम्पोनेंट क्लास के बाद) में सबसे नीचे यह कोड जोड़ें:
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,
};
अब आपने टॉप ऐप्लिकेशन बार का React कॉम्पोनेंट लागू कर लिया है. http://localhost:8080 पर जाकर, डेमो पेज को आज़माया जा सकता है. डेमो पेज, एमडीसी वेब के डेमो पेज की तरह ही काम करेगा. डेमो पेज कुछ ऐसा दिखना चाहिए:
6. आखिर में खास जानकारी
इस ट्यूटोरियल में, हमने React ऐप्लिकेशन में इस्तेमाल करने के लिए, MDC Web के फ़ाउंडेशन को रैप करने का तरीका बताया है. GitHub और एनपीएम पर कुछ लाइब्रेरी मौजूद हैं जो एमडीसी वेब कॉम्पोनेंट को रैप करती हैं. इसके बारे में फ़्रेमवर्क में इंटिग्रेट करना लेख में बताया गया है. हमारा सुझाव है कि आप यहां दी गई सूची का इस्तेमाल करें. इस सूची में React के अलावा, Angular और Vue जैसे अन्य फ़्रेमवर्क भी शामिल हैं.
इस ट्यूटोरियल में, एमडीसी वेब कोड को तीन हिस्सों में बांटने के हमारे फ़ैसले के बारे में बताया गया है. ये हिस्से हैं: फ़ाउंडेशन, अडैप्टर, और कॉम्पोनेंट. इस आर्किटेक्चर की मदद से, सभी फ़्रेमवर्क के साथ काम करते हुए कॉम्पोनेंट, कॉमन कोड शेयर कर सकते हैं. Material Components React को आज़माने के लिए धन्यवाद. कृपया हमारी नई लाइब्रेरी MDC React देखें. हमें उम्मीद है कि आपको यह कोडलैब पसंद आया होगा!