React.JS ආරම්භක ඩමි සඳහා, වෙළඳ රොබෝවරු ලිවීමේදී පුස්තකාලය භාවිතා කරයි

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

ආරම්භක dummies සඳහා React JS යනු කුමක්ද, එය කුමක්ද, නිබන්ධන, ස්ථාපනය, ලේඛනගත කිරීම – වෙළඳ රොබෝවරු ලිවීමේදී React JS පුස්තකාලය ස්ථාපනය කර භාවිතා කරන්නේ කෙසේද. බොහෝ විට පරිගණක විශේෂඥයින් සඳහා රැකියා දැන්වීම් වලදී, ඔබට JavaScript පුස්තකාලයේ කුසලතා ඇති බව පවසන අවශ්යතාවයක් සොයාගත හැකිය. ඔව්, ඔවුන් ප්‍රතික්‍රියා පිළිබඳ දැනුම බලාපොරොත්තු වන්නේ මෘදුකාංග සංවර්ධකයින්ගෙන් පමණක් නොව, වෙබ් අඩවියේ අභ්‍යන්තර සංවර්ධනයේ නියැලී සිටින ක්‍රමලේඛකයින්ගෙන් මිස බාහිර සැලසුම් වලින් නොවේ. මෙය කුමන ආකාරයේ පුස්තකාලයක්ද, එය රැකියාවේදී ලබා දෙන අවස්ථා මොනවාද සහ ආරම්භකයකු දැන හඳුනා ගැනීමට පටන් ගන්නේ කොතැනින්ද? අපි එය මෙම ලිපියෙන් සොයා බලමු.
React.JS ආරම්භක ඩමි සඳහා, වෙළඳ රොබෝවරු ලිවීමේදී පුස්තකාලය භාවිතා කරයි

Contents
  1. JavaScript පුස්තකාලය – ප්රතික්රියාව: එය කුමක්ද
  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. JavaScript හි වෙළඳ රොබෝවරු ලිවීමේදී ප්‍රතික්‍රියා වල ප්‍රායෝගික යෙදුම
  27. GitHub සහ React.js
  28. ලේඛනගත කිරීම

JavaScript පුස්තකාලය – ප්රතික්රියාව: එය කුමක්ද

React.JS යනු ජනප්‍රිය
ජාවාස්ක්‍රිප්ට් ක්‍රමලේඛන භාෂාවේ පුස්තකාලයකි, එය වෙබ් අඩවි සහ යෙදුම්වල බාහිර කවචය සංවර්ධනය කිරීමේ ක්‍රියාවලිය වැඩිදියුණු කිරීම සහ සරල කිරීම සඳහා සබැඳි සමාජ ජාලය ෆේස්බුක් විසින් පිහිටුවන ලදී – පරිශීලකයා අන්තර්ක්‍රියා කරන අතුරු මුහුණත. පුස්තකාලයේ ප්රධාන ලක්ෂණය වන්නේ සංරචක සහ රාජ්යයන් වේ. සංරචකයක් යනු නිර්මාණය කරන ලද පද්ධතියේ යම් කොටසක පෙනුම සඳහා වගකිව යුතු ඩිජිටල් කට්ටලයක කොටසකි.

සටහන! එවැනි සංරචක කොටස් කැදලි කළ හැක.

රාජ්‍යයක් යනු එහි නියෝජන විදැහුම්කරණය ඇතුළුව අතුරු මුහුණතක විස්තර පිළිබඳ සියලු දත්තවල එකතුවකි. උදාහරණ භාවිතා කරමින්, අපි වඩාත් විස්තරාත්මකව සහ පැහැදිලිව සොයා බලමු. පහත රූපයේ දැක්වෙන්නේ විශාල සංරචක කිහිපයක් – සබැඳි සමාජ ජාලයකට පළ කිරීම, සාමාන්‍ය තොරතුරු සහිත කොටස සහ ඡායාරූප පෙන්වීම. සෑම කොටසකටම කුඩා සංරචක ඇතුළත් වේ, ඒවා සංරචක වේ. උදාහරණයක් ලෙස, ප්‍රකාශනයක පෙළ, ඡායාරූප, තොරතුරු ප්‍රකාශයට පත් කරන පරිශීලකයාගේ නම යනාදිය අඩංගු වේ. රූප කොටසේ තනි පින්තූර ඇතුළත් වන අතර සාමාන්‍ය තොරතුරු කොටසේ කෙටි තොරතුරු අඩංගු වේ.
React.JS ආරම්භක ඩමි සඳහා, වෙළඳ රොබෝවරු ලිවීමේදී පුස්තකාලය භාවිතා කරයිමෙම සෑම සංරචකයකටම (සංරචක) තත්වයක් ඇත. එනම්, සාමාන්‍ය තොරතුරු සහිත කොටස විවිධ උපාංගවල වෙනස් ලෙස පෙනෙනු ඇත, “වැනි” මූලද්‍රව්‍යය එබූ විට වර්ණය වෙනස් වන අතර මුළු කැමති ගණනට වගකිව යුතු අංකය; ප්‍රකාශනය, අනෙක් අතට, පෙළ කෙටි කිරීමට හෝ සම්පූර්ණයෙන් සම්ප්‍රේෂණය කිරීමට හැකිය.

