ரியாக்ட் ஃப்ராக்மென்ட்ஸ்: பல கூறுகளை வழங்கும் முறைகளில் தேர்ச்சி பெறுதல்

ரியாக்ட்டில், காம்போனென்ட்கள் ஒரு ஒற்றை ரூட் எலிமென்ட்டை ரெண்டர் செய்ய வடிவமைக்கப்பட்டுள்ளன. ஒரு காம்போனென்ட்டிலிருந்து பல கூறுகளை வழங்க வேண்டியிருக்கும் போது, இந்த அடிப்படைக் விதிமுறை ஒரு சவாலை ஏற்படுத்துகிறது. பாரம்பரியமாக, டெவலப்பர்கள் இந்த கூறுகளை ஒரு <div> இல் போர்த்தி வந்தனர். இருப்பினும், இந்த நடைமுறை DOM இல் தேவையற்ற நோடுகளை அறிமுகப்படுத்துகிறது, இது செயல்திறனைப் பாதிக்கலாம் மற்றும் ஸ்டைலிங்கை சிக்கலாக்கலாம். ரியாக்ட் ஃப்ராக்மென்ட்ஸ் இந்த சிக்கலுக்கு ஒரு நேர்த்தியான தீர்வை வழங்குகிறது, இது DOM இல் கூடுதல் நோடுகளைச் சேர்க்காமல் குழந்தைகளின் பட்டியலை குழுவாக்க உங்களை அனுமதிக்கிறது.

ரியாக்ட் ஃப்ராக்மென்ட்ஸ் என்றால் என்ன?

ரியாக்ட் ஃப்ராக்மென்ட்ஸ் என்பது ரியாக்ட் 16.2 இல் அறிமுகப்படுத்தப்பட்ட ஒரு அம்சமாகும், இது ஒரு கூடுதல் DOM நோடை அறிமுகப்படுத்தாமல் ஒரு காம்போனென்ட்டிலிருந்து பல கூறுகளை வழங்க உதவுகிறது. அவை கண்ணுக்குத் தெரியாத ராப்பர்களாகச் செயல்படுகின்றன, HTML கட்டமைப்பைப் பாதிக்காமல் கூறுகளைத் திறம்பட குழுவாக்குகின்றன. இது தூய்மையான DOM கட்டமைப்புகள், மேம்பட்ட செயல்திறன் மற்றும் எளிதான ஸ்டைலிங்கிற்கு வழிவகுக்கிறது.

ஏன் ரியாக்ட் ஃப்ராக்மென்ட்ஸைப் பயன்படுத்த வேண்டும்?

• தூய்மையான DOM: தேவையற்ற <div> ராப்பர்களைத் தவிர்ப்பதன் மூலம், தூய்மையான மற்றும் அதிக அர்த்தமுள்ள DOM கட்டமைப்பை ஏற்படுத்துகிறது.
• மேம்பட்ட செயல்திறன்: DOM நோடுகளின் எண்ணிக்கையைக் குறைக்கிறது, இது செயல்திறன் மேம்பாடுகளுக்கு வழிவகுக்கும், குறிப்பாக சிக்கலான பயன்பாடுகளில்.
• எளிதாக்கப்பட்ட ஸ்டைலிங்: ஸ்டைல் முரண்பாடுகளைத் தடுக்கிறது மற்றும் கூடுதல் ராப்பர் கூறுகளைத் தவிர்ப்பதால், ஸ்டைல்களைச் சரியாகப் பயன்படுத்துவதை எளிதாக்குகிறது.
• சரியான HTML: சரியான HTML கட்டமைப்புகளைப் பராமரிக்க உதவுகிறது, குறிப்பாக பல உயர்-நிலை கூறுகளை (உதாரணமாக, ஒரு <tbody> க்குள் உள்ள டேபிள் வரிசைகள்) வழங்க வேண்டிய காம்போனென்ட்களைக் கையாளும்போது.

