வர்த்தக ரோபோக்களை எழுதும் போது நூலகத்தைப் பயன்படுத்தி, தொடக்க டம்மிகளுக்கான React.JS

Программирование

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

Contents
  1. ஜாவாஸ்கிரிப்ட் நூலகம் – எதிர்வினை: அது என்ன
  2. எதிர்வினை நூலகம் ஏன் தேவை?
  3. ஆரம்பநிலைக்கான அறிமுகம்: அடிப்படை கருத்துக்கள்
  4. வணக்கம் உலகம்!
  5. JSX அமைப்பு மொழியின் அடிப்படைகள்
  6. JSX என்றால் என்ன?
  7. கணினி மொழியில் வெளிப்பாடுகளின் உருவாக்கம்
  8. விவரம் ரெண்டரிங்
  9. கூறுகள் மற்றும் முட்டுகள்
  10. கூறுகளின் வகைகள்: செயல்பாட்டு மற்றும் வகுப்பு
  11. முட்டுகள்
  12. நிலை மற்றும் வாழ்க்கைச் சுழற்சி
  13. நிகழ்வு பகுப்பாய்வு
  14. உறுப்புகளின் நிபந்தனை ரெண்டரிங்
  15. கூறுகளை மாற்றுதல்
  16. பட்டியல்கள் மற்றும் விசைகள்
  17. விசைகள்
  18. படிவங்கள்
  19. நிர்வகிக்கப்பட்ட பொருட்கள்
  20. மாநிலத்தின் எழுச்சி
  21. அரசின் எழுச்சியைக் கட்டுப்படுத்த வேண்டிய அவசியம் ஏன்?
  22. கலவை எதிராக மரபுரிமை
  23. React.js கோட்பாடுகள்
  24. React.js நூலகத்தின் செயல்பாடு
  25. நடைமுறை பயன்பாடு
  26. ஜாவாஸ்கிரிப்ட்டில் வர்த்தக ரோபோக்களை எழுதும் போது ரியாக்டின் நடைமுறை பயன்பாடு
  27. GitHub மற்றும் React.js
  28. ஆவணப்படுத்தல்

ஜாவாஸ்கிரிப்ட் நூலகம் – எதிர்வினை: அது என்ன

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

குறிப்பு! அத்தகைய கூறு பாகங்கள் கூடு கட்டப்படலாம்.

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

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

எதிர்வினை நூலகம் ஏன் தேவை?

React.JS என்பது JS அல்லது HTML குறியீட்டை வசதியான வடிவத்தில் எழுதவும், அதன் நகல்களை உருவாக்கவும், காட்சிப்படுத்தவும் சாத்தியமான விருப்பங்களில் ஒன்றாகும். இங்குள்ள கூறுகள் ஒரு சிறப்பு கணினி மொழியில் எழுதப்பட்டுள்ளன – JSX, இதில் JavaScript நிரலாக்க மொழியின் கூறுகள் மற்றும் தரப்படுத்தப்பட்ட HTML மார்க்அப் மொழி ஆகியவை அடங்கும்.
வர்த்தக ரோபோக்களை எழுதும் போது நூலகத்தைப் பயன்படுத்தி, தொடக்க டம்மிகளுக்கான React.JS JSX இல் எழுதப்பட்ட குறியீடு மிகவும் குறிப்பிட்டது. இணைய உலாவி இந்த கணினி மொழியைப் புரிந்து கொள்ள வேண்டியதில்லை என்பதும் முக்கியம் – React.JS குறியீடு JS க்கு மாற்றப்படுகிறது, எந்த உலாவியும் சிக்கல்கள் இல்லாமல் உணரும். இதைச் செய்ய, நூலகத்தில் உருவாக்கப்படுவது சிறப்பு கம்பைலர்கள் மூலம் அனுப்பப்படுகிறது (இன்று மிகவும் பிரபலமான ஒன்று Babel js), இது அதிகம் அறியப்படாத நிரலாக்க மொழிகளில் உள்ள குறியீடுகளை ஜாவாஸ்கிரிப்ட் பிரதிநிதித்துவங்களாக மாற்றுகிறது.
வர்த்தக ரோபோக்களை எழுதும் போது நூலகத்தைப் பயன்படுத்தி, தொடக்க டம்மிகளுக்கான React.JS முதலில், பயன்பாட்டு முறை மிகவும் நியாயமற்றது என்று தோன்றலாம், ஆனால் சிறிது நேரத்திற்குப் பிறகு நீங்கள் அதைப் பழக்கப்படுத்திக் கொள்கிறீர்கள், மேலும் அந்த வழிமுறை ஏன் வடிவமைக்கப்பட்டுள்ளது என்பதை நீங்கள் புரிந்துகொள்கிறீர்கள். ஜாவாஸ்கிரிப்ட் நூலகம் பல வலுவான நன்மைகளைக் கொண்டுள்ளது:

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

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

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

