உங்கள் இணையப் பயன்பாடுகளுக்கு வேகமான, ஆற்றல்மிக்க பயனர் இடைமுகங்களை உருவாக்க விரும்பினால், ReactJS ஐ எப்படிப் பயன்படுத்துவது என்பதை நீங்கள் கற்றுக் கொள்ள வேண்டும்.

எதிர்வினை ஒரு கிளையன்ட் பக்க ஜாவாஸ்கிரிப்ட் நூலகம், அதாவது இது ஒரு சர்வரில் இயங்குவதற்கு மாறாக உலாவியில் கிளையன்ட்/பயனர் இயந்திரத்தில் இயங்குகிறது.

---

---

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

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

ReactJS என்றால் என்ன?

எதிர்வினை (ReactJS என்றும் அழைக்கப்படுகிறது) ஒரு திறந்த மூல ஜாவாஸ்கிரிப்ட் நூலகம், இது பெரும்பாலும் ஒரு கட்டமைப்பு என்று தவறாக அழைக்கப்படுகிறது. ஏனென்றால், ரியாக்ட் AngularJS மற்றும் VueJS போன்ற சிறந்த ஜாவாஸ்கிரிப்ட் கட்டமைப்புகளின் நேரடி போட்டியாளர்.

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

எதிர்வினை jQuery போன்ற மொழியில் உள்ள மற்ற நூலகங்களை விட கோண/Vue போன்ற கட்டமைப்புகளுடன் மிகவும் நெருக்கமாக தொடர்புடையது.

---

---

ReactJS பயன்படுத்துவதன் நன்மைகள் என்ன?

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

• நிலை மற்றும் தரவைக் கொண்ட 'மறுபயன்பாட்டு கூறுகள்' என்று குறிப்பிடப்படுவதைப் பயன்படுத்தி உங்கள் இடைமுகத்தை உருவாக்க இது உங்களை அனுமதிக்கிறது.
• இது ஜாவாஸ்கிரிப்ட் தொடரியல் நீட்டிப்பை (JSX) பயன்படுத்துகிறது, இது பயனரை மாறும் HTML ஐ எழுத அனுமதிக்கிறது.
• இது ஒரு மெய்நிகர் ஆவணப் பொருள் மாதிரியை (VDOM) பயன்படுத்துகிறது, இது வலைப்பக்கத்தின் குறிப்பிட்ட பிரிவுகளை டெவலப்பர் பக்கத்தை மீண்டும் ஏற்றாமல் புதுப்பிக்க அனுமதிக்கிறது.

ReactJS கூறுகள் என்ன?

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

---

---

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

தொடர்புடையது: இணையக் கூறுகள் மற்றும் கூறு அடிப்படையிலான கட்டிடக்கலைக்கான அறிமுகம்

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

ஒரு செயல்பாட்டு உதாரணத்துடன் ஒரு கூறுகளை உருவாக்குதல்