ரியாக்ட் ஃப்ராக்மென்ட்ஸைப் பயன்படுத்துவதற்கான வெவ்வேறு வழிகள்

ரியாக்ட், ஃப்ராக்மென்ட்ஸைச் செயல்படுத்த பல வழிகளை வழங்குகிறது, ஒவ்வொன்றும் அதன் சொந்த தொடரியல் மற்றும் பயன்பாட்டு நிகழ்வுகளைக் கொண்டுள்ளன.

1. வெளிப்படையான React.Fragment தொடரியல்

ஃப்ராக்மென்ட்ஸைப் பயன்படுத்துவதற்கான மிகத் தெளிவான வழி React ஆப்ஜெக்டை இம்போர்ட் செய்து React.Fragment காம்போனென்ட்டைப் பயன்படுத்துவதாகும்:

            import React from 'react';

function MyComponent() {
 return (
 
 
Hello, world!
 
This is a fragment example.
 
 );
}

export default MyComponent;

            

              
                Copy
              
            
          

இந்த அணுகுமுறை தெளிவானது மற்றும் படிக்கக்கூடியது, இது ஆரம்பநிலையாளர்களுக்கும் அல்லது வெளிப்படைத்தன்மை விரும்பப்படும் போதும் ஒரு நல்ல தேர்வாக அமைகிறது.

2. சுருக்கமான தொடரியல் (<></>)

ரியாக்ட், ஃப்ராக்மென்ட்ஸிற்காக ஒரு சுருக்கமான தொடரியலையும் வழங்குகிறது, இது வெற்று டேக்குகளைப் பயன்படுத்துகிறது: <></>. இது ஃப்ராக்மென்ட்ஸைப் பயன்படுத்துவதற்கான ஒரு சுருக்கமான மற்றும் பெரும்பாலும் விரும்பப்படும் வழியாகும்:

            function MyComponent() {
 return (
 <>
 
Hello, world!
 
This is a fragment example.
 
 );
}

            

              
                Copy
              
            
          

இந்த தொடரியல் குறுகியது மற்றும் தூய்மையானது, இது சுருக்கத்திற்கு மதிப்பு அளிக்கப்படும் சூழ்நிலைகளுக்கு ஏற்றதாக அமைகிறது. இருப்பினும், இந்த தொடரியல் கீகள் (keys) அல்லது பண்புகளை (attributes) நேரடியாக ஃப்ராக்மென்ட்டிற்கு அனுப்புவதை ஆதரிக்காது என்பதைக் கவனத்தில் கொள்ள வேண்டும். நீங்கள் கீகள் அல்லது பண்புகளைப் பயன்படுத்த வேண்டும் என்றால், நீங்கள் வெளிப்படையான React.Fragment தொடரியலைப் பயன்படுத்த வேண்டும்.

3. ஃப்ராக்மென்ட்ஸுடன் கீகளைப் பயன்படுத்துதல்

ஃப்ராக்மென்ட்ஸுடன் கூறுகளின் பட்டியல்களை ரெண்டரிங் செய்யும்போது, ஒவ்வொரு உறுப்பிற்கும் கீகளை வழங்க வேண்டியிருக்கலாம். எந்த உருப்படிகள் மாற்றப்பட்டுள்ளன, சேர்க்கப்பட்டுள்ளன அல்லது அகற்றப்பட்டுள்ளன என்பதை அடையாளம் காண கீகள் ரியாக்ட்டுக்கு உதவுகின்றன. சுருக்கமான தொடரியலுடன், நீங்கள் ஒரு `key` ப்ராப்பை நேரடியாக ஃப்ராக்மென்ட்டிற்கு அனுப்ப முடியாது. அதற்கு பதிலாக, நீங்கள் வெளிப்படையான React.Fragment தொடரியலைப் பயன்படுத்த வேண்டும்:

            import React from 'react';

function MyComponent(props) {
 return (
 

 {props.items.map(item => (
 
 
{item.name}
 
{item.description}
 
 ))}
 
 );
}

