প্রতিক্রিয়া উপাদান - কার্যকরী বনাম ক্লাস

প্রতিক্রিয়া-js হল একটি JavaScript ফ্রেমওয়ার্ক যা আমাদের ডেভেলপার হিসেবে কোডকে আরও পুনঃব্যবহারযোগ্য করে তুলতে দেয়। এই এনক্যাপসুলেটেড কোড স্নিপেটগুলিকে বলা হয় উপাদান তারাতে যা ঘটছে তাতে হস্তক্ষেপ না করে তাদের নিজস্ব যুক্তি এবং অবস্থা ধরে রাখতে পারে ডকুমেন্ট অবজেক্ট মডেল (DOM)

ডাটা পাস করার জন্য এই ছোট কামড়-আকারের উপাদানগুলিতে আপনার ওয়েবসাইটের অংশগুলিকে বিমূর্ত করা আপনার কোডকে পুনরায় ব্যবহারযোগ্য এবং আরও DRY ( D না আর epeat Y আমাদেরকে)। দুটি প্রধান ধরণের উপাদান রয়েছে যা আপনি প্রতিক্রিয়াতে সম্মুখীন হবেন:কার্যকরী এবং শ্রেণি উপাদান।

খুব উচ্চ স্তরে, প্রতিক্রিয়া উপাদানগুলি মূলত জাভাস্ক্রিপ্ট ফাংশন যা প্রপস গ্রহণ করে একটি প্যারামিটার হিসাবে এবং কিছু প্রতিক্রিয়া উপাদান ফেরত দিন এটি মূলত বর্ণনা করে যে স্ক্রিনে কী থাকা উচিত:

import React from 'react';
import ReactDOM from 'react-dom';
 
const Greeting = (props) => {
   return (
       <div>
           Hello, {props.name}
       </div>
   );
};
 
const element = <Greeting name="Yolanda" />;
 
ReactDOM.render(
   element, document.getElementById('root')
)

এই ক্ষেত্রে প্রতিক্রিয়া উপাদানটি এখানে একটি <div> এতে কিছু লেখা আছে। এই পাঠ্যটি একটি প্রপস অবজেক্ট ব্যবহার করে যা উপাদানটিতে পাস করা হয়েছে। সেই প্রপস অবজেক্টটি তাদের পিতামাতার কাছ থেকে শিশুদের উপাদানগুলিতে ডেটা পাঠাবে।

এই উদাহরণে, যে প্রপটি দেওয়া হয়েছে তা হল নাম৷৷ উপাদান পিতামাতার প্রতিনিধিত্ব করে।

<Greeting-এ আপনি যে কোনো সম্পত্তি পাস করেন /> কম্পোনেন্ট এটিকে প্রপস অবজেক্টে পরিণত করবে এবং গ্রিটিং এর ভিতরে ব্যবহার করার জন্য উপলব্ধ হবে। এটি গ্রিটিংকে সুপার পুনঃব্যবহারযোগ্য করে তোলে কারণ আমরা উপাদানটিতে যে কোনও নামে পাস করতে পারি।

কার্যকর উপাদান

কার্যকরী উপাদান, যেমন আমরা আগে উল্লেখ করেছি, মূলত জাভাস্ক্রিপ্ট ফাংশন। প্রতিক্রিয়া উপাদান তৈরি করার সময় আপনি EcmaScript 5 (ES5) বা EcmaScript a6 (ES6) সিনট্যাক্স ব্যবহার করতে পারেন। একটি অঙ্গুষ্ঠের নিয়ম হিসাবে, প্রতিক্রিয়া উপাদানগুলিকে অবশ্যই মূল উপাদানগুলি নির্দেশ করতে হবে।

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Basic React Component</title>
  
</head>
<body>
   <!-- App is inserted at thr root node -->
   <div id="root"></div>
  
   <!-- React CDN -->
   <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
   <!-- React-DOM CDN -->
   <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  
   <!-- React Components can be rendered here -->
   <script async>
       'use strict';
 
       const element = React.createElement;
 
       function Greeting() {
           return element('h4', null , `Hello, World!`);
       };
 
function App() {
           return element(Greeting);
       };
 
 
       const domContainer = document.querySelector('#root');
           ReactDOM.render(element(App), domContainer);
   </script>
</body>
</html>