function Customer() {
return (

Paul Wilson

• Phone: 222-222-2222


• Email: Wilsonp@email.com


• Balance:

  ReactJS என்றால் என்ன, அதை எதற்காகப் பயன்படுத்தலாம்?

  

  உங்கள் இணையப் பயன்பாடுகளுக்கு வேகமான, ஆற்றல்மிக்க பயனர் இடைமுகங்களை உருவாக்க விரும்பினால், ReactJS ஐ எப்படிப் பயன்படுத்துவது என்பதை நீங்கள் கற்றுக் கொள்ள வேண்டும்.

  
  
  
  
  

  எதிர்வினை ஒரு கிளையன்ட் பக்க ஜாவாஸ்கிரிப்ட் நூலகம், அதாவது இது ஒரு சர்வரில் இயங்குவதற்கு மாறாக உலாவியில் கிளையன்ட்/பயனர் இயந்திரத்தில் இயங்குகிறது.

  ---

  
  
  

  ---

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

  
  
  
  

  
  

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

  ReactJS என்றால் என்ன?

  எதிர்வினை (ReactJS என்றும் அழைக்கப்படுகிறது) ஒரு திறந்த மூல ஜாவாஸ்கிரிப்ட் நூலகம், இது பெரும்பாலும் ஒரு கட்டமைப்பு என்று தவறாக அழைக்கப்படுகிறது. ஏனென்றால், ரியாக்ட் AngularJS மற்றும் VueJS போன்ற சிறந்த ஜாவாஸ்கிரிப்ட் கட்டமைப்புகளின் நேரடி போட்டியாளர்.

  
  
  

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

  எதிர்வினை jQuery போன்ற மொழியில் உள்ள மற்ற நூலகங்களை விட கோண/Vue போன்ற கட்டமைப்புகளுடன் மிகவும் நெருக்கமாக தொடர்புடையது.

  ---

  
  
  

  ---

  ReactJS பயன்படுத்துவதன் நன்மைகள் என்ன?

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

  • நிலை மற்றும் தரவைக் கொண்ட 'மறுபயன்பாட்டு கூறுகள்' என்று குறிப்பிடப்படுவதைப் பயன்படுத்தி உங்கள் இடைமுகத்தை உருவாக்க இது உங்களை அனுமதிக்கிறது.
  • இது ஜாவாஸ்கிரிப்ட் தொடரியல் நீட்டிப்பை (JSX) பயன்படுத்துகிறது, இது பயனரை மாறும் HTML ஐ எழுத அனுமதிக்கிறது.
  • இது ஒரு மெய்நிகர் ஆவணப் பொருள் மாதிரியை (VDOM) பயன்படுத்துகிறது, இது வலைப்பக்கத்தின் குறிப்பிட்ட பிரிவுகளை டெவலப்பர் பக்கத்தை மீண்டும் ஏற்றாமல் புதுப்பிக்க அனுமதிக்கிறது.

  ReactJS கூறுகள் என்ன?

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

  ---

  
  
  

  ---

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

  தொடர்புடையது: இணையக் கூறுகள் மற்றும் கூறு அடிப்படையிலான கட்டிடக்கலைக்கான அறிமுகம்

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

  ஒரு செயல்பாட்டு உதாரணத்துடன் ஒரு கூறுகளை உருவாக்குதல்

  
  function Customer() {
  return (
  
  

  Paul Wilson

  
  

  
  
  • Phone: 222-222-2222
  
  
  • Email: Wilsonp@email.com
  
  
  • Balance: $0.00
  
  

  
  
  );
  }
  export default Customer;

  ஒரு வகுப்பு உதாரணத்துடன் ஒரு கூறுகளை உருவாக்குதல்

  
  import React from 'react';
  
  class Customer extends React.Component {
  render() {
  return (
  
  

  Paul Wilson

  
  

  
  
  • Phone: 222-222-2222
  
  
  • Email: Wilsonp@email.com
  
  
  • Balance: $0.00
  
  

  
  
  );
  }
  }
  
  export default Customer;

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

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

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

  ஜாவாஸ்கிரிப்ட் தொடரியல் நீட்டிப்பு என்றால் என்ன?

  ஜாவாஸ்கிரிப்ட் தொடரியல் நீட்டிப்பு (JSX) என்பது ஒரு கூறு மூலம் திரும்பப்பெறும் எதிர்வினை உறுப்பு ஆகும். பயனர் இடைமுகத்தில் ஒரு குறிப்பிட்ட பிரிவு/கூறு எப்படி இருக்க வேண்டும் என்பதற்கான விளக்கம் இது. அதன் தோற்றம் HTML போன்றது, ஆனால் உண்மையில், இது ஜாவாஸ்கிரிப்ட்.

  JSX உதாரணம்

  
  
  

  Paul Wilson

  
  

  
  
  • Phone: 222-222-2222
  
  
  • Email: Wilsonp@email.com
  
  
  • Balance: $0.00
  
  

  
  
  

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

  மெய்நிகர் DOM என்றால் என்ன?

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

  எதிர்வினை திட்டக் கோப்புகளை ஆராய்தல்

  ஒரு புதிய எதிர்வினை திட்டம் உருவாக்கப்படும் போது, ​​பல்வேறு கோப்புகள் மற்றும் கோப்புறைகள் தானாகவே உருவாக்கப்படும். இந்த கோப்புறைகளில் ஒன்று பெயரிடப்பட்டுள்ளது பொது . பொதுக் கோப்புறையில் ரியாக்ட் கொதிகலனில் உள்ள ஒரே ஒரு HTML கோப்பு உள்ளது, அதற்கு உரிமை உண்டு index.html .

  Index.html கோப்பில் a உள்ளது ரூட் ஐடியுடன் டேக் செய்யவும், இது முக்கியமானது, ஏனென்றால் இங்குதான் முக்கிய ரியாக்ட் கூறு வழங்கப்படுகிறது (இது உங்கள் எதிர்வினை கூறுகளை உலாவியில் காட்டக்கூடிய DOM முனைகளாக மாற்றும் செயல்முறைக்கு கொடுக்கப்பட்ட பெயர்).

  இருப்பினும், ரெண்டரிங் செயல்முறை மற்றொரு கோப்பில் நடைபெறுகிறது - index.js - எதிர்வினை பயன்பாட்டு ரூட் கோப்பு எங்கே, இது App.js கோப்பு வழங்கப்பட்டு பின்னர் அனுப்பப்பட்டது index.html கோப்பு.

  இருந்து index.html கோப்பு, உங்கள் இணைய பயன்பாட்டின் தலைப்பை மாற்றலாம்; இருப்பினும், எதிர்வினை பயன்பாட்டிற்கான மற்ற ஒவ்வொரு சரிசெய்தலும் (ஒரு புதிய கூறு உருவாக்கம் உட்பட) மற்றொரு கோப்புறையிலிருந்து செய்யப்படுகிறது - தி src கோப்புறை தி src கோப்புறையில் உள்ளது index.js மற்றும் இந்த App.js கோப்புகள்.

  தி App.js கோப்பு என்பது ரூட் ரியாக்ட் கூறு மற்றும் முதல் ரியாக்ட் அப்ளிகேஷன் துவக்கத்தில் உங்கள் வலை உலாவியில் முதலில் வழங்கப்பட்டதற்கு அது பொறுப்பாகும். தி App.js கோப்பில் ஒரு செயல்பாடு உள்ளது செயலி அது JSX ஐ வழங்குகிறது. எதிர்வினை கொதிகலன் மற்றும் எதிர்வினை பயன்பாட்டை எவ்வாறு நிறுவுவது என்பது பற்றி மேலும் அறியவும்.

  ஒரு கூறுகளை உருவாக்குதல்

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

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

  ஒரு புதிய கூறு உதாரணத்தை உருவாக்குதல்

  
  function Customer() {
  return (
  
  

  Paul Wilson

  
  

  
  
  • Phone: 222-222-2222
  
  
  • Email: Wilsonp@email.com
  
  
  • Balance: $0.00
  
  

  
  
  );
  }
  
  export default Customer;
  

  மேலே உள்ள குறியீடு ஒரு புதிய வாடிக்கையாளர் கூறுகளை உருவாக்கி செயல்பாட்டை ஏற்றுமதி செய்கிறது, இதன் மூலம் வாடிக்கையாளர் கூறு இறக்குமதி செய்யப்படும் செயலி கூறு

  பயன்பாட்டு கூறு உதாரணத்தைப் பயன்படுத்துதல்

  
import Customer from './components/Customer';

function App() {
return (




);
}

export default App;


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

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

  பயன்பாட்டின் கூறு உதாரணத்தை வழங்குதல்

  
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(


,
document.getElementById('root')
);


  மேலே உள்ள குறியீடு அதன் உள்ளடக்கத்தைக் காட்டுகிறது index.js ரெண்டர் செய்ய ரெண்டர் செயல்பாட்டைப் பயன்படுத்தும் கோப்பு செயலி பயன்படுத்தி DOM க்கு கூறு document.getElementById ('ரூட்') மேலே உள்ள குறியீட்டில் உள்ள முறை. இது பயன்படுத்தும் ரூட் ஐடி மூலம் இது சாத்தியமானது index.html உங்கள் உலாவியில் பின்வரும் வெளியீட்டை வழங்க கோப்பு:

  இப்போது நீங்கள் ReactJS இல் கூறுகளை உருவாக்கலாம்

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

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

  பகிர் பகிர் ட்வீட் மின்னஞ்சல் இந்த 10 அத்தியாவசிய கருவிகளுடன் உங்கள் வலை மேம்பாட்டு திறன்களை மேம்படுத்தவும்

  வலைத்தளங்களை உருவாக்கத் தயாரா? புதிய மற்றும் நிபுணத்துவ வலை உருவாக்குநர்களுக்கான இந்த ஆன்லைன் கருவிகள் உங்கள் திறமைகளை அதிகரிக்க உத்தரவாதம் அளிக்கிறது!

  அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்

  • நிரலாக்க
  • எதிர்வினை
  • நிரலாக்க
  • ஜாவாஸ்கிரிப்ட்
  • இணைய மேம்பாடு

  எழுத்தாளர் பற்றி கதீஷா கீன்(21 கட்டுரைகள் வெளியிடப்பட்டன)

  கதீஷா கீன் ஒரு முழு அடுக்கு மென்பொருள் டெவலப்பர் மற்றும் தொழில்நுட்ப/தொழில்நுட்ப எழுத்தாளர். மிகவும் சிக்கலான சில தொழில்நுட்பக் கருத்துகளை எளிமையாக்கும் தனித்துவமான திறமை அவளிடம் உள்ளது; எந்தவொரு தொழில்நுட்ப புதியவராலும் எளிதில் புரிந்துகொள்ளக்கூடிய பொருள் உற்பத்தி. அவர் எழுதுவது, சுவாரஸ்யமான மென்பொருளை உருவாக்குவது மற்றும் உலகம் முழுவதும் (ஆவணப்படங்கள் மூலம்) பயணம் செய்வதில் ஆர்வம் கொண்டவர்.

  கதீஷா கீனிடமிருந்து மேலும்

  எங்கள் செய்திமடலுக்கு குழுசேரவும்

  தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!

  குழுசேர இங்கே சொடுக்கவும்
  .00

);
}
export default Customer;