A முதல் Z வரையிலான JS அடிப்படை பாடத்தை ரியாக்ட் செய்யவும்: https://youtu.be/GNrdg3PzpJQ

ஆரம்பநிலைக்கான அறிமுகம்: அடிப்படை கருத்துக்கள்

வணக்கம் உலகம்!

நூலகத்தின் முதல் பக்கத்தை அணுகும் போது, ​​பயனர் ஒரு சிறிய உதாரணமாக வரவேற்பு தலைப்பைக் காண்பார் – “ஹலோ வேர்ல்ட்!”.
வர்த்தக ரோபோக்களை எழுதும் போது நூலகத்தைப் பயன்படுத்தி, தொடக்க டம்மிகளுக்கான React.JS

JSX அமைப்பு மொழியின் அடிப்படைகள்

JSX என்பது ஒரு கணினி நிரலாக்க மொழியாகும், இது நன்கு அறியப்பட்ட ஜாவாஸ்கிரிப்ட்டின் நீட்டிப்பாகும். இது இரண்டு மொழிகளின் கலவையை உள்ளடக்கியது – JA நிரலாக்கம் மற்றும் தரப்படுத்தப்பட்ட HTML மார்க்அப் மொழி. டெவலப்பர்கள், பயனர் இடைமுகம் எப்படி இருக்க வேண்டும் என்பதைத் துல்லியமாகக் காட்ட, கருத்தைச் சரிசெய்ய இதைப் பயன்படுத்துகின்றனர். JSX நூலகத்தின் “பகுதிகளை” உருவாக்குகிறது.

JSX என்றால் என்ன?

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

கணினி மொழியில் வெளிப்பாடுகளின் உருவாக்கம்

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

விவரம் ரெண்டரிங்

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

கூறுகள் மற்றும் முட்டுகள்

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

கூறுகளின் வகைகள்: செயல்பாட்டு மற்றும் வகுப்பு

நூலகக் கூறுகளை ஒரு செயல்பாடாகக் குறிப்பிடுவது எளிதானது.
வர்த்தக ரோபோக்களை எழுதும் போது நூலகத்தைப் பயன்படுத்தி, தொடக்க டம்மிகளுக்கான React.JS கூறுகளை ES6 வகுப்பு வடிவத்திலும் குறிப்பிடலாம்.
வர்த்தக ரோபோக்களை எழுதும் போது நூலகத்தைப் பயன்படுத்தி, தொடக்க டம்மிகளுக்கான React.JS

சுவாரஸ்யமானது! ரியாக்ட் லைப்ரரி இந்த இரண்டு வகையான கூறுகளையும் ஒத்ததாக வரையறுக்கிறது.

முட்டுகள்

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