এটি একটি উপহাস করা, কার্যকর উদাহরণ যখন আমরা JSX ব্যবহার করি না, কিন্তু প্লেইন ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করি তখন একটি ES5 কার্যকরী উপাদান কেমন দেখায়। HTML এ কি হচ্ছে তা নিয়ে খুব বেশি চিন্তা করবেন না। জাভাস্ক্রিপ্ট লজিকের উপর ফোকাস করুন:আমাদের একটি উপাদান তৈরি করা হচ্ছে, একটি ফাংশন যা কিছু রিটার্ন করছে এবং তারপর সেই ফাংশনটি কিছু ধরণের ReactDOM-এ রেন্ডার করা হচ্ছে।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

JSX - জাভাস্ক্রিপ্ট এক্সএমএল এক্সটেনশনের জন্য সংক্ষিপ্ত - মূলত আমাদের জাভাস্ক্রিপ্টে এইচটিএমএল লিখতে দেয় যাতে আমরা এইচটিএমএলে যা দেখতে অভ্যস্ত তার সাথে এটিকে আরও সদৃশ করে তোলে। উপরের কোড উদাহরণে, আমরা আমাদের HTML উপাদান তৈরি করতে সম্পূর্ণরূপে জাভাস্ক্রিপ্ট ব্যবহার করছি এবং তারপর একটি <h4> সন্নিবেশ করার জন্য React এর createElement পদ্ধতি ব্যবহার করছি। <div id=”root />.

যদি আমরা আমাদের অ্যাপ্লিকেশনকে স্কেল করি - আমাদের অ্যাপ্লিকেশনটিকে এটির চেয়ে অনেক বড় করে তুলব - এই ধরনের লেখা মোটামুটি দ্রুতই কষ্টকর হয়ে উঠবে। JSX মূলত React.createElement পদ্ধতির জন্য সিনট্যাকটিক চিনি হিসাবে তৈরি করা হয়েছিল এবং আমাদের অ্যাপগুলিকে আরও দ্রুত স্কেল করতে দেয়।

কার্যকরী উপাদান ES5 বা ES6 লেখা যেতে পারে। এটি একটি ES5 এবং একটি ES6 কার্যকরী উপাদান উভয়ই JSX ব্যবহার করে কেমন দেখায় তার একটি উদাহরণ:

ES5 কার্যকরী উপাদান

import React from 'react';
import ReactDOM from 'react-dom';
 
function Animal(props) {
           const element = <h1>My cat's name is {props.name}</h1>;
           return element;
      }
       function App() {
               return <Animal name="Marshmallow"/>
       };
      const domContainer = document.querySelector('#root');
          ReactDOM.render(<App/>, domContainer);

ES6 কার্যকরী উপাদান

const Animal = (props) => {
           const element = <h1>My cat's name is {props.name}</h1>;
           return element;
      }
       const App = () => {
               return <Animal name="Marshmallow"/>
       };
      const domContainer = document.querySelector('#root');
          ReactDOM.render(<App/>, domContainer);

প্রতিক্রিয়া v.16 এর আগে, কার্যকরী উপাদানগুলিকে রাষ্ট্রহীন হিসাবে পরিচিত ছিল উপাদান এর মানে হল যে কম্পোনেন্টের মূল উদ্দেশ্য ছিল উপস্থাপনামূলক – পৃষ্ঠায় ভালো দেখাতে। প্রায়শই, এই কার্যকরী উপাদানগুলিতে ডেটা প্রেরণ করা হয়েছিল যাতে তারা ব্যবহারকারী ইন্টারফেসে কিছু প্রদর্শন করতে পারে।

React v.16 এর আবির্ভাবের সাথে সব বদলে গেছে। আমরা একটু পরে যে পেতে হবে. এই মুহূর্তে, শুধু জেনে রাখুন যে ক্লায়েন্টের কাছে কিছু উপস্থাপন করার জন্য পিতামাতার কাছ থেকে বা কোনো গ্লোবাল অবজেক্ট থেকে কিছু ধরণের ডেটা গ্রহণ করার জন্য কার্যকরী উপাদান বিদ্যমান।

শ্রেণির উপাদান

ক্লাসের উপাদানগুলি জাভাস্ক্রিপ্ট ফাংশনের চেয়ে "শুধু" একটু বেশি জটিল। প্রতিক্রিয়াতে ক্লাসের উপাদানগুলি ES6 জাভাস্ক্রিপ্ট ক্লাসের ধারণাকে ধার করে। জাভাস্ক্রিপ্টে একটি ক্লাসের গঠন অনেকটা এমন একটি বস্তু যেটির সাথে যুক্ত বৈশিষ্ট্য এবং পদ্ধতি রয়েছে। আমরা this ব্যবহার করি সেই বস্তুর একটি উদাহরণ অ্যাক্সেস করতে এবং এটির সাথে ইন্টারঅ্যাক্ট করার জন্য কীওয়ার্ড।