ஒரு வகுப்பு உதாரணத்துடன் ஒரு கூறுகளை உருவாக்குதல்

import React from 'react';

class Customer extends React.Component {
render() {
return (

Paul Wilson

• Phone: 222-222-2222


• Email: Wilsonp@email.com


• Balance:

  ReactJS என்றால் என்ன, அதை எதற்காகப் பயன்படுத்தலாம்?

  

  உங்கள் இணையப் பயன்பாடுகளுக்கு வேகமான, ஆற்றல்மிக்க பயனர் இடைமுகங்களை உருவாக்க விரும்பினால், ReactJS ஐ எப்படிப் பயன்படுத்துவது என்பதை நீங்கள் கற்றுக் கொள்ள வேண்டும்.

  
  
  
  
  

  எதிர்வினை ஒரு கிளையன்ட் பக்க ஜாவாஸ்கிரிப்ட் நூலகம், அதாவது இது ஒரு சர்வரில் இயங்குவதற்கு மாறாக உலாவியில் கிளையன்ட்/பயனர் இயந்திரத்தில் இயங்குகிறது.

  ---

  
  
  

  ---

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

  
  
  
  

  
  

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

  ReactJS என்றால் என்ன?

  எதிர்வினை (ReactJS என்றும் அழைக்கப்படுகிறது) ஒரு திறந்த மூல ஜாவாஸ்கிரிப்ட் நூலகம், இது பெரும்பாலும் ஒரு கட்டமைப்பு என்று தவறாக அழைக்கப்படுகிறது. ஏனென்றால், ரியாக்ட் AngularJS மற்றும் VueJS போன்ற சிறந்த ஜாவாஸ்கிரிப்ட் கட்டமைப்புகளின் நேரடி போட்டியாளர்.

  
  
  

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

  எதிர்வினை jQuery போன்ற மொழியில் உள்ள மற்ற நூலகங்களை விட கோண/Vue போன்ற கட்டமைப்புகளுடன் மிகவும் நெருக்கமாக தொடர்புடையது.

  ---

  
  
  

  ---

  ReactJS பயன்படுத்துவதன் நன்மைகள் என்ன?

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

  • நிலை மற்றும் தரவைக் கொண்ட 'மறுபயன்பாட்டு கூறுகள்' என்று குறிப்பிடப்படுவதைப் பயன்படுத்தி உங்கள் இடைமுகத்தை உருவாக்க இது உங்களை அனுமதிக்கிறது.
  • இது ஜாவாஸ்கிரிப்ட் தொடரியல் நீட்டிப்பை (JSX) பயன்படுத்துகிறது, இது பயனரை மாறும் HTML ஐ எழுத அனுமதிக்கிறது.
  • இது ஒரு மெய்நிகர் ஆவணப் பொருள் மாதிரியை (VDOM) பயன்படுத்துகிறது, இது வலைப்பக்கத்தின் குறிப்பிட்ட பிரிவுகளை டெவலப்பர் பக்கத்தை மீண்டும் ஏற்றாமல் புதுப்பிக்க அனுமதிக்கிறது.

  ReactJS கூறுகள் என்ன?

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

  ---

  
  
  

  ---

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

  தொடர்புடையது: இணையக் கூறுகள் மற்றும் கூறு அடிப்படையிலான கட்டிடக்கலைக்கான அறிமுகம்

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

  ஒரு செயல்பாட்டு உதாரணத்துடன் ஒரு கூறுகளை உருவாக்குதல்

  
  function Customer() {
  return (
  
  

  Paul Wilson

  
  

  
  
  • Phone: 222-222-2222
  
  
  • Email: Wilsonp@email.com
  
  
  • Balance: $0.00
  
  

  
  
  );
  }
  export default Customer;

  ஒரு வகுப்பு உதாரணத்துடன் ஒரு கூறுகளை உருவாக்குதல்

  
  import React from 'react';
  
  class Customer extends React.Component {
  render() {
  return (
  
  

  Paul Wilson

  
  

  
  
  • Phone: 222-222-2222
  
  
  • Email: Wilsonp@email.com
  
  
  • Balance: $0.00
  
  

  
  
  );
  }
  }
  
  export default Customer;

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

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

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

  ஜாவாஸ்கிரிப்ட் தொடரியல் நீட்டிப்பு என்றால் என்ன?

  ஜாவாஸ்கிரிப்ட் தொடரியல் நீட்டிப்பு (JSX) என்பது ஒரு கூறு மூலம் திரும்பப்பெறும் எதிர்வினை உறுப்பு ஆகும். பயனர் இடைமுகத்தில் ஒரு குறிப்பிட்ட பிரிவு/கூறு எப்படி இருக்க வேண்டும் என்பதற்கான விளக்கம் இது. அதன் தோற்றம் HTML போன்றது, ஆனால் உண்மையில், இது ஜாவாஸ்கிரிப்ட்.

  JSX உதாரணம்

  
  
  

  Paul Wilson

  
  

  
  
  • Phone: 222-222-2222
  
  
  • Email: Wilsonp@email.com
  
  
  • Balance: $0.00
  
  

  
  
  

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

  மெய்நிகர் DOM என்றால் என்ன?

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

  எதிர்வினை திட்டக் கோப்புகளை ஆராய்தல்

  ஒரு புதிய எதிர்வினை திட்டம் உருவாக்கப்படும் போது, ​​பல்வேறு கோப்புகள் மற்றும் கோப்புறைகள் தானாகவே உருவாக்கப்படும். இந்த கோப்புறைகளில் ஒன்று பெயரிடப்பட்டுள்ளது பொது . பொதுக் கோப்புறையில் ரியாக்ட் கொதிகலனில் உள்ள ஒரே ஒரு HTML கோப்பு உள்ளது, அதற்கு உரிமை உண்டு index.html .

  Index.html கோப்பில் a உள்ளது ரூட் ஐடியுடன் டேக் செய்யவும், இது முக்கியமானது, ஏனென்றால் இங்குதான் முக்கிய ரியாக்ட் கூறு வழங்கப்படுகிறது (இது உங்கள் எதிர்வினை கூறுகளை உலாவியில் காட்டக்கூடிய DOM முனைகளாக மாற்றும் செயல்முறைக்கு கொடுக்கப்பட்ட பெயர்).

  இருப்பினும், ரெண்டரிங் செயல்முறை மற்றொரு கோப்பில் நடைபெறுகிறது - index.js - எதிர்வினை பயன்பாட்டு ரூட் கோப்பு எங்கே, இது App.js கோப்பு வழங்கப்பட்டு பின்னர் அனுப்பப்பட்டது index.html கோப்பு.

  இருந்து index.html கோப்பு, உங்கள் இணைய பயன்பாட்டின் தலைப்பை மாற்றலாம்; இருப்பினும், எதிர்வினை பயன்பாட்டிற்கான மற்ற ஒவ்வொரு சரிசெய்தலும் (ஒரு புதிய கூறு உருவாக்கம் உட்பட) மற்றொரு கோப்புறையிலிருந்து செய்யப்படுகிறது - தி src கோப்புறை தி src கோப்புறையில் உள்ளது index.js மற்றும் இந்த App.js கோப்புகள்.

  தி App.js கோப்பு என்பது ரூட் ரியாக்ட் கூறு மற்றும் முதல் ரியாக்ட் அப்ளிகேஷன் துவக்கத்தில் உங்கள் வலை உலாவியில் முதலில் வழங்கப்பட்டதற்கு அது பொறுப்பாகும். தி App.js கோப்பில் ஒரு செயல்பாடு உள்ளது செயலி அது JSX ஐ வழங்குகிறது. எதிர்வினை கொதிகலன் மற்றும் எதிர்வினை பயன்பாட்டை எவ்வாறு நிறுவுவது என்பது பற்றி மேலும் அறியவும்.

  ஒரு கூறுகளை உருவாக்குதல்

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

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

  ஒரு புதிய கூறு உதாரணத்தை உருவாக்குதல்

  
  function Customer() {
  return (
  
  

  Paul Wilson

  
  

  
  
  • Phone: 222-222-2222
  
  
  • Email: Wilsonp@email.com
  
  
  • Balance: $0.00
  
  

  
  
  );
  }
  
  export default Customer;
  

  மேலே உள்ள குறியீடு ஒரு புதிய வாடிக்கையாளர் கூறுகளை உருவாக்கி செயல்பாட்டை ஏற்றுமதி செய்கிறது, இதன் மூலம் வாடிக்கையாளர் கூறு இறக்குமதி செய்யப்படும் செயலி கூறு

  பயன்பாட்டு கூறு உதாரணத்தைப் பயன்படுத்துதல்

  
import Customer from './components/Customer';

function App() {
return (




);
}

export default App;


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

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

  பயன்பாட்டின் கூறு உதாரணத்தை வழங்குதல்

  
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(


,
document.getElementById('root')
);


  மேலே உள்ள குறியீடு அதன் உள்ளடக்கத்தைக் காட்டுகிறது index.js ரெண்டர் செய்ய ரெண்டர் செயல்பாட்டைப் பயன்படுத்தும் கோப்பு செயலி பயன்படுத்தி DOM க்கு கூறு document.getElementById ('ரூட்') மேலே உள்ள குறியீட்டில் உள்ள முறை. இது பயன்படுத்தும் ரூட் ஐடி மூலம் இது சாத்தியமானது index.html உங்கள் உலாவியில் பின்வரும் வெளியீட்டை வழங்க கோப்பு:

  இப்போது நீங்கள் ReactJS இல் கூறுகளை உருவாக்கலாம்

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

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

  பகிர் பகிர் ட்வீட் மின்னஞ்சல் இந்த 10 அத்தியாவசிய கருவிகளுடன் உங்கள் வலை மேம்பாட்டு திறன்களை மேம்படுத்தவும்

  வலைத்தளங்களை உருவாக்கத் தயாரா? புதிய மற்றும் நிபுணத்துவ வலை உருவாக்குநர்களுக்கான இந்த ஆன்லைன் கருவிகள் உங்கள் திறமைகளை அதிகரிக்க உத்தரவாதம் அளிக்கிறது!

  அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்

  • நிரலாக்க
  • எதிர்வினை
  • நிரலாக்க
  • ஜாவாஸ்கிரிப்ட்
  • இணைய மேம்பாடு

  எழுத்தாளர் பற்றி கதீஷா கீன்(21 கட்டுரைகள் வெளியிடப்பட்டன)

  கதீஷா கீன் ஒரு முழு அடுக்கு மென்பொருள் டெவலப்பர் மற்றும் தொழில்நுட்ப/தொழில்நுட்ப எழுத்தாளர். மிகவும் சிக்கலான சில தொழில்நுட்பக் கருத்துகளை எளிமையாக்கும் தனித்துவமான திறமை அவளிடம் உள்ளது; எந்தவொரு தொழில்நுட்ப புதியவராலும் எளிதில் புரிந்துகொள்ளக்கூடிய பொருள் உற்பத்தி. அவர் எழுதுவது, சுவாரஸ்யமான மென்பொருளை உருவாக்குவது மற்றும் உலகம் முழுவதும் (ஆவணப்படங்கள் மூலம்) பயணம் செய்வதில் ஆர்வம் கொண்டவர்.

  கதீஷா கீனிடமிருந்து மேலும்

  எங்கள் செய்திமடலுக்கு குழுசேரவும்

  தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!

  குழுசேர இங்கே சொடுக்கவும்
  .00

);
}
}