export default MyComponent;

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், நாம் உருப்படிகளின் பட்டியலை ரெண்டரிங் செய்கிறோம், ஒவ்வொரு உருப்படியும் உருப்படியின் ஐடியிலிருந்து பெறப்பட்ட ஒரு தனித்துவமான கீயுடன் ஒரு React.Fragment இல் போர்த்தப்பட்டுள்ளது. உருப்படிகள் மாறும்போது பட்டியலைத் திறமையாகப் புதுப்பிக்க ரியாக்ட்டிற்கு இது முக்கியமானது.

பொதுவான பயன்பாட்டு நிகழ்வுகள் மற்றும் ரிட்டர்ன் பேட்டர்ன்கள்

ஃப்ராக்மென்ட்கள் பல்துறை வாய்ந்தவை மற்றும் உங்கள் ரியாக்ட் காம்போனென்ட்களை மேம்படுத்த பல்வேறு சூழ்நிலைகளில் பயன்படுத்தப்படலாம். இங்கே சில பொதுவான பயன்பாட்டு நிகழ்வுகள் மற்றும் ரிட்டர்ன் பேட்டர்ன்கள்:

1. பல உயர்-நிலை கூறுகளை வழங்குதல்

மிக அடிப்படையான பயன்பாட்டு நிகழ்வு, ஒரு கூடுதல் ராப்பரைச் சேர்க்காமல் பல கூறுகளை வழங்குவதாகும். DOM இல் தேவையற்ற நோடுகளை அறிமுகப்படுத்துவதைத் தவிர்க்க விரும்பும்போது இது குறிப்பாக பயனுள்ளதாக இருக்கும்.

            function MyComponent() {
 return (
 <>
 
Title
 
Content here.
 
 );
}

            

              
                Copy
              
            
          

2. டேபிள் வரிசைகளை ரெண்டரிங் செய்தல்

ஒரு <tbody> க்குள் டேபிள் வரிசைகளை (<tr>) ரெண்டரிங் செய்யும்போது, சரியான HTML ஐப் பராமரிக்க ஃப்ராக்மென்ட்கள் அவசியம். வரிசைகளைச் சுற்றி ஒரு <div> ராப்பர் டேபிள் கட்டமைப்பை உடைத்துவிடும்.

            function MyTableBody(props) {
 return (
 
 {props.data.map(row => (
 
 
 {row.name}
 {row.value}
 
 
 ))}
 
 );
}

            

              
                Copy
              
            
          

3. லேஅவுட் காம்போனென்ட்களை உருவாக்குதல்

கூடுதல் DOM நோடுகளை அறிமுகப்படுத்தாமல் உங்கள் பயன்பாட்டின் UI ஐ கட்டமைக்க உதவும் லேஅவுட் காம்போனென்ட்களை உருவாக்க ஃப்ராக்மென்ட்களைப் பயன்படுத்தலாம்.

            function TwoColumnLayout(props) {
 return (
 <>
 
{props.left}
 
{props.right}
 
 );
}

            

              
                Copy
              
            
          

4. நிபந்தனையுடன் கூறுகளை ரெண்டரிங் செய்தல்

கூடுதல் ராப்பர்களை அறிமுகப்படுத்தாமல், சில நிபந்தனைகளின் அடிப்படையில் வெவ்வேறு கூறுகளைக் காட்ட, நிபந்தனை ரெண்டரிங்குடன் ஃப்ராக்மென்ட்களை இணைக்கலாம்.

            function MyComponent(props) {
 return (
 <>
 {props.isLoading ? (
 
Loading...
 ) : (
 <>
 
Data Loaded!
 
Here is the data.
 
 )}
 
 );
}

            

              
                Copy
              
            
          

5. Null அல்லது ஃப்ராக்மென்ட்களை வழங்குதல்

