अपना पहला रिएक्ट प्रोजेक्ट शुरू करते समय मैंने 5 गलतियाँ कीं

आप जानते हैं कि एक नई भाषा या ढांचा चुनना कैसा होता है। कभी-कभी इसके माध्यम से अपना रास्ता खोजने में आपकी मदद करने के लिए बढ़िया दस्तावेज़ीकरण होता है। लेकिन यहां तक ​​कि सबसे अच्छा प्रलेखन भी पूरी तरह से सब कुछ शामिल नहीं करता। और जब आप किसी नई चीज़ के साथ काम करते हैं, तो आपको एक ऐसी समस्या का सामना करना पड़ेगा जिसका कोई लिखित समाधान नहीं है।

मेरे लिए पहली बार ऐसा ही था जब मैंने एक रिएक्ट प्रोजेक्ट बनाया - और रिएक्ट उन फ्रेमवर्क में से एक है, जिसमें उल्लेखनीय दस्तावेज हैं, खासकर अब बीटा डॉक्स के साथ। लेकिन मैं अभी भी अपने तरीके से संघर्ष कर रहा था। उस प्रोजेक्ट को हुए काफी समय हो गया है, लेकिन इससे जो सबक मुझे मिला वह अभी भी मेरे दिमाग में ताजा है। और भले ही वहाँ बहुत सारे रिएक्ट "कैसे-कैसे" ट्यूटोरियल हैं, मैंने सोचा कि मैं वह साझा करूँगा जो मैं चाहता हूँ कि मुझे पता हो कि मैंने पहली बार इसका इस्तेमाल किया था।

तो, यही वह लेख है - मैंने जो शुरुआती गलतियाँ कीं, उनकी एक सूची। मुझे आशा है कि वे आपके लिए रिएक्ट सीखने को बहुत आसान बनाने में मदद करेंगे।

प्रोजेक्ट शुरू करने के लिए क्रिएट-रिएक्शन-ऐप का उपयोग करना

टीएल; डीआर वाइट या पार्सल का प्रयोग करें।

रिएक्ट ऐप बनाएं (सीआरए) एक उपकरण है जो आपको एक नया रिएक्ट प्रोजेक्ट स्थापित करने में मदद करता है। यह अधिकांश रिएक्ट परियोजनाओं के लिए सर्वोत्तम कॉन्फ़िगरेशन विकल्पों के साथ एक विकास वातावरण बनाता है। इसका अर्थ है कि आपको स्वयं कुछ भी कॉन्फ़िगर करने में समय व्यतीत करने की आवश्यकता नहीं है।

एक शुरुआत के रूप में, यह मेरा काम शुरू करने का एक शानदार तरीका लग रहा था! कोई विन्यास नहीं! बस कोडिंग शुरू करें!

CRA इसे प्राप्त करने के लिए दो लोकप्रिय पैकेजों का उपयोग करता है, वेबपैक और बेबेल। वेबपैक एक वेब बंडलर है जो आपके प्रोजेक्ट की सभी संपत्तियों को अनुकूलित करता है, जैसे कि जावास्क्रिप्ट, सीएसएस और छवियां। बेबेल एक उपकरण है जो आपको नई जावास्क्रिप्ट सुविधाओं का उपयोग करने की अनुमति देता है, भले ही कुछ ब्राउज़र उनका समर्थन न करें।

दोनों अच्छे हैं, लेकिन नए उपकरण हैं जो काम को बेहतर तरीके से कर सकते हैं, विशेष रूप से रहता है और शीघ्र वेब संकलक (एसडब्ल्यूसी)।

वेबपैक और बेबेल की तुलना में ये नए और बेहतर विकल्प कॉन्फ़िगर करने में तेज़ और आसान हैं। इससे कॉन्फ़िगरेशन को समायोजित करना आसान हो जाता है जो कि क्रिएट-रिएक्शन-ऐप में बिना इजेक्ट किए करना मुश्किल है।

एक नया रिएक्ट प्रोजेक्ट सेट करते समय उन दोनों का उपयोग करने के लिए आपको यह सुनिश्चित करना होगा कि आपके पास है आसंधि संस्करण 12 या उच्चतर स्थापित, फिर निम्न कमांड चलाएँ।

npm create vite

आपको अपने प्रोजेक्ट के लिए एक नाम चुनने के लिए कहा जाएगा। एक बार जब आप ऐसा कर लेते हैं, तो फ्रेमवर्क की सूची से रिएक्ट चुनें। उसके बाद, आप या तो चुन सकते हैं Javascript + SWC or Typescript + SWC

फिर आपको निर्देशिका बदलनी होगी cd अपने प्रोजेक्ट में और निम्न कमांड चलाएँ;

npm i && npm run dev

