ரியாக்ட் போர்ட்டல்களில் தேர்ச்சி பெறுதல்: DOM வரிசைக்கு அப்பால் காம்போனென்ட்களை ரெண்டரிங் செய்தல்

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

மற்ற எல்லா உள்ளடக்கங்களுக்கும் மேலே தோன்ற வேண்டிய ஒரு மோடல் டயலாக், உலகளவில் மிதக்கும் ஒரு அறிவிப்பு பேனர், அல்லது நிரம்பி வழியும் பெற்றோர் கொள்கலனின் எல்லைகளிலிருந்து தப்பிக்க வேண்டிய ஒரு கான்டெக்ஸ்ட் மெனுவைக் கவனியுங்கள். இந்த சூழ்நிலைகளில், காம்போனென்ட்களை நேரடியாக அவற்றின் பெற்றோர் DOM வரிசைக்குள் ரெண்டர் செய்யும் வழக்கமான அணுகுமுறை, ஸ்டைலிங் (z-index முரண்பாடுகள் போன்றவை), லேஅவுட் சிக்கல்கள் மற்றும் நிகழ்வு பரவல் சிக்கல்களுக்கு வழிவகுக்கும். இந்த இடத்தில்தான் ரியாக்ட் போர்ட்டல்கள் ஒரு ரியாக்ட் டெவலப்பரின் ஆயுதக் களஞ்சியத்தில் ஒரு சக்திவாய்ந்த மற்றும் இன்றியமையாத கருவியாக வருகின்றன.

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

முக்கிய சவாலைப் புரிந்துகொள்ளுதல்: DOM வரிசையின் வரம்புகள்

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

பொதுவான காட்சிகள் மற்றும் அவற்றின் சிக்கல்கள்:

மோடல்கள், டயலாக்குகள் மற்றும் லைட்பாக்ஸ்கள்: இந்த கூறுகள் பொதுவாக காம்போனென்ட் மரத்தில் எங்கு வரையறுக்கப்பட்டிருந்தாலும், முழு பயன்பாட்டிற்கும் மேல் அடுக்காகத் தோன்ற வேண்டும். ஒரு மோடல் ஆழமாகப் பதிக்கப்பட்டிருந்தால், அதன் CSS `z-index` அதன் முன்னோர்களால் கட்டுப்படுத்தப்படலாம், இது எப்போதும் மேலே தோன்றுவதை உறுதி செய்வதை கடினமாக்குகிறது. மேலும், ஒரு பெற்றோர் உறுப்பில் உள்ள `overflow: hidden` மோடலின் சில பகுதிகளை வெட்டிவிடக்கூடும்.
டூல்டிப்கள் மற்றும் பாப்ஓவர்கள்: மோடல்களைப் போலவே, டூல்டிப்கள் அல்லது பாப்ஓவர்கள் பெரும்பாலும் ஒரு உறுப்புடன் தொடர்புடையதாகத் தங்களை நிலைநிறுத்திக் கொள்ள வேண்டும், ஆனால் அவற்றின் கட்டுப்படுத்தப்பட்ட பெற்றோர் எல்லைகளுக்கு வெளியே தோன்ற வேண்டும். ஒரு பெற்றோர் உறுப்பில் `overflow: hidden` ஒரு டூல்டிப்பை துண்டிக்கக்கூடும்.
அறிவிப்புகள் மற்றும் டோஸ்ட் செய்திகள்: இந்த உலகளாவிய செய்திகள் பெரும்பாலும் வியூபோர்ட்டின் மேல் அல்லது கீழ் பகுதியில் தோன்றும், அவற்றைத் தூண்டிய காம்போனென்ட்டிலிருந்து சுயாதீனமாக ரெண்டர் செய்யப்பட வேண்டும்.
கான்டெக்ஸ்ட் மெனுக்கள்: வலது கிளிக் மெனுக்கள் அல்லது தனிப்பயன் கான்டெக்ஸ்ட் மெனுக்கள் பயனர் கிளிக் செய்யும் இடத்தில் துல்லியமாக தோன்ற வேண்டும், பெரும்பாலும் முழுமையான தெரிவுநிலையை உறுதி செய்ய கட்டுப்படுத்தப்பட்ட பெற்றோர் கொள்கலன்களிலிருந்து வெளியேற வேண்டும்.
மூன்றாம் தரப்பு ஒருங்கிணைப்புகள்: சில சமயங்களில், நீங்கள் ஒரு ரியாக்ட் காம்போனென்ட்டை ஒரு வெளிப்புற நூலகம் அல்லது பழைய குறியீட்டால் நிர்வகிக்கப்படும் DOM முனையில், ரியாக்ட்டின் ரூட்டிற்கு வெளியே ரெண்டர் செய்ய வேண்டியிருக்கலாம்.

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

