সমললৈ যাওক

ৰিয়েক্ট (ছফ্টৱেৰ)

অসমীয়া ৱিকিপিডিয়াৰ পৰা
ৰিয়েক্ট
React
মূল উদ্ভাৱক জৰ্ডন ৱক
বিকাশক মেটা আৰু সমাজ
প্ৰথম মুক্তি ২৯ মে' ২০১৩; ১৩ বছৰ আগত (2013-05-29)[1][2]
স্থিৰ মুক্তি 19.2.8[3] Edit this on Wikidata / ২১ জুলাই ২০২৬; ২৫ দিন আগত (21 July 2026)
প্ৰিভিউ মুক্তি 19.0.0-rc.1 / ১৪ নৱেম্বৰ ২০২৪; ২০ মাহ আগত (2024-11-14)[4]
লিখা হৈছে জাভাস্ক্ৰিপ্ট
প্লেটফৰ্ম ৱেব প্লেটফৰ্ম
প্ৰকাৰ জাভাস্ক্ৰিপ্ট লাইব্ৰেৰী
অনুজ্ঞাপত্ৰ MIT লাইচেন্স

ৰিয়েক্ট (যাক React.js বা ReactJS বুলিও জনা যায়) হৈছে বিনামূলীয়া আৰু মুক্ত উৎসৰ ফ্ৰণ্ট-এণ্ড জাভাস্ক্ৰিপ্ট লাইব্ৰেৰী[5][6] যাৰ লক্ষ্য হৈছে উপাদান-ভিত্তিক ব্যৱহাৰকাৰী আন্তঃপৃষ্ঠ (ইউজাৰ ইণ্টাৰফে’চ) তৈয়াৰ কৰাটো নিৰৱচ্ছিন্ন কৰি তোলা।[5] ইয়াৰ পৰিচালনা মেটা (পূৰ্বৰ ফে’চবুক)ৰ লগতে সুকীয়া বিকাশকৰ্তা আৰু কোম্পানীবোৰৰ এটা সমাজে কৰে।[7][8][9]

নেক্‌ষ্ট.জেএছ আৰু ৰিমিক্সৰ দৰে ফ্ৰে’মৱৰ্কৰ সৈতে একক-পৃষ্ঠাৰ, ম’বাইল বা ছাৰ্ভাৰ-ৰেণ্ডাৰ্ড এপ্লিকেশ্যন বিকশিত কৰিবলৈ ৰিয়েক্ট ব্যৱহাৰ কৰিব পাৰি। যিহেতু ৰিয়েক্টৰ কাম কেৱল ব্যৱহাৰকাৰী আন্তঃপৃষ্ঠ আৰু ডিঅ’এম-ত উপাদান ৰেণ্ডাৰ কৰা, ৰিয়েক্ট এপ্লিকেশ্যনবোৰ প্ৰায়ে ৰাউটিং আৰু অন্যান্য ক্লায়েণ্ট-ছাইড কাৰ্যক্ষমতাৰ বাবে লাইব্ৰেৰীৰ ওপৰত নিৰ্ভৰশীল।[10] ৰিয়েক্টৰ এটা মূল সুবিধা হ’ল ই কেৱল পৃষ্ঠাখনৰ সেই অংশবোৰ পুনৰ ৰেণ্ডাৰ কৰে যি সলনি হৈছে, গতিকে সলনি নোহোৱা ডিঅ’এম উপাদানবোৰৰ অপ্ৰয়োজনীয় ৰি-ৰেণ্ডাৰিং এৰাই চলিব পাৰি।

উল্লেখযোগ্য সুবিধাবোৰ

[সম্পাদনা কৰক]

ঘোষণামূলক

[সম্পাদনা কৰক]

[11]ৰিয়েক্টে ঘোষণামূলক প্ৰ’গ্ৰামিং আৰ্হি মানি চলে।[12]:76 বিকাশকৰ্তাসকলে এটা এপ্লিকেশ্যনৰ প্ৰতিটো অৱস্থা (ষ্টে’ট)ৰ বাবে দৃশ্য (ভিউ) সাজে আৰু তথ্য সলনি হ’লে ৰিয়েক্টে উপাদানবোৰ উন্নীত কৰি ৰেণ্ডাৰ কৰে। ই আদেশমূলক প্ৰ’গ্ৰামিঙৰ বিপৰীত।[13]

উপাদান (কম্পনেণ্ট) বোলা সত্তাবোৰৰ দ্বাৰা ৰিয়েক্টৰ ক’ড গঠিত হয়।[12]:10-12 এই উপাদানবোৰ গোটভিত্তিক (মডিউলাৰ) আৰু পুনৰ ব্যৱহাৰ কৰিব পাৰি।[12]:70 ৰিয়াক্ট এপ্লিকেশ্যনবোৰত সাধাৰণতে উপাদানবোৰৰ কেইবাটাও তৰপ থাকে। উপাদানবোৰ ৰিয়েক্ট ডিঅ’এম লাইব্ৰেৰী ব্যৱহাৰ কৰি ডিঅ’এম-ৰ এটা মূল উপাদানলৈ ৰেণ্ডাৰ কৰা হয়। এটা উপাদান ৰেণ্ডাৰ কৰোঁতে উপাদানবোৰৰ মাজত মানবোৰ বৈশিষ্ট্য (প্ৰপাৰ্টীজ বা চমুকৈ প্ৰপ্স)ৰ জৰিয়তে পঠিওৱা হয়। এটা উপাদানৰ ভিতৰুৱা মানবোৰক ইয়াৰ অৱস্থা (ষ্টে’ট) বোলা হয়।[14]

ৰিয়েক্টত উপাদান ঘোষণা কৰাৰ দুটা প্ৰাথমিক পদ্ধতি হ’ল ফাংশ্যন উপাদান আৰু ক্লাছ উপাদান।[12]:118[15]:10

ফাংশ্যন উপাদান

[সম্পাদনা কৰক]

ফাংশ্যন উপাদানবোৰ এটা ফাংশনৰ সৈতে ঘোষণা কৰা হয় (জাভাস্ক্ৰিপ্ট ফাংশন ছিণ্টেক্স বা এটা এৰ’ ফাংশ্যন এক্সপ্ৰেশ্যন ব্যৱহাৰ কৰি) যি এটাই "props" আৰ্গ্যুমেণ্ট গ্ৰহণ কৰে আৰু JSX ঘূৰাই দিয়ে। ৰিয়েক্ট v16.8ৰ পৰা ফাংশ্যন উপাদানবোৰে useState হুকেৰে অৱস্থা (ষ্টে’ট) ব্যৱহাৰ কৰিব পাৰে।