මේ අනුව, React.JS හි නම්‍යශීලී බව ප්‍රකාශ වේ – අතුරුමුහුණත සංරචකය එක් වරක් ලියා ඇති අතර ඉන් පසුව එය හැකි සියලු තත්වයන් ලබා දෙනු ලැබේ.

ප්‍රතික්‍රියා පුස්තකාලය අවශ්‍ය වන්නේ ඇයි?

React.JS යනු JS හෝ HTML කේතය පහසු ආකෘතියකින් ලිවීමට, එහි පිටපත් සෑදීමට සහ එය දෘශ්‍ය කිරීමට හැකි විකල්ප වලින් එකකි. මෙහි ඇති සංරචක විශේෂ පද්ධති භාෂාවකින් ලියා ඇත – JSX, JavaScript ක්‍රමලේඛන භාෂාවේ අංග සහ ප්‍රමිතිගත HTML සලකුණු භාෂාව ඇතුළත් වේ.
React.JS ආරම්භක ඩමි සඳහා, වෙළඳ රොබෝවරු ලිවීමේදී පුස්තකාලය භාවිතා කරයිJSX හි ලියා ඇති කේතය ඉතා නිශ්චිතය. වෙබ් බ්‍රව්සරයට මෙම පද්ධති භාෂාව තේරුම් ගැනීමට අවශ්‍ය නොවීම ද වැදගත් ය – React.JS කේතය JS වෙත මාරු කරනු ලැබේ, එය ඕනෑම බ්‍රව්සරයක් ගැටළු නොමැතිව වටහා ගනී. මෙය සිදු කිරීම සඳහා, පුස්තකාලයේ නිර්මාණය කර ඇති දේ විශේෂිත සම්පාදක හරහා යවනු ලැබේ (අද වඩාත් ජනප්‍රිය එකක් වන්නේ Babel js), එය අඩු ප්‍රසිද්ධ ක්‍රමලේඛන භාෂාවල කේත ජාවාස්ක්‍රිප්ට් නිරූපණයන් බවට පරිවර්තනය කරයි.
React.JS ආරම්භක ඩමි සඳහා, වෙළඳ රොබෝවරු ලිවීමේදී පුස්තකාලය භාවිතා කරයිභාවිතයේ ක්‍රමය අතිශයින්ම තාර්කික නොවන බව මුලදී පෙනෙන්නට ඇත, නමුත් ටික වේලාවකට පසු ඔබ එයට පුරුදු වී ඇති අතර යාන්ත්‍රණය එලෙස නිර්මාණය කර ඇත්තේ මන්දැයි ඔබට වැටහේ. JavaScript පුස්තකාලයට ප්‍රබල වාසි ගණනාවක් ඇත:

  • පද්ධති ක්‍රමලේඛන භාෂාව සුප්‍රසිද්ධ ජාවාස්ක්‍රිප්ට් වලට වඩා පහසුවෙන් හඳුනා ගත හැකි අතර, ඒ අනුව, කේතයට සහය දැක්වීමට සහ එහි ඇති දෝෂ ඉවත් කිරීමට කිහිප ගුණයකින් අඩු කාලයක් ගතවනු ඇත (නව කේත සහ වැඩසටහන් ලිවීමේ වේගය ඒ අනුව වැඩි වේ);
  • සංඝටක මූලද්‍රව්‍යවල පහසු සහ ප්‍රායෝගික පද්ධතියක් මෙහි ගොඩනගා ඇත – ලිවීමේ විවිධ අවස්ථා වලදී සහ විවිධ වැඩසටහන් වල භාවිතා වන කේතයේ පුනරාවර්තන කොටස් සහ සන්දර්භය අනුව වෙනස් වේ;
  • සෑම සංඝටක මූලද්‍රව්‍යයක්ම එහි තත්වයට පමණක් යටත් වේ , එබැවින් ප්‍රායෝගිකව එහි කාර්යයේ හදිසියේ දෝෂයක් හමු වුවහොත් කේතයේ අඩුපාඩු නිවැරදි කිරීම පහසුය; වැරදි අවස්ථා මතුපිටට පාවී යයි: නිසි ලෙස ක්‍රියා කරන මූලද්‍රව්‍යයක් මෙම ප්‍රකාරයේදී ස්ථායීව ක්‍රියා කරයි, ඇත්ත වශයෙන්ම, එයට අදාළව වැරදි තත්වය භාවිතා නොකරන්නේ නම්.