ரியாக்ட் போர்ட்டல் என்றால் என்ன?

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

ரியாக்ட் போர்ட்டல்களின் மையமானது `ReactDOM.createPortal()` முறையில் உள்ளது. அதன் கையொப்பம் எளிமையானது:

ReactDOM.createPortal(child, container)

child: ஒரு உறுப்பு, சரம், அல்லது ஃபிரேக்மென்ட் போன்ற எந்த ரெண்டர் செய்யக்கூடிய ரியாக்ட் குழந்தை.
container: ஆவணத்தில் ஏற்கனவே இருக்கும் ஒரு DOM உறுப்பு. இதுதான் `child` ரெண்டர் செய்யப்படும் இலக்கு DOM முனை.

நீங்கள் `ReactDOM.createPortal()` பயன்படுத்தும்போது, ரியாக்ட் குறிப்பிட்ட `container` DOM முனையின் கீழ் ஒரு புதிய மெய்நிகர் DOM துணைமரத்தை உருவாக்குகிறது. இருப்பினும், இந்த புதிய துணைமரம் போர்ட்டலை உருவாக்கிய காம்போனென்ட்டுடன் தர்க்கரீதியாக இணைக்கப்பட்டுள்ளது. இந்த "தர்க்கரீதியான இணைப்பு" நிகழ்வு பப்ளிங் மற்றும் கான்டெக்ஸ்ட் எதிர்பார்த்தபடி ஏன் செயல்படுகின்றன என்பதைப் புரிந்துகொள்வதற்கான திறவுகோலாகும்.

உங்கள் முதல் ரியாக்ட் போர்ட்டலை அமைத்தல்: ஒரு எளிய மோடல் எடுத்துக்காட்டு

ஒரு பொதுவான பயன்பாட்டு வழக்கத்தைப் பார்ப்போம்: ஒரு மோடல் டயலாக் உருவாக்குதல். ஒரு போர்ட்டலை செயல்படுத்த, முதலில் உங்கள் `index.html` (அல்லது உங்கள் பயன்பாட்டின் ரூட் HTML கோப்பு எங்கு உள்ளதோ) கோப்பில் ஒரு இலக்கு DOM உறுப்பு தேவை, அங்கு போர்ட்டல் உள்ளடக்கம் ரெண்டர் செய்யப்படும்.

படி 1: இலக்கு DOM முனையைத் தயார் செய்யவும்

உங்கள் `public/index.html` கோப்பை (அல்லது அதற்கு சமமான கோப்பை) திறந்து ஒரு புதிய `div` உறுப்பைச் சேர்க்கவும். இதை உங்கள் முக்கிய ரியாக்ட் பயன்பாட்டு ரூட்டிற்கு வெளியே, மூடும் `body` குறிச்சொல்லுக்கு சற்று முன்பு சேர்ப்பது பொதுவான நடைமுறையாகும்.


<body>
  <!-- உங்கள் முக்கிய ரியாக்ட் செயலியின் ரூட் -->
  <div id="root"></div>

  <!-- இங்குதான் எங்கள் போர்ட்டல் உள்ளடக்கம் ரெண்டர் ஆகும் -->
  <div id="modal-root"></div>
</body>

படி 2: போர்ட்டல் காம்போனென்ட்டை உருவாக்கவும்

இப்போது, ஒரு போர்ட்டலைப் பயன்படுத்தும் ஒரு எளிய மோடல் காம்போனென்ட்டை உருவாக்குவோம்.


// Modal.js
import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