சில நேரங்களில் நீங்கள் நிபந்தனையுடன் எதையும் ரெண்டர் செய்ய விரும்பாமல் இருக்கலாம். ஒரு வெற்று ஸ்டிரிங் அல்லது `undefined` ஐ வழங்குவதற்குப் பதிலாக (இது சில நேரங்களில் சிக்கல்களை ஏற்படுத்தக்கூடும்), `null` அல்லது ஒரு வெற்று ஃப்ராக்மென்ட்டை வழங்குவது இதைக் கையாள ஒரு தூய்மையான வழியாகும்:

            function MyComponent(props) {
 if (!props.showContent) {
 return null; // Or return <>;
 }

 return (
 <>
 
Content
 
This content is only shown when showContent is true.
 
 );
}

            

              
                Copy
              
            
          

ஃப்ராக்மென்ட்ஸைப் பயன்படுத்துவதன் நன்மைகள்

ஃப்ராக்மென்ட்ஸைப் பயன்படுத்துவதன் நன்மைகள் தூய்மையான DOM கட்டமைப்புகளுக்கு அப்பாற்பட்டவை. அவை ஒட்டுமொத்த கோட் பராமரிப்பு, செயல்திறன் மற்றும் டெவலப்பர் அனுபவத்திற்கு பங்களிக்கின்றன.

1. மேம்பட்ட செயல்திறன்

DOM நோடுகளின் எண்ணிக்கையைக் குறைப்பது நேரடியாக மேம்பட்ட செயல்திறனுக்கு வழிவகுக்கிறது. பிரவுசர்கள் DOM ஐ ரெண்டர் செய்வதற்கும் புதுப்பிப்பதற்கும் குறைவான வேலை செய்ய வேண்டியுள்ளது, இது வேகமான பக்க ஏற்றுதல் நேரங்கள் மற்றும் மென்மையான பயனர் தொடர்புகளுக்கு வழிவகுக்கிறது. சிறிய காம்போனென்ட்களுக்கு செயல்திறன் ஆதாயம் மிகக் குறைவாக இருக்கலாம், ஆனால் ஆழமாக உள்ளமைக்கப்பட்ட காம்போனென்ட்களைக் கொண்ட சிக்கலான பயன்பாடுகளில் இது குறிப்பிடத்தக்கதாக மாறும்.

2. எளிதான ஸ்டைலிங்

கூடுதல் ராப்பர் கூறுகளைத் தவிர்ப்பது ஸ்டைலிங்கை எளிதாக்குகிறது. தேவையற்ற <div> கூறுகளால் ஏற்படும் எதிர்பாராத ஸ்டைல் மரபுரிமை அல்லது முரண்பாடுகளைப் பற்றி நீங்கள் கவலைப்பட வேண்டியதில்லை. இது ஸ்டைல்களைச் சரியாகப் பயன்படுத்துவதை எளிதாக்குகிறது மற்றும் உங்கள் பயன்பாடு முழுவதும் ஒரு சீரான காட்சி தோற்றத்தைப் பராமரிக்கிறது.

3. தூய்மையான கோட் மற்றும் வாசிப்புத்திறன்

ஃப்ராக்மென்ட்கள் தூய்மையான மற்றும் படிக்கக்கூடிய கோடை ஊக்குவிக்கின்றன. தேவையற்ற ராப்பர் கூறுகளின் இல்லாதது காம்போனென்ட் கட்டமைப்பைப் புரிந்துகொள்வதையும் பராமரிப்பதையும் எளிதாக்குகிறது. பெரிய திட்டங்களில் இது மிகவும் முக்கியமானது, அங்கு ஒத்துழைப்பு மற்றும் நீண்ட கால பராமரிப்புக்கு கோட் தெளிவு முக்கியமானது.

4. தவறான HTML ஐத் தடுக்கிறது