ৰিয়েক্ট হুক

[সম্পাদনা কৰক]

2019 চনৰ 16 ফেব্ৰুৱাৰীত ৰিয়েক্ট 16.8 ৰাইজৰ বাবে মুকলি কৰা হয় আৰু তেতিয়াই ৰিয়েক্ট হুক আগবঢ়োৱা হয়।[16] হুক হৈছে এনে কিছুমান ফাংশ্যন যি বিকাশকৰ্তাসকলক ফাংশ্যন উপাদানবোৰৰ পৰা ৰিয়েক্টৰ অৱস্থা আৰু জীৱনচক্ৰ (লাইফচাইকেল)ৰ সুবিধাবোৰ সংযুক্ত কৰিবলৈ দিয়ে।[17] লক্ষণীয়ভাৱে, হুকবোৰে ক্লাছৰ ভিতৰত কাম নকৰে — এইবোৰে বিকাশকৰ্তাসকলক ক্লাছ অবিহনে ৰিয়েক্টৰ অধিক সুবিধা ব্যৱহাৰ কৰিবলৈ দিয়ে।[18]

ৰিয়েক্টৰ লগতেই কেইবাটাও হুক পোৱা যায় যেনে useState[19][15], useContext,[12][20][15] useReducer,[12][21][15] useMemo[12][22][15] আৰু useEffect[23][15] আনবোৰ হুক্স এপিআই ৰেফাৰেঞ্চত নথিভুক্ত কৰা আছে।[24][12] useState আৰু useEffect ক্ৰমে অৱস্থা[12] আৰু পাৰ্শ্বক্ৰিয়া (ছাইড ইফেক্ট)[12] নিয়ন্ত্ৰণ কৰিবলৈ সৰ্বাধিক ব্যৱহাৰ কৰা হয়।

হুকৰ নিয়মাৱলী

[সম্পাদনা কৰক]

হুকবোৰৰ দুটা নিয়ম আছে[25] যিয়ে হুকবোৰে নিৰ্ভৰ কৰা বৈশিষ্ট্যপূৰ্ণ ক’ডৰ আৰ্হি বৰ্ণনা কৰে:

  1. "কেৱল শীৰ্ষ স্তৰত হুকবোৰ কল কৰিব" — লুপ, কণ্ডিশ্যন বা নেষ্টেড ষ্টে’টমেণ্টবোৰৰ ভিতৰৰ পৰা হুকবোৰ কল নকৰিব যাতে হুকবোৰক প্ৰতিটো ৰেণ্ডাৰত একে ক্ৰমত কল কৰা হয়।
  2. "কেৱল ৰিয়েক্ট ফাংশ্যনবোৰৰ পৰা হুকবোৰ কল কৰিব" — সাধাৰণ জাভাস্ক্ৰিপ্ট ফাংশ্যনবোৰৰ পৰা হুকবোৰ কল নকৰিব যাতে অৱস্থাপূৰ্ণ যুক্তি উপাদানৰ সৈতে থাকে।

যদিও এই নিয়মবোৰ ৰানটাইমত বলবৎ কৰিব নোৱাৰি, ক’ড বিশ্লেষণৰ সঁজুলি যেনে লিণ্টাৰ্ছ বিকাশৰ সময়ত বহুতো ভুল ধৰা পেলাবলৈ কনফিগাৰ কৰিব পাৰি। নিয়মবোৰ হুকৰ ব্যৱহাৰ আৰু অন্য হুক কল কৰিব পৰা নিজস্ব হুকৰ প্ৰণয়ন দুয়োটাতে প্ৰযোজ্য হয়।[26]

ছাৰ্ভাৰ উপাদান

[সম্পাদনা কৰক]

ৰিয়েক্ট ছাৰ্ভাৰ উপাদানবোৰ (RSC) [27] হৈছে এনে কিছুমান ফাংশ্যন উপাদান যি আছুতীয়াকৈ ছাৰ্ভাৰত চলে। এই ধাৰণাটো প্ৰথমে "ছাৰ্ভাৰ উপাদানবোৰেৰে তথ্য আহৰণ" শীৰ্ষক আলোচনাত প্ৰৱৰ্তন কৰা হৈছিল। [28] যদিও ছাৰ্ভাৰ ছাইড ৰেণ্ডাৰিঙৰ নিচিনাই, RSC-বোৰে ক্লায়েণ্টলৈ সংশ্লিষ্ট জাভাস্ক্ৰিপ্ট পঠিয়াব নোৱাৰে কাৰণ কোনো হাইড্ৰেশ্যন নঘটে। ফলত এইবোৰে হুক ব্যৱহাৰ কৰিব নোৱাৰে। কিন্তু, এইবোৰ এছিংক্ৰ’নাছ ফাংশ্যন হ’ব পাৰে, যাৰ দ্বাৰা এইবোৰে প্ৰত্যক্ষভাৱে এছিংক্ৰ’নাছ কাৰ্য্যবোৰ সম্পাদন কৰিব পাৰে:

async function MyComponent() {
  const message = await fetchMessageFromDb();

  return (
    <div>Message: {message}</div>
  );
}

বৰ্তমান, ছাৰ্ভাৰ উপাদানবোৰ নেক্‌ষ্ট.জেএছৰ সৈতে আটাইতকৈ সহজে ব্যৱহাৰ কৰিব পৰা যায়।

ক্লাছ উপাদান

[সম্পাদনা কৰক]

ক্লাছ উপাদানবোৰ ES6 ক্লাছবোৰ ব্যৱহাৰ কৰি ঘোষণা কৰা হয়। এইবোৰে ফাংশ্যন উপাদানবোৰে কৰা ধৰণেই আচৰণ কৰে, কিন্তু অৱস্থা আৰু জীৱনচক্ৰ (লাইফচাইকেল)ৰ ঘটনা (ইভেণ্ট)বোৰ পৰিচালনা কৰিবলৈ হুক ব্যৱহাৰ কৰাৰ সলনি React.Component বে’ছ ক্লাছত লাইফচাইকেল মেথড ব্যৱহাৰ কৰে।