const Modal = ({ children, isOpen, onClose }) => {
  const el = useRef(document.createElement('div'));

  useEffect(() => {
    // காம்போனென்ட் மவுண்ட் ஆகும்போது, டிவ்-ஐ மோடல் ரூட்டில் சேர்க்கவும்
    modalRoot.appendChild(el.current);

    // சுத்தம் செய்தல்: காம்போனென்ட் அன்மவுண்ட் ஆகும்போது டிவ்-ஐ அகற்றவும்
    return () => {
      modalRoot.removeChild(el.current);
    };
  }, []); // காலி சார்பு வரிசை என்றால் இது மவுண்ட் ஆகும்போது ஒரு முறையும், அன்மவுண்ட் ஆகும்போது ஒரு முறையும் இயங்கும்

  if (!isOpen) {
    return null; // மோடல் திறக்கப்படவில்லை என்றால் எதையும் ரெண்டர் செய்ய வேண்டாம்
  }

  return ReactDOM.createPortal(
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      zIndex: 1000 // இது மேலே இருப்பதை உறுதி செய்யவும்
    }}>
      <div style={{
        backgroundColor: 'white',
        padding: '20px',
        borderRadius: '8px',
        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
        maxWidth: '500px',
        width: '90%'
      }}>
        {children}
        <button onClick={onClose} style={{ marginTop: '15px' }}>Close Modal</button>
      </div>
    </div>,
    el.current // மோடல் உள்ளடக்கத்தை நாம் உருவாக்கிய டிவ்-இல் ரெண்டர் செய்யவும், இது modalRoot-க்குள் உள்ளது
  );
};

export default Modal;

இந்த எடுத்துக்காட்டில், ஒவ்வொரு மோடல் நிகழ்விற்கும் (`el.current`) ஒரு புதிய `div` உறுப்பை உருவாக்கி, அதை `modal-root`-க்குச் சேர்க்கிறோம். இது தேவைப்பட்டால் பல மோடல்களை நிர்வகிக்க அனுமதிக்கிறது, அவற்றின் வாழ்க்கைச் சுழற்சி அல்லது உள்ளடக்கத்துடன் ஒன்றுக்கொன்று குறுக்கிடாமல். உண்மையான மோடல் உள்ளடக்கம் (மேலடுக்கு மற்றும் வெள்ளைப் பெட்டி) பின்னர் `ReactDOM.createPortal` ஐப் பயன்படுத்தி இந்த `el.current`-ல் ரெண்டர் செய்யப்படுகிறது.

படி 3: மோடல் காம்போனென்ட்டைப் பயன்படுத்தவும்


// App.js
import React, { useState } from 'react';
import Modal from './Modal'; // Modal.js அதே கோப்பகத்தில் இருப்பதாகக் கருதி

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => setIsModalOpen(true);
  const handleCloseModal = () => setIsModalOpen(false);

  return (
    <div style={{ padding: '20px' }}>
      <h1>ரியாக்ட் போர்ட்டல் எடுத்துக்காட்டு</h1>
      <p>இந்த உள்ளடக்கம் முக்கிய பயன்பாட்டு மரத்தின் ஒரு பகுதியாகும்.</p>
      <button onClick={handleOpenModal}>உலகளாவிய மோடலைத் திற</button>

      <Modal isOpen={isModalOpen} onClose={handleCloseModal}>
        <h3>போர்ட்டலில் இருந்து வாழ்த்துக்கள்!</h3>
        <p>இந்த மோடல் உள்ளடக்கம் 'root' டிவ்-க்கு வெளியே ரெண்டர் செய்யப்படுகிறது, ஆனால் இன்னும் ரியாக்ட் மூலம் நிர்வகிக்கப்படுகிறது.</p>
      </Modal>
    </div>
  );
}

export default App;

`Modal` காம்போனென்ட் `App` காம்போனென்ட்டுக்குள் (`root` டிவ்-க்குள் இருக்கும்) ரெண்டர் செய்யப்பட்டாலும், அதன் உண்மையான DOM வெளியீடு `modal-root` டிவ்-க்குள் தோன்றும். இது `z-index` அல்லது `overflow` சிக்கல்கள் இல்லாமல் மோடல் எல்லாவற்றிற்கும் மேலாக இருப்பதை உறுதி செய்கிறது, அதே நேரத்தில் ரியாக்ட்டின் நிலை மேலாண்மை மற்றும் காம்போனென்ட் வாழ்க்கைச் சுழற்சியிலிருந்து பயனடைகிறது.

ரியாக்ட் போர்ட்டல்களின் முக்கிய பயன்பாட்டு வழக்குகள் மற்றும் மேம்பட்ட பயன்பாடுகள்

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

1. வலுவான மோடல்கள் மற்றும் டயலாக் அமைப்புகள்