உங்கள் ரியாக்ட் காம்போனென்ட்கள் சரியான HTML ஐ உருவாக்குவதை உறுதிசெய்ய ஃப்ராக்மென்ட்கள் உதவுகின்றன. டேபிள் கூறுகள் போன்ற சில HTML கட்டமைப்புகளுக்கு குறிப்பிட்ட பெற்றோர்-குழந்தை உறவுகள் தேவை. அனுமதிக்கப்படாத இடத்தில் ஒரு `div` ஐப் பயன்படுத்துவது HTML ஐ உடைத்துவிடும் மற்றும் எதிர்பாராத ரெண்டரிங் சிக்கல்களுக்கு வழிவகுக்கும்.

நடைமுறை எடுத்துக்காட்டுகள்: உலகளாவிய பயன்பாடுகள்

உலகளாவிய பயன்பாடுகளுக்குப் பொருத்தமான சூழ்நிலைகளில் ஃப்ராக்மென்ட்கள் எவ்வாறு பயன்படுத்தப்படலாம் என்பதை ஆராய்வோம்:

1. பல மொழி ஆதரவு

பல மொழிகளை ஆதரிக்கும் ஒரு வலைத்தளத்தை நீங்கள் உருவாக்குகிறீர்கள் என்று கற்பனை செய்து பாருங்கள். நீங்கள் ஒரு உரைத் தொகுதியின் வெவ்வேறு பதிப்புகளை நிபந்தனையுடன் ரெண்டர் செய்ய வேண்டியிருக்கலாம். கூடுதல் DOM நோடுகளைச் சேர்க்காமல் இதை அடைய ஃப்ராக்மென்ட்கள் உங்களுக்கு உதவும்.

            import React from 'react';

function MultiLanguageText(props) {
 const { language, translations } = props;

 return (
 <>
 {translations[language] ? (
 
{translations[language]}
 ) : (
 
{translations['en']}
 )}
 
 );
}

export default MultiLanguageText;

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், காம்போனென்ட் தேர்ந்தெடுக்கப்பட்ட மொழியின் அடிப்படையில் பொருத்தமான மொழிபெயர்ப்பை ரெண்டர் செய்கிறது. தற்போதைய மொழிக்கு ஒரு மொழிபெயர்ப்பு கிடைக்கவில்லை என்றால், அது ஆங்கிலத்திற்கு இயல்புநிலையாகிறது.

2. சர்வதேச தொலைபேசி எண்களைக் காண்பித்தல்

வெவ்வேறு நாடுகளின் தொலைபேசி எண்களைக் காட்டும்போது, பிராந்தியத்தின் அடிப்படையில் அவற்றை வித்தியாசமாக வடிவமைக்க வேண்டியிருக்கலாம். கூடுதல் ராப்பர்களை அறிமுகப்படுத்தாமல் தொலைபேசி எண் கூறுகளை குழுவாக்க ஃப்ராக்மென்ட்கள் உங்களுக்கு உதவும்.

            import React from 'react';

function PhoneNumber(props) {
 const { countryCode, number } = props;

 return (
 <>
 +{countryCode}
 {number}
 
 );
}

export default PhoneNumber;

            

              
                Copy
              
            
          

இந்த காம்போனென்ட் நாட்டின் குறியீடு மற்றும் தொலைபேசி எண்ணை தனித்தனி ஸ்பான்களாகக் காட்டுகிறது, இது பிராந்தியத்தின் அடிப்படையில் நெகிழ்வான ஸ்டைலிங் மற்றும் வடிவமைப்புக்கு அனுமதிக்கிறது.

3. தேதி மற்றும் நேர வடிவங்களைக் கையாளுதல்

பயனரின் இருப்பிடத்தின் அடிப்படையில் வெவ்வேறு வடிவங்களில் தேதிகளையும் நேரங்களையும் காண்பிப்பது உலகளாவிய பயன்பாடுகளில் ஒரு பொதுவான தேவையாகும். கூடுதல் DOM நோடுகளைச் சேர்க்காமல் தேதி மற்றும் நேர கூறுகளை கட்டமைக்க ஃப்ராக்மென்ட்கள் உங்களுக்கு உதவும்.

            import React from 'react';