class ParentComponent extends React.Component {
  state = { color: 'green' };
  render() {
    return (
      <ChildComponent color={this.state.color} />
    );
  }
}

2019 চনৰ ফেব্ৰুৱাৰী মাহত ৰিয়েক্ট 16.8ৰ সৈতে ৰিয়েক্ট হুকৰ প্ৰৱৰ্তনে বিকাশকৰ্তাসকলক ফাংশ্যনেল উপাদানবোৰৰ ভিতৰত অৱস্থা আৰু জীৱনচক্ৰৰ আচৰণ পৰিচালনা কৰাত সহায় কৰিছিল, যাৰ ফলত ক্লাছ উপাদানবোৰৰ ওপৰত নিৰ্ভৰশীলতা হ্ৰাস পাইছিল।

এই ধাৰাটো ফাংশ্যনেল প্ৰ’গ্ৰেমিং আৰু মডিউলাৰ ডিজাইনৰ দিশত উদ্যোগটোৰ বিস্তৃত সঞ্চাৰৰ সৈতে মিলে। ৰিয়েক্ট বিকশিত হোৱাৰ লগে লগে, বিকাশকৰ্তাসকলৰ বাবে নতুন এপ্লিকেশ্যন নিৰ্মাণ কৰোঁতে বা আগৰবোৰ ৰিফেক্টৰ কৰোঁতে ফাংশ্যনেল উপাদানবোৰ আৰু ৰিয়েক্ট হুকৰ সুবিধাবোৰ বিবেচনা কৰাটো অতি প্ৰয়োজনীয়।[29]

ৰিয়েক্টৰ নিজা কোনো ৰাউটিঙৰ ব্যৱস্থা নাথাকে। ৰিয়েক্ট প্ৰধানকৈ ব্যৱহাৰকাৰী আন্তঃপৃষ্ঠ (ইউজাৰ ইণ্টাৰফে’চ) নিৰ্মাণৰ বাবে এটা লাইব্ৰেৰী আৰু ইয়াত সম্পূৰ্ণ ৰাউটিঙৰ সমাধান অন্তৰ্ভুক্ত নাথাকে। ৰিয়েক্ট এপ্লিকেশ্যনত ৰাউটিং পৰিচালনা কৰিবলৈ তৃতীয় পক্ষৰ লাইব্ৰেৰী ব্যৱহাৰ কৰিব পাৰি।[30] ই বিকাশকৰ্তাসকলক ৰিয়েক্ট-অনুকূল উপায়েৰে ৰাউট নিৰ্ধাৰণ কৰাৰ লগতে নেভিগেশ্যন আৰু URL পৰিৱৰ্তন পৰিচালনা কৰিবলৈ সুবিধা আগবঢ়ায়।

এটা ভাৰ্চুৱেল ডিঅ’এম আছে যিটো প্ৰকৃত ডিঅ’এম ৰূপায়ণ কৰিবলৈ ব্যৱহাৰ কৰা হয়

ভাৰ্চুৱেল ডিঅ’এম

[সম্পাদনা কৰক]

আন এটা উল্লেখযোগ্য সুবিধা হ’ল ভাৰ্চুৱেল ডক্যুমেণ্ট অবজেক্ট মডেল বা ভাৰ্চুৱেল ডিঅ’এম (DOM)ৰ ব্যৱহাৰ। ৰিয়েক্টে মেম’ৰীত এটা ডেটা-ষ্ট্ৰাকচাৰ কেশ্ব তৈয়াৰ কৰে, ফলস্বৰূপে উৎপন্ন হোৱা পাৰ্থক্যবোৰ গণনা কৰে আৰু তাৰপাছত ব্ৰাউজাৰত প্ৰদৰ্শিত ডিঅ’এম দক্ষতাৰে উন্নীত কৰে।[31] এই প্ৰক্ৰিয়াক ৰেকঞ্চিলিয়েশ্যন (reconciliation) বোলা হয়। ইয়াৰ ফলত প্ৰ’গ্ৰামাৰে প্ৰতিটো পৰিৱৰ্তনতে সম্পূৰ্ণ পৃষ্ঠা ৰেণ্ডাৰ হোৱাৰ নিচিনাকৈ ক’ড লিখিব পাৰে, কিন্তু ৰিয়েক্টে কেৱল সেই উপাদানবোৰ ৰেণ্ডাৰ কৰে যিবোৰ প্ৰকৃততে সলনি হয়। এই ছিলেক্টীভ ৰেণ্ডাৰিঙে কাৰ্যদক্ষতাত এক উল্লেখযোগ্য উন্নতি আনে।[32][33]

যেতিয়া ReactDOM.render একেটা উপাদান আৰু লক্ষ্যৰ বাবে পুনৰ কল কৰা হয়, তেতিয়া ৰিয়েক্টে ভাৰ্চুৱেল ডিঅ’এম-ত UI-ৰ নতুন অৱস্থা উপস্থাপন কৰে আৰু নিৰ্ধাৰণ কৰে যে চলিত ডিঅ’এমৰ কোনটো অংশ (যদিহে থাকে) সলনি কৰিব লাগে।[34][35]

Updates to realDOM are subject to virtualDOM
VirtualDOM-এ অনায়াসে বাস্তৱ-সময়ত realDOM আপডে’ট কৰিব।

জীৱনচক্ৰৰ পদ্ধতি

[সম্পাদনা কৰক]