প্রতিক্রিয়াতে, বেশিরভাগ অংশের জন্য, গঠন একই। প্রতিক্রিয়া শ্রেণী উপাদান একটি বস্তুর একটি উদাহরণ এবং এই বস্তুর আছে যাকে আমরা state বলি। একটি উচ্চ স্তরে, রাষ্ট্র হল কেবলমাত্র এমন ডেটা যা উপাদানটি ধারণ করে – এটিকে বৈশিষ্ট্যগুলি সেট আপ করার এবং এটিকে ক্লাসে আবদ্ধ করার অন্য উপায় হিসাবে ভাবুন। একজন বিকাশকারী হিসাবে আপনি সেই ডেটা দিয়ে যা চান তা করতে পারেন:এটি স্ক্রিনে উপস্থাপন করুন, এটিকে অন্যান্য উপাদানগুলিতে প্রেরণ করুন, অন্যান্য যুক্তির জন্য এটি ব্যবহার করুন ইত্যাদি।

একটি ES6 ক্লাস কম্পোনেন্ট সবসময় ক্যাপিটালাইজ করা হয়, ঠিক ফাংশনাল কম্পোনেন্টের মতই - এটি একটি রিঅ্যাক্ট নিয়ম যাতে ট্রান্সপাইলার জানতে পারে এটি একটি কম্পোনেন্ট। যেহেতু আমরা কম্পোনেন্ট স্ট্রাকচার রিঅ্যাক্ট থেকে উত্তরাধিকারসূত্রে পেয়েছি, তাই আমাদের প্রসারিত করতে হবে প্রতিক্রিয়ার Component ক্লাস কোডের সেই ব্লকের ভিতরে যেখানে আমরা আমাদের অবস্থা রাখব:

import React from 'react';
import ReactDOM from 'react-dom';
import Name from './Name';
 
   // the 'this' keyword needs to be used when we are talking about an instance of a class. So it will go in front of your methods and state when referring to it in your render method.
class Animal extends React.Component {
   constructor(props) {
       super(props);
       this.state = {
           species: ['fox', 'tiger', 'bear', 'kangaroo', 'fish', 'cat', 'dog', 'squirrel']
       }
   }
  
 
   render() {
       return (
           <div>
               {this.state.species.map(animal => {
                   return <Name animal={animal}/>
               })}
           </div>
       )
   }
}
ReactDOM.render(<Animal />, document.getElementById('root'));

রাষ্ট্র বৈশিষ্ট্য এবং মান পূর্ণ একটি বস্তু. আমাদের রাজ্যের এখানে প্রজাতির একটি সম্পত্তি রয়েছে এবং এর মান হল প্রাণীদের পূর্ণ একটি বিন্যাস। এই অ্যারেটি উল্লেখ করতে বা তার সাথে যোগাযোগ করতে, আমরা this.state.species. ব্যবহার করি।

উপরের ক্লাস কম্পোনেন্টের উদ্দেশ্য হল প্রাণীর নাম <Name />-এ পাস করা। উপাদান. <Name /> কম্পোনেন্টের কাজ হল সেই ডেটা নিয়ে কিছু করা যখন এটি পায়। প্রাণীর অবস্থা একটি প্রপস অবজেক্টের অংশ হয়ে উঠবে যখন এটি একটি কার্যকরী বা অন্যান্য শ্রেণির উপাদানে প্রেরণ করা হয়। যতক্ষণ না এটি পাস হতে থাকবে ততক্ষণ এটি শিশু উপাদানগুলিতে অ্যাক্সেস করতে সক্ষম হবে।

শুধু মনে রাখবেন যে প্রতিক্রিয়াতে, ডেটা প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে শুধুমাত্র একটি লেভেলে প্রবাহিত হয়। যদি আপনার পিতামাতার নাতি-নাতনি উপাদানের ডেটার প্রয়োজন হয় তবে আপনাকে অবশ্যই এটিকে অন্য স্তরে নামিয়ে আনতে হবে।

রিঅ্যাক্টে ক্লাস কম্পোনেন্টগুলির আরেকটি বৈশিষ্ট্য হল আমাদের রাজ্যের ট্র্যাক রাখার জন্য আমাদের কাছে লাইফসাইকেল পদ্ধতিতে অ্যাক্সেস আছে এবং ব্যবহার করা আছে। প্রতিক্রিয়াশীল জীবনচক্রের সাধারণত তিনটি পর্যায় থাকে:তারা তৈরি হয় (মাউন্ট করা), তারা বেঁচে থাকে (আপডেট) এবং তারা মারা যায় (আনমাউন্ট করা)। জীবনচক্র পদ্ধতির প্রতিটি পর্যায়ে অ্যাক্সেস এবং/অথবা অবস্থা পরিবর্তন করার পদ্ধতি রয়েছে:

ComponentDidMount() - এটি হল জীবনচক্র পদ্ধতি যেখানে আমরা স্টেট আরম্ভ করার জন্য AJAX অনুরোধ/নেটওয়ার্ক অনুরোধ করব। আপনার পুনরুদ্ধার করা ডেটা রাজ্যে লোড করতে this.setState() ব্যবহার করুন।
ComponentDidUpdate() – কোনো ব্যবহারকারী অ্যাপ্লিকেশনের সাথে ইন্টারঅ্যাক্ট করার পরে রাজ্যের যেকোনো আপডেট এখানে ঘটে।
ComponentDidUnmount() – এটি একটি ক্লিনআপ ফাংশন যা কম্পোনেন্ট আনমাউন্ট করার সময় ঘটে। এটি টাইমার, AJAX অনুরোধ ইত্যাদির যত্ন নেবে।

এগুলির থেকে আরও বেশি জীবনচক্র পদ্ধতি রয়েছে - তালিকাভুক্তগুলি কেবলমাত্র প্রধান। এই পদ্ধতি সম্পর্কে আরো তথ্যের জন্য প্রতিক্রিয়া ডকুমেন্টেশন দেখুন.

অবশেষে, কার্যকরী উপাদানের রিটার্ন স্টেটমেন্টের বিপরীতে, ক্লাসের উপাদানগুলি একটি render() ব্যবহার করে পদ্ধতি ReactDOM.render() Animal কম্পোনেন্ট পাস করার পরে এবং React এর কনস্ট্রাক্টরকে কল করার পরে এই পদ্ধতিটি চালু করা হয়। স্টেট তারপর আরম্ভ করা হয় এবং তারপর রেন্ডার পদ্ধতিটিকে আসলে পর্দায় সামগ্রী রাখার জন্য বলা হয়।

বাহ! এটি অনেক তথ্য।

শুধু মনে রাখবেন যে কার্যকরী উপাদানগুলি প্রতিক্রিয়া v. 16 এর আগে প্রাথমিকভাবে উপস্থাপনামূলক ছিল - তারা রাষ্ট্র পরিচালনা করেনি - তারা কেবল এটি প্রদর্শন করেছিল। ক্লাসের উপাদানগুলি আমাদের জন্য সমস্ত রাষ্ট্রীয় যুক্তি বিস্তারিত করে এবং প্রপস হিসাবে অন্যান্য উপাদানগুলিতে তথ্য প্রেরণ করে।

কার্যকর উপাদান এবং useState()

2018 সালে, React React Hooks এর ধারণা চালু করেছে . হুকগুলি একটি কার্যকরী উপাদানের ভিতরে জীবনচক্র পদ্ধতি এবং অবস্থা ব্যবহার করার একটি পরিষ্কার এবং সংক্ষিপ্ত উপায়।

বেশিরভাগ সবকিছুই আমরা এখন পর্যন্ত কভার করেছি সবকিছুর সাথে খুব মিল। আমাদের কিছু রাষ্ট্র আছে, আমাদের এটির সাথে জিনিসপত্র করতে হবে এবং আমাদের এটিকে অন্য কোথাও পাস করতে হবে। মূল উদ্দেশ্য একই। সিনট্যাক্স অনেক বেশি ক্লিনার - এটিতে অভ্যস্ত হওয়ার কিছুটা প্রয়োজন।

আমি যা করব তা হল এই সাইটটিকে বুকমার্ক করুন, অনুশীলন করুন এবং ক্লাসের উপাদানগুলির জন্য কিছু পুনরাবৃত্তি করুন, সত্যিই বুঝুন প্রতিক্রিয়াতে ডেটা প্রবাহ কীভাবে কাজ করে এবং তারপরে স্টেটফুল কার্যকরী উপাদানগুলি সম্পর্কে শেখা শেষ করতে এখানে ফিরে আসুন .

আমাদের আগে যে কোডটি ছিল তা দিয়ে শুরু করা যাক:

import React from 'react';
import ReactDOM from 'react-dom';
 
const Animal = (props) => {
           const element = <h1>My cat's name is {props.name}</h1>;
           return element;
      }
       const App = () => {
		const [ state, setState ] = useState('Marshmallow');
               return <Animal name={state}/>
 
       };
      const domContainer = document.querySelector('#root');
          ReactDOM.render(<App/>, domContainer);

