कोड एक्सपोर्ट (HTML, React, Tailwind)

uxmagic.ai/dashboard/react-component-library

क्या-क्या एक्सपोर्ट हो सकता है#

• एक स्क्रीन — HTML के रूप में या React कंपोनेंट के रूप में।
• पूरा प्रोजेक्ट — कई स्क्रीन वाले React प्रोजेक्ट के रूप में, जुड़ा हुआ और आर्काइव के रूप में डाउनलोड करने लायक।

स्टाइलिंग Tailwind CSS में है, और आपके प्रोजेक्ट की थीम डिज़ाइन टोकन के रूप में दर्ज है, इसलिए कोड वही प्रणाली लेकर चलता है जो कैनवास पर है।

एक स्क्रीन एक्सपोर्ट करना#

1. स्क्रीन चुनिए।
2. एक्सपोर्ट → कोड।
3. HTML या React चुनिए।
4. कॉपी कीजिए, या डाउनलोड कीजिए।

पूरा प्रोजेक्ट एक्सपोर्ट करना#

प्रोजेक्ट एक्सपोर्ट पृष्ठभूमि में चलता है — यह हर स्क्रीन बनाता है, फिर उन्हें एक प्रोजेक्ट संरचना में जोड़ता है। बड़े प्रोजेक्ट में ज़्यादा समय लगता है; आप प्रगति देख सकते हैं और पूरा होने पर डाउनलोड कर सकते हैं।

कोड कैसा होता है#

यह असली, पढ़ने लायक फ्रंटएंड कोड है: अर्थपूर्ण मार्कअप, Tailwind की यूटिलिटी क्लास, रंग और टाइप के लिए थीम टोकन, और आपके प्रोजेक्ट के संसाधन भंडार से URL द्वारा जुड़ी तस्वीरें।

दो बातों की तैयारी रखिए:

• संसाधन डिफ़ॉल्ट रूप से बाहर रहते हैं। लाइव करने से पहले उन्हें अपनी रिपॉज़िटरी में डाउनलोड कीजिए, ताकि आपकी प्रोडक्शन साइट UXMagic के संसाधन URL पर निर्भर न रहे।
• यह फ्रंटएंड है। कोई डेटा लेयर, रूटिंग या स्टेट प्रबंधन नहीं — वह आप अपने ऐप में जोड़ेंगे।

रेस्पॉन्सिव#

एक्सपोर्ट किया कोड उसी स्क्रीन को उसी चौड़ाई में दिखाता है जिसे आपने एक्सपोर्ट किया। अगर आपने अलग-अलग मोबाइल और डेस्कटॉप रूप बनाए हैं, तो दोनों एक्सपोर्ट करके अपने ब्रेकपॉइंट पर मिला दीजिए। देखिए रेस्पॉन्सिव और डिवाइस-वार रूप।

सीधे रिपॉज़िटरी में#

एक्सपोर्ट किया कोड डाउनलोड करने के बजाय सीधे GitHub पर भेजा जा सकता है — देखिए GitHub सिंक।