பார்த்தபடி, போர்ட்டல்கள் மோடல் செயலாக்கத்தை எளிதாக்குகின்றன. முக்கிய நன்மைகள் பின்வருமாறு:

உத்தரவாதமான Z-Index: `body` மட்டத்தில் (அல்லது ஒரு பிரத்யேக உயர்-நிலை கொள்கலனில்) ரெண்டர் செய்வதன் மூலம், மோடல்கள் ஆழமாகப் பதிக்கப்பட்ட CSS சூழல்களுடன் போராடாமல் எப்போதும் மிக உயர்ந்த `z-index`-ஐ அடைய முடியும். இது அவற்றைத் தூண்டிய காம்போனென்ட்டைப் பொருட்படுத்தாமல் மற்ற எல்லா உள்ளடக்கங்களுக்கும் மேலே தொடர்ந்து தோன்றுவதை உறுதி செய்கிறது.
வழிதல் தப்பித்தல்: `overflow: hidden` அல்லது `overflow: auto` உள்ள பெற்றோர் இனி மோடல் உள்ளடக்கத்தை வெட்ட மாட்டார்கள். இது பெரிய மோடல்கள் அல்லது டைனமிக் உள்ளடக்கம் கொண்டவற்றுக்கு முக்கியமானது.
அணுகல்தன்மை (A11y): அணுகக்கூடிய மோடல்களை உருவாக்குவதற்கு போர்ட்டல்கள் அடிப்படையானவை. DOM கட்டமைப்பு தனித்தனியாக இருந்தாலும், தர்க்கரீதியான ரியாக்ட் மர இணைப்பு சரியான ஃபோகஸ் மேலாண்மைக்கு (மோடலுக்குள் ஃபோகஸைப் பிடிப்பது) மற்றும் ARIA பண்புக்கூறுகளை (`aria-modal` போன்றவை) சரியாகப் பயன்படுத்த அனுமதிக்கிறது. `react-focus-lock` அல்லது `@reach/dialog` போன்ற நூலகங்கள் இந்த நோக்கத்திற்காக போர்ட்டல்களை விரிவாகப் பயன்படுத்துகின்றன.

2. டைனமிக் டூல்டிப்கள், பாப்ஓவர்கள் மற்றும் டிராப்டவுன்கள்

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

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

3. உலகளாவிய அறிவிப்புகள் மற்றும் டோஸ்ட் செய்திகள்

பயன்பாடுகளுக்கு பெரும்பாலும் தடுக்காத, தற்காலிக செய்திகளைக் காண்பிக்க ஒரு அமைப்பு தேவைப்படுகிறது (எ.கா., "பொருள் வண்டியில் சேர்க்கப்பட்டது!", "நெட்வொர்க் இணைப்பு துண்டிக்கப்பட்டது").

மையப்படுத்தப்பட்ட மேலாண்மை: ஒரு "ToastProvider" காம்போனென்ட் டோஸ்ட் செய்திகளின் வரிசையை நிர்வகிக்க முடியும். இந்த வழங்குநர் ஒரு போர்ட்டலைப் பயன்படுத்தி எல்லா செய்திகளையும் `body`-இன் மேல் அல்லது கீழ் பகுதியில் உள்ள ஒரு பிரத்யேக `div`-இல் ரெண்டர் செய்யலாம், அவை எப்போதும் தெரியும் மற்றும் சீராக ஸ்டைல் செய்யப்பட்டிருப்பதை உறுதி செய்கிறது, பயன்பாட்டில் எங்கிருந்து ஒரு செய்தி தூண்டப்பட்டாலும் சரி.
நிலைத்தன்மை: ஒரு சிக்கலான பயன்பாடு முழுவதும் உள்ள அனைத்து அறிவிப்புகளும் ஒரே மாதிரியாகத் தோற்றமளிப்பதையும் செயல்படுவதையும் உறுதி செய்கிறது.

4. தனிப்பயன் கான்டெக்ஸ்ட் மெனுக்கள்

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

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

5. மூன்றாம் தரப்பு நூலகங்கள் அல்லது ரியாக்ட் அல்லாத DOM கூறுகளுடன் ஒருங்கிணைத்தல்

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

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

ரியாக்ட் போர்ட்டல்களைப் பயன்படுத்தும்போது மேம்பட்ட பரிசீலனைகள்

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