আমাদের দুটি উপাদান রয়েছে, একটি প্রাণী এবং একটি অ্যাপ। দেখে মনে হচ্ছে অ্যাপ প্রাণীকে ফিরিয়ে দিচ্ছে এবং "মার্শম্যালো" এর মান সহ নাম নামক একটি প্রপ দিয়ে যাচ্ছে।

বিশ্বাস করুন বা না করুন, এটিকে কিছু রাষ্ট্রীয় যুক্তিতে রূপান্তর করতে আমাদের অনেক কিছু করতে হবে না। আসুন <অ্যাপ> উপাদানটি একবার দেখে নেওয়া যাক। আমরা এই পদক্ষেপগুলি অনুসরণ করতে যাচ্ছি:

import React, {useState} from 'react';

— এই লাইনটি আমাদের হুক আমদানি করবে, স্টেট ব্যবহার করবে।

const [ state, setState ] = useState('Marshmallow');

- এই লাইনটি আমাদের রাজ্যের সূচনা করে। রাজ্য এবং সেট স্টেট এখানে স্বেচ্ছাচারী শব্দ। আপনি যা খুশি নাম দিতে পারেন। মান কী তা অনুসারে তাদের নাম রাখার প্রথাগত।

- রাষ্ট্র আমাদের প্রকৃত রাষ্ট্র। প্রাথমিক অবস্থা useState() এর বন্ধনীর ভিতরে থাকে।

- setState এই.setState() এর অনুরূপ। এটি এমন একটি পদ্ধতি যা আমাদের আবেদনের মাধ্যমে যাত্রা করার সাথে সাথে আমাদের অবস্থা পরিবর্তন করবে।

               return <Animal name={state}/>

- "মার্শম্যালো" কে {state} দিয়ে প্রতিস্থাপন করুন। যখন আমাদের JSX-এ JavaScript লিখতে হয়, আমরা কোঁকড়া ধনুর্বন্ধনী ব্যবহার করি। এখানে কোঁকড়া ধনুর্বন্ধনী আমাদের ভেরিয়েবলে পাস করতে দেয়।

ক্লাসের উপাদানগুলির মধ্যে একটি বৈশিষ্ট্য যা সংজ্ঞায়িত করেছে, প্রতিক্রিয়া জীবনচক্র, এর বিভিন্ন পদ্ধতি সহ, একটি মৌলিক হুকে স্কিম করা হয়েছে যা সমস্ত পদ্ধতিকে এনক্যাপসুলেট করে! useEffect() হুক এটির মধ্যে থাকা প্রতিক্রিয়া উপাদানটিকে মাউন্ট, আপডেট এবং আনমাউন্ট করতে পারে৷

উপসংহার

রিঅ্যাক্ট v. 16 এর আগে, কার্যকরী উপাদানগুলি সম্পূর্ণরূপে একটি উপস্থাপনামূলক ভিউ লেয়ার হিসাবে ব্যবহৃত হত যেখানে কোনও স্টেটের ব্যবহার ছিল না শুধুমাত্র প্রপস হিসাবে যা ক্লাসের উপাদানগুলি থেকে পাস করা হয়েছিল। ক্লাসের উপাদানগুলি আবেদনের সমস্ত অবস্থা ধরে রাখে এবং ডেটা চারপাশে পাস করে। ক্লাসের উপাদানগুলি জীবন চক্রের পদ্ধতিগুলি ব্যবহার করেছে যা আমাদের প্রতিক্রিয়া উপাদানকে মাউন্ট, আপডেট এবং আনমাউন্ট করেছে। আমরা আরও দেখেছি যে React Hooks, React দ্বারা প্রকাশিত একটি নতুন প্যাটার্ন 16 সংস্করণ, কার্যকরী উপাদানগুলিকে রাষ্ট্রীয় হতে দেয় এবং এটির জীবনচক্র পদ্ধতির নিজস্ব সংস্করণ রয়েছে৷

রিঅ্যাক্ট হুকস আরও জনপ্রিয় হয়ে উঠলেও বিভিন্ন ধরণের উপাদানের সাথে পরিচিত হওয়া গুরুত্বপূর্ণ - লিগ্যাসি কোড সম্ভবত কিছু সময়ের জন্য ক্লাসের উপাদানগুলি ব্যবহার করবে এবং এখনও বুঝতে হবে যাতে আপনি এটির সাথে কাজ করতে পারেন!