𝗕𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝗥𝗲𝗮𝗰𝘁 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀: 𝗙𝗿𝗼𝗺 𝗝𝗦𝗫 𝘁𝗼 𝗣𝗿𝗼𝗱𝘂𝗰𝘁𝗶𝗼𝗻-𝗥𝗲𝗮𝗱𝘆 𝗖𝗼𝗱𝗲
React components हे आधुनिक वेब ॲप्सचा पाया आहेत. ते जटिल इंटरफेसचे लहान आणि व्यवस्थापित करण्यायोग्य भागांमध्ये रूपांतर करतात.
React उद्योगात वर्चस्व गाजवत आहे. 57% JavaScript डेव्हलपर्स त्याचा मुख्य लायब्ररी म्हणून वापर करतात. NPM वर त्याचे दर आठवड्याला २० दशलक्षाहून अधिक डाउनलोड्स होतात.
Component म्हणजे एक function आहे जे JSX रिटर्न करते. JSX दिसायला HTML सारखे असते पण ते तुमच्या JavaScript मध्ये असते. हे तुम्हाला असे कस्टम elements तयार करण्याची परवानगी देते जे तुम्ही कुठेही पुन्हा वापरू शकता.
प्रत्येक प्रोफेशनल component चे चार भाग असतात:
• Props: पालक (parent) कडून मुलाला (child) पाठवलेला डेटा. यामुळे components लवचिक होतात.
• State: जो डेटा वेळेनुसार बदलतो तो. State मधील अपडेट्समुळे UI मध्ये बदल होतात.
• Hooks: useState आणि useEffect सारखी functions जी components ला लॉजिक देतात.
• Return Statement: स्क्रीनवर काय दिसेल हे ठरवणारा भाग.
आधुनिक React मध्ये classes ऐवजी function components वापरले जातात. Function components मध्ये कमी कोड लागतो आणि ते मेंटेन करणे सोपे असते.
Production-ready कोड तयार करण्यासाठी, या नियमांचे पालन करा:
• Single Responsibility: प्रत्येक component ने एकच काम केले पाहिजे. UserProfile component ने फक्त युजरचा डेटा दाखवला पाहिजे.
• TypeScript वापरा: TSX तुम्हाला कोड रन करण्यापूर्वी चुका शोधण्यास मदत करते. 90% frontend डेव्हलपर्स याचा वापर करतात.
• Composition चा वापर करा: लहान components एकत्र करून मोठे इंटरफेस तयार करा. एक मोठा आणि गोंधळलेला (messy) component तयार करू नका.
• Prop Drilling टाळा: दहा थरांच्या components मधून डेटा पास करू नका. त्याऐवजी Context किंवा state management वापरा.
• Props कधीही mutate करू नका: Props ला 'read-only' समजा.
Components वापरून बनवल्यामुळे तुम्हाला स्केल करण्यास मदत होते. Next.js, Remix आणि React Native सारखे frameworks सर्व याच तत्त्वांवर अवलंबून आहेत.
लहान सुरुवात करा. Modular विचार करा. पुन्हा वापरता येईल (reuse) अशा पद्धतीने तयार करा.
Source: https://dev.to/julianneagu/building-react-components-from-jsx-to-production-ready-code-3chf