1. நிகழ்வு பப்ளிங்: ஒரு முக்கியமான வேறுபாடு

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

இதன் பொருள்: ஒரு போர்ட்டலுக்குள் ஒரு பொத்தான் இருந்தால், அந்த பொத்தானின் கிளிக் நிகழ்வு மேலே சென்றால், அது அதன் DOM பெற்றோரை அல்ல, ரியாக்ட் மரத்தில் உள்ள அதன் தர்க்கரீதியான பெற்றோர் காம்போனென்ட்களில் உள்ள எந்த `onClick` கையாளுபவர்களையும் தூண்டும்.
எடுத்துக்காட்டு: உங்கள் `Modal` காம்போனென்ட் `App` மூலம் ரெண்டர் செய்யப்பட்டால், `Modal`-க்குள் ஒரு கிளிக் செய்தால், அது கட்டமைக்கப்பட்டிருந்தால் `App`-இன் நிகழ்வு கையாளுபவர்களுக்கு மேலே செல்லும். இது மிகவும் நன்மை பயக்கும், ஏனெனில் இது ரியாக்ட்டில் நீங்கள் எதிர்பார்க்கும் உள்ளுணர்வு நிகழ்வு ஓட்டத்தைப் பாதுகாக்கிறது.
சொந்த DOM நிகழ்வுகள்: நீங்கள் நேரடியாக சொந்த DOM நிகழ்வு கேட்பவர்களை இணைத்தால் (எ.கா., `document.body`-இல் `addEventListener` ஐப் பயன்படுத்தி), அவை சொந்த DOM மரத்தைப் பின்பற்றும். இருப்பினும், நிலையான ரியாக்ட் செயற்கை நிகழ்வுகளுக்கு (`onClick`, `onChange`, போன்றவை), ரியாக்ட் தர்க்கரீதியான மரம் மேலோங்குகிறது.

2. கான்டெக்ஸ்ட் API மற்றும் போர்ட்டல்கள்

கான்டெக்ஸ்ட் API என்பது புரொப்-டிரில்லிங் செய்யாமல் காம்போனென்ட் மரம் முழுவதும் மதிப்புகளை (தீம்கள், பயனர் அங்கீகார நிலை போன்றவை) பகிர்ந்து கொள்வதற்கான ரியாக்ட்டின் பொறிமுறையாகும். அதிர்ஷ்டவசமாக, கான்டெக்ஸ்ட் போர்ட்டல்களுடன் தடையின்றி செயல்படுகிறது.

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

3. போர்ட்டல்களுடன் அணுகல்தன்மை (A11y)

உலகளாவிய பார்வையாளர்களுக்கு அணுகக்கூடிய UI-களை உருவாக்குவது மிக முக்கியம், மேலும் போர்ட்டல்கள் குறிப்பிட்ட A11y பரிசீலனைகளை அறிமுகப்படுத்துகின்றன, குறிப்பாக மோடல்கள் மற்றும் டயலாக்குகளுக்கு.

ஃபோகஸ் மேலாண்மை: ஒரு மோடல் திறக்கும்போது, பயனர்கள் (குறிப்பாக விசைப்பலகை மற்றும் ஸ்கிரீன் ரீடர் பயனர்கள்) அதன் பின்னால் உள்ள கூறுகளுடன் தொடர்புகொள்வதைத் தடுக்க ஃபோகஸ் மோடலுக்குள் சிக்க வைக்கப்பட வேண்டும். மோடல் மூடப்படும்போது, ஃபோகஸ் அதைத் தூண்டிய உறுப்புக்குத் திரும்ப வேண்டும். இதற்கு பெரும்பாலும் கவனமான ஜாவாஸ்கிரிப்ட் மேலாண்மை தேவைப்படுகிறது (எ.கா., ஃபோகஸ் செய்யக்கூடிய கூறுகளை நிர்வகிக்க `useRef` ஐப் பயன்படுத்துதல், அல்லது `react-focus-lock` போன்ற ஒரு பிரத்யேக நூலகம்).
விசைப்பலகை வழிசெலுத்தல்: `Esc` விசை மோடலை மூடுவதையும் `Tab` விசை மோடலுக்குள் மட்டுமே ஃபோகஸை சுழற்றுவதையும் உறுதிசெய்க.
ARIA பண்புக்கூறுகள்: உங்கள் போர்ட்டல் உள்ளடக்கத்திற்கு அதன் நோக்கத்தையும் கட்டமைப்பையும் உதவித் தொழில்நுட்பங்களுக்குத் தெரிவிக்க `role="dialog"`, `aria-modal="true"`, `aria-labelledby`, மற்றும் `aria-describedby` போன்ற ARIA பாத்திரங்கள் மற்றும் பண்புகளை சரியாகப் பயன்படுத்தவும்.