මේ අනුව, React.JS පුස්තකාලයට බොහෝ කාලයක් ඉතිරි කර ගත හැකි බව අපට නිගමනය කළ හැකිය, කේතය වඩාත් නිශ්චිතව සකස් කිරීම, නිවැරදි අනුපිළිවෙලෙහි අනුපිළිවෙල සංවිධානය කිරීම සහ නැවත විශාල කුට්ටි භාවිතා කිරීම. මෙම වාසි මඟින් පරිශීලක අතුරුමුහුණත් නිර්මාණය කිරීමේ ක්‍රියාවලියේ පිරිවැය අඩු කිරීමට මෙන්ම මෙම ක්‍රියාවලියේ කාලය වේගවත් කිරීමට හැකි වේ. JS සහ HTML ක්‍රමලේඛන භාෂාව භාවිතා කිරීමට කුසලතා තිබීම, JSX පද්ධතිය භාවිතා කිරීමට ඉගෙන ගැනීම පහසුය – එය ප්‍රගුණ කිරීමට දින කිහිපයක් පමණි.

සටහන! විශාල ව්යාපෘති සමඟ වැඩ කරන විට, ගතික පිටු විශාල සංඛ්යාවක් ලිවීමට අවශ්ය වන විට පුස්තකාලය භාවිතා කිරීම තාර්කික ය. කුඩා ව්යාපාර වෙබ් අඩවියක් එවැනි සංකීර්ණ අවශ්ය නොවේ.

A සිට Z දක්වා JS මූලික පාඨමාලාවට ප්‍රතිචාර දක්වන්න: https://youtu.be/GNrdg3PzpJQ

ආරම්භකයින් සඳහා දැන හඳුනා ගැනීම: මූලික සංකල්ප

හෙලෝ වර්ල්ඩ්!

පුස්තකාලයේ පළමු පිටුවට පිවිසෙන විට, පරිශීලකයා කුඩා උදාහරණයක් ලෙස පිළිගැනීමේ ශීර්ෂයක් දකිනු ඇත – “Hello world!”.
React.JS ආරම්භක ඩමි සඳහා, වෙළඳ රොබෝවරු ලිවීමේදී පුස්තකාලය භාවිතා කරයි

JSX පද්ධති භාෂාවේ මූලික කරුණු

JSX යනු පද්ධති ක්‍රමලේඛන භාෂාවකි, එය සුප්‍රසිද්ධ JavaScript වල දිගුවකි. එයට භාෂා දෙකක එකතුවක් ඇතුළත් වේ – JA ක්‍රමලේඛනය සහ ප්‍රමිතිගත HTML සලකුණු භාෂාව. පරිශීලක අතුරුමුහුණත කෙබඳු විය යුතුද යන්න හරියටම ප්‍රතික්‍රියා දැක්වීමට සංවර්ධකයින් එය භාවිතා කරයි. JSX පුස්තකාලයේ “කොටස්” නිර්මාණය කරයි.

JSX යනු කුමක්ද?

ප්‍රතික්‍රියා පුස්තකාලය විදැහුම්කරණයේ සාරය පරිශීලක අතුරුමුහුණතේ තර්කයට සෘජුවම සම්බන්ධ වන බවට තර්කයට අනුගත වේ: සිදුවීම් සැකසෙන ආකාරය, යම් කාල පරිච්ඡේදයක තත්වය වෙනස් වන ආකාරය සහ ඉදිරිපත් කිරීම සඳහා තොරතුරු සකස් කරන්නේ කෙසේද. JS පුස්තකාලය එහි පද්ධති භාෂාවෙන් තොරව භාවිතා කළ හැක, නමුත් JavaScript කේතයෙන් ජනනය කරන ලද පරිශීලක අතුරුමුහුණතක් සමඟ වැඩ කිරීමේදී එහි පැහැදිලි බව සහ සංයුක්තතාවය හේතුවෙන් සංවර්ධකයින් විශාල සංඛ්‍යාවක් එය වටිනා බව සොයා ගනී. ඊට අමතරව, දිගුව අවලංගු මොහොත සහ දෝෂ දැනුම්දීම් උත්පාදනය කිරීම ප්‍රතික්‍රියා සඳහා පහසු කරයි.

පද්ධති භාෂාවේ ප්‍රකාශන සෑදීම

JSX ඔබට ක්‍රියාවලියක දී curly braces තුළ ඕනෑම හොඳින් ලියා ඇති JavaScript ප්‍රකාශන භාවිතා කිරීමට ඉඩ සලසයි.
React.JS ආරම්භක ඩමි සඳහා, වෙළඳ රොබෝවරු ලිවීමේදී පුස්තකාලය භාවිතා කරයි
JSX යනු ප්‍රකාශනයකි මූලාශ්‍ර කේතය බයිට්කෝඩ් කළ පසු, ඕනෑම JSX ප්‍රකාශනයක් JavaScript කාණ්ඩය ඉලක්ක කරන සම්මත JS ශ්‍රිත ඇමතුමක් බවට පත් වේ. නිල ක්‍රමලේඛන භාෂාවේ පද්ධති දිගුව if manual එක තුළ සහ කාල පරිච්ඡේද සඳහා භාවිතා කළ හැකි බව මෙයින් තේරුම් ගත හැකිය.
React.JS ආරම්භක ඩමි සඳහා, වෙළඳ රොබෝවරු ලිවීමේදී පුස්තකාලය භාවිතා කරයි
JSX යනු Objects දිගුව මඟින් නිරූපණය වන වස්තූන් ප්‍රතික්‍රියා මූලද්‍රව්‍ය ලෙස හැඳින්වේ. සංවර්ධකයාට සංදර්ශකය මත දැකීමට අවශ්‍ය ප්‍රතිඵලය ඔවුන් පැහැදිලි කරයි. පුස්තකාලය මෙම වස්තූන් හඳුනාගෙන ලේඛන වස්තු ආකෘතිය උත්පාදනය කිරීමේ සහ නඩත්තු කිරීමේ ක්‍රියාවලියේදී ඒවා භාවිතා කරයි.
React.JS ආරම්භක ඩමි සඳහා, වෙළඳ රොබෝවරු ලිවීමේදී පුස්තකාලය භාවිතා කරයි

විස්තර විදැහුම්කරණය

විස්තර යනු ප්‍රතික්‍රියා වැඩසටහන් සෑදෙන බොහෝ කුඩා ගොඩනැඟිලි කොටස් වේ.
React.JS ආරම්භක ඩමි සඳහා, වෙළඳ රොබෝවරු ලිවීමේදී පුස්තකාලය භාවිතා කරයිවිස්තර යනු සංවර්ධකයාට මොනිටරයේ අවසානයේ දැකීමට අවශ්‍ය පින්තූරයයි. Document Object Model මූලද්‍රව්‍ය හා සසඳන විට, පුස්තකාල මූලද්‍රව්‍ය සරල වන අතර සම්පත් විශාල ප්‍රමාණයක් ගන්නේ නැත. මූලද්රව්ය යනු සංරචකවල සංඝටක වේ.

සංරචක සහ මුක්කු

සංරචක මඟින් UI ස්වාධීන කොටස් වලට බෙදීමට හැකි වන අතර ඒවා වෙන වෙනම වැඩ කිරීමට පහසු වේ. ඒවා ඒකාබද්ධ කර කිහිප වතාවක් භාවිතා කළ හැකිය. බොහෝ දුරට, සංරචකවල ක්‍රියාකාරීත්වය JavaScript ක්‍රමලේඛන භාෂාවේ ක්‍රියාකාරීත්වයට සමාන වේ. ඔවුන් ප්‍රොප්ස් ලෙස හඳුන්වන ආදාන තොරතුරු ලබාගෙන, සංවර්ධකයාට මොනිටරයේ දැකීමට අවශ්‍ය සංවර්ධන ආකෘතිය පෙන්නුම් කරන ප්‍රතික්‍රියා මූලද්‍රව්‍ය ලබා දෙයි.

සංරචක ප්රභේද: ක්රියාකාරී සහ පන්තිය

පුස්තකාල සංරචකයක් ශ්‍රිතයක් ලෙස හැඳින්වීම පහසුම වේ.
React.JS ආරම්භක ඩමි සඳහා, වෙළඳ රොබෝවරු ලිවීමේදී පුස්තකාලය භාවිතා කරයිසංරචක ES6 පන්තියේ ආකෘතියෙන් ද නිරූපණය කළ හැක.
React.JS ආරම්භක ඩමි සඳහා, වෙළඳ රොබෝවරු ලිවීමේදී පුස්තකාලය භාවිතා කරයි

රසවත්! ප්‍රතික්‍රියා පුස්තකාලය මෙම කොටස් දෙක සමාන ලෙස අර්ථ දක්වයි.

මුක්කු

මුක්කු යනු කියවීමට පමණක් ඇති වෙනස් කළ නොහැකි වස්තූන් ය. එමනිසා, සංරචකයක් කුමන වර්ගයට අයත් වුවද එහි මුක්කුවලට කිසිවක් නොලිය යුතුය.

රාජ්ය සහ ජීවන චක්රය

පළමුව, වැඩ කිරීමේදී තත්වය නිසි ලෙස යෙදිය යුතු ආකාරය සොයා බලමු. සංරචක තත්ත්වය ගැන දැන ගැනීමට වැදගත් කරුණු තුනක් තිබේ:

  1. ප්‍රාන්තය කෙලින්ම වෙනස් නොකරන්න, setState ක්‍රමය භාවිතා කරන්න. ඔබට රාජ්‍යය කෙලින්ම වෙනස් කළ හැකි එකම ප්‍රදේශය ඉදිකිරීම්කරු බව මතක තබා ගන්න.
  2. රාජ්ය යාවත්කාලීන සමමුහුර්ත නොවිය හැක.
  3. තොරතුරු ගලායාමට ඇත්තේ එක් දිශාවකි. සංරචක ගොඩනැගීමේදී, රාජ්‍යය වෙනත් සංරචකයකට පවරා ඇත්දැයි ඔවුන් කිසිවෙක් නොදනිති. මෙම හෝ එම ස්වාධීන ක්රියාකාරී මූලද්රව්යය සෑදූ ආකාරය ප්රශ්නයක් නොවේ – ක්රියාකාරී හෝ වර්ගීකරණ මෙවලමක් භාවිතා කිරීම. මෙය “පහළට” දත්ත ප්රවාහය ලෙස හැඳින්වේ. කිසියම් මූලද්‍රව්‍යයක් සඳහා ප්‍රාන්තයක් සැමවිටම අර්ථ දක්වා ඇති අතර, මෙම ප්‍රාන්තයේ ව්‍යුහාත්මක සංගම්වලට බලපෑම් කළ හැක්කේ ධූරාවලි අනුපිළිවෙලෙහි “පහළ” පිහිටා ඇති කොටස් වලට පමණි.