ক্লাছ-ভিত্তিক উপাদানবোৰৰ বাবে জীৱনচক্ৰৰ পদ্ধতি (লাইফচাইকেল মেথড)-এ এক প্ৰকাৰৰ হুকিং ব্যৱহাৰ কৰে যি এটা উপাদানৰ জীৱনকালত নিৰ্দিষ্ট সময়ত ক’ড কাৰ্যকৰী কৰিবলৈ দিয়ে।

  • ShouldComponentUpdate-এ বিকা‌শকৰ্তাক ৰেণ্ডাৰৰ প্ৰয়োজন নহ’লে false ওভটাই উপাদানৰ অপ্ৰয়োজনীয় ৰিৰেণ্ডাৰিং প্ৰতিৰোধ কৰাত সহায় কৰে।
  • componentDidMount উপাদান "মাউণ্ট" (প্ৰায়ে ডিঅ’এম ন’ড এটাৰ সৈতে সংযোগ কৰি ব্যৱহাৰকাৰী আন্তঃপৃষ্ঠত উপাদানৰ সৃষ্টি কৰা) হ’লেই কল কৰা হয়। ইয়াক সাধাৰণতে API-ৰ জৰিয়তে দূৰৱৰ্তী উৎসৰ পৰা তথ্য ল’ড কৰা আৰম্ভ কৰিবলৈ ব্যৱহাৰ কৰা হয়।
  • componentDidUpdate উন্নীত হোৱাৰ লগে লগে ইনভ’ক কৰা হয়।[36]
  • componentWillUnmount উপাদান নষ্ট বা "আনমাউণ্ট" কৰাৰ ঠিক আগতে কল কৰা হয়। ইয়াক সাধাৰণতে উপাদান আনমাউণ্ট কৰোঁতে নিজে-নিজে নুগুচা সম্পদ-দাবীকাৰী নিৰ্ভৰতাবোৰ মচিবলৈ ব্যৱহাৰ কৰা হয় (উদাহৰণস্বৰূপে— উপাদান-সম্পৰ্কীয় যিকোনো setInterval() অথবা উপাদানৰ উপস্থিতিৰ কাৰণে "document"ত স্থাপন কৰা কোনো "eventListener" গুচোৱা)।
  • render হৈছে আটাইতকৈ গুৰুত্বপূৰ্ণ লাইফচাইকেল মেথড আৰু যিকোনো উপাদানৰ বাবে একমাত্ৰ প্ৰয়োজনীয় পদ্ধতি। ইয়াক সাধাৰণতে ব্যৱহাৰকাৰী আন্তঃপৃষ্ঠত প্ৰতিফলিত হ’বলগীয়া উপাদানৰ অৱস্থা প্ৰতিবাৰ উন্নীত কৰোঁতে কল কৰা হয়।

জেএছএক্স

[সম্পাদনা কৰক]
class App extends React.Component {
  render() {
    return (
      <div>
        <p>Header</p>
        <p>Content</p>
        <p>Footer</p>
      </div>
    );
  }
}

জেএছএক্স (JSX) বা জাভাস্ক্ৰিপ্ট এক্সএমএল হৈছে জাভাস্ক্ৰিপ্ট ভাষা বাক্যবিন্যাস (ছিণ্টেক্স)ৰ এটা সম্প্ৰসাৰণ।[37] HTML-ৰ লেখীয়া[12]:11 জেএছএক্স-এ বহু বিকাশকৰ্তাৰ সুপৰিচিত বাক্যবিন্যাস ব্যৱহাৰ কৰি উপাদানৰ ৰেণ্ডাৰ গঠন কৰাৰ এক উপায় প্ৰদান কৰে।[12]:15 ৰিয়েক্ট উপাদানবোৰ সাধাৰণতে জেএছএক্স ব্যৱহাৰ কৰি লিখা হয়, কিন্তু হ’বই লাগিব বুলি কথা নাই (উপাদানবোৰ পিয়’ৰ জাভাস্ক্ৰিপ্টতো লিখিব পৰা যায়)। জেএছএক্স ফে’চবুকে পিএইচপি-ৰ বাবে সৃষ্টি কৰা আন এটা সম্প্ৰসাৰণ বাক্যবিন্যাস এক্সএইচপি-ৰ লেখীয়া।

HTML-ৰ বাহিৰে আন্তঃগাঁঠনি

[সম্পাদনা কৰক]

ৰিয়েক্টৰ মূল আন্তঃগাঁঠনি ব্ৰাউজাৰত HTML ৰেণ্ডাৰ কৰাৰ বাহিৰেও প্ৰযোজ্য হয়। উদাহৰণস্বৰূপে— ফে’চবুকত গতিশীল চাৰ্ট আছে যি <canvas> টেগত ৰেণ্ডাৰ হয়[38] আৰু নেটফ্লিক্স আৰু পে’পালে ছাৰ্ভাৰ আৰু ক্লায়েণ্ট দুয়োতে একেধৰণৰ HTML ৰেণ্ডাৰ কৰিবলৈ ইউনিভাৰ্ছেল ল’ডিং ব্যৱহাৰ কৰে।[39][40]

ছাৰ্ভাৰ-ছাইড ৰেণ্ডাৰিং

[সম্পাদনা কৰক]

ছাৰ্ভাৰ-ছাইড ৰেণ্ডাৰিং (এছএছআৰ) বুলিলে ব্ৰাউজাৰৰ পৰিৱৰ্তে ছাৰ্ভাৰত ক্লায়েণ্ট-ছাইড জাভাস্ক্ৰিপ্ট এপ্লিকেশ্যন ৰেণ্ডাৰ কৰা প্ৰক্ৰিয়াক বুজায়।[41] ই এপ্লিকেশ্যনৰ কাৰ্যক্ষমতা উন্নত কৰিব পাৰে, বিশেষকৈ লেহেমীয়া সংযোগ বা ডিভাইচ ব্যৱহাৰ কৰাসকলৰ বাবে।[42]

এছএছআৰ-ৰ সৈতে ক্লায়েণ্টলৈ পঠিওৱা প্ৰাৰম্ভিক HTML-ত এপ্লিকেশ্যনটোৰ সম্পূৰ্ণৰূপে ৰেণ্ডাৰ কৰা UI অন্তৰ্ভুক্ত থাকে।[43] UI ৰেণ্ডাৰ কৰাৰ আগতে জাভাস্ক্ৰিপ্ট ডাউনল’ড হৈ সম্পাদন হোৱালৈ ৰৈ থকাৰ সলনি ই ক্লায়েণ্টৰ ব্ৰাউজাৰক UI তৎক্ষণাৎ দেখুওৱাত সহায় কৰে।[43]

ৰিয়েক্টত এছএছআৰ সমৰ্থিত হোৱা বাবে বিকাশকৰ্তাসকলে ছাৰ্ভাৰত ৰিয়েক্টৰ উপাদানবোৰ ৰেণ্ডাৰ কৰি ফলস্বৰূপে উৎপন্ন হোৱা HTML ক্লায়েণ্টলৈ পঠিওৱাত সহায় কৰে।[44] ই এপ্লিকেশ্যনৰ কাৰ্যক্ষমতা উন্নত কৰাৰ লগতে ছাৰ্চ ইঞ্জিন অপ্টিমাইজেশ্যনৰ ক্ষেত্ৰতো উপযোগী হ’ব পাৰে।[45]