import { DateTime } from 'luxon'; // Example using Luxon library

function FormattedDate(props) {
 const { date, locale } = props;
 const formattedDate = DateTime.fromISO(date).setLocale(locale).toLocaleString(DateTime.DATE_FULL);

 return (
 <>
 {formattedDate}
 
 );
}

export default FormattedDate;

            

              
                Copy
              
            
          

இந்த காம்போனென்ட் குறிப்பிட்ட இருப்பிடத்திற்கு ஏற்ப தேதியை வடிவமைக்கிறது, தேதி வடிவமைப்பைக் கையாள Luxon போன்ற ஒரு நூலகத்தைப் பயன்படுத்துகிறது. `time` உறுப்பு தேதிக்கு அர்த்தமுள்ள அர்த்தத்தை வழங்குகிறது.

ஃப்ராக்மென்ட்ஸைப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

ஃப்ராக்மென்ட்ஸின் நன்மைகளை அதிகரிக்க, இந்த சிறந்த நடைமுறைகளைப் பின்பற்றவும்:

• முடிந்தவரை சுருக்கமான தொடரியலை (<></>) பயன்படுத்தவும்: இது உங்கள் கோடை தூய்மையாகவும் சுருக்கமாகவும் ஆக்குகிறது.
• கீகள் அல்லது பண்புகளை வழங்க வேண்டியிருக்கும் போது வெளிப்படையான React.Fragment தொடரியலைப் பயன்படுத்தவும்: கூறுகளின் பட்டியல்களை ரெண்டரிங் செய்யும்போது இது அவசியம்.
• தேவையற்ற ஃப்ராக்மென்ட்ஸைத் தவிர்க்கவும்: ஒற்றை கூறுகளை ஃப்ராக்மென்ட்ஸில் போர்த்த வேண்டாம். பல கூறுகளை வழங்க வேண்டியிருக்கும் போது மட்டுமே அவற்றைப் பயன்படுத்தவும்.
• லேஅவுட் காம்போனென்ட்களில் ஃப்ராக்மென்ட்ஸைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளவும்: இது தூய்மையான மற்றும் நெகிழ்வான லேஅவுட்களை உருவாக்க உங்களுக்கு உதவும்.
• செயல்திறன் தாக்கங்களைக் கவனத்தில் கொள்ளவும்: ஃப்ராக்மென்ட்கள் பொதுவாக செயல்திறனை மேம்படுத்தினாலும், ஆழமாக உள்ளமைக்கப்பட்ட ஃப்ராக்மென்ட்களின் அதிகப்படியான பயன்பாடு செயல்திறனைப் பாதிக்கக்கூடும். ஏதேனும் செயல்திறன் இடையூறுகளை அடையாளம் காண உங்கள் பயன்பாட்டை சுயவிவரப்படுத்தவும்.

ரியாக்ட் ஃப்ராக்மென்ட்ஸிற்கான மாற்று வழிகள்

ரியாக்ட்டில் பல கூறுகளை வழங்குவதற்கு ஃப்ராக்மென்ட்கள் பொதுவாகப் பரிந்துரைக்கப்படும் அணுகுமுறையாக இருந்தாலும், நீங்கள் சந்திக்கக்கூடிய அல்லது குறிப்பிட்ட சூழ்நிலைகளில் கருத்தில் கொள்ளக்கூடிய மாற்று அணுகுமுறைகள் உள்ளன:

1. கூறுகளின் ஒரு வரிசையை வழங்குதல் (குறைவாகப் பரிந்துரைக்கப்படுகிறது)

நீங்கள் தொழில்நுட்ப ரீதியாக ஒரு காம்போனென்ட்டிலிருந்து ரியாக்ட் கூறுகளின் ஒரு வரிசையை வழங்கலாம். இருப்பினும், இந்த அணுகுமுறை பல குறைபாடுகளைக் கொண்டுள்ளது:

