React Rendaring List Bangla

React Rendering List কি, React Rendaring List কিভাবে কাজ করে। React Rendaring List এ map() ব্যবহার করে কিভাবে data rendering করা হয়। React Rendaring List এ filter এর ব্যবহার।

এই টিউটোরিয়ালে আপনাদেরকে উদাহরণসহ বুজিয়ে দেয়া হবে, React Rendaring List কাকে বলে, React Rendaring List কিভাবে কাজ করে। React Rendaring List এ  map() ও filter() এর ব্যবহার।

একটা data collection থেকে যদি আপনাকে অনেকগুলো similar component শো করতে হয়, তখন কি করবেন? তখন আমরা javaScript array method ব্যবহার করব, data গুলো ম্যানেজ করার জন্য। array থেকে data গুলো filter ও transform করার জন্য filter() ও map() method ব্যবহার করব।

সূচিপত্রঃ React Rendaring List Bangla

• javaScript map() ব্যবহার করে কিভাবে array থেকে component গুলো render করব।
• javaScript filter() ব্যবহার করে কিভাবে specific component render করব। 
• কখন এবং কিভাবে React keys ব্যবহার করব।

Array থেকে data render করা

ধরুন, আপনার কাছে content এর একটা লিস্ট আছে। 

<ul>

  <li>jahir: mathematician</li>

  <li>forhad: chemist</li>

  <li>sayed: astrophysicist</li>

</ul>

আমাদের কাছে যদি কোন List of data থাকে, তাহলে ঐ data গুলো আমরা  array বা object এ রাখব, এরপর এগুলোর উপর map() বা filter() method apply করব। যেমনঃ 

১. Data গুলো Array তে assign করব।

const people = [

  'jahir: mathematician',

  'forhad: chemist',

  'sayed: astrophysicist'

];

২. Array তে map করে নতুন array listItems এ data রাখব 

const listItems = people.map(person => <li>{person}</li>);

৩. listItems কে <ul> দিয়ে wrap করে return করব।

return <ul>{listItems}</ul>;

App.jsx final code:

const people = [

  'jahir: mathematician',

  'forhad: chemist',

  'sayed: astrophysicist'

];

export default function List() {

  const listItems = people.map(person =>

    <li>{person}</li>

  );

  return <ul>{listItems}</ul>;

}

এগুলোকে আরো সুন্দরভাবে রাখা যায়। যেমনঃ

const people = [{

  id: 0,

  name: 'jahir',

  profession: 'mathematician',

}, {

  id: 1,

  name: 'forhad',

  profession: 'chemist',

},  {

  id: 2,

  name: 'Sayed',

  profession: 'astrophysicist',

}];

এখানে যদি শুধু'chemist' দেরকে শো করাতে চাই, তাহলে filtr() method use করব। filter শুধু 'chemist' দেরকে return করবে। filter true or false return করে। প্রত্যেকটি list of item এর জন্য। যেমনঃ 

১. শুধু 'chemis দেরকে নিয়ে নতুন একটি array তৈরী করব, filter() কে কল করে'

const chemists = people.filter(person =>

  person.profession === 'chemist'

);

২. chemists এর উপর map apply করব।

const listItems = chemists.map(person =>

  <li>

     <img

       src={getImageUrl(person)}

       alt={person.name}

     />

     <p>

       <b>{person.name}:</b>

       {' ' + person.profession + ' '}

       known for {person.accomplishment}

     </p>

  </li>

);

৩. listItems কে return করা

return <ul>{listItems}</ul>;

আমাদের এখানে মোট ৩টি ফাইল হবে, App.js data.js utils.js, তিনটি ফাইলের পুরো কোড এখানে দেয়া হলো, আপনারা মিলিয়ে নিবেন

App.js

import { people } from './data.js';

import { getImageUrl } from './utils.js';

export default function List() {

  const chemists = people.filter(person =>

    person.profession === 'chemist'

  );

  const listItems = chemists.map(person =>

    <li key={person.id}>

      <img

        src={getImageUrl(person)}

        alt={person.name}

      />

      <p>

        <b>{person.name}:</b>

        {' ' + person.profession + ' '}

        known for {person.accomplishment}

      </p>

    </li>

  );

  return <ul>{listItems}</ul>;

}

data.js

