Скачать или смотреть Debug react apps like a pro tamil

Download 1M+ code from https://codegive.com/bfb3b19
react app-ஐ pro மாதிரி debug பண்றது எப்படி? (tamil tutorial)

react app டெவலப் பண்றப்போ, bugs வர்றது சகஜம். ஆனா, அந்த bugs-ஐ சரியா debug பண்ண தெரிஞ்சாதான், நம்மளோட productivity-ய அதிகமாக்க முடியும். இந்த tutorial-ல, react app-ஐ pro மாதிரி debug பண்றதுக்கு தேவையான எல்லா techniques-யும் code எக்ஸாம்பளோட பார்க்கலாம்.

*1. debugging-ன்னா என்ன? ஏன் முக்கியம்?*

debugging-ன்னா, நம்மளோட கோட்ல இருக்கிற bugs-ஐ கண்டுபிடிச்சு, அதை சரி பண்றது. இது மூலமா, நம்மளோட app சரியா வேலை செய்ய வைச்சு, user experience-யும் improve பண்ணலாம்.debugging இல்லாம, ஒரு பெரிய react app-ஐ டெவலப் பண்றது ரொம்ப கஷ்டம்.

*2. react developer tools-ஐ பயன்படுத்துவது:*

react developer tools ஒரு chrome/firefox extension. இது react components-ஐ inspect பண்ணி, அவங்களோட props, state, மற்றும் hierarchy-ய பார்க்க ரொம்ப யூஸ்ஃபுல்லா இருக்கும்.

*installation:* chrome web store/firefox add-ons-ல இருந்து install பண்ணிக்கோங்க.
*usage:*
react app-ஐ ஓபன் பண்ணுங்க.
browser-ல developer tools-ஐ (f12) ஓபன் பண்ணுங்க.
"components" மற்றும் "profiler" tabs-ஐ பாருங்க.
*components tab:*
react components-ஓட hierarchy-ய பார்க்க முடியும்.
ஒரு component-ஐ செலக்ட் பண்ணா, அதோட props, state-ஐ வலது பக்கம் பார்க்கலாம்.
component-ஐ செலக்ட் பண்ணிட்டு, "$r" அப்படின்னு console-ல டைப் பண்ணா, அந்த component இன்ஸ்டன்ஸ்-ஐ एक्सेस பண்ணலாம்.
*profiler tab:*
component render ஆகுற performance-ஐ measure பண்ணலாம்.
"record" பட்டன கிளிக் பண்ணி, app-ஐ யூஸ் பண்ணிட்டு, ஸ்டாப் பண்ணா, render டைம், update டைம் எல்லாத்தையும் டீடைலா பார்க்கலாம்.

*code example (react developer tools-ஐ யூஸ் பண்ணி debug பண்றது):*



இந்த எக்ஸாம்பள்ல, react developer tools மூலமா, `mycomponent` component-ஓட `count` state வேல்யூ எப்படி மாறுதுன்னு, அதுக்கப்புறம் `props.name`-ல என்ன வேல்யூ வருதுன்னு பார்க்க முடியும். profiler tab-ல, `handleclick` பங்க்ஷன் எவ்ளோ டைம் எடுக்குதுன்னும் பார்க்கலாம்.

*3. console.log-ஐ பயன்படுத்துவது:*

`console.log()` தான் ரொம்ப பேசிக்கான, அதே நேரம் ரொம்ப பவர்ஃ ...

#DebugReactApps #TamilTech #python
Debugging
React
Apps
Pro
Tamil
Development
Tips
Techniques
Troubleshooting
Performance
State Management
Error Handling
Hooks
Console
Best Practices