• கீகள் தேவை: வரிசையில் உள்ள ஒவ்வொரு உறுப்பும் ஒரு தனித்துவமான `key` ப்ராப்பைக் கொண்டிருக்க வேண்டும்.
• குறைந்த அர்த்தமுள்ளவை: நீங்கள் பல கூறுகளை ஒரு தருக்க அலகாக வழங்குகிறீர்கள் என்பது கோடிலிருந்து உடனடியாகத் தெளிவாகத் தெரியவில்லை.
• ரியாக்ட் புதுப்பிப்புகளுடன் சாத்தியமான சிக்கல்கள்: கூறுகளின் வரிசைகளை நேரடியாகக் கையாளும்போது DOM ஐத் திறமையாகப் புதுப்பிப்பதில் ரியாக்ட்டுக்கு அதிக சிரமம் இருக்கலாம்.

இந்த காரணங்களுக்காக, வரிசைகளை வழங்குவது பொதுவாக ஃப்ராக்மென்ட்ஸுக்கு ஆதரவாக ஊக்கமளிக்கப்படுவதில்லை.

2. ஒரு <div> ராப்பரைப் பயன்படுத்துதல் (பொதுவாக ஊக்கமளிக்கப்படுவதில்லை)

முன்பு குறிப்பிட்டபடி, கூறுகளை ஒரு <div> இல் போர்த்துவது பாரம்பரிய (மற்றும் பெரும்பாலும் சிக்கலான) அணுகுமுறையாகும். முன்பு கோடிட்டுக் காட்டப்பட்ட காரணங்களுக்காக முடிந்தவரை இது தவிர்க்கப்பட வேண்டும்: தூய்மையான DOM, செயல்திறன் மற்றும் ஸ்டைலிங் சிக்கல்கள்.

முடிவுரை

ரியாக்ட் ஃப்ராக்மென்ட்கள் தூய்மையான, திறமையான மற்றும் பராமரிக்கக்கூடிய ரியாக்ட் பயன்பாடுகளை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த கருவியாகும். கூடுதல் DOM நோடுகளை அறிமுகப்படுத்தாமல் பல கூறுகளை வழங்க உங்களை அனுமதிப்பதன் மூலம், ஃப்ராக்மென்ட்கள் செயல்திறனை மேம்படுத்துகின்றன, ஸ்டைலிங்கை எளிதாக்குகின்றன மற்றும் தூய்மையான கோடை ஊக்குவிக்கின்றன. நீங்கள் ஒரு சிறிய காம்போனென்ட் அல்லது ஒரு சிக்கலான பயன்பாட்டை உருவாக்கினாலும், ஃப்ராக்மென்ட்கள் உங்கள் ரியாக்ட் கருவித்தொகுப்பின் ஒரு பகுதியாக இருக்க வேண்டும். ஃப்ராக்மென்ட்ஸைப் பயன்படுத்துவதற்கான வெவ்வேறு வழிகளில் தேர்ச்சி பெற்று அவற்றின் நன்மைகளைப் புரிந்துகொள்வதன் மூலம், நீங்கள் சிறந்த ரியாக்ட் கோடை எழுதலாம் மற்றும் ஒரு உயர்ந்த பயனர் அனுபவத்தை உருவாக்கலாம்.

உங்கள் ரியாக்ட் பயணத்தைத் தொடரும்போது, வெவ்வேறு ரிட்டர்ன் பேட்டர்ன்களை ஆராய்ந்து உங்கள் குறிப்பிட்ட தேவைகளுக்கு மிகவும் பொருத்தமான அணுகுமுறையைத் தேர்வுசெய்ய நினைவில் கொள்ளுங்கள். பல்வேறு சூழ்நிலைகளில் ஃப்ராக்மென்ட்களுடன் பரிசோதனை செய்து, உங்கள் பயன்பாட்டின் செயல்திறன் மற்றும் கட்டமைப்பில் ஏற்படும் தாக்கத்தைக் கவனிக்கவும். மகிழ்ச்சியான கோடிங்!