export default Customer;

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

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

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

ஜாவாஸ்கிரிப்ட் தொடரியல் நீட்டிப்பு என்றால் என்ன?

ஜாவாஸ்கிரிப்ட் தொடரியல் நீட்டிப்பு (JSX) என்பது ஒரு கூறு மூலம் திரும்பப்பெறும் எதிர்வினை உறுப்பு ஆகும். பயனர் இடைமுகத்தில் ஒரு குறிப்பிட்ட பிரிவு/கூறு எப்படி இருக்க வேண்டும் என்பதற்கான விளக்கம் இது. அதன் தோற்றம் HTML போன்றது, ஆனால் உண்மையில், இது ஜாவாஸ்கிரிப்ட்.

JSX உதாரணம்

Paul Wilson

• Phone: 222-222-2222


• Email: Wilsonp@email.com


• Balance:

  ReactJS என்றால் என்ன, அதை எதற்காகப் பயன்படுத்தலாம்?

  

  உங்கள் இணையப் பயன்பாடுகளுக்கு வேகமான, ஆற்றல்மிக்க பயனர் இடைமுகங்களை உருவாக்க விரும்பினால், ReactJS ஐ எப்படிப் பயன்படுத்துவது என்பதை நீங்கள் கற்றுக் கொள்ள வேண்டும்.

  
  
  
  
  

  எதிர்வினை ஒரு கிளையன்ட் பக்க ஜாவாஸ்கிரிப்ட் நூலகம், அதாவது இது ஒரு சர்வரில் இயங்குவதற்கு மாறாக உலாவியில் கிளையன்ட்/பயனர் இயந்திரத்தில் இயங்குகிறது.

  ---

  
  
  

  ---

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

  
  
  
  

  
  

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

  ReactJS என்றால் என்ன?

  எதிர்வினை (ReactJS என்றும் அழைக்கப்படுகிறது) ஒரு திறந்த மூல ஜாவாஸ்கிரிப்ட் நூலகம், இது பெரும்பாலும் ஒரு கட்டமைப்பு என்று தவறாக அழைக்கப்படுகிறது. ஏனென்றால், ரியாக்ட் AngularJS மற்றும் VueJS போன்ற சிறந்த ஜாவாஸ்கிரிப்ட் கட்டமைப்புகளின் நேரடி போட்டியாளர்.

  
  
  

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

  எதிர்வினை jQuery போன்ற மொழியில் உள்ள மற்ற நூலகங்களை விட கோண/Vue போன்ற கட்டமைப்புகளுடன் மிகவும் நெருக்கமாக தொடர்புடையது.

  ---

  
  
  

  ---

  ReactJS பயன்படுத்துவதன் நன்மைகள் என்ன?

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

  • நிலை மற்றும் தரவைக் கொண்ட 'மறுபயன்பாட்டு கூறுகள்' என்று குறிப்பிடப்படுவதைப் பயன்படுத்தி உங்கள் இடைமுகத்தை உருவாக்க இது உங்களை அனுமதிக்கிறது.
  • இது ஜாவாஸ்கிரிப்ட் தொடரியல் நீட்டிப்பை (JSX) பயன்படுத்துகிறது, இது பயனரை மாறும் HTML ஐ எழுத அனுமதிக்கிறது.
  • இது ஒரு மெய்நிகர் ஆவணப் பொருள் மாதிரியை (VDOM) பயன்படுத்துகிறது, இது வலைப்பக்கத்தின் குறிப்பிட்ட பிரிவுகளை டெவலப்பர் பக்கத்தை மீண்டும் ஏற்றாமல் புதுப்பிக்க அனுமதிக்கிறது.

  ReactJS கூறுகள் என்ன?

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

  ---

  
  
  

  ---

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

  தொடர்புடையது: இணையக் கூறுகள் மற்றும் கூறு அடிப்படையிலான கட்டிடக்கலைக்கான அறிமுகம்

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

  ஒரு செயல்பாட்டு உதாரணத்துடன் ஒரு கூறுகளை உருவாக்குதல்

  
  function Customer() {
  return (
  
  

  Paul Wilson

  
  

  
  
  • Phone: 222-222-2222
  
  
  • Email: Wilsonp@email.com
  
  
  • Balance: $0.00
  
  

  
  
  );
  }
  export default Customer;

  ஒரு வகுப்பு உதாரணத்துடன் ஒரு கூறுகளை உருவாக்குதல்

  
  import React from 'react';
  
  class Customer extends React.Component {
  render() {
  return (
  
  

  Paul Wilson

  
  

  
  
  • Phone: 222-222-2222
  
  
  • Email: Wilsonp@email.com
  
  
  • Balance: $0.00
  
  

  
  
  );
  }
  }
  
  export default Customer;

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

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

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

  ஜாவாஸ்கிரிப்ட் தொடரியல் நீட்டிப்பு என்றால் என்ன?

  ஜாவாஸ்கிரிப்ட் தொடரியல் நீட்டிப்பு (JSX) என்பது ஒரு கூறு மூலம் திரும்பப்பெறும் எதிர்வினை உறுப்பு ஆகும். பயனர் இடைமுகத்தில் ஒரு குறிப்பிட்ட பிரிவு/கூறு எப்படி இருக்க வேண்டும் என்பதற்கான விளக்கம் இது. அதன் தோற்றம் HTML போன்றது, ஆனால் உண்மையில், இது ஜாவாஸ்கிரிப்ட்.

  JSX உதாரணம்

  
  
  

  Paul Wilson

  
  

  
  
  • Phone: 222-222-2222
  
  
  • Email: Wilsonp@email.com
  
  
  • Balance: $0.00
  
  

  
  
  

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

  மெய்நிகர் DOM என்றால் என்ன?

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

  எதிர்வினை திட்டக் கோப்புகளை ஆராய்தல்

  ஒரு புதிய எதிர்வினை திட்டம் உருவாக்கப்படும் போது, ​​பல்வேறு கோப்புகள் மற்றும் கோப்புறைகள் தானாகவே உருவாக்கப்படும். இந்த கோப்புறைகளில் ஒன்று பெயரிடப்பட்டுள்ளது பொது . பொதுக் கோப்புறையில் ரியாக்ட் கொதிகலனில் உள்ள ஒரே ஒரு HTML கோப்பு உள்ளது, அதற்கு உரிமை உண்டு index.html .

  Index.html கோப்பில் a உள்ளது ரூட் ஐடியுடன் டேக் செய்யவும், இது முக்கியமானது, ஏனென்றால் இங்குதான் முக்கிய ரியாக்ட் கூறு வழங்கப்படுகிறது (இது உங்கள் எதிர்வினை கூறுகளை உலாவியில் காட்டக்கூடிய DOM முனைகளாக மாற்றும் செயல்முறைக்கு கொடுக்கப்பட்ட பெயர்).

  இருப்பினும், ரெண்டரிங் செயல்முறை மற்றொரு கோப்பில் நடைபெறுகிறது - index.js - எதிர்வினை பயன்பாட்டு ரூட் கோப்பு எங்கே, இது App.js கோப்பு வழங்கப்பட்டு பின்னர் அனுப்பப்பட்டது index.html கோப்பு.

  இருந்து index.html கோப்பு, உங்கள் இணைய பயன்பாட்டின் தலைப்பை மாற்றலாம்; இருப்பினும், எதிர்வினை பயன்பாட்டிற்கான மற்ற ஒவ்வொரு சரிசெய்தலும் (ஒரு புதிய கூறு உருவாக்கம் உட்பட) மற்றொரு கோப்புறையிலிருந்து செய்யப்படுகிறது - தி src கோப்புறை தி src கோப்புறையில் உள்ளது index.js மற்றும் இந்த App.js கோப்புகள்.

  தி App.js கோப்பு என்பது ரூட் ரியாக்ட் கூறு மற்றும் முதல் ரியாக்ட் அப்ளிகேஷன் துவக்கத்தில் உங்கள் வலை உலாவியில் முதலில் வழங்கப்பட்டதற்கு அது பொறுப்பாகும். தி App.js கோப்பில் ஒரு செயல்பாடு உள்ளது செயலி அது JSX ஐ வழங்குகிறது. எதிர்வினை கொதிகலன் மற்றும் எதிர்வினை பயன்பாட்டை எவ்வாறு நிறுவுவது என்பது பற்றி மேலும் அறியவும்.

  ஒரு கூறுகளை உருவாக்குதல்

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

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

  ஒரு புதிய கூறு உதாரணத்தை உருவாக்குதல்

  
  function Customer() {
  return (
  
  

  Paul Wilson

  
  

  
  
  • Phone: 222-222-2222
  
  
  • Email: Wilsonp@email.com
  
  
  • Balance: $0.00
  
  

  
  
  );
  }
  
  export default Customer;
  

  மேலே உள்ள குறியீடு ஒரு புதிய வாடிக்கையாளர் கூறுகளை உருவாக்கி செயல்பாட்டை ஏற்றுமதி செய்கிறது, இதன் மூலம் வாடிக்கையாளர் கூறு இறக்குமதி செய்யப்படும் செயலி கூறு

  பயன்பாட்டு கூறு உதாரணத்தைப் பயன்படுத்துதல்

  
