शुरू करें: अपने React ऐप्लिकेशन को ऑप्टिमाइज़ करना

क्या आपको अपनी प्रतिक्रिया वाली साइट को ज़्यादा से ज़्यादा तेज़ और ऐक्सेस करने लायक बनाना है? आप बिलकुल सही जगह पर आए हैं!

हुसैन ज़िरदेह

React एक ओपन सोर्स लाइब्रेरी है, जो यूज़र इंटरफ़ेस (यूआई) बनाना आसान बनाती है. इस लर्निंग पाथ में, नेटवर्क में मौजूद उन अलग-अलग एपीआई और टूल के बारे में बताया गया है जिनका इस्तेमाल, आपको अपने ऐप्लिकेशन की परफ़ॉर्मेंस और उसे इस्तेमाल करने के तरीके को बेहतर बनाने के लिए करना चाहिए.

इस गाइड में, React ऐप्लिकेशन की मदद से साइन इन करने और इसे इस्तेमाल करने का तरीका बताया गया है. इस सेक्शन की हर दूसरी गाइड में, React ऐप्लिकेशन की रफ़्तार या सुलभता को ऑप्टिमाइज़ करने के लिए अलग-अलग विषयों के बारे में बताया गया है.

यह जानकारी काम की क्यों है?

ऐसे बहुत सारे कॉन्टेंट हैं जो तेज़ और भरोसेमंद ऐप्लिकेशन बनाने का तरीका बताते हैं. हालांकि, ऐसे बहुत सारे कॉन्टेंट नहीं हैं जो तेज़ी और भरोसेमंद React ऐप्लिकेशन बनाने का तरीका बताते हैं. इन गाइड में, React ऐप्लिकेशन के नज़रिए से इन सभी चीज़ों के बारे में बताया गया है. इसमें सिर्फ़ React नेटवर्क की खास लाइब्रेरी, एपीआई, और सुविधाओं के बारे में बताया गया है.

आपको क्या सीखने को मिलेगा?

सीखने की इस सामग्री में दिए गए ट्यूटोरियल इन पर फ़ोकस नहीं करते हैं:

  • प्रतिक्रिया वाली सुविधा इस्तेमाल करने का तरीका
  • रिऐक्ट हुड में कैसे काम करता है

ज़रूरत पड़ने पर इन दोनों सिद्धांतों पर भी चर्चा की जाएगी. इस सेक्शन में मौजूद सभी गाइड और कोडलैब के बजाय, हम आपको ऐसी प्रतिक्रिया देने वाली साइटें बनाने के तरीके पर फ़ोकस करेंगे जिसे तेज़ और ऐक्सेस करने लायक बनाया जा सकता है. इस वजह से, यह ज़रूरी है कि आपको प्रतिक्रिया के बारे में बुनियादी जानकारी हो.

React ऐप्लिकेशन बनाएं

Create React ऐप्लिकेशन (CRA) एक ऐसा सबसे आसान तरीका है जिससे प्रतिक्रिया देने वाले ऐप्लिकेशन बनाना शुरू किया जा सकता है. इसमें कई मुख्य सुविधाएं डिफ़ॉल्ट रूप से सेट अप होती हैं. इनमें एक मॉड्यूल बंडलर (वेबपैक) और ट्रांसपाइलर (बैबल) वाला बिल्ड सिस्टम शामिल होता है.

कमांड-लाइन शेल पर, आपको नया ऐप्लिकेशन बनाने के लिए सिर्फ़ इन्हें चलाना होगा:

npx create-react-app app-name

निर्देश लागू होने के बाद, इस ऐप्लिकेशन पर जाकर इन्हें चलाया जा सकता है:

cd new-app
npm start

नीचे दिए गए एम्बेड में, नए बूटस्ट्रैप किए गए CRA ऐप्लिकेशन की डायरेक्ट्री का स्ट्रक्चर और असल वेब पेज दिखाया गया है.

ऐसी कई कॉन्फ़िगरेशन फ़ाइलें और बिल्ड स्क्रिप्ट हैं जिनका इस्तेमाल CRA, वेबपैक और बेबल बिल्ड प्रोसेस सेट अप करने के लिए करता है. इसमें टेस्ट के लिए, एक बेस Jest सेट अप शामिल होता है. उपयोगकर्ता के लिए चीज़ों को आसान बनाने के लिए, ये फ़ाइलें छिपी रहती हैं और इन्हें तब तक ऐक्सेस नहीं किया जा सकता, जब तक कि आप CRA से नहीं निकाल देते. जहां भी संभव हो निकालने से बचना सबसे अच्छा होता है, क्योंकि इसका मतलब यह है कि इन सभी कॉन्फ़िगरेशन फ़ाइलों को अपने खुद के सोर्स कोड के रूप में ले लिया जाए, जिनको प्रबंधित करना मुश्किल हो सकता है.

नए CRA ऐप्लिकेशन की डायरेक्ट्री स्ट्रक्चर में सिर्फ़ वे फ़ाइलें होती हैं जिनमें आपको अपने ऐप्लिकेशन पर काम करने के लिए असल में बदलाव करने की ज़रूरत होगी. सीआरए के दस्तावेज़ में, इसके बारे में पूरी जानकारी दी गई है.

आगे क्या करना है?

अब जब आपको Create React ऐप्लिकेशन बनाने का तरीका पता चल गया है, तो इस लर्निंग पाथ में मौजूद सभी गाइड की मदद से, ऐप्लिकेशन की परफ़ॉर्मेंस और सुलभता को बेहतर बनाने का तरीका जानें: