React-এ useContext কনটেক্সট হুক

এই পাঠে আমরা কনটেক্সট নিয়ে কাজ চালিয়ে যাব। এখন কম্পোনেন্টগুলির একটি ট্রি তৈরি করব। শুরুতে একটি আলাদা ফাইলে React কম্পোনেন্ট BigBox তৈরি করি:

BigBox.jsxfunction BigBox() {
  return (
    <p>bigbox</p>
  );
}

এটিকে ইম্পোর্ট করি এবং আমাদের মেইন কম্পোনেন্ট App-এ রাখি:

App.jsximport BigBox from './BigBox';

function App() {
  return (
    <BigBox />
  );
}

আরও স্পষ্টতার জন্য একটু স্টাইল যোগ করি div-গুলিতে। এর জন্য ফাইল তৈরি করি styles.css:

styles.cssdiv {
  border: 1px solid blue;
  margin: 10px;
  text-align: center;
  max-width: 300px;
}

এটিকে App.js-এ ইম্পোর্ট করতে ভুলব না:

App.jsximport './styles.css';

এখন একটি আলাদা ফাইলে কম্পোনেন্ট MiddleBox তৈরি করি:

MiddleBox.jsxfunction MiddleBox() {
  return (
    <p>middlebox</p>
  );
}

এবং এটিকে বড় বক্স BigBox-এর ভিতরে রাখি:

BigBox.jsximport MiddleBox from './MiddleBox';

function BigBox() {
  return (
    <div>
      <MiddleBox />
    </div>
  );
}

ছোট বক্স SmallBox-এর জন্যও একই কাজ করি:

SmallBox.jsxfunction SmallBox() {
  return (
    <p>I am ... </p>
  );
}

MiddleBox-এর ভিতরে দুটি这样的 বক্স রাখি:

MiddleBox.jsximport SmallBox from './SmallBox';

function MiddleBox() {
  return (
    <div>
      <SmallBox />
      <SmallBox />
    </div>
  );
}

আমরা ট্রি তৈরি করেছি। এবং এখন আমরা চাই আমাদের App থেকে SmallBox-এ স্ট্রিং ভ্যালু 'small box :)' পাঠাই, প্রপস ব্যবহার না করে, কনটেক্সট ব্যবহার করে (হয়তো আমাদের বক্স অ্যাপ্লিকেশনটি বিশাল আকার ধারণ করবে)।

কনটেক্সট ফাইল MyContext.js আমরা ইতিমধ্যে আগের পাঠে তৈরি করেছি এবং কানেক্ট করেছি।

পরবর্তী ধাপ যা আমরা করব - BigBox-কে কনটেক্সট প্রোভাইডার-তে র‍্যাপ করব, যা আমাদের কনটেক্সট অবজেক্ট MyContext-এর একটি প্রপার্টি। এখন এই কন্সট্রাকশনের মধ্যে আবদ্ধ সকল কম্পোনেন্ট (এবং এটি BigBox-এর মধ্যে নেস্টেড সমস্ত বক্স) কনটেক্সট অ্যাক্সেস পাবে এবং কনটেক্সটের পরিবর্তনে সাবস্ক্রাইব করতে পারবে। কনটেক্সটের ভ্যালু হিসেবে আমরা কাঙ্ক্ষিত 'small box :)' পাস করি:

App.jsxfunction App() {
  return (
    <MyContext.Provider value="small box :)">
      <BigBox />
    </MyContext.Provider>
  );
}

এবং এখন কনটেক্সটের ভ্যালু পড়া বাকি। আমরা এটি SmallBox-এ ব্যবহার করতে চেয়েছিলাম, সুতরাং সেখানে কনটেক্সট ফাইল MyContext.js এবং হুক useContext ইম্পোর্ট করি:

SmallBox.jsximport { useContext } from 'react';
import { MyContext } from './MyContext.js';

useContext ব্যবহার করে কনটেক্সটের ভ্যালু name ভেরিয়েবলে পড়ি:

SmallBox.jsxfunction SmallBox() {
  const name = useContext(MyContext);
  
  return (
    <div>
      <p>I am ... </p>
    </div>
  );
}

আমরা SmallBox-কে এই কনটেক্সটে সাবস্ক্রাইব করেছি এবং, যদি এটি পরিবর্তিত হয়, এই কম্পোনেন্টটিও আপডেট হবে।

এবং, শেষ পর্যন্ত, ভেরিয়েবলের ভ্যালু name এলিপসিসের জায়গায় বসাই:

SmallBox.jsxfunction SmallBox() {
  const name = useContext(MyContext);
  
  return (
    <div>
      <p>I am {name} </p>
    </div>
  );
}