4. ஸ்டைலிங் சவால்கள் மற்றும் தீர்வுகள்

போர்ட்டல்கள் DOM வரிசை சிக்கல்களைத் தீர்க்கும் அதே வேளையில், அவை அனைத்து ஸ்டைலிங் சிக்கல்களையும் மாயமாகத் தீர்ப்பதில்லை.

உலகளாவிய மற்றும் வரம்புக்குட்பட்ட ஸ்டைல்கள்: போர்ட்டல் உள்ளடக்கம் `body` அல்லது `modal-root` போன்ற உலகளவில் அணுகக்கூடிய DOM முனையில் ரெண்டர் செய்யப்படுவதால், எந்தவொரு உலகளாவிய CSS விதிகளும் அதை பாதிக்கக்கூடும்.
CSS-in-JS மற்றும் CSS தொகுதிகள்: இந்த தீர்வுகள் ஸ்டைல்களை இணைக்கவும், எதிர்பாராத கசிவுகளைத் தடுக்கவும் உதவும், இது போர்ட்டல் உள்ளடக்கத்தை ஸ்டைல் செய்யும்போது குறிப்பாக பயனுள்ளதாக இருக்கும். ஸ்டைல்டு காம்போனென்ட்ஸ், எமோஷன், அல்லது CSS தொகுதிகள் தனித்துவமான வகுப்புப் பெயர்களை உருவாக்க முடியும், உங்கள் மோடலின் ஸ்டைல்கள் உலகளவில் ரெண்டர் செய்யப்பட்டாலும், உங்கள் பயன்பாட்டின் மற்ற பகுதிகளுடன் முரண்படாது என்பதை உறுதி செய்கிறது.
தீமிங்: கான்டெக்ஸ்ட் API உடன் குறிப்பிட்டபடி, உங்கள் தீமிங் தீர்வு (அது CSS மாறிகள், CSS-in-JS தீம்கள், அல்லது கான்டெக்ஸ்ட் அடிப்படையிலான தீமிங் ஆக இருந்தாலும்) போர்ட்டல் குழந்தைகளுக்கு சரியாகப் பரவுவதை உறுதிசெய்க.

5. சர்வர்-சைட் ரெண்டரிங் (SSR) பரிசீலனைகள்

உங்கள் பயன்பாடு சர்வர்-சைட் ரெண்டரிங் (SSR) ஐப் பயன்படுத்தினால், போர்ட்டல்கள் எவ்வாறு செயல்படுகின்றன என்பதில் நீங்கள் கவனமாக இருக்க வேண்டும்.

`ReactDOM.createPortal`-க்கு அதன் `container` வாதமாக ஒரு DOM உறுப்பு தேவை. ஒரு SSR சூழலில், ஆரம்ப ரெண்டர் உலாவியின் DOM இல்லாத சேவையகத்தில் நிகழ்கிறது.
இதன் பொருள் போர்ட்டல்கள் பொதுவாக சேவையகத்தில் ரெண்டர் ஆகாது. ஜாவாஸ்கிரிப்ட் கிளையன்ட் பக்கத்தில் இயக்கப்பட்டவுடன் மட்டுமே அவை "நீரேற்றம்" அல்லது ரெண்டர் செய்யும்.
ஆரம்ப சேவையக ரெண்டரில் கண்டிப்பாக இருக்க வேண்டிய உள்ளடக்கத்திற்கு (எ.கா., SEO அல்லது முக்கியமான முதல் பெயிண்ட் செயல்திறனுக்காக), போர்ட்டல்கள் பொருத்தமானவை அல்ல. இருப்பினும், மோடல்கள் போன்ற ஊடாடும் கூறுகளுக்கு, அவை பொதுவாக ஒரு செயல் தூண்டும் வரை மறைக்கப்படுவதால், இது அரிதாகவே ஒரு பிரச்சினையாகும். உங்கள் காம்போனென்ட்கள் போர்ட்டல் `container` சேவையகத்தில் இல்லாததை அதன் இருப்பைச் சரிபார்ப்பதன் மூலம் (எ.கா., `document.getElementById('modal-root')`) அழகாகக் கையாளுவதை உறுதிசெய்க.