import Customer from './components/Customer';

function App() {
return (




);
}

export default App;


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

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

  பயன்பாட்டின் கூறு உதாரணத்தை வழங்குதல்

  
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(


,
document.getElementById('root')
);


  மேலே உள்ள குறியீடு அதன் உள்ளடக்கத்தைக் காட்டுகிறது index.js ரெண்டர் செய்ய ரெண்டர் செயல்பாட்டைப் பயன்படுத்தும் கோப்பு செயலி பயன்படுத்தி DOM க்கு கூறு document.getElementById ('ரூட்') மேலே உள்ள குறியீட்டில் உள்ள முறை. இது பயன்படுத்தும் ரூட் ஐடி மூலம் இது சாத்தியமானது index.html உங்கள் உலாவியில் பின்வரும் வெளியீட்டை வழங்க கோப்பு:

  இப்போது நீங்கள் ReactJS இல் கூறுகளை உருவாக்கலாம்

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

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

  பகிர் பகிர் ட்வீட் மின்னஞ்சல் இந்த 10 அத்தியாவசிய கருவிகளுடன் உங்கள் வலை மேம்பாட்டு திறன்களை மேம்படுத்தவும்

  வலைத்தளங்களை உருவாக்கத் தயாரா? புதிய மற்றும் நிபுணத்துவ வலை உருவாக்குநர்களுக்கான இந்த ஆன்லைன் கருவிகள் உங்கள் திறமைகளை அதிகரிக்க உத்தரவாதம் அளிக்கிறது!

  அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்

  • நிரலாக்க
  • எதிர்வினை
  • நிரலாக்க
  • ஜாவாஸ்கிரிப்ட்
  • இணைய மேம்பாடு

  எழுத்தாளர் பற்றி கதீஷா கீன்(21 கட்டுரைகள் வெளியிடப்பட்டன)

  கதீஷா கீன் ஒரு முழு அடுக்கு மென்பொருள் டெவலப்பர் மற்றும் தொழில்நுட்ப/தொழில்நுட்ப எழுத்தாளர். மிகவும் சிக்கலான சில தொழில்நுட்பக் கருத்துகளை எளிமையாக்கும் தனித்துவமான திறமை அவளிடம் உள்ளது; எந்தவொரு தொழில்நுட்ப புதியவராலும் எளிதில் புரிந்துகொள்ளக்கூடிய பொருள் உற்பத்தி. அவர் எழுதுவது, சுவாரஸ்யமான மென்பொருளை உருவாக்குவது மற்றும் உலகம் முழுவதும் (ஆவணப்படங்கள் மூலம்) பயணம் செய்வதில் ஆர்வம் கொண்டவர்.

  கதீஷா கீனிடமிருந்து மேலும்

  எங்கள் செய்திமடலுக்கு குழுசேரவும்

  தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!

  குழுசேர இங்கே சொடுக்கவும்
  .00

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