සාමාන්යයෙන්, රාජ්යය “දේශීය”, “අභ්යන්තර” හෝ සැඟවුණු ලෙස හැඳින්වේ. එය ක්‍රියාකාරී මූලද්‍රව්‍යයට පමණක් දෘශ්‍යමාන වන අතර ප්‍රතික්‍රියා වල අනෙකුත් කොටස් වලට නොපෙනේ. පුස්තකාල වැඩසටහන් වලදී, ස්වාධීන ක්‍රියාකාරී මූලද්‍රව්‍යයක් යම් තත්වයක් සමඟ තිබේද නැද්ද යන්න මෙම කොටසෙහි අභ්‍යන්තර වර්ධනයකි, එය කාලයත් සමඟ වෙනස් විය හැකිය. කාර්යයේදී ඔබට ප්‍රාන්තය සමඟ සහ නැතිව සංරචක ඒකාබද්ධ කළ හැකි බව ද සිත්ගන්නා කරුණකි.

සිදුවීම් විශ්ලේෂණය

ප්‍රතික්‍රියා සංරචකවල සිදුවීම් විග්‍රහ කිරීමේ ක්‍රියාවලිය ලේඛන වස්තු ආකෘති මූලද්‍රව්‍යවල සිදුවීම් හැසිරවීමට සමාන වේ. කෙසේ වෙතත්, ඒවා එකිනෙකින් වෙන්කර හඳුනාගත හැකි විශේෂාංග කිහිපයක් තිබේ:

  1. JavaScript පුස්තකාලයේ සිදුවීම් සම්මත එකට වඩා වෙනස් ශෛලියකින් නම් කර ඇත.
  2. System Extended Programming Language භාවිතා කරමින්, සංවර්ධකයා තන්තුවක් වෙනුවට සිද්ධි හසුරුවන්නෙකු ලෙස උපසිරැසියක් සම්මත කරයි.

මූලද්රව්යවල කොන්දේසිගත විදැහුම්කරණය

ජාවාස්ක්‍රිප්ට් පුස්තකාලය මඟින් මූලද්‍රව්‍ය ස්වාධීන සංරචක බවට වර්ධනය කිරීමේ තර්කනය බිඳ දැමීමට හැකි වේ. මේ මොහොතේ ඔවුන්ට ලබා දී ඇති තත්වය මත පදනම්ව ඒවා සාමාන්‍ය ප්‍රදර්ශනය සඳහා හෝ සැඟවිය හැක. මූලද්‍රව්‍යවල කොන්දේසිගත විදැහුම්කරණය JavaScript ක්‍රමලේඛන භාෂාව මත පදනම් වූ කොන්දේසි සහිත ප්‍රකාශන මෙන් එකම මූලධර්මය මත ක්‍රියා කරයි. සමහර විට එය සිදුවන්නේ පුස්තකාලයට සමහර අංග සැඟවීමට හෝ විදැහුම්කරණයට රාජ්‍යය බලපාන ආකාරය පිළිබඳ පැහැදිලි කිරීමක් අවශ්‍ය වේ. මෙහිදී කොන්දේසි සහිත JS උපකාරකයක් හෝ if ට සමාන ප්‍රකාශන භාවිතා කිරීම වඩාත් තාර්කික වේ.
React.JS ආරම්භක ඩමි සඳහා, වෙළඳ රොබෝවරු ලිවීමේදී පුස්තකාලය භාවිතා කරයි
React.JS ආරම්භක ඩමි සඳහා, වෙළඳ රොබෝවරු ලිවීමේදී පුස්තකාලය භාවිතා කරයි

සංරචක වෙනස් කිරීම

ප්‍රතික්‍රියා පුස්තකාල මූලද්‍රව්‍ය විචල්‍යවලට එක් කළ හැක. සංරචකයේ යම් කොටසක් ඇද ගත යුතුද යන්න යම් කොන්දේසියකින් පෙන්නුම් කරන විට මෙය ප්‍රායෝගික විසඳුමකි, නැතහොත් එය අර්ථවත් නොවේ, ඉතිරි කොටස නොවෙනස්ව පවතී.

ලැයිස්තු සහ යතුරු

මෙම කොටසට සංරචක කිහිපයක් ඇතුළත් වේ:

  1. බහු මූලද්රව්ය ඇඳීම . පරිශීලකයාට මූලද්‍රව්‍ය කට්ටලයක් සාදා එය Curly braces භාවිතයෙන් පද්ධති ක්‍රමලේඛන භාෂාවට ඇතුළත් කළ හැක.
  2. මූලද්රව්යවල මූලික ලැයිස්තුව . බොහෝ විට, පරිශීලකයන් සහ සංවර්ධකයින් සංරචක කොටසක් තුළ සෘජුවම ලැයිස්තු සකස් කරයි.

