Web Development Context API এবং Hooks এর মাধ্যমে State Management গাইড ও নোট

Framework7 একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা মোবাইল এবং ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টে ব্যবহৃত হয়। যখন আপনি Framework7 কে React এর সাথে ব্যবহার করেন, তখন React এর Context API এবং Hooks ব্যবহার করে স্টেট ম্যানেজমেন্ট আরও কার্যকর এবং সহজ হয়। এই লেখায় আমরা দেখবো কিভাবে Context API এবং Hooks এর মাধ্যমে Framework7-React অ্যাপ্লিকেশনে স্টেট ম্যানেজমেন্ট করা যায়।

১. Context API কী?

Context API হল React এর একটি বিল্ট-ইন ফিচার যা আপনাকে প্রপস ড্রিলিং (Props Drilling) ছাড়াই ডিপলি নেস্টেড কম্পোনেন্টগুলির মধ্যে ডেটা শেয়ার করতে দেয়। এটি গ্লোবাল স্টেট ম্যানেজমেন্টের জন্য উপযোগী, যেমন ইউজারের অথেনটিকেশন স্টেট, থিম সেটিংস ইত্যাদি।

২. Hooks কী?

Hooks হল React এর ফিচার যা ফাংশনাল কম্পোনেন্টগুলিতে স্টেট এবং অন্যান্য React ফিচার ব্যবহার করার সুযোগ দেয়। প্রধানত আমরা useState, useEffect, এবং useContext Hooks ব্যবহার করি স্টেট ম্যানেজমেন্ট এবং সাইড ইফেক্ট হ্যান্ডল করার জন্য।

৩. Context API এবং Hooks এর মাধ্যমে স্টেট ম্যানেজমেন্ট কিভাবে করবেন

৩.১. প্রজেক্ট সেটআপ

প্রথমে নিশ্চিত করুন যে আপনার Framework7-React প্রজেক্ট সেটআপ করা আছে। যদি না করে থাকেন, তাহলে নিচের ধাপগুলো অনুসরণ করুন:

# Framework7 CLI ইনস্টল করা
npm install framework7-cli -g

# নতুন Framework7-React প্রজেক্ট তৈরি করা
framework7 create

প্রজেক্ট তৈরির সময় React এবং Webpack নির্বাচন করুন।

৩.২. Context তৈরি করা

প্রথমে একটি নতুন Context তৈরি করুন। ধরুন আমরা একটি থিম কনটেক্সট তৈরি করতে চাই।

src/contexts/ThemeContext.js

import React, { createContext, useState } from 'react';

// Context তৈরি করা
export const ThemeContext = createContext();

// Provider কম্পোনেন্ট
export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light'); // ডিফল্ট থিম

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

৩.৩. Provider যোগ করা

এখন ThemeProvider কে আপনার অ্যাপের মূল অংশে যুক্ত করুন যাতে সমস্ত কম্পোনেন্ট এই Context ব্যবহার করতে পারে।

src/App.jsx

import React from 'react';
import Framework7 from 'framework7/lite-bundle';
import { App as Framework7App, View } from 'framework7-react';
import { ThemeProvider } from './contexts/ThemeContext';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';

const App = () => (
  <ThemeProvider>
    <Framework7App>
      <View main url="/" />
      {/* রাউট কনফিগারেশন */}
    </Framework7App>
  </ThemeProvider>
);

export default App;

৩.৪. Context ব্যবহার করা

এখন আমরা useContext Hook ব্যবহার করে থিম স্টেট এবং টগল ফাংশনটি যেকোনো কম্পোনেন্টে ব্যবহার করবো।

src/pages/HomePage.jsx

import React, { useContext } from 'react';
import { Page, Navbar, Button } from 'framework7-react';
import { ThemeContext } from '../contexts/ThemeContext';

const HomePage = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <Page>
      <Navbar title="Home" />
      <div className="page-content">
        <p>বর্তমান থিম: {theme}</p>
        <Button onClick={toggleTheme}>থিম পরিবর্তন করুন</Button>
      </div>
    </Page>
  );
};

export default HomePage;

৩.৫. স্টাইল অনুযায়ী থিম পরিবর্তন

থিম অনুযায়ী স্টাইল পরিবর্তন করতে, আপনি Conditionals ব্যবহার করতে পারেন বা CSS ক্লাস টগল করতে পারেন।

src/App.jsx

import React, { useContext } from 'react';
import Framework7 from 'framework7/lite-bundle';
import { App as Framework7App, View } from 'framework7-react';
import { ThemeProvider, ThemeContext } from './contexts/ThemeContext';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';

const MainApp = () => {
  const { theme } = useContext(ThemeContext);

  return (
    <Framework7App theme={theme}>
      <View main url="/" />
      {/* রাউট কনফিগারেশন */}
    </Framework7App>
  );
};

const App = () => (
  <ThemeProvider>
    <MainApp />
  </ThemeProvider>
);

export default App;

এখন, theme স্টেট অনুযায়ী Framework7 এর থিম পরিবর্তন হবে।