மெய்நிகர் DOM என்றால் என்ன?

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

விசைப்பலகை விண்டோஸ் 10 இல் நம்பர் பேடை இயக்குவது எப்படி

எதிர்வினை திட்டக் கோப்புகளை ஆராய்தல்

ஒரு புதிய எதிர்வினை திட்டம் உருவாக்கப்படும் போது, ​​பல்வேறு கோப்புகள் மற்றும் கோப்புறைகள் தானாகவே உருவாக்கப்படும். இந்த கோப்புறைகளில் ஒன்று பெயரிடப்பட்டுள்ளது பொது . பொதுக் கோப்புறையில் ரியாக்ட் கொதிகலனில் உள்ள ஒரே ஒரு HTML கோப்பு உள்ளது, அதற்கு உரிமை உண்டு index.html .

Index.html கோப்பில் a உள்ளது ரூட் ஐடியுடன் டேக் செய்யவும், இது முக்கியமானது, ஏனென்றால் இங்குதான் முக்கிய ரியாக்ட் கூறு வழங்கப்படுகிறது (இது உங்கள் எதிர்வினை கூறுகளை உலாவியில் காட்டக்கூடிய DOM முனைகளாக மாற்றும் செயல்முறைக்கு கொடுக்கப்பட்ட பெயர்).

இருப்பினும், ரெண்டரிங் செயல்முறை மற்றொரு கோப்பில் நடைபெறுகிறது - index.js - எதிர்வினை பயன்பாட்டு ரூட் கோப்பு எங்கே, இது App.js கோப்பு வழங்கப்பட்டு பின்னர் அனுப்பப்பட்டது index.html கோப்பு.

இருந்து index.html கோப்பு, உங்கள் இணைய பயன்பாட்டின் தலைப்பை மாற்றலாம்; இருப்பினும், எதிர்வினை பயன்பாட்டிற்கான மற்ற ஒவ்வொரு சரிசெய்தலும் (ஒரு புதிய கூறு உருவாக்கம் உட்பட) மற்றொரு கோப்புறையிலிருந்து செய்யப்படுகிறது - தி src கோப்புறை தி src கோப்புறையில் உள்ளது index.js மற்றும் இந்த App.js கோப்புகள்.

தி App.js கோப்பு என்பது ரூட் ரியாக்ட் கூறு மற்றும் முதல் ரியாக்ட் அப்ளிகேஷன் துவக்கத்தில் உங்கள் வலை உலாவியில் முதலில் வழங்கப்பட்டதற்கு அது பொறுப்பாகும். தி App.js கோப்பில் ஒரு செயல்பாடு உள்ளது செயலி அது JSX ஐ வழங்குகிறது. எதிர்வினை கொதிகலன் மற்றும் எதிர்வினை பயன்பாட்டை எவ்வாறு நிறுவுவது என்பது பற்றி மேலும் அறியவும்.

ஒரு கூறுகளை உருவாக்குதல்

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

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

ஒரு புதிய கூறு உதாரணத்தை உருவாக்குதல்

