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

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

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

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

import BigBox from './BigBox';

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

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

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

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

import './styles.css';

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

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

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

import MiddleBox from './MiddleBox';

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

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

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

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

import SmallBox from './SmallBox';

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

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

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

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

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

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

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

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

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

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

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

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

খালি কম্পোনেন্ট App-এ তৈরি করুন কম্পোনেন্ট Parent, এবং এতে কম্পোনেন্ট Daughter, এবং Daughter-এ কম্পোনেন্ট Grandson। কনটেক্সট ব্যবহার করে, App থেকে বয়সের ভ্যালু 42 পাঠান, এবং useContext ব্যবহার করে এটিকে Daughter কম্পোনেন্টে আউটপুট করুন।

এবং এখন Grandson কম্পোনেন্টে বয়সের ভ্যালু আউটপুট করুন, কিন্তু 2 দ্বারা ভাগ করে।