একমুখী তথ্য-প্ৰৱাহ

[সম্পাদনা কৰক]

এংগ্যুলাৰজেএছ-ৰ দ্বিমুখী তথ্য-প্ৰৱাহৰ বিপৰীত ৰিয়েক্টৰ একমুখী প্ৰৱাহৰ ধাৰণাক সমৰ্থন কৰিবলৈ জনপ্ৰিয় মডেল-ভিউ-কণ্ট্ৰ’লাৰ আন্তঃগাঁথনিৰ বিকল্প হিচাপে ফ্লাক্স (Flux) আন্তঃগাঁথনি বিকশিত কৰা হয়। ফ্লাক্সত কাৰ্য্য (actions) থাকে যিবোৰ এটা কেন্দ্ৰীয় ডিছপেট্‌চাৰ (dispatcher)ৰ জৰিয়তে এটা ষ্ট’ৰ (store)লৈ পঠিওৱা হয় আৰু ষ্ট’ৰৰ পৰিৱৰ্তনসমূহ ভিউলৈ ঘূৰাই দিয়া হয়।[46] ৰিয়েক্টৰ সৈতে ব্যৱহাৰ কৰোঁতে এই প্ৰসাৰণটো কম্পনেণ্ট প্ৰপাৰ্টীজৰ জৰিয়তে সম্পন্ন কৰা হয়। এই ধাৰণাটো প্ৰৱৰ্তিত হোৱাৰে পৰা ৰিডাক্স আৰু MobX-ৰ দৰে লাইব্ৰেৰীসমূহে ফ্লাক্সৰ ঠাই লৈ লৈছে।[47]

ফ্লাক্সক পৰ্যবেক্ষক আৰ্হিৰ আন এক ৰূপ বুলি ধৰিব পাৰি।[48]

ফ্লাক্স আন্তঃগাঁঠনি অন্তৰ্গত এটা ৰিয়েক্ট উপাদানে লাভ কৰা কোনো প্ৰপ্স প্ৰত্যক্ষভাৱে সলনি কৰিব নালাগে, কিন্তু কাৰ্য্যৰ সৃষ্টি কৰা কলবেক ফাংশ্যনসমূহ পাছ কৰা হ’ব লাগে যি ডিছপেট্‌চাৰে ষ্ট’ৰ সলনি কৰিব পৰাকৈ পঠিওৱা হয়। কাৰ্য্য এনে এক অবজেক্ট যাৰ কাম হৈছে যি ঘটিছে সেয়া বৰ্ণনা কৰা: উদাহৰণস্বৰূপে— এগৰাকী ব্যৱহাৰকাৰীয়ে আন এগৰাকীক "ফ’ল’ কৰা" ঘটনাটো বৰ্ণনা কৰা কাৰ্য্যত ব্যৱহাৰকাৰীৰ আইডি, লক্ষ্য ব্যৱহাৰকাৰীৰ আইডি আৰু প্ৰকাৰ USER_FOLLOWED_ANOTHER_USER থাকিব পাৰে।[49] মডেল-সদৃশ ষ্ট’ৰসমূহে ডিছপেট্‌চাৰৰ পৰা লাভ কৰা কাৰ্য্যৰ প্ৰতি সঁহাৰি জনাই নিজকে সলনি কৰিব পাৰে।

2019 চনৰ ফেব্ৰুৱাৰী মাহত 16.8 সংস্কৰণ ‌মুকলি কৰাৰ লগতে এটা ৰিয়েক্ট হুক হিচাপে useReducer আগবঢ়োৱা হয়। ই বিডাক্সৰ সৈতে খাপ খোৱা এটা এপিআই প্ৰদান কৰে আৰু বিকাশকসকলক উপাদানৰ বাবে থলুৱা ৰিডাক্স-সদৃশ ষ্ট’ৰৰ সৃষ্টি কৰিবলৈ দিয়ে।[50]

ৰিয়েক্টৰ সৃষ্টি কৰিছিল মেটাৰ এগৰাকী ছফ্টৱেৰ ইঞ্জিনিয়াৰ জৰ্ডান ৱকে, যি প্ৰথমতে "এফ-ব’ল্ট" নামৰ এটা প্ৰ'টটাইপ বিকশিত কৰিছিল আৰু পাছলৈ ইয়াৰ নাম সলাই "ফেক্সজেএছ" ৰখা হয়।[51] এই প্ৰাৰম্ভিক সংস্কৰণটো জৰ্ডান ৱকৰ গিটহাব ৰিপছিটৰীত নথিভুক্ত কৰা আছে।[5] প্ৰকল্পটোৰ অন্যতম প্ৰেৰণা আছিল পিএইচপিৰ এক HTML কম্পনেণ্ট লাইব্ৰেৰী— এক্সএইচপি

2011 চনত ফে’চবুকৰ নিউজ ফীডত প্ৰথমবাৰৰ বাবে ৰিয়েক্ট প্ৰয়োগ কৰা হয় আৰু তাৰপাছত 2012 চনত ইনষ্টাগ্ৰামত সন্নিৱেশ কৰা হয়।[52] 2013 চনৰ মে’ মাহত JSConf US-ত এই প্ৰকল্পটো আনুষ্ঠানিকভাৱে অ’পেন ছ’ৰ্চ কৰা হয়, যাৰ পাছতেই ইয়াৰ জনপ্ৰিয়তা বৃদ্ধি পায়।[6]

ৰিয়েক্ট নেটীভ, যি ৰিয়েক্টৰ সৈতে নেটীভ এণ্ড্ৰইড, আইঅ’এছ আৰু UWP-ৰ বিকাশ সক্ষম কৰে, 2015 চনৰ ফেব্ৰুৱাৰী মাহত ফে’চবুকৰ React Conf-ত ঘোষণা কৰা হয় আৰু 2015 চনৰ মাৰ্চত অ’পেন ছ’ৰ্চ কৰা হয়।

