𝗕𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝗥𝗲𝗮𝗰𝘁 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀: 𝗙𝗿𝗼𝗺 𝗝𝗦𝗫 𝘁𝗼 𝗣𝗿𝗼𝗱𝘂𝗰𝘁𝗶𝗼𝗻-𝗥𝗲𝗮𝗱𝘆 𝗖𝗼𝗱𝗲

React components நவீன இணையப் பயன்பாடுகளின் (web apps) அடித்தளம். அவை சிக்கலான இடைமுகங்களை (interfaces) சிறிய, எளிதில் கையாளக்கூடிய பகுதிகளாக மாற்றுகின்றன.

React தொழில்துறையில் ஆதிக்கம் செலுத்துகிறது. 57% JavaScript டெவலப்பர்கள் இதைத் தங்களின் முதன்மை நூலகமாக (library) பயன்படுத்துகின்றனர். NPM-இல் இது வாரத்திற்கு 20 மில்லியனுக்கும் அதிகமான பதிவிறக்கங்களைப் பெறுகிறது.

ஒரு component என்பது JSX-ஐத் திருப்பித் தரும் (returns) ஒரு function ஆகும். JSX பார்ப்பதற்கு HTML போலவே இருக்கும், ஆனால் அது உங்கள் JavaScript-க்குள் இருக்கும். இது நீங்கள் எங்கேயும் மீண்டும் பயன்படுத்தக்கூடிய தனிப்பயனாக்கப்பட்ட கூறுகளை (custom elements) உருவாக்க அனுமதிக்கிறது.

ஒவ்வொரு தொழில்முறை component-இலும் நான்கு பகுதிகள் உள்ளன:

• Props: ஒரு parent-லிருந்து child-க்கு அனுப்பப்படும் தரவு (Data). இது components-களை நெகிழ்வுத்தன்மையுடன் (flexible) மாற்றுகிறது. • State: காலப்போக்கில் மாறும் தரவு. State-இல் ஏற்படும் மாற்றங்கள் UI மாற்றங்களைத் தூண்டுகின்றன. • Hooks: useState மற்றும் useEffect போன்ற functions, இவை components-களுக்குத் தேவையான தர்க்கத்தை (logic) வழங்குகின்றன. • Return Statement: திரையில் என்ன தெரிய வேண்டும் என்பதைத் தீர்மானிக்கும் பகுதி.

நவீன React, classes-களுக்குப் பதிலாக function components-களைப் பயன்படுத்துகிறது. Function components குறைந்த குறியீட்டையே (code) பயன்படுத்துகின்றன மற்றும் பராமரிப்பதற்கு எளிதானவை.

Production-ready code-ஐ உருவாக்க, இந்த விதிகளைப் பின்பற்றவும்:

• Single Responsibility: ஒவ்வொரு component-உம் ஒரு வேலையை மட்டுமே செய்ய வேண்டும். ஒரு UserProfile component பயனர் தரவை (user data) மட்டுமே காட்ட வேண்டும். • Use TypeScript: TSX உங்கள் குறியீட்டை இயக்குவதற்கு முன்பே பிழைகளைக் கண்டறிய உதவுகிறது. 90% frontend டெவலப்பர்கள் இதைப் பயன்படுத்துகின்றனர். • Embrace Composition: சிறிய components-களை ஒன்றிணைப்பதன் மூலம் பெரிய இடைமுகங்களை உருவாக்கவும். ஒரே ஒரு பிரம்மாண்டமான, குழப்பமான component-ஐ உருவாக்க வேண்டாம். • Avoid Prop Drilling: பத்து அடுக்குகளாக இருக்கும் components வழியாகத் தரவை அனுப்ப வேண்டாம். அதற்குப் பதிலாக Context அல்லது state management-ஐப் பயன்படுத்தவும். • Never Mutate Props: Props-களை ஒருபோதும் மாற்ற வேண்டாம் (Never Mutate Props). Props-களை read-only ஆகக் கருதவும்.

Components மூலம் உருவாக்குவது உங்கள் செயலியை விரிவாக்க (scale) உதவுகிறது. Next.js, Remix மற்றும் React Native போன்ற Framework-கள் அனைத்தும் இதே கொள்கைகளை அடிப்படையாகக் கொண்டவை.

சிறியதாகத் தொடங்குங்கள். Modular முறையில் சிந்தியுங்கள். மீண்டும் பயன்படுத்தும் வகையில் (reuse) உருவாக்குங்கள்.

ஆதாரம்: https://dev.to/julianneagu/building-react-components-from-jsx-to-production-ready-code-3chf