function Customer() {
return (

Paul Wilson

• Phone: 222-222-2222


• Email: Wilsonp@email.com


• Balance:

  ReactJS என்றால் என்ன, அதை எதற்காகப் பயன்படுத்தலாம்?

  

  உங்கள் இணையப் பயன்பாடுகளுக்கு வேகமான, ஆற்றல்மிக்க பயனர் இடைமுகங்களை உருவாக்க விரும்பினால், ReactJS ஐ எப்படிப் பயன்படுத்துவது என்பதை நீங்கள் கற்றுக் கொள்ள வேண்டும்.

  
  
  
  
  

  எதிர்வினை ஒரு கிளையன்ட் பக்க ஜாவாஸ்கிரிப்ட் நூலகம், அதாவது இது ஒரு சர்வரில் இயங்குவதற்கு மாறாக உலாவியில் கிளையன்ட்/பயனர் இயந்திரத்தில் இயங்குகிறது.

  ---

  
  
  

  ---

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

  
  
  
  

  
  

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

  ReactJS என்றால் என்ன?

  எதிர்வினை (ReactJS என்றும் அழைக்கப்படுகிறது) ஒரு திறந்த மூல ஜாவாஸ்கிரிப்ட் நூலகம், இது பெரும்பாலும் ஒரு கட்டமைப்பு என்று தவறாக அழைக்கப்படுகிறது. ஏனென்றால், ரியாக்ட் AngularJS மற்றும் VueJS போன்ற சிறந்த ஜாவாஸ்கிரிப்ட் கட்டமைப்புகளின் நேரடி போட்டியாளர்.

  
  
  

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

  எதிர்வினை jQuery போன்ற மொழியில் உள்ள மற்ற நூலகங்களை விட கோண/Vue போன்ற கட்டமைப்புகளுடன் மிகவும் நெருக்கமாக தொடர்புடையது.

  ---

  
  
  

  ---

  ReactJS பயன்படுத்துவதன் நன்மைகள் என்ன?

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

  • நிலை மற்றும் தரவைக் கொண்ட 'மறுபயன்பாட்டு கூறுகள்' என்று குறிப்பிடப்படுவதைப் பயன்படுத்தி உங்கள் இடைமுகத்தை உருவாக்க இது உங்களை அனுமதிக்கிறது.
  • இது ஜாவாஸ்கிரிப்ட் தொடரியல் நீட்டிப்பை (JSX) பயன்படுத்துகிறது, இது பயனரை மாறும் HTML ஐ எழுத அனுமதிக்கிறது.
  • இது ஒரு மெய்நிகர் ஆவணப் பொருள் மாதிரியை (VDOM) பயன்படுத்துகிறது, இது வலைப்பக்கத்தின் குறிப்பிட்ட பிரிவுகளை டெவலப்பர் பக்கத்தை மீண்டும் ஏற்றாமல் புதுப்பிக்க அனுமதிக்கிறது.

  ReactJS கூறுகள் என்ன?

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

  ---

  
  
  

  ---

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

  தொடர்புடையது: இணையக் கூறுகள் மற்றும் கூறு அடிப்படையிலான கட்டிடக்கலைக்கான அறிமுகம்

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

  ஒரு செயல்பாட்டு உதாரணத்துடன் ஒரு கூறுகளை உருவாக்குதல்

  
  function Customer() {
  return (
  
  

  Paul Wilson

  
  

  
  
  • Phone: 222-222-2222
  
  
  • Email: Wilsonp@email.com
  
  
  • Balance: $0.00
  
  

  
  
  );
  }
  export default Customer;

  ஒரு வகுப்பு உதாரணத்துடன் ஒரு கூறுகளை உருவாக்குதல்

  
  import React from 'react';
  
  class Customer extends React.Component {
  render() {
  return (
  
  

  Paul Wilson

  
  

  
  
  • Phone: 222-222-2222
  
  
  • Email: Wilsonp@email.com
  
  
  • Balance: $0.00
  
  

  
  
  );
  }
  }
  
  export default Customer;

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

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

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

  ஜாவாஸ்கிரிப்ட் தொடரியல் நீட்டிப்பு என்றால் என்ன?

  ஜாவாஸ்கிரிப்ட் தொடரியல் நீட்டிப்பு (JSX) என்பது ஒரு கூறு மூலம் திரும்பப்பெறும் எதிர்வினை உறுப்பு ஆகும். பயனர் இடைமுகத்தில் ஒரு குறிப்பிட்ட பிரிவு/கூறு எப்படி இருக்க வேண்டும் என்பதற்கான விளக்கம் இது. அதன் தோற்றம் HTML போன்றது, ஆனால் உண்மையில், இது ஜாவாஸ்கிரிப்ட்.

  JSX உதாரணம்

  
  
  

  Paul Wilson

  
  

  
  
  • Phone: 222-222-2222
  
  
  • Email: Wilsonp@email.com
  
  
  • Balance: $0.00
  
  

  
  
  

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

  மெய்நிகர் DOM என்றால் என்ன?

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

  எதிர்வினை திட்டக் கோப்புகளை ஆராய்தல்

  ஒரு புதிய எதிர்வினை திட்டம் உருவாக்கப்படும் போது, ​​பல்வேறு கோப்புகள் மற்றும் கோப்புறைகள் தானாகவே உருவாக்கப்படும். இந்த கோப்புறைகளில் ஒன்று பெயரிடப்பட்டுள்ளது பொது . பொதுக் கோப்புறையில் ரியாக்ட் கொதிகலனில் உள்ள ஒரே ஒரு HTML கோப்பு உள்ளது, அதற்கு உரிமை உண்டு index.html .

  Index.html கோப்பில் a உள்ளது ரூட் ஐடியுடன் டேக் செய்யவும், இது முக்கியமானது, ஏனென்றால் இங்குதான் முக்கிய ரியாக்ட் கூறு வழங்கப்படுகிறது (இது உங்கள் எதிர்வினை கூறுகளை உலாவியில் காட்டக்கூடிய DOM முனைகளாக மாற்றும் செயல்முறைக்கு கொடுக்கப்பட்ட பெயர்).

  இருப்பினும், ரெண்டரிங் செயல்முறை மற்றொரு கோப்பில் நடைபெறுகிறது - index.js - எதிர்வினை பயன்பாட்டு ரூட் கோப்பு எங்கே, இது App.js கோப்பு வழங்கப்பட்டு பின்னர் அனுப்பப்பட்டது index.html கோப்பு.

  இருந்து index.html கோப்பு, உங்கள் இணைய பயன்பாட்டின் தலைப்பை மாற்றலாம்; இருப்பினும், எதிர்வினை பயன்பாட்டிற்கான மற்ற ஒவ்வொரு சரிசெய்தலும் (ஒரு புதிய கூறு உருவாக்கம் உட்பட) மற்றொரு கோப்புறையிலிருந்து செய்யப்படுகிறது - தி src கோப்புறை தி src கோப்புறையில் உள்ளது index.js மற்றும் இந்த App.js கோப்புகள்.

  தி App.js கோப்பு என்பது ரூட் ரியாக்ட் கூறு மற்றும் முதல் ரியாக்ட் அப்ளிகேஷன் துவக்கத்தில் உங்கள் வலை உலாவியில் முதலில் வழங்கப்பட்டதற்கு அது பொறுப்பாகும். தி App.js கோப்பில் ஒரு செயல்பாடு உள்ளது செயலி அது JSX ஐ வழங்குகிறது. எதிர்வினை கொதிகலன் மற்றும் எதிர்வினை பயன்பாட்டை எவ்வாறு நிறுவுவது என்பது பற்றி மேலும் அறியவும்.

  ஒரு கூறுகளை உருவாக்குதல்

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

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

  ஒரு புதிய கூறு உதாரணத்தை உருவாக்குதல்

  
  function Customer() {
  return (
  
  

  Paul Wilson

  
  

  
  
  • Phone: 222-222-2222
  
  
  • Email: Wilsonp@email.com
  
  
  • Balance: $0.00
  
  

  
  
  );
  }
  
  export default Customer;
  

  மேலே உள்ள குறியீடு ஒரு புதிய வாடிக்கையாளர் கூறுகளை உருவாக்கி செயல்பாட்டை ஏற்றுமதி செய்கிறது, இதன் மூலம் வாடிக்கையாளர் கூறு இறக்குமதி செய்யப்படும் செயலி கூறு

  பயன்பாட்டு கூறு உதாரணத்தைப் பயன்படுத்துதல்

  
import Customer from './components/Customer';

function App() {
return (




);
}

export default App;


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

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

  பயன்பாட்டின் கூறு உதாரணத்தை வழங்குதல்

  
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(


,
document.getElementById('root')
);


  மேலே உள்ள குறியீடு அதன் உள்ளடக்கத்தைக் காட்டுகிறது index.js ரெண்டர் செய்ய ரெண்டர் செயல்பாட்டைப் பயன்படுத்தும் கோப்பு செயலி பயன்படுத்தி DOM க்கு கூறு document.getElementById ('ரூட்') மேலே உள்ள குறியீட்டில் உள்ள முறை. இது பயன்படுத்தும் ரூட் ஐடி மூலம் இது சாத்தியமானது index.html உங்கள் உலாவியில் பின்வரும் வெளியீட்டை வழங்க கோப்பு:

  இப்போது நீங்கள் ReactJS இல் கூறுகளை உருவாக்கலாம்

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

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

  பகிர் பகிர் ட்வீட் மின்னஞ்சல் இந்த 10 அத்தியாவசிய கருவிகளுடன் உங்கள் வலை மேம்பாட்டு திறன்களை மேம்படுத்தவும்

  வலைத்தளங்களை உருவாக்கத் தயாரா? புதிய மற்றும் நிபுணத்துவ வலை உருவாக்குநர்களுக்கான இந்த ஆன்லைன் கருவிகள் உங்கள் திறமைகளை அதிகரிக்க உத்தரவாதம் அளிக்கிறது!

  அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்

  • நிரலாக்க
  • எதிர்வினை
  • நிரலாக்க
  • ஜாவாஸ்கிரிப்ட்
  • இணைய மேம்பாடு

  எழுத்தாளர் பற்றி கதீஷா கீன்(21 கட்டுரைகள் வெளியிடப்பட்டன)

  கதீஷா கீன் ஒரு முழு அடுக்கு மென்பொருள் டெவலப்பர் மற்றும் தொழில்நுட்ப/தொழில்நுட்ப எழுத்தாளர். மிகவும் சிக்கலான சில தொழில்நுட்பக் கருத்துகளை எளிமையாக்கும் தனித்துவமான திறமை அவளிடம் உள்ளது; எந்தவொரு தொழில்நுட்ப புதியவராலும் எளிதில் புரிந்துகொள்ளக்கூடிய பொருள் உற்பத்தி. அவர் எழுதுவது, சுவாரஸ்யமான மென்பொருளை உருவாக்குவது மற்றும் உலகம் முழுவதும் (ஆவணப்படங்கள் மூலம்) பயணம் செய்வதில் ஆர்வம் கொண்டவர்.

  கதீஷா கீனிடமிருந்து மேலும்

  எங்கள் செய்திமடலுக்கு குழுசேரவும்

  தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!

  குழுசேர இங்கே சொடுக்கவும்
  .00

);
}