2019 চনৰ 18 এপ্ৰিলত ফে’চবুকে ৰিয়েক্টৰ পুৰণি ৰেণ্ডাৰিং এল্গ’ৰিদম ষ্টেকৰ বিপৰীতে ৰেণ্ডাৰিঙৰ বাবে ভিতৰুৱা এল্গ’ৰিদমৰ এক নতুন সমষ্টি ৰিয়েক্ট ফাইবাৰৰ বিষয়ে ঘোষণা কৰে।[53] ৰিয়েক্ট ফাইবাৰ ৰিয়েক্ট লাইব্ৰেৰীটোৰ ভৱিষ্যতৰ যিকোনো উন্নতিসাধন আৰু সুবিধা বিকাশৰ বুনিয়াদ হিচাপে গঢ় দিয়াৰ পৰিকল্পনা আছিল।[54] ৰিয়েক্টেৰে প্ৰ’গ্ৰামিঙৰ প্ৰকৃত ছিণ্টেক্স সলনি হোৱা নাই; কেৱল ছিণ্টেক্স সম্পাদন কৰাৰ পদ্ধতি সলনি হৈছে।[55] ৰিয়েক্টৰ পুৰণি ৰেণ্ডাৰিং ব্যৱস্থা ষ্টেক সেইসময়ত বিকশিত কৰা হৈছিল যেতিয়া গতিশীল পৰিৱৰ্তনৰ ওপৰত ব্যৱস্থাটোৰ কেন্দ্ৰবিন্দু বুজা হোৱা নাছিল। ষ্টেক জটিল এনিমেশ্যন অঁকাৰ ক্ষেত্ৰত লেহেমীয়া আছিল, উদাহৰণস্বৰূপে— ই সকলোবোৰ এবাৰতেই সম্পন্ন কৰিবলৈ চেষ্টা কৰিছিল। ফাইবাৰে এনিমেশ্যনক সৰু সৰু খণ্ডত বিভক্ত কৰে যিবোৰ একাধিক ফ্ৰে’মত বিয়পাব পাৰি। একেদৰে এখন পৃষ্ঠাৰ গঠনক খণ্ডত বিভক্ত কৰিব পাৰি যিবোৰ পৃথকে পৃথকে জাৰি ৰাখিব আৰু উন্নীত কৰিব পাৰি। জাভাস্ক্ৰিপ্ট ফাংশ্যন আৰু ভাৰ্চুৱেল ডিঅ’এম অবজেক্টবোৰক "ফাইবাৰ" বোলা হয় আৰু প্ৰত্যেককে পৃথকে পৃথকে চলাব আৰু উন্নীত কৰিব পাৰি যাৰ দ্বাৰা স্ক্ৰীনত ৰেণ্ডাৰিং সুচল হৈ পৰে।[56]

2017 চনৰ 26 ছেপ্টেম্বৰত ৰিয়েক্ট 16.0 জনসাধাৰণৰ বাবে মুকলি কৰা হয়।[57]

20 অক্টোবৰ, 2020 তাৰিখে ৰিয়েক্ট দলে ৰিয়েক্ট v17.0 মুকলি কৰে, যি ৰিয়েক্টৰ বিকাশকৰ্তা-মুখী এপিআই-ৰ ডাঙৰ পৰিৱৰ্তন নোহোৱাকৈ প্ৰথমটো ডাঙৰ মুক্তিলাভ হিচাপে উল্লেখযোগ্য।[58]

2022 চনৰ 29 মাৰ্চত ৰিয়েক্ট 18 মুকলি কৰা হয় যি নতুন কনকাৰেণ্ট ৰেণ্ডাৰাৰ, অট’মেটিক বেট্‌চিং আৰু ছাস্পেন্সৰ সৈতে ছাৰ্ভাৰ ছাইড ৰেণ্ডাৰিঙৰ সুবিধা আগবঢ়ায়।[59]

2024 চনৰ 5 ডিচেম্বৰত ৰিয়েক্ট 19 মুকলি কৰা হয়। এই উন্মোচনৰ জৰিয়তে কাৰ্য্য (Actions) আগবঢ়োৱা হয়, যি এছিংক্ৰ’নাছ ফাংশ্যন ব্যৱহাৰ কৰি অৱস্থা উন্নীত কৰাৰ প্ৰক্ৰিয়া সৰল কৰে। ৰিয়েক্ট 19ত ছাৰ্ভাৰ উপাদানৰ সমৰ্থন আৰু উন্নত স্থিতিশীল ছাইট সৃষ্টিৰ সুবিধাও অন্তৰ্ভুক্ত কৰা হয়।[60]

তথ্যসূত্ৰ