৪. আরও উদাহরণ: ইউজার অথেনটিকেশন স্টেট ম্যানেজমেন্ট

৪.১. Context তৈরি করা

src/contexts/AuthContext.js

import React, { createContext, useState } from 'react';

// Context তৈরি করা
export const AuthContext = createContext();

// Provider কম্পোনেন্ট
export const AuthProvider = ({ children }) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const login = () => {
    setIsAuthenticated(true);
  };

  const logout = () => {
    setIsAuthenticated(false);
  };

  return (
    <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

৪.২. Provider যোগ করা

src/App.jsx

import React from 'react';
import Framework7 from 'framework7/lite-bundle';
import { App as Framework7App, View } from 'framework7-react';
import { ThemeProvider } from './contexts/ThemeContext';
import { AuthProvider } from './contexts/AuthContext';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';

const App = () => (
  <ThemeProvider>
    <AuthProvider>
      <Framework7App>
        <View main url="/" />
        {/* রাউট কনফিগারেশন */}
      </Framework7App>
    </AuthProvider>
  </ThemeProvider>
);

export default App;

৪.৩. Context ব্যবহার করা

src/pages/HomePage.jsx

import React, { useContext } from 'react';
import { Page, Navbar, Button } from 'framework7-react';
import { AuthContext } from '../contexts/AuthContext';

const HomePage = () => {
  const { isAuthenticated, login, logout } = useContext(AuthContext);

  return (
    <Page>
      <Navbar title="Home" />
      <div className="page-content">
        <p>ইউজার লগইন স্টেট: {isAuthenticated ? 'লগইন করেছেন' : 'লগআউট'}</p>
        {isAuthenticated ? (
          <Button onClick={logout}>লগআউট করুন</Button>
        ) : (
          <Button onClick={login}>লগইন করুন</Button>
        )}
      </div>
    </Page>
  );
};

export default HomePage;

৫. ব্যবহারের সুবিধাসমূহ

• গ্লোবাল স্টেট এক্সেস: Context API ব্যবহার করে আপনি যেকোনো কম্পোনেন্ট থেকে গ্লোবাল স্টেট অ্যাক্সেস করতে পারেন, যা Props ড্রিলিং এর সমস্যা দূর করে।
• সহজ এবং পরিষ্কার কোড: Hooks এর মাধ্যমে স্টেট ম্যানেজমেন্ট সহজ এবং কোড ক্লিন থাকে।
• রিয়েকটিভ স্টেট: State পরিবর্তনের সাথে সাথে কম্পোনেন্টগুলো স্বয়ংক্রিয়ভাবে রি-রেন্ডার হয়, যা ইউজার ইন্টারফেসকে ডায়নামিক এবং ইন্টারঅ্যাকটিভ করে তোলে।
• পুনরায় ব্যবহারযোগ্য লজিক: Custom Hooks তৈরি করে আপনি স্টেট ম্যানেজমেন্ট লজিক পুনরায় ব্যবহার করতে পারেন।

৬. অতিরিক্ত টিপস

• বেশি স্টেট শেয়ার না করা: Context API ব্যাবহার করার সময় শুধুমাত্র প্রয়োজনীয় স্টেট শেয়ার করুন। অতিরিক্ত স্টেট শেয়ার করলে কম্পোনেন্টের পারফরম্যান্স কমে যেতে পারে।
• Custom Hooks ব্যবহার: যদি স্টেট ম্যানেজমেন্ট জটিল হয়, তাহলে Custom Hooks তৈরি করুন যা আপনার স্টেট ম্যানেজমেন্ট লজিককে মোডুলার এবং পুনরায় ব্যবহারযোগ্য করে তোলে।
• Performance Optimization: Context API ব্যাবহার করার সময়, প্রতিটি রি-রেন্ডার হওয়া কম্পোনেন্টের উপর নজর রাখুন এবং মেমোাইজেশন টেকনিক (যেমন React.memo) ব্যবহার করুন।

উদাহরণ প্রজেক্ট স্ট্রাকচার

/src
  /components
    Header.jsx
    Footer.jsx
  /contexts
    ThemeContext.js
    AuthContext.js
  /pages
    HomePage.jsx
    AboutPage.jsx
  App.jsx
  index.jsx

Context API এবং Hooks এর মাধ্যমে Framework7-React অ্যাপ্লিকেশনে স্টেট ম্যানেজমেন্ট করা সহজ এবং কার্যকর হয়। এটি গ্লোবাল স্টেট শেয়ার করার জন্য উপযোগী এবং কোডের পুনরায় ব্যবহারযোগ্যতা বৃদ্ধি করে। উপরের ধাপগুলো অনুসরণ করে আপনি আপনার Framework7-React অ্যাপ্লিকেশনে Context API এবং Hooks ব্যবহার করে স্টেট ম্যানেজমেন্ট কার্যকরভাবে সম্পাদন করতে পারেন।

অতিরিক্ত রিসোর্স

• React Context API Documentation
• React Hooks Documentation
• Framework7 React Documentation
• Official React Tutorial