React ফান্ডামেন্টাল প্রশ্ন ও উত্তর

React এর ফান্ডামেন্টাল বা মৌলিক প্রশ্ন সাধারণত React-এর মূল ধারণা, কাজের পদ্ধতি এবং গুরুত্বপূর্ণ কনসেপ্ট নিয়ে হয়। নিচে কিছু গুরুত্বপূর্ণ মৌলিক প্রশ্ন ও তাদের সংক্ষিপ্ত উত্তর দেওয়া হলো—

---

1. React কি?

উত্তর: React হলো একটি JavaScript লাইব্রেরি, যা UI (User Interface) তৈরি করতে ব্যবহৃত হয়। এটি Facebook দ্বারা ডেভেলপ করা হয়েছে এবং declarative, component-based ও efficient UI বিল্ড করতে সাহায্য করে।

2. React-এর মূল বৈশিষ্ট্য কী কী?

উত্তর:

• Component-Based Architecture – UI কে ছোট ছোট পুনঃব্যবহারযোগ্য কম্পোনেন্টে ভাগ করা যায়।
• Virtual DOM – React আসল DOM পরিবর্তনের পরিবর্তে Virtual DOM ব্যবহার করে পারফরম্যান্স বৃদ্ধি করে।
• Unidirectional Data Flow – ডেটা একদিকে প্রবাহিত হয়, যা ডাটা ম্যানেজমেন্ট সহজ করে।
• JSX (JavaScript XML) – HTML-এর মতো সিনট্যাক্স ব্যবহার করে UI তৈরি করা যায়।
• State and Props – ডাটা ম্যানেজমেন্টের জন্য স্টেট এবং প্রপস ব্যবহার করা হয়।

3. JSX কী? এটি কেন ব্যবহার করা হয়?

উত্তর: JSX (JavaScript XML) হলো একটি JavaScript সিনট্যাক্স এক্সটেনশন, যা HTML-এর মতো দেখায় এবং JavaScript কোডের মধ্যে UI ডিফাইন করতে সাহায্য করে। এটি React.createElement() ফাংশনের চেয়ে সহজ এবং পড়তে সুবিধাজনক।

4. Component কত প্রকার ও কী কী?

উত্তর: React-এ প্রধানত দুই ধরনের কম্পোনেন্ট রয়েছে—

1. Functional Component – এটি একটি সাধারণ JavaScript ফাংশন, যা return স্টেটমেন্টের মাধ্যমে JSX রেন্ডার করে।
2. Class Component – এটি ES6 ক্লাস ব্যবহার করে তৈরি হয় এবং render() মেথডের মাধ্যমে JSX রেন্ডার করে।

5. Props কী?

উত্তর: Props (Properties) হলো Read-Only ডাটা, যা parent component থেকে child component-এ পাঠানো হয়। এটি immutable এবং কম্পোনেন্টকে dynamic ও পুনঃব্যবহারযোগ্য করে তোলে।

6. State কী?

উত্তর: State হলো Component-এর Local ডাটা স্টোরেজ, যা Component-এর ভিতরে পরিবর্তন করা যায়। এটি UI আপডেট করতে ব্যবহৃত হয়।

7. State এবং Props-এর মধ্যে পার্থক্য কী?

Props	State
External data (Parent থেকে Child-এ পাঠানো হয়)	Internal data (Component-এর মধ্যে ব্যবহৃত হয়)
Read-only (পরিবর্তন করা যায় না)	Mutable (পরিবর্তন করা যায়)
Functional এবং Class Component-এ ব্যবহার করা হয়	শুধুমাত্র Class Component-এ ব্যবহার করা হত, কিন্তু এখন useState Hook দিয়ে Functional Component-এও ব্যবহার করা যায়

8. Virtual DOM কী এবং এটি কীভাবে কাজ করে?

উত্তর: Virtual DOM হলো React-এর একটি পারফরম্যান্স অপটিমাইজেশন টেকনিক, যেখানে আসল DOM-এর পরিবর্তে একটি লাইটওয়েট ভার্চুয়াল কপি তৈরি করা হয়। যখন কোন পরিবর্তন হয়, তখন React প্রথমে নতুন ভার্চুয়াল DOM তৈরি করে, পুরানো ভার্চুয়াল DOM-এর সাথে তুলনা করে (diffing algorithm), এবং শুধুমাত্র পরিবর্তিত অংশকে আসল DOM-এ আপডেট করে।

9. React Hook কী?

উত্তর: React Hook হলো Functional Component-এ state এবং lifecycle মেথড ব্যবহারের জন্য React 16.8 তে যুক্ত করা একটি ফিচার।

প্রধান React Hook গুলো হলো:

• useState – State পরিচালনার জন্য ব্যবহৃত হয়।
• useEffect – Side-effect পরিচালনার জন্য ব্যবহৃত হয়।
• useContext – Context API ব্যবহার করে ডাটা শেয়ার করার জন্য ব্যবহৃত হয়।

10. React Router কী?

উত্তর: React Router হলো একটি লাইব্রেরি, যা Single Page Application (SPA)-তে বিভিন্ন পৃষ্ঠার মধ্যে নেভিগেশন পরিচালনা করতে সাহায্য করে। এটি client-side routing করে।

11. React Lifecycle Method কী?

উত্তর: Lifecycle Method হলো Component-এর জীবনের বিভিন্ন ধাপ (Mounting, Updating, Unmounting) পরিচালনার জন্য ব্যবহৃত মেথড।

প্রধান Lifecycle মেথড গুলো হলো—

• componentDidMount() – Component প্রথমবার লোড হলে চলে।
• componentDidUpdate() – Component আপডেট হলে চলে।
• componentWillUnmount() – Component মুছে গেলে চলে।

12. useEffect কী?

উত্তর: useEffect হলো একটি React Hook, যা Functional Component-এ Lifecycle Method (componentDidMount, componentDidUpdate, componentWillUnmount)-এর বিকল্প হিসেবে কাজ করে। এটি API কল, DOM manipulation, Event listener সংযুক্ত করা ইত্যাদির জন্য ব্যবহৃত হয়।

13. Redux কী এবং কেন ব্যবহার করা হয়?

উত্তর: Redux হলো একটি স্টেট ম্যানেজমেন্ট লাইব্রেরি, যা React অ্যাপে গ্লোবাল স্টেট ম্যানেজ করতে সাহায্য করে। এটি একক store ব্যবহার করে state সংরক্ষণ করে এবং predictable state changes নিশ্চিত করে।

14. React Performance অপটিমাইজ করার জন্য কী কী পদ্ধতি আছে?

উত্তর:

• React.memo() ব্যবহার করা।
• useCallback() এবং useMemo() Hook ব্যবহার করা।
• Lazy Loading এবং Code Splitting করা।
• Virtualization প্রযুক্তি ব্যবহার করা (React Window)।
• State এবং Props সঠিকভাবে ব্যবস্থাপনা করা।

15. React Context API কী?

উত্তর: Context API হলো React-এর একটি বিল্ট-ইন ফিচার, যা props drilling ছাড়াই কম্পোনেন্টের মধ্যে ডাটা শেয়ার করতে সাহায্য করে। এটি useContext Hook-এর মাধ্যমে ব্যবহৃত হয়।