इसे URL के साथ आपकी साइट के लिए एक डेवलपमेंट सर्वर चलाना चाहिए localhost:5173

और यह उतना ही सरल है।

का प्रयोग defaultProps डिफ़ॉल्ट मानों के लिए

टीएल; डीआर इसके बजाय डिफ़ॉल्ट फ़ंक्शन पैरामीटर का उपयोग करें।

डेटा को किसी चीज़ के माध्यम से रिएक्ट घटकों को पास किया जा सकता है props. इन्हें HTML तत्व में विशेषताओं की तरह ही एक घटक में जोड़ा जाता है और एक तर्क के रूप में पास किए गए प्रोप ऑब्जेक्ट से प्रासंगिक मान लेकर एक घटक की परिभाषा में उपयोग किया जा सकता है।

// App.jsx
export default function App() { return <Card title="Hello" description="world" />
} // Card.jsx
function Card(props) { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> );
} export default Card;

यदि a के लिए कभी भी डिफ़ॉल्ट मान की आवश्यकता होती है prop, defaultProp संपत्ति का उपयोग किया जा सकता है:

// Card.jsx
function Card(props) { // ...
} Card.defaultProps = { title: 'Default title', description: 'Desc',
}; export default Card;

आधुनिक जावास्क्रिप्ट के साथ, इसे नष्ट करना संभव है props ऑब्जेक्ट और फ़ंक्शन तर्क में सभी के लिए एक डिफ़ॉल्ट मान असाइन करें।

// Card.jsx
function Card({title = "Default title", description= "Desc"}) { return ( <div> <h1>{title}</h1> <p>{description}</p> </div> )
} export default Card;

यह कोड के रूप में अधिक अनुकूल है जिसे आधुनिक ब्राउज़रों द्वारा अतिरिक्त परिवर्तन की आवश्यकता के बिना पढ़ा जा सकता है।

दुर्भाग्य से, defaultProps JSX (जावास्क्रिप्ट एक्सएमएल) बॉक्स से बाहर समर्थित नहीं होने के कारण ब्राउज़र द्वारा कुछ परिवर्तन को पढ़ने की आवश्यकता है। यह संभावित रूप से उस एप्लिकेशन के प्रदर्शन को प्रभावित कर सकता है जो बहुत अधिक उपयोग कर रहा है defaultProps.

उपयोग न करें propTypes

टीएल; डीआर टाइपस्क्रिप्ट का प्रयोग करें।

प्रतिक्रिया में, propTypes संपत्ति का उपयोग यह जांचने के लिए किया जा सकता है कि क्या घटक को उसके प्रॉप्स के लिए सही डेटा प्रकार पारित किया जा रहा है। वे आपको उस प्रकार के डेटा को निर्दिष्ट करने की अनुमति देते हैं जिसका उपयोग प्रत्येक प्रोप जैसे स्ट्रिंग, संख्या, ऑब्जेक्ट इत्यादि के लिए किया जाना चाहिए। वे आपको यह भी निर्दिष्ट करने की अनुमति देते हैं कि प्रोप की आवश्यकता है या नहीं।

इस तरह, यदि कोई घटक गलत डेटा प्रकार पारित किया जाता है या यदि आवश्यक प्रोप प्रदान नहीं किया जा रहा है, तो प्रतिक्रिया एक त्रुटि फेंक देगी।

// Card.jsx
import { PropTypes } from "prop-types"; function Card(props) { // ...
} Card.propTypes = { title: PropTypes.string.isRequired, description: PropTypes.string,
}; export default Card;

टाइपप्रति घटकों को पास किए जा रहे डेटा में प्रकार की सुरक्षा का एक स्तर प्रदान करता है। बिलकुल पक्का, propTypes जब मैं शुरू कर रहा था तब एक अच्छा विचार था। हालाँकि, अब जब टाइपस्क्रिप्ट टाइप सुरक्षा के लिए गो-टू सॉल्यूशन बन गया है, तो मैं किसी भी चीज़ पर इसका उपयोग करने की अत्यधिक अनुशंसा करूँगा।

// Card.tsx
interface CardProps { title: string, description?: string,
} export default function Card(props: CardProps) { // ...
}

टाइपस्क्रिप्ट एक प्रोग्रामिंग लैंग्वेज है जो स्टैटिक टाइप-चेकिंग को जोड़कर जावास्क्रिप्ट के ऊपर बनती है। टाइपस्क्रिप्ट एक अधिक शक्तिशाली प्रकार की प्रणाली प्रदान करता है, जो अधिक संभावित बगों को पकड़ सकता है और विकास के अनुभव को बेहतर बनाता है।

वर्ग घटकों का उपयोग करना

टीएल; डीआर: घटकों को कार्यों के रूप में लिखें