6. போர்ட்டல்களைப் பயன்படுத்தும் காம்போனென்ட்களைச் சோதித்தல்

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

ரியாக்ட் டெஸ்டிங் லைப்ரரி: இந்த நூலகம் இயல்பாக `document.body`-ஐ வினவுகிறது, இது உங்கள் போர்ட்டல் உள்ளடக்கம் பெரும்பாலும் இருக்கும் இடமாகும். எனவே, உங்கள் மோடல் அல்லது டூல்டிப்பில் உள்ள கூறுகளை வினவுவது பெரும்பாலும் "சரியாக வேலை செய்யும்".
கேலி செய்தல்: சில சிக்கலான சூழ்நிலைகளில், அல்லது உங்கள் போர்ட்டல் தர்க்கம் குறிப்பிட்ட DOM கட்டமைப்புகளுடன் இறுக்கமாக இணைக்கப்பட்டிருந்தால், உங்கள் சோதனை சூழலில் இலக்கு `container` உறுப்பை நீங்கள் கேலி செய்ய அல்லது கவனமாக அமைக்க வேண்டியிருக்கலாம்.

ரியாக்ட் போர்ட்டல்களுக்கான பொதுவான ஆபத்துகள் மற்றும் சிறந்த நடைமுறைகள்

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

1. போர்ட்டல்களை அதிகமாகப் பயன்படுத்த வேண்டாம்

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

2. சரியான சுத்தம் செய்தலை (அன்மவுண்டிங்) உறுதி செய்யவும்

உங்கள் போர்ட்டலுக்கு நீங்கள் டைனமிக்காக ஒரு DOM முனையை உருவாக்கினால் (எங்கள் `Modal` எடுத்துக்காட்டில் `el.current` போல), போர்ட்டலைப் பயன்படுத்தும் காம்போனென்ட் அன்மவுண்ட் ஆகும்போது அதை சுத்தம் செய்வதை உறுதி செய்யவும். `useEffect` சுத்தம் செய்யும் செயல்பாடு இதற்கு ஏற்றது, இது நினைவகக் கசிவுகளைத் தடுத்து, கைவிடப்பட்ட கூறுகளால் DOM-ஐ நிரப்புவதைத் தடுக்கிறது.


useEffect(() => {
  // ... el.current-ஐ இணைக்கவும்
  return () => {
    // ... el.current-ஐ அகற்றவும்;
  };
}, []);

நீங்கள் எப்போதும் ஒரு நிலையான, முன்பே இருக்கும் DOM முனையில் (ஒற்றை `modal-root` போல) ரெண்டர் செய்கிறீர்கள் என்றால், *முனையின்* சுத்தம் செய்தல் தேவையில்லை, ஆனால் பெற்றோர் காம்போனென்ட் அன்மவுண்ட் ஆகும்போது *போர்ட்டல் உள்ளடக்கம்* சரியாக அன்மவுண்ட் ஆவதை உறுதி செய்வது ரியாக்ட்டால் தானாகவே கையாளப்படுகிறது.

3. செயல்திறன் பரிசீலனைகள்

பெரும்பாலான பயன்பாட்டு நிகழ்வுகளுக்கு (மோடல்கள், டூல்டிப்கள்), போர்ட்டல்கள் மிகக் குறைவான செயல்திறன் தாக்கத்தையே கொண்டுள்ளன. இருப்பினும், நீங்கள் ஒரு போர்ட்டல் வழியாக மிக பெரிய அல்லது அடிக்கடி புதுப்பிக்கப்படும் காம்போனென்ட்டை ரெண்டர் செய்கிறீர்கள் என்றால், வேறு எந்த சிக்கலான காம்போனென்ட்டிற்கும் செய்வது போல வழக்கமான ரியாக்ட் செயல்திறன் மேம்படுத்தல்களை (`React.memo`, `useCallback`, `useMemo` போன்றவை) கருத்தில் கொள்ளுங்கள்.

4. எப்போதும் அணுகல்தன்மைக்கு முன்னுரிமை கொடுங்கள்

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