export default Customer;

மேலே உள்ள குறியீடு ஒரு புதிய வாடிக்கையாளர் கூறுகளை உருவாக்கி செயல்பாட்டை ஏற்றுமதி செய்கிறது, இதன் மூலம் வாடிக்கையாளர் கூறு இறக்குமதி செய்யப்படும் செயலி கூறு

பயன்பாட்டு கூறு உதாரணத்தைப் பயன்படுத்துதல்


import Customer from './components/Customer';

function App() {
return (




);
}

export default App;


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

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

பயன்பாட்டின் கூறு உதாரணத்தை வழங்குதல்


import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(


,
document.getElementById('root')
);


மேலே உள்ள குறியீடு அதன் உள்ளடக்கத்தைக் காட்டுகிறது index.js ரெண்டர் செய்ய ரெண்டர் செயல்பாட்டைப் பயன்படுத்தும் கோப்பு செயலி பயன்படுத்தி DOM க்கு கூறு document.getElementById ('ரூட்') மேலே உள்ள குறியீட்டில் உள்ள முறை. இது பயன்படுத்தும் ரூட் ஐடி மூலம் இது சாத்தியமானது index.html உங்கள் உலாவியில் பின்வரும் வெளியீட்டை வழங்க கோப்பு:

இப்போது நீங்கள் ReactJS இல் கூறுகளை உருவாக்கலாம்

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

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

பகிர் பகிர் ட்வீட் மின்னஞ்சல் இந்த 10 அத்தியாவசிய கருவிகளுடன் உங்கள் வலை மேம்பாட்டு திறன்களை மேம்படுத்தவும்

வலைத்தளங்களை உருவாக்கத் தயாரா? புதிய மற்றும் நிபுணத்துவ வலை உருவாக்குநர்களுக்கான இந்த ஆன்லைன் கருவிகள் உங்கள் திறமைகளை அதிகரிக்க உத்தரவாதம் அளிக்கிறது!

அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்

• நிரலாக்க
• எதிர்வினை
• நிரலாக்க
• ஜாவாஸ்கிரிப்ட்
• இணைய மேம்பாடு

எழுத்தாளர் பற்றி கதீஷா கீன்(21 கட்டுரைகள் வெளியிடப்பட்டன)

கதீஷா கீன் ஒரு முழு அடுக்கு மென்பொருள் டெவலப்பர் மற்றும் தொழில்நுட்ப/தொழில்நுட்ப எழுத்தாளர். மிகவும் சிக்கலான சில தொழில்நுட்பக் கருத்துகளை எளிமையாக்கும் தனித்துவமான திறமை அவளிடம் உள்ளது; எந்தவொரு தொழில்நுட்ப புதியவராலும் எளிதில் புரிந்துகொள்ளக்கூடிய பொருள் உற்பத்தி. அவர் எழுதுவது, சுவாரஸ்யமான மென்பொருளை உருவாக்குவது மற்றும் உலகம் முழுவதும் (ஆவணப்படங்கள் மூலம்) பயணம் செய்வதில் ஆர்வம் கொண்டவர்.

கதீஷா கீனிடமிருந்து மேலும்

எங்கள் செய்திமடலுக்கு குழுசேரவும்

தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!

குழுசேர இங்கே சொடுக்கவும்