යතුරු

ප්‍රතික්‍රියා ජාවාස්ක්‍රිප්ට් පුස්තකාලයේ යතුරක් සංරචක ලැයිස්තුවක් ජනනය කිරීමේදී ඇතුළත් කළ යුතු විශේෂිත මෙවලමක් දක්වයි. සකසන ලද, එකතු කරන ලද හෝ ඉවත් කරන ලද අයිතම හඳුනා ගැනීමට යතුරු JavaScript පුස්තකාලයට උපකාර කරයි. ප්‍රතික්‍රියා මඟින් නිශ්චිත කාලයක් ගත වූ පසු ව්‍යුහාත්මක දත්තවල සංරචක සහසම්බන්ධ කළ හැකි වන පරිදි ඒවා සලකුණු කිරීම වැදගත් වේ.
React.JS ආරම්භක ඩමි සඳහා, වෙළඳ රොබෝවරු ලිවීමේදී පුස්තකාලය භාවිතා කරයි

ආකෘති පත්ර

JS පුස්තකාලයේ, ප්‍රමිතිගත සලකුණු භාෂා මූලද්‍රව්‍ය ලේඛන වස්තු ආකෘතියේ සංරචක වලට වඩා ටිකක් වෙනස් ලෙස ක්‍රියා කරයි, මන්ද ආකෘති මූලද්‍රව්‍ය මුලින් සැඟවුණු තත්වයක් ඇති බැවිනි.

කළමනාකරණය කළ අයිතම

ප්‍රමිතිගත සලකුණු භාෂාවක, ආදානය , තෝරා ගැනීම , textarea වැනි ආකෘති තමන්ගේම තත්ත්වය පවත්වා ගැනීමට සහ සංවර්ධකයා නව තොරතුරු ඇතුළත් කරන විට එය යාවත්කාලීන කිරීමට නැඹුරු වේ. React.js තත්වය සැමවිටම කළමනාකරණය කරන ලද රචනා මූලද්‍රව්‍යයක ආදාන ක්ෂේත්‍රවල අගය නිර්වචනය කරයි. පරිශීලකයා මුලින් ලබා දුන් කේතයට වඩා ටිකක් වැඩිපුර ලිවිය යුතු බව මෙයින් ඇඟවුණද, දැන් මෙම අගය පරිශීලක අතුරුමුහුණතේ අනෙකුත් කොටස් වෙත යැවීමට හැකිය.

රාජ්යයේ නැගීම

රාජ්ය එසවීම යනු සෑම සංවර්ධකයෙකුම දැනුවත් විය යුතු අතර වැඩ කිරීමේ ක්රියාවලියේදී අයදුම් කිරීමට හැකි වන පරිදි සම්මත ආකෘතියකි. එය භාවිතා කිරීමෙන් සංකීර්ණ සහ සාමාන්‍යයෙන් නිෂ්ඵල රාජ්‍ය කළමනාකරණ රටාවන් ඉවත් වනු ඇත.

රාජ්‍යයේ නැගීම පාලනය කිරීම එතරම් අවශ්‍ය වන්නේ ඇයි?

සියලුම අංග රාජ්‍යයට සහභාගී විය හැකි පරිදි අවශ්‍ය වන එම කොටස් සඳහා රාජ්‍යය අතීත සංරචක මට්ටමට නැංවීම අවශ්‍ය වේ. ස්ථාවර මට්ටමේ රාජ්යයක් එය මත රඳා පවතින සියලුම සංරචක අතර එය බෙදා හැරීම පහසු කරනු ඇත.

සංයුතිය එදිරිව උරුමය

React.js හි ප්‍රබල සංයුති ආකෘතියක් ඇතුළත් වේ, එබැවින් මූලද්‍රව්‍ය අතර කලින් ලියා ඇති කේතය නැවත භාවිතා කිරීම සඳහා උරුමය වෙනුවට කොටස් වලින් සමස්තයක් ගොඩනැගීමේ ක්‍රියාවලිය භාවිතා කිරීම රෙකමදාරු කරනු ලැබේ. මේ අනුව, මුක්කු සහ සංරචක කොටස් වලින් තනි සම්පූර්ණ සංයුතියක් නිර්මාණය කිරීමේ හැකියාව, සංවර්ධකයාට නිශ්චිත සහ ආරක්ෂිත ආකාරයකින් මූලද්රව්යයේ කවචය සහ හැසිරීම නිර්මාණය කිරීමට අවශ්ය නම්යශීලීභාවය ලබා දෙයි.

මතක්! සංඝටක කොටස්වලට පුස්තකාල හෝ කාර්යයන් සෑදෙන මූලික කොටස් ඇතුළුව සම්බන්ධයක් නැති මුක්කු ගත හැක.

