React से पोर्ट करना

आपको नए सिरे से शुरू नहीं करना है। किसी React स्क्रीन का ज़्यादातर हिस्सा जैसा लिखा है वैसा ही बदल जाता है: उसका लेआउट, उसका टेक्स्ट, उसके बटन और फ़ील्ड, उसकी शर्तें और सूचियाँ, उसके अपने छोटे कंपोनेंट। बाकी या तो छोटा-सा बदलाव है, या ऐसा काम जो आपके एप्लिकेशन में जाता है, और एक ही काम वाले कंप्यूटर पर उसकी सही जगह वही है।

पहले मापें

एक भी पंक्ति बदलने से पहले Screen Compiler से पूछें कि आपका कोड अभी कितनी दूर तक जाता है। अपने एप्लिकेशन को React से स्क्रीन वाले दोनों रिपॉज़िटरी के बगल में क्लोन करें, ताकि डेव कंटेनर उसे देख सके, और उसके सोर्स पर कवरेज रिपोर्ट चलाएँ:

cd nowayos-work # holds nowayos and screen-compiler
git clone https://example.com/your-app.git my-app
cd screen-compiler
make run ARGS="audit ../my-app/src"

रिपोर्ट उस फ़ोल्डर की हर .tsx फ़ाइल पढ़ती है और जो भी संरचना मिले उसे गिनती है: एलिमेंट, props, स्टाइल प्रॉपर्टी, hooks, सूचियाँ, शर्तें, ऑपरेटर और imports। हर एक को एक फ़ैसला मिलता है:

• सबसेट में: यह बदल जाती है, जहाँ इसका उपयोग वैसा है जैसा सबसेट अनुमति देता है;
• रास्ते पर: यह अभी नहीं बदलती, और रिपोर्ट वह चरण बताती है जो इसे बदलेगा;
• डिज़ाइन से बाहर: यह कभी नहीं बदलेगी, और रिपोर्ट बताती है क्यों;
• अज्ञात: Screen Compiler इसे नहीं पहचानता। अज्ञात को कभी बदला हुआ नहीं गिना जाता।

इसके बाद रास्ते के चरण आते हैं, हर एक की ज़रूरत कितनी बार है, और हर फ़ाइल अपने परिणाम के साथ। कोई फ़ाइल तभी "बदलती है" जब check उसे पास करे, इसलिए सबसे ऊपर की संख्या ही सही संख्या है। रिपोर्ट संरचनाओं के नाम बताती है और आपके कोड को कभी उद्धृत नहीं करती, इसलिए आप उसे निश्चिंत होकर साझा कर सकते हैं। कंपाइलर की तरह, इसे भी केवल उसी कोड पर चलाएँ जिस पर आपको भरोसा है।

क्या किससे मेल खाता है

React से स्क्रीन की तालिकाएँ ठीक-ठीक बताती हैं कि हर कंपोनेंट क्या लेता है। वे Screen Compiler की अपनी तालिकाओं से आती हैं, इसलिए वह जो स्वीकार करता है उससे अलग नहीं हो सकतीं।

क्या आपके एप्लिकेशन में जाता है

डिवाइस पर कोई JavaScript नहीं है। स्क्रीन एक तय पेड़ है जिसे आपका एप्लिकेशन क्रमांकित एक्शन, फ़ील्ड, स्लॉट, समूहों और स्विचों से चलाता है। इसलिए कुछ चीज़ें डिज़ाइन से बाहर रहती हैं, हर एक किसी कारण से:

• स्टेट और hooks (useState, useEffect, context)। स्टेट एप्लिकेशन रखता है और तय करता है कि स्क्रीन क्या दिखाए।
• किसी फ़ील्ड का value, checked और onChange। एप्लिकेशन किसी फ़ील्ड को उसके id से पढ़ता और सेट करता है।
• स्प्रेड props। उनमें क्या है, यह कोड चलने पर ही पता चलता है।
• गणना किए गए स्टाइल, रंग के मान और ग्लोबल स्टाइलशीट। स्टाइल स्थिर होता है, रंग थीम के होते हैं ताकि बड़े अक्षरों वाली थीम हर स्क्रीन के रंग बदल सके और कंट्रास्ट जाँचा जाए, और कोई कैस्केड नहीं है।
• एनिमेशन।
• बिना अधिकतम सीमा वाली सूची। उसे काटें, .slice(0, 5), ताकि स्क्रीन जाने कि वह कितनी पंक्तियाँ दिखा सकती है।
• किसी prop === स्ट्रिंग के अलावा तुलनाएँ, और स्क्रीन के फ़ंक्शन में if या switch। उत्तर एप्लिकेशन में निकालें और उसे prop के रूप में भेजें।
• पैकेजों से आए कंपोनेंट, और स्क्रीन के फ़ोल्डर से बाहर की फ़ाइलें। स्क्रीन केवल अपना फ़ोल्डर और उसके भीतर की फ़ाइलें पढ़ती है: अपने कंपोनेंट उसके बगल में रखें, ./parts/header।
• ऐसा हैंडलर जो किसी prop को कॉल करने से ज़्यादा करे। onClick={() => props.onSave()} बदल जाता है; बाकी सब एप्लिकेशन का काम है।

रास्ता आगे क्या लाता है

जब आपके कोड को ज़रूरत हो, कवरेज रिपोर्ट इन नियोजित चरणों के नाम बताती है:

• और CSS लेआउट: flex विकास, alignSelf, न्यूनतम और अधिकतम ऊँचाई, हर ओर की पैडिंग, और मार्जिन;
• आम HTML एलिमेंट, हर एक एक तय नियम से;
• CSS मॉड्यूल, हर एलिमेंट पर एक क्लास;
• परतें: एक-दूसरे के ऊपर रखे एलिमेंट;
• इमेज और छिपी हुई प्रविष्टि।

जब तक कोई चरण पूरा न हो, उसकी संरचनाएँ अनुमान से बदलने के बजाय अस्वीकार की जाती हैं। हर चरण वही नियम रखता है: सटीक, या बिल्कुल नहीं।

त्रुटि पढ़ना

त्रुटि फ़ाइल, पंक्ति और कॉलम, एक कोड, क्या गलत है, और मदद की एक पंक्ति देती है:

web-search.tsx:16:28: error[unknown-name]: `query` is not a prop of the component
 help: text from the application must be a prop: take it as one, function Screen({ query }) { … }

कोई भी त्रुटि हो तो कुछ नहीं लिखा जाता। कोड:

अगर आपको जिस संरचना की ज़रूरत है वह रास्ते पर है और अभी बनी नहीं, तो रिपोर्ट के साथ बताएँ: वह दिखाती है कि कौन-से चरण सबसे ज़्यादा मायने रखते हैं।