நிலை மற்றும் வாழ்க்கைச் சுழற்சி

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

  1. மாநிலத்தை நேரடியாக மாற்ற வேண்டாம், setState முறையைப் பயன்படுத்தவும். நீங்கள் மாநிலத்தை நேரடியாக மாற்றக்கூடிய ஒரே பகுதி கட்டமைப்பாளர் மட்டுமே என்பதை நினைவில் கொள்ளுங்கள்.
  2. மாநில புதுப்பிப்புகள் ஒத்திசைவாக இல்லாமல் இருக்கலாம்.
  3. தகவலின் ஓட்டம் ஒரு திசையைக் கொண்டுள்ளது. கூறு கட்டுமானத்தில், மாநிலம் மற்றொரு கூறுக்கு ஒதுக்கப்பட்டதா என்பது அவர்களுக்குத் தெரியாது. இந்த அல்லது அந்த சுயாதீன செயல்பாட்டு உறுப்பு எவ்வாறு உருவாக்கப்பட்டது என்பது முக்கியமல்ல – ஒரு செயல்பாட்டு அல்லது வகைப்பாடு கருவியைப் பயன்படுத்தி. இது “கீழ்நிலை” தரவு ஓட்டம் என்று அழைக்கப்படுகிறது. ஒரு நிலை எப்போதும் சில உறுப்புகளுக்கு வரையறுக்கப்படுகிறது, மேலும் இந்த மாநிலத்தின் கட்டமைப்பு சங்கங்கள் படிநிலை வரிசையில் “கீழே” அமைந்துள்ள பகுதிகளை மட்டுமே பாதிக்கும்.

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

நிகழ்வு பகுப்பாய்வு

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

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

உறுப்புகளின் நிபந்தனை ரெண்டரிங்

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

கூறுகளை மாற்றுதல்

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

பட்டியல்கள் மற்றும் விசைகள்

இந்த பிரிவில் பல கூறுகள் உள்ளன:

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

விசைகள்

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

படிவங்கள்

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

நிர்வகிக்கப்பட்ட பொருட்கள்

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

மாநிலத்தின் எழுச்சி

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

அரசின் எழுச்சியைக் கட்டுப்படுத்த வேண்டிய அவசியம் ஏன்?

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

கலவை எதிராக மரபுரிமை

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

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

இரண்டாவது அல்லது மூன்றாவது முறையாக கூறுகளுடன் பணிபுரிய ஒரு தோற்றமில்லாத செயல்பாட்டை நீங்கள் பயன்படுத்த வேண்டியிருந்தால், அதை ஒரு தனி JS தொகுதிக்கு இழுக்கவும். அதை ஒரு கூறுக்குள் நகர்த்தி, மேலும் விரிவாக்கம் இல்லாமல் உருவாக்கப்பட்ட செயல்பாட்டைப் பயன்படுத்தவும். எதிர்வினை அல்லது காட்சி அல்லது கோணம், எதை தேர்வு செய்ய வேண்டும்: https://youtu.be/Nm8GpLCAgwk

React.js கோட்பாடுகள்

ஜாவாஸ்கிரிப்ட் நூலகத்தின் முழு தத்துவமும் எதிர்வினை வழிகாட்டியில் மறைக்கப்பட்டுள்ளது. இது நீண்டது மற்றும் அவ்வளவு முக்கியத்துவம் வாய்ந்தது அல்ல என்று தோன்றுகிறது, இருப்பினும், பல பயனர்கள் படித்த பிறகு எல்லாம் சரியாகிவிட்டது என்று கூறுகின்றனர். ஆவணம் மிகவும் பழமையானது, ஆனால் இன்னும் அதிக மதிப்பும் பொருத்தமும் உள்ளது –
https://ru.reactjs.org/docs/thinking-in-react.html . ரியாக்ட் ஜேஎஸ் டுடோரியல் https://ru.reactjs.org/tutorial/tutorial.html

React.js நூலகத்தின் செயல்பாடு

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

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

நடைமுறை பயன்பாடு

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

ஜாவாஸ்கிரிப்ட்டில் வர்த்தக ரோபோக்களை எழுதும் போது ரியாக்டின் நடைமுறை பயன்பாடு

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

GitHub மற்றும் React.js

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

குறிப்பு! அனுமதியுடன் பொருத்தமான இணைப்பைப் பெற்ற பயனர்களுக்கு மட்டுமே கோப்புகளைத் திருத்துவதற்கும் பதிவிறக்குவதற்கும் அணுகல் உள்ளது.

ஆவணப்படுத்தல்

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

குறிப்பு! கையேடுகளைப் படிக்க மறக்காதீர்கள். குறைந்தபட்சம் பாருங்கள் – ஏற்கனவே புரிந்துகொள்ள முடியாததாகத் தோன்றிய பெரும்பாலானவை இடத்தில் விழும்.

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

info
Rate author
Add a comment