மோடல் ஃபோகஸ் பிடிப்பு: திறந்த மோடலுக்குள் விசைப்பலகை ஃபோகஸைப் பிடிக்கும் ஒரு நூலகத்தை செயல்படுத்தவும் அல்லது பயன்படுத்தவும்.
விளக்கமான ARIA பண்புக்கூறுகள்: மோடல் உள்ளடக்கத்தை அதன் தலைப்பு மற்றும் விளக்கத்துடன் இணைக்க `aria-labelledby`, `aria-describedby` ஆகியவற்றைப் பயன்படுத்தவும்.
விசைப்பலகை மூடல்: `Esc` விசையுடன் மூட அனுமதிக்கவும்.
ஃபோகஸை மீட்டமை: மோடல் மூடப்படும்போது, அதைத் திறந்த உறுப்புக்கு ஃபோகஸைத் திருப்பவும்.

5. போர்ட்டல்களுக்குள் சொற்பொருள் HTML-ஐப் பயன்படுத்தவும்

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

` உறுப்பைப் பயன்படுத்த வேண்டும் (ஆதரிக்கப்பட்டு ஸ்டைல் செய்யப்பட்டால்), அல்லது `role="dialog"` மற்றும் பொருத்தமான ARIA பண்புக்கூறுகளுடன் கூடிய ஒரு `div`-ஐப் பயன்படுத்த வேண்டும். இது அணுகல்தன்மை மற்றும் SEO-க்கு உதவுகிறது.

6. உங்கள் போர்ட்டல் தர்க்கத்தை சூழலுக்கு ஏற்றவாறு அமைக்கவும்

சிக்கலான பயன்பாடுகளுக்கு, உங்கள் போர்ட்டல் தர்க்கத்தை ஒரு மறுபயன்பாட்டு காம்போனென்ட் அல்லது ஒரு தனிப்பயன் ஹூக்கிற்குள் இணைக்கக் கருதுங்கள். உதாரணமாக, ஒரு `useModal` ஹூக் அல்லது ஒரு பொதுவான `PortalWrapper` காம்போனென்ட் `ReactDOM.createPortal` அழைப்பை மறைத்து, DOM முனை உருவாக்கம்/சுத்தம் செய்வதைக் கையாள முடியும், இது உங்கள் பயன்பாட்டுக் குறியீட்டை சுத்தமாகவும் மேலும் மட்டுப்படுத்தப்பட்டதாகவும் மாற்றும்.


// ஒரு எளிய PortalWrapper-இன் எடுத்துக்காட்டு
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

const createWrapperAndAppendToBody = (wrapperId) => {
  const wrapperElement = document.createElement('div');
  wrapperElement.setAttribute('id', wrapperId);
  document.body.appendChild(wrapperElement);
  return wrapperElement;
};

const PortalWrapper = ({ children, wrapperId = 'portal-wrapper' }) => {
  const [wrapperElement, setWrapperElement] = useState(null);

  useEffect(() => {
    let element = document.getElementById(wrapperId);
    let systemCreated = false;
    // wrapperId உடன் உறுப்பு இல்லை என்றால், அதை உருவாக்கி body-க்கு சேர்க்கவும்
    if (!element) {
      systemCreated = true;
      element = createWrapperAndAppendToBody(wrapperId);
    }
    setWrapperElement(element);

    return () => {
      // நிரல்ரீதியாக உருவாக்கப்பட்ட உறுப்பை நீக்கவும்
      if (systemCreated && element.parentNode) {
        element.parentNode.removeChild(element);
      }
    };
  }, [wrapperId]);

  if (!wrapperElement) return null;

  return ReactDOM.createPortal(children, wrapperElement);
};

export default PortalWrapper;

இந்த `PortalWrapper` நீங்கள் எந்த உள்ளடக்கத்தையும் எளிமையாகச் சுற்றி வைக்க அனுமதிக்கிறது, மேலும் அது குறிப்பிட்ட ஐடியுடன் டைனமிக்காக உருவாக்கப்பட்ட (மற்றும் சுத்தம் செய்யப்பட்ட) DOM முனையில் ரெண்டர் செய்யப்படும், இது உங்கள் பயன்பாடு முழுவதும் பயன்பாட்டை எளிதாக்குகிறது.

முடிவு: ரியாக்ட் போர்ட்டல்களுடன் உலகளாவிய UI மேம்பாட்டை மேம்படுத்துதல்

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

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