रिएक्ट में वर्ग घटक जावास्क्रिप्ट कक्षाओं का उपयोग करके बनाए जाते हैं। उनके पास एक अधिक वस्तु-उन्मुख संरचना है और साथ ही कुछ अतिरिक्त विशेषताएं हैं, जैसे कि उपयोग करने की क्षमता this कीवर्ड और जीवनचक्र के तरीके।

// Card.jsx
class Card extends React.Component { render() { return ( <div> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </div> ) }
} export default Card;

मैं कार्यों के बजाय कक्षाओं के साथ घटकों को लिखना पसंद करता हूं, लेकिन नौसिखियों के लिए समझने के लिए जावास्क्रिप्ट कक्षाएं अधिक कठिन हैं और this बहुत भ्रमित कर सकता है। इसके बजाय, मैं घटकों को कार्यों के रूप में लिखने की अनुशंसा करता हूं:

// Card.jsx
function Card(props) { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> )
} export default Card;

फ़ंक्शन घटक केवल जावास्क्रिप्ट फ़ंक्शन हैं जो JSX लौटाते हैं। वे पढ़ने में बहुत आसान हैं, और उनमें जैसी अतिरिक्त सुविधाएं नहीं हैं this कीवर्ड और जीवनचक्र के तरीके जो उन्हें वर्ग घटकों की तुलना में अधिक निष्पादन योग्य बनाता है।

कार्यात्मक घटकों में भी हुक का उपयोग करने का लाभ होता है। रिएक्ट हुक आपको क्लास कंपोनेंट लिखे बिना स्टेट और अन्य रिएक्ट सुविधाओं का उपयोग करने की अनुमति देता है, जिससे आपका कोड अधिक पठनीय, बनाए रखने योग्य और पुन: प्रयोज्य हो जाता है।

आयात करना अनावश्यक रूप से प्रतिक्रिया करता है

टीएल; डीआर: ऐसा करने की कोई ज़रूरत नहीं है, जब तक आपको हुक की आवश्यकता न हो।

चूंकि रिएक्ट 17 को 2020 में रिलीज़ किया गया था, अब जब भी आप कोई कंपोनेंट बनाते हैं तो रिएक्ट को अपनी फ़ाइल के शीर्ष पर आयात करना अनावश्यक है।

import React from 'react'; // Not needed!
export default function Card() {}

लेकिन हमें रिएक्ट 17 से पहले ऐसा करना पड़ा क्योंकि JSX ट्रांसफॉर्मर (वह चीज़ जो JSX को नियमित जावास्क्रिप्ट में परिवर्तित करती है) नामक एक विधि का उपयोग करती है React.createElement यह केवल रिएक्ट को आयात करते समय काम करेगा। तब से, एक नया ट्रांसफार्मर जारी किया गया है जो बिना JSX को बदल सकता है createElement विधि.

आपको अभी भी हुक का उपयोग करने के लिए रिएक्ट आयात करने की आवश्यकता होगी, टुकड़े, और कोई भी अन्य फ़ंक्शन या घटक जिनकी आपको लाइब्रेरी से आवश्यकता हो सकती है:

import { useState } from 'react'; export default function Card() { const [count, setCount] = useState(0); // ...
}

ये मेरी शुरुआती गलतियाँ थीं!

हो सकता है कि "गलती" शब्द बहुत कठोर हो क्योंकि कुछ बेहतर अभ्यास बाद में आए। फिर भी, मुझे बहुत सारे उदाहरण दिखाई देते हैं जहाँ कुछ करने का "पुराना" तरीका अभी भी परियोजनाओं और अन्य ट्यूटोरियल में सक्रिय रूप से उपयोग किया जा रहा है।

सच कहूं तो, शुरुआत करते समय मैंने शायद पांच से ज्यादा गलतियां कीं। जब भी आप किसी नए टूल के लिए पहुंचते हैं, तो यह स्विच को फ़्लिप करने के बजाय इसे प्रभावी ढंग से उपयोग करने के लिए सीखने की यात्रा की तरह अधिक होता है। लेकिन ये वो चीजें हैं जिन्हें मैं सालों बाद भी अपने साथ लेकर चलता हूं!

यदि आप कुछ समय से रिएक्ट का उपयोग कर रहे हैं, तो ऐसी कौन सी चीजें हैं जो आप चाहते हैं कि आप शुरू करने से पहले जानते हों? दूसरों को समान संघर्षों से बचने में मदद करने के लिए एक संग्रह प्राप्त करना बहुत अच्छा होगा।

• एसईओ संचालित सामग्री और पीआर वितरण। आज ही प्रवर्धित हो जाओ।
• प्लेटोब्लॉकचैन। Web3 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। यहां पहुंचें।
• स्रोत: https://css-tricks.com/5-mistakes-starting-react/