ඔබට දෙවන හෝ තුන්වන වරට සංරචක සමඟ වැඩ කිරීම සඳහා පෙනුම-නිදහස් ශ්‍රිතයක් භාවිතා කිරීමට අවශ්‍ය නම්, එය වෙනම JS මොඩියුලයකට අදින්න. එය සංරචකයක් වෙත ගෙන ගොස් තවදුරටත් ප්‍රසාරණයකින් තොරව ජනනය කරන ලද ශ්‍රිතය භාවිතා කරන්න. ප්‍රතික්‍රියා හෝ Vue හෝ කෝණික, තෝරා ගත යුතු දේ: https://youtu.be/Nm8GpLCAgwk

React.js මූලධර්ම

JavaScript පුස්තකාලයේ සම්පූර්ණ දර්ශනය ප්‍රතික්‍රියා මාර්ගෝපදේශය තුළ සඟවා ඇත. මෙය දිගු වන අතර එතරම් වැදගත් නොවන බව පෙනේ, කෙසේ වෙතත්, බොහෝ පරිශීලකයින් කියා සිටින්නේ කියවීමෙන් පසු සියල්ල නිසි පරිදි සිදු වූ බවයි. ප්‍රලේඛනය තරමක් පැරණි නමුත් තවමත් විශාල වටිනාකමක් සහ අදාළත්වයක් ඇත –
https://ru.reactjs.org/docs/thinking-in-react.html . ප්‍රතික්‍රියා js නිබන්ධනය https://ru.reactjs.org/tutorial/tutorial.html

React.js පුස්තකාලයේ ක්‍රියාකාරීත්වය

ජාවාස්ක්‍රිප්ට් පුස්තකාලය භාවිතා කරමින්, පරිශීලකයාට ඔහුගේ සියලු අවධානය සෘජුවම UI සංවර්ධන ක්‍රියාවලිය සහ යෙදුමේ සංරචක වෙත යොමු කිරීමට අවස්ථාව ලැබේ, අවම වශයෙන් ලිඛිත කේතය සෑදීමෙන් සහ සිදුවිය හැකි අඩුපාඩු වලින් අවධානය වෙනතකට යොමු වේ. පුස්තකාලය මඟින් ඔබට වැඩසටහන් වේගයෙන් සංවර්ධනය කිරීමට ඉඩ සලසයි, සමස්තයක් ලෙස සමස්ත ව්‍යාපෘතියේ සංරචක සහ ක්‍රියාවලිය වින්‍යාස කිරීම සහ සංස්කරණය කිරීම පහසු කරයි. මේ අනුව, React.js ගෝලීය ජාලයේ සන්නිවේදනය සඳහා වගකිව යුතු අංග, UI, වැඩසටහන් රාජ්ය පාලනය සහ අනෙකුත් සංකීර්ණ ගැටළු විසඳීමට ඇති හැකියාව අඩංගු වේ. පුස්තකාලයට පහත ක්‍රියාකාරී විශේෂාංග ද ඇත:

  1. ප්රායෝගිකත්වය . React.js කුඩා කළ ආකෘතියෙන් ලබා ගත හැකිය. මෙම සංයුක්ත පැකේජය පැහැදිලිව වින්‍යාස කිරීම අවශ්‍ය නොවේ. එහි දැනටමත් කේත බෙදීමේ විශේෂාංගයක් ඇතුළත් වන අතර එය වෙබ් අඩවියේ බ්‍රවුසර අනුවාදය විවෘත කිරීමට ගතවන කාලය අඩු කරයි, මන්ද මෙම විකල්පය සංරචක එකවර විදැහුම්කරණයෙන් වළක්වයි.
  2. පොම්ප කරන ලද පරිසර පද්ධතිය සහ අනුකූලතාවය . පුස්තකාලයේ මෙවලම් විශාල ප්‍රමාණයක් ඇත, වෙනත් වෙබ් අඩවි වල සහාය ඇතිව, ඕනෑම අරමුණක් සඳහා නව සංකීර්ණ වැඩසටහන් සංවර්ධනය කිරීමට පරිශීලකයාට ඉඩ සලසයි.
  3. සම්පූර්ණ ක්රියාකාරිත්වය . ජාවාස්ක්‍රිප්ට් පුස්තකාලයේ ඇති ප්‍රධාන වාසිය නම් වේදිකාවේ සියලුම නව අනුවාද පැරණි ඒවාගේ අවශ්‍යතා සපුරාලීමයි, එබැවින් ඔබට පැරණි සහ යාවත්කාලීන කළ අනුවාදය දෙකම භාවිතා කළ හැකිය, ඒවා සියල්ලම සහය දක්වන අතර අද දක්වාම අදාළ වේ. කලින් නිකුත් කළ අනුවාද නවතම යාවත්කාලීන කිරීම් වලින් පසු යල්පැන යන්නේ නැත.

ප්රායෝගික භාවිතය