[সম্পাদনা কৰক]
  1. Occhino, Tom; Walke, Jordan (5 August 2013). "JS Apps at Facebook". YouTube. https://www.youtube.com/watch?v=GW0rj4sNH2w আহৰণ কৰা হৈছে: 22 Oct 2018.
  2. "Is React a Library or a Framework? Here's Why it Matters" (en ভাষাত). freeCodeCamp.org. 2021-04-12. https://www.freecodecamp.org/news/is-react-a-library-or-a-framework/ আহৰণ কৰা হৈছে: 2024-10-12.
  3. "Release 19.2.8". 21 July 2026. https://github.com/react/react/releases/tag/v19.2.8 আহৰণ কৰা হৈছে: 22 July 2026.
  4. "What's new in React 19". https://react.dev/blog/2024/04/25/react-19#whats-new-in-react-19 আহৰণ কৰা হৈছে: 2024-05-12.
  5. 1 2 3 "React – A JavaScript library for building user interfaces." (en-US ভাষাত). reactjs.org. https://reactjs.org আহৰণ কৰা হৈছে: 7 April 2018.
  6. 1 2 "Chapter 1. What Is React? - What React Is and Why It Matters [Book"] (en ভাষাত). www.oreilly.com. https://www.oreilly.com/library/view/what-react-is/9781491996744/ch01.html আহৰণ কৰা হৈছে: 2023-05-06.
  7. Krill, Paul (May 15, 2014). "React: Making faster, smoother UIs for data-driven Web apps". InfoWorld. Archived from the original on 2018-06-12. https://web.archive.org/web/20180612141516/https://www.infoworld.com/article/2608181/javascript/react--making-faster--smoother-uis-for-data-driven-web-apps.html আহৰণ কৰা হৈছে: 2021-02-23.
  8. Hemel, Zef (June 3, 2013). "Facebook's React JavaScript User Interfaces Library Receives Mixed Reviews" (en-US ভাষাত). infoq.com. Archived from the original on May 26, 2022. https://web.archive.org/web/20220526082114/https://www.infoq.com/news/2013/06/facebook-react/ আহৰণ কৰা হৈছে: 2022-01-11.
  9. Dawson, Chris (July 25, 2014). "JavaScript's History and How it Led To ReactJS" (en-US ভাষাত). The New Stack. Archived from the original on Aug 6, 2020. https://web.archive.org/web/20200806190027/https://thenewstack.io/javascripts-history-and-how-it-led-to-reactjs/ আহৰণ কৰা হৈছে: 2020-07-19.
  10. Dere 2017.
  11. "React Introduction" (en-US ভাষাত). GeeksforGeeks. 2017-09-27. https://www.geeksforgeeks.org/reactjs-introduction/ আহৰণ কৰা হৈছে: 2024-10-12.
  12. 1 2 3 4 5 6 7 8 9 10 11 12 Wieruch 2020.
  13. Schwarzmüller 2018.
  14. "Components and Props". React. Facebook. Archived from the original on 7 April 2018. https://web.archive.org/web/20180407120115/https://reactjs.org/docs/components-and-props.html আহৰণ কৰা হৈছে: 7 April 2018.
  15. 1 2 3 4 5 6 Larsen 2021.
  16. "Introducing Hooks". react.js. Archived from the original on 2018-10-25. https://web.archive.org/web/20181025163202/https://reactjs.org/docs/hooks-intro.html আহৰণ কৰা হৈছে: 2019-05-20.
  17. "Hooks at a Glance – React" (en ভাষাত). reactjs.org. Archived from the original on 2023-03-15. https://web.archive.org/web/20230315054047/https://reactjs.org/docs/hooks-overview.html আহৰণ কৰা হৈছে: 2019-08-08.
  18. "What the Heck is React Hooks?" (en ভাষাত). Soshace. 2020-01-16. Archived from the original on 2022-05-31. https://web.archive.org/web/20220531133601/https://blog.soshace.com/what-the-heck-is-react-hooks/ আহৰণ কৰা হৈছে: 2020-01-24.
  19. "Using the State Hook – React" (en ভাষাত). reactjs.org. https://reactjs.org/docs/hooks-state.html আহৰণ কৰা হৈছে: 2020-01-24.
  20. "Using the State Hook – React" (en ভাষাত). reactjs.org. https://reactjs.org/docs/hooks-state.html আহৰণ কৰা হৈছে: 2020-01-24.
  21. "Using the State Hook – React" (en ভাষাত). reactjs.org. https://reactjs.org/docs/hooks-state.html আহৰণ কৰা হৈছে: 2020-01-24.
  22. "Using the State Hook – React" (en ভাষাত). reactjs.org. https://reactjs.org/docs/hooks-state.html আহৰণ কৰা হৈছে: 2020-01-24.
  23. "Using the Effect Hook – React" (en ভাষাত). reactjs.org. https://reactjs.org/docs/hooks-effect.html আহৰণ কৰা হৈছে: 2020-01-24.
  24. "Hooks API Reference – React" (en ভাষাত). reactjs.org. https://reactjs.org/docs/hooks-reference.html আহৰণ কৰা হৈছে: 2020-01-24.
  25. "Rules of Hooks – React" (en ভাষাত). reactjs.org. Archived from the original on 2021-06-06. https://web.archive.org/web/20210606174151/https://reactjs.org/docs/hooks-rules.html আহৰণ কৰা হৈছে: 2020-01-24.
  26. "Building Your Own Hooks – React" (en ভাষাত). reactjs.org. Archived from the original on 2022-07-17. https://web.archive.org/web/20220717175155/https://reactjs.org/docs/hooks-custom.html আহৰণ কৰা হৈছে: 2020-01-24.
  27. "React Labs: What We've Been Working On – March 2023" (en ভাষাত). react.dev. Archived from the original on 2023-07-26. https://web.archive.org/web/20230726201006/https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components আহৰণ কৰা হৈছে: 2023-07-23.
  28. Abramov, Dan; Tan, Lauren; Savona, Joseph; Markbåge, Sebastian (2020-12-21). "Introducing Zero-Bundle-Size React Server Components" (en ভাষাত). react.dev. https://react.dev/blog/2020/12/21/data-fetching-with-react-server-components আহৰণ কৰা হৈছে: 2024-09-28.
  29. Chourasia, Rawnak (2023-03-08). "Convert Class Component to Function(Arrow) Component – React". Code Part Time. Archived from the original on 2023-08-15. https://web.archive.org/web/20230815131020/https://codeparttime.com/convert-class-to-function-arrow-react/ আহৰণ কৰা হৈছে: 2023-08-15.
  30. "Mastering React Router – The Ultimate Guide" (en-US ভাষাত). 2023-07-12. Archived from the original on 2023-07-26. https://web.archive.org/web/20230726063450/https://www.devban.com/react-router-ultimate-guide/ আহৰণ কৰা হৈছে: 2023-07-26.
  31. "Refs and the DOM". React Blog. Archived from the original on 2022-08-07. https://web.archive.org/web/20220807171328/https://reactjs.org/docs/refs-and-the-dom.html আহৰণ কৰা হৈছে: 2021-07-19.
  32. "React: The Virtual DOM" (en ভাষাত). Codecademy. Archived from the original on 2021-10-28. https://web.archive.org/web/20211028172953/https://www.codecademy.com/articles/react-virtual-dom আহৰণ কৰা হৈছে: 2021-10-14.
  33. Aggarwal, Sanchit (March 2018). "Modern Web-Development using ReactJS". International Journal of Recent Research Aspects. পৃষ্ঠাসমূহ: 133–137. Archived from the original on 17 April 2024. https://web.archive.org/web/20240417143754/https://ijrra.net/Vol5issue1/IJRRA-05-01-27.pdf আহৰণ কৰা হৈছে: 11 December 2024.
  34. "ReactDOM – React" (en ভাষাত). reactjs.org. Archived from the original on 2023-01-08. https://web.archive.org/web/20230108104936/https://reactjs.org/docs/react-dom.html আহৰণ কৰা হৈছে: 2023-01-08.
  35. "Reconciliation – React" (en ভাষাত). reactjs.org. Archived from the original on 2023-01-08. https://web.archive.org/web/20230108105122/https://reactjs.org/docs/reconciliation.html আহৰণ কৰা হৈছে: 2023-01-08.
  36. "React.Component – React" (en ভাষাত). legacy.reactjs.org. Archived from the original on 2024-04-09. https://web.archive.org/web/20240409075058/https://legacy.reactjs.org/docs/react-component.html আহৰণ কৰা হৈছে: 2024-04-09.
  37. "Draft: JSX Specification" (en-US ভাষাত). JSX. Facebook. 2022-03-08. Archived from the original on 2022-04-02. https://web.archive.org/web/20220402072504/https://facebook.github.io/jsx/ আহৰণ কৰা হৈছে: 7 April 2018.
  38. Hunt, Pete (2013-06-05). "Why did we build React? – React Blog" (en-US ভাষাত). reactjs.org. Archived from the original on 2015-04-06. https://web.archive.org/web/20150406072833/http://facebook.github.io/react/blog/2013/06/05/why-react.html আহৰণ কৰা হৈছে: 2022-02-17.
  39. "PayPal Isomorphic React". medium.com. 2015-04-27. Archived from the original on 2019-02-08. https://web.archive.org/web/20190208124143/https://www.paypal-engineering.com/2015/04/27/isomorphic-react-apps-with-react-engine/ আহৰণ কৰা হৈছে: 2019-02-08.
  40. "Netflix Isomorphic React" (en-US ভাষাত). netflixtechblog.com. 2015-01-28. Archived from the original on 2016-12-17. https://web.archive.org/web/20161217043150/http://techblog.netflix.com/2015/01/netflix-likes-react.html আহৰণ কৰা হৈছে: 2022-02-14.
  41. "Server-side rendering (SSR) - MDN Web Docs Glossary". MDN Web Docs. Mozilla. https://developer.mozilla.org/en-US/docs/Glossary/SSR আহৰণ কৰা হৈছে: 7 March 2025.
  42. "Rendering on the Web". web.dev. Google. 6 February 2019. https://web.dev/rendering-on-the-web/ আহৰণ কৰা হৈছে: 7 March 2025.
  43. 1 2 Jain, Atishay (10 November 2018). "Render Caching for React". CSS-Tricks. https://css-tricks.com/render-caching-for-react/ আহৰণ কৰা হৈছে: 7 March 2025.
  44. "Server React DOM APIs". React Documentation. Meta Platforms. https://react.dev/reference/react-dom/server আহৰণ কৰা হৈছে: 7 March 2025.
  45. "Rendering (Next.js Documentation)". Next.js Documentation. Vercel. https://nextjs.org/docs/pages/building-your-application/rendering আহৰণ কৰা হৈছে: 7 March 2025.
  46. "In Depth OverView". FacebookFlux. Archived from the original on 7 August 2022. https://web.archive.org/web/20220807201252/https://facebook.github.io/flux/docs/in-depth-overview/ আহৰণ কৰা হৈছে: 7 April 2018.
  47. "Flux Release 4.0". Github. https://github.com/facebook/flux/releases/tag/4.0.0 আহৰণ কৰা হৈছে: 26 February 2021.
  48. Johnson, Nicholas. "Introduction to Flux – React Exercise". Nicholas Johnson. Archived from the original on 31 May 2022. https://web.archive.org/web/20220531133600/http://nicholasjohnson.com/react/course/exercises/flux/ আহৰণ কৰা হৈছে: 7 April 2018.
  49. Abramov, Dan. "The History of React and Flux with Dan Abramov". Three Devs and a Maybe. Archived from the original on 19 April 2018. https://web.archive.org/web/20180419075905/http://threedevsandamaybe.com/the-history-of-react-and-flux-with-dan-abramov/ আহৰণ কৰা হৈছে: 7 April 2018.
  50. "React v16.8: The One with Hooks". Archived from the original on 2023-01-08. https://web.archive.org/web/20230108090021/https://reactjs.org/blog/2019/02/06/react-v16.8.0.html#react-1 আহৰণ কৰা হৈছে: 2023-01-08.
  51. "React.js: The Documentary". Youtube. Honeypot. 10 February 2023. Archived from the original on 2024-01-19. https://web.archive.org/web/20240119211307/https://www.youtube.com/watch?v=8pDqJVdNa44%3Fsi%3DFMJqegC4dPtwKP__&t=528 আহৰণ কৰা হৈছে: 2024-05-27.
  52. Lopez, Marny (13 May 2024). "Why React is so widely adopted by web developers?". Devlane. Archived from the original on 20 June 2024. https://web.archive.org/web/20240620092857/https://www.devlane.com/blog/why-react-is-so-widely-adopted-by-web-developers আহৰণ কৰা হৈছে: 11 December 2024.
  53. Lardinois 2017.
  54. "React Fiber Architecture". Github. Archived from the original on 10 May 2018. https://web.archive.org/web/20180510140634/https://github.com/acdlite/react-fiber-architecture আহৰণ কৰা হৈছে: 19 April 2017.
  55. "Facebook announces React Fiber, a rewrite of its React framework". TechCrunch. 18 April 2017. Archived from the original on 2018-06-14. https://web.archive.org/web/20180614172053/https://techcrunch.com/2017/04/18/facebook-announces-react-fiber-a-rewrite-of-its-react-framework/ আহৰণ কৰা হৈছে: 2018-10-19.
  56. "GitHub – acdlite/react-fiber-architecture: A description of React's new core algorithm, React Fiber". github.com. Archived from the original on 2018-05-10. https://web.archive.org/web/20180510140634/https://github.com/acdlite/react-fiber-architecture আহৰণ কৰা হৈছে: 2018-10-19.
  57. "React v16.0". react.js. 2017-09-26. Archived from the original on 2017-10-03. https://web.archive.org/web/20171003031315/https://reactjs.org/blog/2017/09/26/react-v16.0.html আহৰণ কৰা হৈছে: 2019-05-20.
  58. url=https://reactjs.org/blog/2020/08/10/react-v17-rc.html Archived 2020-08-10 at the Wayback Machine
  59. "React 18". React. https://react.dev/blog/2022/03/29/react-v18 আহৰণ কৰা হৈছে: 7 December 2024.
  60. "React 19". React. https://react.dev/blog/2024/12/05/react-19#whats-new-in-react-19 আহৰণ কৰা হৈছে: 7 December 2024.

বাহ্যিক সংযোগ

[সম্পাদনা কৰক]