export const people = [{

  id: 0,

  name: 'jahir',

  profession: 'mathematician',

  accomplishment: 'spaceflight calculations',

  imageId: 'MK3eW3A'

}, {

  id: 1,

  name: 'forhad',

  profession: 'chemist',

  accomplishment: 'discovery of Arctic ozone hole',

  imageId: 'mynHUSa'

},  {

  id: 2,

  name: 'Sayed',

  profession: 'astrophysicist',

  accomplishment: 'white dwarf star mass calculations',

  imageId: 'lrWQx8l'

}];

utils.js

export function getImageUrl(person) {

  return (

    'https://i.imgur.com/' +

    person.imageId +

    's.jpg'

  );

}

Note: Arrow function expression কে implicitly return করে (=>) এই arrow sign এর পরে, তাই আমাদেরকে return statement লিখতে হয়না।

const listItems = chemists.map(person =>

  <li>...</li> // Implicit return!

);

যদি {} curly braceদিয়ে লেখা হয় তাহলে => return লিখতে হয়। 

const listItems = chemists.map(person => { // Curly brace

  return <li>...</li>;

});

arrow function এ (=>) arrow sign এর পর {} curly brace দিলে একাধিক লাইন লেখা যায় এবং return লিখতে হয়। যদি return লিখতে ভুলে যায়, তাহলে কোন কিছু return হবেনা।

array item এ string অথবা numberদিয়ে key দিতে হবে, key list কে uniquely identify করে।

<li key={person.id}>...</li>

যখন key দেয়া হয়, তখন কোন item insert delete হলেও সমস্যা হবেনা 

item এর key on the fly তৈরী করা যাবেনা।

এখন পর্যন্ত সব ফাইলের ফাইনাল কোডঃ

App.js

import { people } from './data.js';

import { getImageUrl } from './utils.js';

export default function List() {

  const listItems = people.map(person =>

    <li key={person.id}>

      <img

        src={getImageUrl(person)}

        alt={person.name}

      />

      <p>

        <b>{person.name}</b>

          {' ' + person.profession + ' '}

          known for {person.accomplishment}

      </p>

    </li>

  );

  return <ul>{listItems}</ul>;

}

data.js

export const people = [{

  id: 0,

  name: 'jahir',

  profession: 'mathematician',

  accomplishment: 'spaceflight calculations',

  imageId: 'MK3eW3A'

}, {

  id: 1,

  name: 'forhad',

  profession: 'chemist',

  accomplishment: 'discovery of Arctic ozone hole',

  imageId: 'mynHUSa'

},  {

  id: 2,

  name: 'Sayed',

  profession: 'astrophysicist',

  accomplishment: 'white dwarf star mass calculations',

  imageId: 'lrWQx8l'

}];

utils.js

export function getImageUrl(person) {

  return (

    'https://i.imgur.com/' +

    person.imageId +

    's.jpg'

  );

}

key কোথায় পাওয়া যায়ঃ

১. database থেকে key পাওয়া যায়।

২. locally crypto.randomUUID() দিয়ে key/id তৈরী করা যায়।

Rules of Keysঃ

১. keys ইউনিক হতে হবে sibling এর মধ্যে। একই key অন্য array তে ব্যবহার করা যাবে।

২. rendering এর সময় key তৈরী করা যাবেনা।

React এ keys কেন দরকারঃ

ধরুন, আপনার কম্পিউটারের ডেস্কটপে কিছু ফাইল আছে, ফাইলগুলোর নাম নেই, শুধু order করে সাজানো আছে। এখন কোন ফাইল যদি ডিলেট হয়ে যায়, তাহলে কোন ফাইল ডিলেট হয়েছে আমরা শিউর বলতে পারবনা। কারণ একটা ফাইল ডিলেট হলে সেখানে অন্য ফাইল ডুকে যায়। 

একইভাবে array এর index ও একই। যদি কোন data insert হয়, অথবা remove হয়, তাহলে index এ পরিবর্তন হয়। কিন্তু  key দিয়ে লিখলে কোন data অবস্থান পরিবর্তন হলেও কোন সমস্যা হয়না।

শেষ কথাঃ React Rendaring List Bangla

আজকের এই টিউটোরিয়ালে আমরা দেখেছি React Rendaring List Bangla টিউটোরিয়ালটি। এখানে আমরা শিখেছি React Rendaring List কি, React Rendaring List কিভাবে কাজ করে। React Rendaring List এ map() ব্যবহার করে কিভাবে data rendering করা হয়। React Rendaring List এ filter এর ব্যবহার।