පුස්තකාලයේ ප්‍රධාන පිටුවේ, පරිශීලකයින් සඳහා වන උපදෙස් වල, ප්‍රායෝගිකව ප්‍රතික්‍රියා භාවිතා කිරීම පිළිබඳ නිදර්ශන උදාහරණ කිහිපයක් තිබේ. ඔබට ඒවා අතින් නිවැරදි කර ඒවා ක්‍රියාත්මක කිරීමට උත්සාහ කළ හැකිය. ඔබ නව පරිශීලකයෙකු වුවද, පුස්තකාලයේ සාරය සහ තර්කනය නොතේරෙන විට, කේතය ඔබේ අභිමතය පරිදි සකස් කර ප්රතිඵලය බලන්න.

JavaScript හි වෙළඳ රොබෝවරු ලිවීමේදී ප්‍රතික්‍රියා වල ප්‍රායෝගික යෙදුම

සංවර්ධකයෙකු JS වැඩසටහන් නොකරන බව වටහා ගැනීම වැදගත්ය, නමුත් scripts (scripts) ලියනවා. එබැවින්, පුස්තකාලය භාවිතා කරමින්, සංවර්ධකයෙකුට වෙළඳ අරමුණු සඳහා භාවිතා කරන පසුකාලීන වෙළඳ රොබෝවක් සඳහා කේතය ලිවිය හැකි අතර, මෙම වේදිකාව මත පදනම්ව එහි පෙනුම සැලසුම් කිරීම දිගටම කරගෙන යා හැක. ඇත්ත වශයෙන්ම, වෙළඳාම සඳහා වෙළඳ රොබෝවක් ද යෙදුමකි, එයින් විශාල සංඛ්යාවක් React.js භාවිතයෙන් සංවර්ධනය වෙමින් පවතී. කෙසේ වෙතත්, මේ සඳහා සුදුසු මෙවලම් සපයන වෙනත් අඩවි වල සමහර කාර්යයන් සහ බොට් අභ්‍යන්තර කොටස තවමත් සිදු කිරීමට සිදුවනු ඇත.

GitHub සහ React.js

GitHub යනු ව්‍යාපෘතිවල සියලුම අනුවාද සඳහා සත්කාරකත්වය සපයන වේදිකාවකි. පරිශීලකයා සත්කාරකත්වය සම්බන්ධ කරයි, නිල GitHub වෙබ් අඩවියේ ලියාපදිංචි කිරීමේ ක්‍රියා පටිපාටිය හරහා ගොස්, පසුව ඔහු Git වෙතින් සියලුම ගොනු මාරු කරන මාර්ගගත ගබඩාවක් නිර්මාණය කරයි.
Git යනු වර්තමානයේ වඩාත්ම ජනප්‍රිය සහ අදාළ ව්‍යාපෘති අනුවාද පාලන සේවාව වන අතර GitHub යනු දුරස්ථ කේත ගබඩාවකි.
React.JS ආරම්භක ඩමි සඳහා, වෙළඳ රොබෝවරු ලිවීමේදී පුස්තකාලය භාවිතා කරයි

යොමුව! අවසරය ඇතිව සුදුසු සබැඳියක් ලබා ඇති පරිශීලකයින්ට පමණක් ගොනු සංස්කරණය කිරීමට සහ බාගත කිරීමට ප්‍රවේශය ඇත.

ලේඛනගත කිරීම

JavaScript පුස්තකාලය සම්බන්ධ සියලුම නිබන්ධන සහ යාවත්කාලීන ද්‍රව්‍ය නවතම යාවත්කාලීනය සමඟ යාවත්කාලීන වේ. සංවර්ධකයින් පුස්තකාලයේ වෙනම පිටුවක පළ කර ඇති ලේඛනවල පැරණි අනුවාදයන් සාමාන්‍ය කියවීම සඳහා සම්පාදනය කර පළ කරයි. එබැවින්, ආරම්භකයින්ට අඩවි කළමනාකරණයේ කුසලතා ප්‍රගුණ කිරීම පහසු වනු ඇත: පැරණි සහ නව ද්‍රව්‍ය දෙකම – සියල්ල මෙහි ඇත, ප්‍රවේශය සෑම කෙනෙකුටම නොමිලේ.
React.JS ආරම්භක ඩමි සඳහා, වෙළඳ රොබෝවරු ලිවීමේදී පුස්තකාලය භාවිතා කරයි

සටහන! අත්පොත් කියවීමට අමතක නොකරන්න. අවම වශයෙන් බලන්න – දැනටමත් තේරුම්ගත නොහැකි යැයි පෙනෙන බොහෝ දේ නිසි තැනට වැටෙනු ඇත.

ප්‍රතික්‍රියා පුස්තකාලය අද ජනප්‍රිය හා අදාළ වේදිකාවකි. එහි බහුකාර්යතාව සංවර්ධකයින්ට වඩා හොඳ තත්ත්වයේ සහ අඩු කාලයක් තුළ ව්යාපෘති කිරීමට ඉඩ සලසයි. මීට අමතරව, වේදිකාව දැන ගැනීම සහ එය භාවිතා කිරීමට කුසලතා තිබීම ශ්රම වෙළඳපොලේ වැඩි ඉල්ලුමක් ඇති විශේෂඥයෙකු බවට පත් කරයි.

info
Rate author
Add a comment