क्या आपको अपनी React साइट को ज़्यादा से ज़्यादा तेज़ और ऐक्सेस करने लायक बनाना है? आप बिल्कुल सही जगह पर आए हैं!
React एक ओपन सोर्स लाइब्रेरी है, जिसकी मदद से यूज़र इंटरफ़ेस (यूआई) बनाना आसान हो जाता है. इस लर्निंग पाथ में, पारिस्थितिक तंत्र के अलग-अलग एपीआई और टूल शामिल होंगे. आपको अपने ऐप्लिकेशन की परफ़ॉर्मेंस और इस्तेमाल करने के तरीके को बेहतर बनाने के लिए, इनका इस्तेमाल करना चाहिए.
इस गाइड में, React ऐप्लिकेशन को सेट अप और इस्तेमाल करने का तरीका बताया गया है. इस सेक्शन में मौजूद हर दूसरी गाइड में, React ऐप्लिकेशन की स्पीड या सुलभता को ऑप्टिमाइज़ करने के विषयों के बारे में बताया जाएगा.
यह जानकारी आपके काम की क्यों है?
तेज़ और भरोसेमंद ऐप्लिकेशन बनाने का तरीका बताने वाला कॉन्टेंट बहुत है, लेकिन तेज़ और भरोसेमंद React ऐप्लिकेशन बनाने का तरीका बताने वाला कॉन्टेंट बहुत कम है. इन गाइड में, React ऐप्लिकेशन के नज़रिए से इन सभी चीज़ों के बारे में बताया गया है. इनमें सिर्फ़ React नेटवर्क से जुड़ी लाइब्रेरी, एपीआई, और सुविधाओं के बारे में बताया गया है.
आपको क्या सीखने को मिलेगा?
इस लर्निंग पाथ में मौजूद ट्यूटोरियल में, इन पर फ़ोकस नहीं किया जाता:
- React का इस्तेमाल करने का तरीका
- React के काम करने का तरीका
हालांकि, ज़रूरत पड़ने पर इन दोनों कॉन्सेप्ट के बारे में बताया जाएगा, लेकिन इस सेक्शन में मौजूद सभी गाइड और कोडलैब में, तेज़ और ऐक्सेस की जा सकने वाली React साइटें बनाने के तरीके पर फ़ोकस किया जाएगा. इस वजह से, React के बारे में बुनियादी जानकारी होना ज़रूरी है.
Create React App
Create React App (CRA), React ऐप्लिकेशन बनाने का सबसे आसान तरीका है. यह डिफ़ॉल्ट सेटअप के साथ कई मुख्य सुविधाएं देता है. इनमें, एक बिल्ड सिस्टम भी शामिल है, जिसमें मॉड्यूल बंडलर (webpack) और ट्रांसपाइलर (Babel) शामिल हैं.
नया ऐप्लिकेशन बनाने के लिए, कमांड-लाइन शेल पर सिर्फ़ ये निर्देश चलाएं:
npx create-react-app app-name
कमांड पूरा होने के बाद, इन कमांड की मदद से ऐप्लिकेशन पर जाकर उसे चलाया जा सकता है:
cd new-app
npm start
यहां दिए गए एम्बेड में, हाल ही में बूटस्ट्रैप किए गए सीआरए ऐप्लिकेशन की डायरेक्ट्री का स्ट्रक्चर और असल वेब पेज दिख रहा है.
कई कॉन्फ़िगरेशन फ़ाइलें और बिल्ड स्क्रिप्ट हैं, जिनका इस्तेमाल CRA, वेबपैक और Babel बिल्ड प्रोसेस को सेट अप करने के लिए करता है. इसमें टेस्टिंग के लिए, बुनियादी Jest सेटअप शामिल है. उपयोगकर्ता के लिए चीज़ों को आसान बनाने के लिए, ये फ़ाइलें छिपी होती हैं. इन्हें तब तक ऐक्सेस नहीं किया जा सकता, जब तक कि सीआरए से बाहर नहीं निकला जाता. जब भी हो सके, डिवाइस को बाहर निकालने से बचें. ऐसा इसलिए, क्योंकि इससे इन सभी कॉन्फ़िगरेशन फ़ाइलों को अपने सोर्स कोड के तौर पर इस्तेमाल करना पड़ता है. इन्हें मैनेज करना मुश्किल हो सकता है.
नए सीआरए ऐप्लिकेशन के डायरेक्ट्री स्ट्रक्चर में सिर्फ़ वे फ़ाइलें होती हैं जिनमें आपको अपने ऐप्लिकेशन पर काम करने के लिए बदलाव करने होंगे. सीआरए के दस्तावेज़ में इस बारे में ज़्यादा जानकारी दी गई है.
आगे क्या करना है?
अब जब आपको Create React App बनाने का तरीका पता है, तो इस लर्निंग पाथ में मौजूद सभी गाइड की मदद से, अपने ऐप्लिकेशन की परफ़ॉर्मेंस और ऐक्सेस को बेहतर बनाने का तरीका जानें:
- React.lazy और Suspense का इस्तेमाल करके कोड को अलग-अलग हिस्सों में बांटना
- react-window की मदद से बड़ी सूचियों को वर्चुअलाइज़ करना
- Workbox की मदद से, Create React App में कॉन्टेंट को पहले से कैश मेमोरी में सेव करना
- react-snap की मदद से, रास्तों को पहले से रेंडर करना
- Create React App की मदद से वेब ऐप्लिकेशन मेनिफ़ेस्ट जोड़ना