React IQ (PHero)

সাক্ষাৎকার প্রশ্নোত্তর (বাংলা অনুবাদ)
১. সাক্ষাৎকার প্রস্তুতি (Mock Interview Preparation)

প্রশ্ন: নিজের সম্পর্কে কিছু বলুন।
উত্তর: আমার নাম রুহুল আমিন সুজন এবং আমার বয়স ২৩ বছর। আমি ছয় মাস আগে সোনারগাঁও বিশ্ববিদ্যালয় থেকে কম্পিউটার সায়েন্স ও ইঞ্জিনিয়ারিং-এ বিএসসি ডিগ্রি অর্জন করেছি। আমার সিজিপিএ ৪.০০ এর মধ্যে ৩.৬। আমি ওয়েব ডেভেলপমেন্টে কাজ করতে ভালোবাসি এবং প্রতিদিন নতুন কিছু শেখার চেষ্টা করি। আমি প্রোগ্রামিং হিরো থেকে সফলভাবে MERN Stack কোর্স সম্পন্ন করেছি। আমি ওয়েব ডেভেলপার হিসেবে আমার কাজকে গুরুত্বের সাথে নেই, যার মানে এই যে, আমি সব সময় নিজেকে আপডেট রাখার চেষ্টা করি এই দ্রুত পরিবর্তনশীল ইন্ডাস্ট্রিতে। আমি সব সময় উদ্যমী এবং নতুন স্কিল শিখতে আগ্রহী।

প্রশ্ন: আপনার সেরা প্রজেক্ট কোনটি? এর প্রধান ফিচারগুলো কী? এটি করতে গিয়ে আপনি কী কী চ্যালেঞ্জ ফেস করেছেন?
উত্তর: আমার সেরা প্রজেক্ট হচ্ছে 'Parts Bazar'। এই প্রজেক্টে দুটি ড্যাশবোর্ড রয়েছে - একটি ইউজার ড্যাশবোর্ড এবং অপরটি অ্যাডমিন ড্যাশবোর্ড। ইউজাররা পণ্য কিনতে পারে এবং তাদের অর্ডার দেখতে পারে। তারা যেকোনো আন্তর্জাতিক ক্রেডিট কার্ড ব্যবহার করে পেমেন্ট করতে পারে। অ্যাডমিন সব ইউজার দেখতে পারে, নতুন অ্যাডমিন বানাতে পারে, পণ্য যোগ, আপডেট ও ডিলিট করতে পারে এবং সব অর্ডার ও পেমেন্ট স্ট্যাটাস দেখতে পারে। যেসব অর্ডার পেমেন্ট হয়নি, অ্যাডমিন তা ডিলিট করতে পারে। আমি JWT টোকেন নিয়ে সমস্যায় পড়েছিলাম। প্রথমে টোকেন তৈরি করতে পারছিলাম না এবং দুইদিন ধরে সমস্যাটা সমাধান করতে পারিনি। পরে টিউটোরিয়াল দেখি এবং ডকুমেন্টেশন পড়ে আমি সমস্যার সমাধান করি।

প্রশ্ন: আমরা কেন আপনাকে নিয়োগ দিব?
উত্তর: আমি মনে করি আমার ভালো একাডেমিক ব্যাকগ্রাউন্ড এবং যেসব স্কিল ও অভিজ্ঞতা আপনারা খুঁজছেন তা আমার মধ্যে রয়েছে। যদি আমি সুযোগ পাই, তবে আমি নিজের দক্ষতা তৈরি করার জন্য মনোযোগ দিয়ে কাজ করবো, যা আমার জন্য এবং আপনার প্রতিষ্ঠানের জন্য উপকারী হবে।
প্রশ্ন: আপনার স্যালারি প্রত্যাশা কত?
উত্তর: একজন ফ্রেশার হিসেবে আমার প্রথম অগ্রাধিকার হচ্ছে একটি চাকরি পাওয়া এবং ব্যবহারিকভাবে আমার জ্ঞান ও দক্ষতা উন্নত করা। আমি কোম্পানির নীতিমালা অনুযায়ী বেতন প্রত্যাশা করি এবং এতে আমি একমত।

প্রশ্ন: আমাদের জন্য আপনার কোনো প্রশ্ন আছে কি?
উত্তর: ১. আপনাদের অফিসে কি চা বা কফি পাওয়া যায়?
২. যদি আমি এই পজিশনের জন্য নির্বাচিত হই, তাহলে প্রথম দুই মাসে আপনি আমার কাছ থেকে কী প্রত্যাশা করবেন?
৩. এখন পর্যন্ত আমার পারফরম্যান্স বিবেচনায়, যদি আমি নির্বাচিত হই তাহলে কোন দিকগুলোতে উন্নতি করা উচিত? আর যদি না হই তাহলে ভবিষ্যতে সফল হওয়ার জন্য আপনি কী পরামর্শ দিবেন?

প্রশ্ন: আপনার দুর্বলতা কী?
উত্তর: রাতে দেরি করে ঘুমানো আমার একটি খারাপ অভ্যাস।

২. HTML

প্রশ্ন: HTML4 এবং HTML5 এর মধ্যে পার্থক্য কী?

উত্তর:
১. <audio>, <video>, <header>, <footer>, <canvas>, <article> ইত্যাদি ট্যাগ HTML5-এ সাপোর্ট করে, কিন্তু HTML4-এ এসব সাপোর্ট নেই।
২. HTML4-এ মাল্টিমিডিয়া সাপোর্টিং ট্যাগ নেই, কিন্তু HTML5 মাল্টিমিডিয়া কন্টেন্ট সাপোর্ট করে।
৩. HTML4 ক্লায়েন্ট-সাইড ডেটা সংরক্ষণে ক্যাশ ব্যবহার করলেও HTML5 web storage, web SQL, ও application cache ব্যবহার করে।
৪. HTML5 তে ভুল কোড হ্যান্ডলিং আরও ভালোভাবে করা যায়, HTML4 তে তেমন না।

প্রশ্ন: HTML-এ semantic ট্যাগ কী? কিছু উদাহরণ দিন।

উত্তর:
Semantic ট্যাগ এমন একটি ট্যাগ যা তার অর্থ স্পষ্ট করে, যেমন: <article>, <header>, <footer>, <nav>, <section>।
অপরদিকে

ও হলো non-semantic, কারণ এগুলো কনটেন্টের মানে প্রকাশ করে না।

প্রশ্ন: Article, div, section, nav, aside এর উদ্দেশ্য কী?

উত্তর:
সবগুলোই semantic ট্যাগ। এর মূল উদ্দেশ্য হলো পেজের কনটেন্টের গঠন বা অর্থ ব্রাউজার এবং ডেভেলপারদের জন্য স্পষ্ট করা।

প্রশ্ন: Meta tag কেন ব্যবহার করবেন?

উত্তর:
Meta tag HTML ডকুমেন্ট সম্পর্কে অতিরিক্ত তথ্য (metadata) সংরক্ষণ করে।
এটি সার্চ ইঞ্জিন, ব্রাউজার এবং অন্যান্য ওয়েব সার্ভিসের জন্য গুরুত্বপূর্ণ।
যেমন: ক্যারেক্টার সেট, কীওয়ার্ড, লেখক, এবং ভিউপোর্ট সেটিংস নির্ধারণ করা।

প্রশ্ন: inline, inline-block এবং block উপাদানের মধ্যে পার্থক্য কী?

উত্তর:

• inline: height/width নির্ধারণ করা যায় না; কনটেন্ট অনুযায়ী সাইজ হয়।
• inline-block: height/width নির্ধারণ করা যায় এবং এটি একটি লাইনে থাকে।
• block: নতুন লাইনে শুরু হয়, পুরো প্রস্থ জুড়ে স্থান নেয়, height/width নির্ধারণ করা যায়।

প্রশ্ন: strong, b, bold, em, i - এদের মধ্যে পার্থক্য কী?

উত্তর:

• <b> এবং <i> স্টাইলিং ট্যাগ – সরাসরি bold ও italic করে।
• <strong> এবং <em> semantic ট্যাগ – গুরুত্বপূর্ণ বা জোর দিয়ে বোঝাতে ব্যবহৃত হয়, স্টাইল CSS দিয়ে নিয়ন্ত্রণযোগ্য।

প্রশ্ন: HTML-এ properties এবং attributes এর মধ্যে পার্থক্য কী?

উত্তর:

• Attribute: HTML নির্ধারণ করে।
• Property: DOM দ্বারা নির্ধারিত।
• Attribute এর মান স্থির; Property এর মান পরিবর্তনশীল।

প্রশ্ন: Viewport কী?

উত্তর:
Viewport হচ্ছে ব্রাউজারে দৃশ্যমান ওয়েব পেজের এলাকা, যা ডিভাইস ভেদে ভিন্ন হতে পারে।

প্রশ্ন: Audio এবং Video tag কি ব্যবহার করেছেন? কীভাবে কাজ করে?

উত্তর:
হ্যাঁ, ব্যবহার করেছি। <audio> ও <video> ট্যাগের মাধ্যমে মিডিয়া যুক্ত করা যায়। src অ্যাট্রিবিউটে ফাইল সোর্স দিতে হয়, controls অ্যাট্রিবিউট ব্যবহার করলে ইউজার প্লে/পজ করতে পারে।

প্রশ্ন: Hyperlink কী? কোন ট্যাগ ও অ্যাট্রিবিউট ব্যবহার করবেন?

উত্তর:
হাইপারলিঙ্ক হলো একটি লিংক যা ক্লিক করলে ব্যবহারকারী অন্য পৃষ্ঠায় যেতে পারে।
ট্যাগ: <a>
অ্যাট্রিবিউট: href (লিংকের গন্তব্য নির্দেশ করে)।

প্রশ্ন: HTML elements এবং tags এর মধ্যে পার্থক্য কী?

উত্তর:

• Tag: <p>, <div> ইত্যাদি, HTML এর গঠন।
• Element: Tag সহ কনটেন্ট, যেমন <p>Text</p>।

প্রশ্ন: charset কী এবং কেন ব্যবহার করবেন?

উত্তর:
charset HTML ডকুমেন্টের ক্যারেক্টার এনকোডিং নির্ধারণ করে। সাধারণত UTF-8 ব্যবহার করা হয়, যা বিশ্বের প্রায় সব ভাষা সাপোর্ট করে।

প্রশ্ন: HTML5-এ image map কী?

উত্তর:
Image map হলো একটি ছবি যেখানে নির্দিষ্ট কিছু অংশে ক্লিক করে ভিন্ন লিংকে যাওয়া যায়।
ট্যাগ: <map> এবং <area>

---

৩. CSS

প্রশ্ন: Flex layout কী? Flex এবং Grid layout এর মধ্যে পার্থক্য কী?

উত্তর:
Flex Layout একটি উন্নততর লেআউট মেথড যা এলিমেন্টগুলোকে স্মার্টলি সারি বা কলামে সাজাতে সাহায্য করে।

• Flexbox একমাত্রিক (row বা column)।
• Grid হলো দ্বিমাত্রিক (row ও column একসাথে)।
• Grid ব্যবহার করলে আরও জটিল এবং নিখুঁত লেআউট ডিজাইন করা যায়।

প্রশ্ন: CSS position property ব্যাখ্যা করুন। Absolute ও relative position এর মধ্যে পার্থক্য কী?

উত্তর:
CSS Position property দ্বারা একটি এলিমেন্টকে কোথায় অবস্থান করবে তা নির্ধারণ করা হয়।

• relative: তার স্বাভাবিক অবস্থান থেকে সরানো হয়।
• absolute: নিকটবর্তী positioned parent এর উপর ভিত্তি করে নির্ধারিত হয়।

প্রশ্ন: Box model কী? এর উপাদানগুলো কী কী?

উত্তর:
Box model HTML এর প্রতিটি এলিমেন্টকে একটি বক্স হিসেবে ধরে। এর উপাদান:
১. Content
২. Padding
৩. Border
৪. Margin

প্রশ্ন: Hover effect কী? Active class-এর উদ্দেশ্য কী? বা Pseudo-class কী?

উত্তর:

• Hover Effect: ইউজার মাউস নিয়ে গেলে যেকোনো CSS পরিবর্তন যেমন কালার বা সাইজ হওয়া।
• Active class: যখন ইউজার কোনো এলিমেন্টে ক্লিক করে তখন সেটির স্টাইল পরিবর্তন হয়।
• Pseudo-class: একটি class যা এলিমেন্টের নির্দিষ্ট স্টেটে স্টাইল নির্ধারণ করে। যেমন: :hover, :active, :focus

প্রশ্ন: CSS-এর বিভিন্ন selector কী কী? Class এবং ID selector এর পার্থক্য?

উত্তর:
Selector এর প্রকারভেদ:

• Element selector
• Class selector (.class-name)
• ID selector (#id-name)
• Universal selector (*)
• Group selector (h1, p) Class vs ID: একটি ক্লাস বহুবার ব্যবহার করা যায়, কিন্তু ID একবারই ব্যবহারযোগ্য।

প্রশ্ন: CSS Specificity কী?

উত্তর:
Specificity হলো কোন CSS নিয়ম আগে প্রাধান্য পাবে তা নির্ধারণ করার নিয়ম। বেশি নির্দিষ্ট সিলেক্টর হলে তা কম নির্দিষ্ট সিলেক্টরের উপর প্রাধান্য পায়।

প্রশ্ন: CSS Preprocessor কী? Sass এর সুবিধা কী?

উত্তর:
CSS Preprocessor একটি টুল যা CSS থেকে আরও উন্নত ফিচার যোগ করে।
Sass এর সুবিধা:

• কোড পুনঃব্যবহারযোগ্য হয় (variables, mixins)
• CSS লেখার সময় কম লাগে
• Nested rules সহজ করে

প্রশ্ন: Pseudo element কী? একটি উদাহরণ দিন।

উত্তর:
Pseudo element ব্যবহার করে একটি এলিমেন্টের নির্দিষ্ট অংশে স্টাইল প্রয়োগ করা যায়।
উদাহরণ:

• ::first-line
• ::before, ::after

প্রশ্ন: Media query ব্যবহার করে একটি ওয়েবসাইট কিভাবে responsive করবেন?

উত্তর:
Media query CSS3 এর একটি ফিচার। এটি দিয়ে বিভিন্ন স্ক্রিন সাইজ অনুযায়ী স্টাইল অ্যাডজাস্ট করা যায়। উদাহরণ:

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

প্রশ্ন: কিভাবে font size responsive করবেন? CSS এর কোন units ব্যবহার করবেন?

উত্তর:

• vw (viewport width), em, rem ব্যবহার করে ফন্ট সাইজ responsive করা যায়।
• Media query দিয়ে ভিন্ন স্ক্রিন সাইজে আলাদা সাইজ সেট করা যায়।

প্রশ্ন: Transition এবং Transform এর মধ্যে পার্থক্য কী?

উত্তর:

• Transform: কোনো এলিমেন্টের রূপ পরিবর্তন করে (ঘোরানো, স্কেল করা)।
• Transition: এক অবস্থা থেকে আরেক অবস্থায় ধীরে ধীরে পরিবর্তন ঘটায়।

প্রশ্ন: কিভাবে একটি div-কে আরেকটি div-এর মধ্যে উভয় দিক থেকে কেন্দ্রস্থ করবেন?

উত্তর:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

৪. JavaScript (JS)

প্রশ্ন: JavaScript কীভাবে কাজ করে? Event loop কী?

উত্তর:
JavaScript একটি single-threaded ভাষা হলেও এটি asynchronous কাজ করতে পারে Event Loop এর মাধ্যমে। ব্রাউজার JavaScript কোড ইন্টারপ্রেট করে এবং চলমান রাখে।
Event Loop ব্রাউজারের task queue থেকে একের পর এক কাজ নিয়ে execute করে।

প্রশ্ন: JavaScript কোড কীভাবে ব্রাউজারে execute হয়?

উত্তর:
JavaScript কোড ব্রাউজারে লোড হওয়ার পর, ব্রাউজারের ইঞ্জিন (যেমন Chrome-এর V8) কোডটি লাইনে লাইনে পড়ে এবং ইনস্ট্যান্টলি execute করে।

প্রশ্ন: “==” এবং “===” এর মধ্যে পার্থক্য কী?

উত্তর:

• ==: কেবলমাত্র value চেক করে।
• ===: value এবং type দুটোই চেক করে (strict equality)।

প্রশ্ন: Callback function কী?

উত্তর:
Callback function হলো একটি ফাংশন যা অন্য একটি ফাংশনের আর্গুমেন্ট হিসেবে পাঠানো হয় এবং পরে কল করা হয়।

প্রশ্ন: কখন function থেকে return করবেন? কিভাবে একাধিক value return করবেন?

উত্তর:
কোনো function থেকে result চাইলে return ব্যবহার করতে হয়।
JS একাধিক value return করতে পারে না সরাসরি। তাই array বা object আকারে value return করতে হয়।

প্রশ্ন: bind, call এবং apply এর কাজ কী?

উত্তর:

• call() ও apply() সরাসরি ফাংশন এক্সিকিউট করে;
• bind() নতুন ফাংশন রিটার্ন করে যেটি পরে কল করা যায়।
• পার্থক্য: call(arg1, arg2), apply([arg1, arg2]), bind(arg1, arg2)

প্রশ্ন: Closure কীভাবে কাজ করে?

উত্তর:
Closure হলো এমন একটি ফাংশন যা তার parent function-এর scope থেকে ভেরিয়েবল access করতে পারে, এমনকি parent ফাংশন execute শেষ হয়ে গেলেও।

প্রশ্ন: JavaScript এ “this” কী বোঝায়?

উত্তর:

• Regular function-এ this হলো global object (যেমন window)।
• Object method-এ this হলো সেই object।
• arrow function এ this parent scope থেকে আসে।

প্রশ্ন: Event bubbling কী? Delegation কীভাবে কাজ করে?

উত্তর:
Event bubbling মানে হলো একটি event DOM এর নিচ থেকে উপরের দিকে propagate হয়। Event Delegation মানে হলো parent এলিমেন্টে ইভেন্ট add করা, যাতে child-এর ইভেন্টও handle হয়।

প্রশ্ন: Hoisting কী?

উত্তর:
Hoisting মানে ভ্যারিয়েবল বা ফাংশন ডিক্লেয়ারেশন উপরের দিকে উঠে যায়। যেমন:

console.log(a); // undefined
var a = 10;

প্রশ্ন: Recursive function কী?

উত্তর:
যে ফাংশন নিজেই নিজেকে কল করে, তাকে recursive function বলে।

প্রশ্ন: undefined ও null এর পার্থক্য কী?

উত্তর:

• undefined: ভ্যারিয়েবল ডিক্লেয়ার করা হয়েছে কিন্তু মান অ্যাসাইন করা হয়নি।
• null: ইচ্ছাকৃতভাবে "খালি" ভ্যালু সেট করা।

প্রশ্ন: JavaScript এর data types কী কী?

উত্তর:

• Primitive: string, number, boolean, null, undefined, symbol, bigint
• Non-primitive: array, object, function

প্রশ্ন: DOM কী?

উত্তর:
DOM (Document Object Model) হলো একটি API যা HTML ডকুমেন্টকে গঠন করে এবং স্ক্রিপ্ট দিয়ে তা manipulate করা যায়।

প্রশ্ন: JavaScript static type না dynamic type?

উত্তর:
JavaScript হলো dynamically typed language। এক ভ্যারিয়েবল ভিন্ন ভিন্ন টাইপ ধারণ করতে পারে।

৫. ES6

প্রশ্ন: ES6 কী?

উত্তর:
ES6 (ECMAScript 2015) হলো JavaScript-এর একটি আধুনিক সংস্করণ, যা নতুন সিনট্যাক্স ও ফিচার নিয়ে এসেছে — যেমন:

• arrow function
• template literals
• destructuring
• class
• modules ইত্যাদি এইসব ফিচার কোডকে আরও পরিষ্কার, সংক্ষিপ্ত এবং রিডেবল করে তোলে।

প্রশ্ন: var, let এবং const এর মধ্যে পার্থক্য কী?

উত্তর:

প্রশ্ন: Default parameters কেন ব্যবহার করবেন?

উত্তর:
Function call করার সময় যদি কোনো প্যারামিটার না পাঠানো হয়, তাহলে default মান ব্যবহার করার জন্য default parameter ব্যবহৃত হয়।

function greet(name = "Guest") {
  console.log("Hello " + name);
}

প্রশ্ন: Spread operator কীভাবে কাজ করে?

উত্তর:
Spread operator (...) array বা object কে কপি বা merge করতে ব্যবহৃত হয়।

const nums = [1, 2, 3];  
const newNums = [...nums, 4]; // [1, 2, 3, 4]

প্রশ্ন: Class এবং Object এর মধ্যে পার্থক্য কী?

উত্তর:

• Class হলো object তৈরির ব্লুপ্রিন্ট বা খসড়া।
• Object হলো class-এর instance।
• class তৈরি করলে মেমোরি বরাদ্দ হয় না, কিন্তু object তৈরি করলে হয়।

প্রশ্ন: Prototype chain কী? Inheritance কিভাবে কাজ করে?

উত্তর:
JavaScript এ প্রতিটি object-এর মধ্যে একটি internal property থাকে যাকে prototype বলে।
Prototype এর মাধ্যমে এক object অন্য object-এর প্রপার্টি ও মেথড অ্যাক্সেস করতে পারে। এটাকেই Prototype Chain বলা হয়।

প্রশ্ন: Call by value এবং Call by reference এর মধ্যে পার্থক্য কী?

উত্তর:

• Call by value:
  প্রিমিটিভ ডেটা টাইপ — ফাংশনে পাঠানোর সময় আসল ভ্যালু কপি হয়ে যায়। পরিবর্তন আসল ভ্যারিয়েবলকে প্রভাবিত করে না।

• Call by reference:
  অবজেক্ট টাইপ — ফাংশনে পাঠালে মূল ভ্যারিয়েবলের রেফারেন্স পাঠানো হয়। তাই ফাংশনের ভেতরে পরিবর্তন করলে সেটি বাইরেও প্রভাব ফেলে।

প্রশ্ন: Scope কী?

উত্তর:
Scope হলো কোন ভ্যারিয়েবল কোথা থেকে অ্যাক্সেস করা যাবে তার সীমা।

• Global Scope: ব্লকের বাইরে ঘোষণা করা ভ্যারিয়েবল।
• Local Scope: ব্লকের ভিতরে ঘোষণা করা ভ্যারিয়েবল।
• Block Scope: let বা const দিয়ে ব্লকের ভিতরে তৈরি করা ভ্যারিয়েবল।

প্রশ্ন: Higher-order function কী?

উত্তর:
যে function অন্য function কে argument হিসেবে নেয় বা return করে, তাকে higher-order function বলে।
উদাহরণ: map(), filter(), forEach()

প্রশ্ন: API কী? GET ও POST এর মধ্যে পার্থক্য কী?

উত্তর:
API (Application Programming Interface) হলো সফটওয়্যারের মাঝে যোগাযোগের মাধ্যম।

• GET: ডেটা রিকোয়েস্ট করে।
• POST: নতুন ডেটা সাবমিট করে (body-তে)। GET ইউআরএল-এ ডেটা পাঠায়; POST body-তে।

প্রশ্ন: LocalStorage এবং SessionStorage এর মধ্যে পার্থক্য কী?

উত্তর:

• LocalStorage: ব্রাউজারে ডেটা চিরস্থায়ীভাবে সংরক্ষণ করে, ম্যানুয়ালি না মুছলে থাকে।
• SessionStorage: শুধু একটি session পর্যন্ত ডেটা রাখে, ট্যাব বন্ধ করলে মুছে যায়।

প্রশ্ন: Cookies কী এবং কেন ব্যবহার করবেন?

উত্তর:
Cookies হলো ছোট টেক্সট ফাইল যা ইউজারের ব্রাউজারে সংরক্ষিত থাকে।
এটি ইউজারকে সনাক্ত করতে এবং ব্রাউজিং অভিজ্ঞতা উন্নত করতে ব্যবহৃত হয়।

প্রশ্ন: OOP (Object-Oriented Programming) কী?

উত্তর:
OOP হলো একটি প্রোগ্রামিং পদ্ধতি যেখানে সবকিছু object হিসেবে ব্যবহৃত হয়। এর চারটি মূল ধারণা হলো:
১. Encapsulation
২. Abstraction
৩. Inheritance
৪. Polymorphism

প্রশ্ন: Array এবং LinkedList এর মধ্যে পার্থক্য কী?

উত্তর:

• Array: contiguous memory, fixed size, দ্রুত অ্যাক্সেস
• LinkedList: non-contiguous memory, dynamic size, insert/delete সহজ

প্রশ্ন: JavaScript অ্যাপ্লিকেশন কীভাবে debug করবেন?

উত্তর:
Error message গুগলে সার্চ করুন। StackOverflow বা documentation পড়ে সমস্যার সমাধান খুঁজে বের করে কোডে প্রয়োগ করুন।

৬. React

প্রশ্ন: ReactJS কী? এর সুবিধা ও অসুবিধাগুলো কী?

উত্তর:

ReactJS হলো একটি জনপ্রিয় ফ্রন্টএন্ড JavaScript লাইব্রেরি যা UI (User Interface) তৈরি করতে ব্যবহৃত হয়। এটি Meta (Facebook) দ্বারা তৈরি ও পরিচালিত।

সুবিধা:

• শেখা সহজ
• ডাইনামিক ওয়েব অ্যাপ তৈরি সহজ
• Component পুনঃব্যবহারযোগ্য
• Performance উন্নত
• JavaScript লাইব্রেরির সুবিধা
• সহজে টেস্টিং করা যায়

অসুবিধা:

• দ্রুত আপডেট হওয়ায় শেখা কঠিন হতে পারে
• ডকুমেন্টেশন দুর্বল
• শুধুমাত্র view নিয়ে কাজ করে
• JSX নতুনদের জন্য জটিল হতে পারে

প্রশ্ন: আপনি কেন ReactJS ব্যবহার করবেন?

উত্তর:

ReactJS কোড সহজ, পরিচালনাযোগ্য ও পুনঃব্যবহারযোগ্য। এটি স্কেলেবল এবং দ্রুত অ্যাপ্লিকেশন তৈরিতে সহায়ক। পাশাপাশি অন্যান্য ফ্রেমওয়ার্কের তুলনায় ReactJS বেশি ফ্লেক্সিবল।

প্রশ্ন: Virtual DOM কী? Virtual এবং Real DOM এর মধ্যে পার্থক্য কী?

উত্তর:

Virtual DOM হলো DOM এর একটি হালকা ভার্সন যা মেমোরিতে থাকে এবং আসল DOM পরিবর্তনের আগে পার্থক্য চিহ্নিত করে।

পার্থক্য:

• Real DOM সরাসরি UI পরিবর্তন করে, ধীরগতি।
• Virtual DOM পরিবর্তন দ্রুত হয় এবং তারপর আসল DOM-এ প্রয়োগ হয়।

প্রশ্ন: Props ও State এর মধ্যে পার্থক্য কী?

উত্তর:

প্রশ্ন: useState কী এবং কেন ব্যবহার করেন?

উত্তর:

useState হলো React Hook যা ফাংশনাল কম্পোনেন্টে state ব্যবহারের সুবিধা দেয়। এতে component rerender হয় ডেটা চেঞ্জ হলে।

প্রশ্ন: Context API কী? Prop drilling এ এটি কীভাবে সাহায্য করে?

উত্তর:

Context API অনেকগুলো লেয়ারে ডেটা প্রপস না পাঠিয়ে সরাসরি component-এ পাঠানোর ব্যবস্থা করে। এটি prop drilling এর বিকল্প।

প্রশ্ন: useEffect ও useState এর মধ্যে পার্থক্য কী?

উত্তর:

• useState: state পরিচালনা করে
• useEffect: side-effect পরিচালনা করে (API call, timer, etc.) useEffect এর dependency array দিয়ে নির্ধারণ করা যায় কবে এটি চলবে।

প্রশ্ন: JSX কীভাবে কাজ করে?

উত্তর:

JSX মানে JavaScript XML — এটি HTML এর মত দেখতে হলেও JavaScript এর ভিতরেই লেখা হয়। Babel JSX কে JavaScript এ রূপান্তর করে।

প্রশ্ন: React Component Lifecycle ব্যাখ্যা করুন।

উত্তর:

React Component Lifecycle এর তিনটি ধাপ:

1. Mount: Component তৈরি ও DOM-এ যোগ হয় (constructor, render, componentDidMount)
2. Update: State/Props পরিবর্তন হলে ঘটে (render, componentDidUpdate)
3. Unmount: Component DOM থেকে মুছে যায় (componentWillUnmount)

প্রশ্ন: Custom Hook কী? কিভাবে তৈরি করবেন?

উত্তর:

Custom Hook হলো আপনার নিজের তৈরি React Hook যা সাধারণ লজিক অনেক Component-এ ব্যবহারের সুবিধা দেয়।

function useCustomHook() {
  const [data, setData] = useState(null);
  return [data, setData];
}

প্রশ্ন: আপনি কীভাবে একটি React অ্যাপ অপ্টিমাইজ করবেন?

উত্তর:

• Component memoization (React.memo)
• Lazy loading / Code splitting
• useCallback ও useMemo ব্যবহার
• উপযুক্ত key ব্যবহার
• DOM update সীমিত রাখা
• থ্রটল ও ডিবাউন্স ব্যবহার

প্রশ্ন: One-way ও Two-way data binding এর মধ্যে পার্থক্য কী? React কী ব্যবহার করে?

উত্তর:

React one-way data binding ব্যবহার করে। মানে প্যারেন্ট থেকে চাইল্ডে ডেটা যায়, কিন্তু চাইল্ড পরিবর্তন করলে তা প্যারেন্টে সরাসরি যাবে না।

প্রশ্ন: useEffect হুক থেকে কিছু return করলে কেন?

উত্তর:

useEffect থেকে return করা ফাংশনটি Cleanup ফাংশন হিসেবে কাজ করে — Component Unmount হলে বা dependency পরিবর্তনে এটি চলে।

৭. React IQ (ইন্টারভিউ প্রশ্নোত্তর)

প্রশ্ন: কিভাবে একটি Child Component থেকে Parent Component-এ ডেটা পাঠাবেন?

উত্তর:

১. প্রথমে parent ও child কম্পোনেন্ট তৈরি করুন।
২. parent কম্পোনেন্টে একটি function তৈরি করুন।
৩. এই function-টি prop হিসেবে child এ পাঠান।
৪. child থেকে button ক্লিক বা event এর মাধ্যমে সেই ফাংশন কল করে parent-এ ডেটা পাঠান।
৫. parent এ useState হুক ব্যবহার করে ডেটা সংরক্ষণ করুন।

প্রশ্ন: ৪টি বা তার বেশি props কীভাবে চাইল্ড কম্পোনেন্টে পাঠানো ভালো?

উত্তর:

• Context API
• Redux এই দুটি ব্যবহার করলে অনেক লেয়ার ডেটা না পাঠিয়ে centrally manage করা যায়।

প্রশ্ন: Redux কী এবং এর উদ্দেশ্য কী?

উত্তর:

Redux হলো একটি JavaScript state management লাইব্রেরি। এটি বড় অ্যাপ্লিকেশনের state (ডেটা) পরিচালনা সহজ করে এবং ডেটা flow নির্ভরযোগ্য রাখে। সাধারণত React এর সাথে ব্যবহার করা হয়।

প্রশ্ন: React Native কী? এটি সম্পর্কে আপনি কী জানেন?

উত্তর:

React Native হলো একটি ওপেন সোর্স ফ্রেমওয়ার্ক যা React ব্যবহার করে Android ও iOS অ্যাপ তৈরি করতে ব্যবহৃত হয়। এটি JavaScript ব্যবহার করে native mobile অ্যাপ তৈরি করে।

প্রশ্ন: Higher-order components (HOC) কী? একটি উদাহরণ দিন।

উত্তর:

HOC হলো এমন একটি ফাংশন যা একটি কম্পোনেন্ট নেয় এবং একটি নতুন কম্পোনেন্ট রিটার্ন করে।
উদাহরণ: withAuth(Component)

প্রশ্ন: useEffect হুক থেকে return কেন করা হয়?

উত্তর:

যখন একটি কম্পোনেন্ট unmount হয় তখন clean up করার জন্য useEffect থেকে return ফাংশন করা হয়।

প্রশ্ন: আপনি কীভাবে একটি React অ্যাপ অপ্টিমাইজ করবেন?

উত্তর:

১. Immutable ডেটা ব্যবহার
২. Functional Component ব্যবহার
৩. Code Split করে ছোট ছোট chunk তৈরি
৪. Inline function পরিহার
৫. Debounce ও Throttle
৬. Array map-এ index এর পরিবর্তে unique key ব্যবহার

প্রশ্ন: React অ্যাপে state ম্যানেজ করার বিভিন্ন উপায় কী?

উত্তর:

React অ্যাপে state management এর চারটি ধরন আছে:
১. Local state (useState)
২. Global state (Redux, Context API)
৩. Server state (React Query)
৪. URL state (React Router)

প্রশ্ন: useEffect হুক-এ dependency inject কেন করা হয়?

উত্তর:

Dependency array দিয়ে নির্ধারণ করা হয় useEffect কখন চলবে। যদি dependency না দেওয়া হয়, তাহলে প্রতিবার রেন্ডার হলে effect চলবে।

প্রশ্ন: আপনি কিভাবে React অ্যাপে re-render প্রতিরোধ করবেন?

উত্তর:

• React.memo() ব্যবহার করে ফাংশনাল কম্পোনেন্ট memoize করা যায়
• useMemo, useCallback হুক
• কম্পোনেন্টকে যত সম্ভব ছোট ও নির্দিষ্ট রাখা

প্রশ্ন: ReactJS এর কিছু অসুবিধা বলুন।

উত্তর:

• দ্রুত পরিবর্তনের কারণে নতুনদের জন্য শেখা কঠিন
• ডকুমেন্টেশন দুর্বল
• শুধুমাত্র View লেয়ার নিয়ে কাজ করে
• JSX নতুনদের জন্য বিভ্রান্তিকর হতে পারে

প্রশ্ন: React কি One-way না Two-way Data Binding করে?

উত্তর:

React শুধুমাত্র One-way data binding করে — ডেটা প্যারেন্ট থেকে চাইল্ডে যায়।

প্রশ্ন: useEffect হুক থেকে কিছু return করলে কেন?

উত্তর:

এই return করা ফাংশন clean-up effect হিসেবে কাজ করে, যা কম্পোনেন্ট unmount হওয়ার সময় চলে।

৮. Node.js ও MongoDB

প্রশ্ন: Node.js কী?

উত্তর:

Node.js হলো একটি JavaScript runtime environment যা V8 engine ব্যবহার করে এবং ব্রাউজারের বাইরে JavaScript কোড চালাতে পারে।

প্রশ্ন: Node.js ও JavaScript এর মধ্যে পার্থক্য কী?

উত্তর:

• JavaScript হলো প্রোগ্রামিং ল্যাঙ্গুয়েজ; Node.js হলো JS এর runtime environment।
• JavaScript সাধারণত client-side এ চলে; Node.js server-side এ চলে।
• Node.js ব্রাউজার ছাড়াও JS কোড চালাতে সক্ষম।

প্রশ্ন: Node.js কি single-threaded না multi-threaded?

উত্তর:

Node.js হলো single-threaded। তবে এটি asynchronous ও non-blocking architecture ব্যবহার করে।

প্রশ্ন: Node.js কি blocking না non-blocking কাজ করে?

উত্তর:
Node.js non-blocking ও asynchronous কাজ করে। এটি ইভেন্ট-চালিত (event-driven), তাই একাধিক অনুরোধ একসাথে পরিচালনা করতে পারে।

প্রশ্ন: NPM কী?

উত্তর:
NPM (Node Package Manager) হলো একটি টুল যেটি Node.js প্যাকেজ install, update, এবং manage করতে ব্যবহৃত হয়।

প্রশ্ন: ডাটাবেজের উদ্দেশ্য কী?

উত্তর:

ডাটাবেজ হলো তথ্য সংরক্ষণের একটি ব্যবস্থা। এর উদ্দেশ্য হলো তথ্যকে সংগঠিতভাবে সংরক্ষণ, ব্যবস্থাপনা ও দ্রুত অ্যাক্সেস নিশ্চিত করা।

প্রশ্ন: SQL ও NoSQL ডাটাবেজের মধ্যে পার্থক্য কী?

উত্তর:

প্রশ্ন: React এর সাথে Node ও MongoDB কেন ব্যবহৃত হয়? MySQL কেন নয়?

উত্তর:

MongoDB একটি NoSQL ডাটাবেজ, এটি document ভিত্তিক এবং ফ্লেক্সিবল। React ও Node JS এর সাথে এটি সহজেই মেলে।
MySQL schema নির্ভর এবং structure কঠিন, তাই MERN Stack এ MongoDB ব্যবহৃত হয়।

প্রশ্ন: Database design ও Database schema design বলতে কী বোঝায়?

উত্তর:

• Database Design: ডাটাবেজের গঠন ও কাঠামো কেমন হবে তা পরিকল্পনা করা।
• Schema Design: ডাটার গঠন এবং টেবিল বা ডকুমেন্ট কিভাবে সম্পর্কিত হবে তার নির্দেশনা।

প্রশ্ন: সার্ভার ক্র্যাশ করলে কী করবেন?

উত্তর:

১. সমস্যার লক্ষণ পর্যবেক্ষণ করুন
২. লোগস ও এরর চেক করুন
৩. Safe Mode-এ বুট করুন
৪. ইভেন্ট ভিউয়ার বা লিনাক্সের লগ ব্যবহার করুন
৫. সার্ভার রিস্টার্ট করুন
৬. ভবিষ্যতে এড়াতে মনিটরিং টুল ব্যবহার করুন

প্রশ্ন: API কিভাবে কাজ করে?

উত্তর:
API (Application Programming Interface) হলো সফটওয়্যারের মধ্যে যোগাযোগের মাধ্যম। এটি client এর অনুরোধ server এ পৌঁছে দেয় এবং উত্তরের ডেটা আবার client এ পাঠায়।

প্রশ্ন: CRUD কী?

উত্তর:

CRUD এর পূর্ণরূপ: Create, Read, Update, Delete — এটি ডাটাবেজ পরিচালনার মৌলিক চারটি কাজ।

প্রশ্ন: GET এবং POST এর মধ্যে পার্থক্য কী?

উত্তর:

• GET: ইউআরএল এর মাধ্যমে ডেটা পাঠায়, সাধারণত ডেটা পড়ার জন্য।
• POST: body এর মাধ্যমে ডেটা পাঠায়, সাধারণত নতুন ডেটা তৈরি বা সাবমিট করার জন্য।

প্রশ্ন: PUT ও PATCH এর মধ্যে পার্থক্য কী?

উত্তর:

• PUT: সম্পূর্ণ রেকর্ড আপডেট করে বা নতুন রেকর্ড তৈরি করে।
• PATCH: নির্দিষ্ট অংশ পরিবর্তন করে, সম্পূর্ণ রেকর্ড নয়।

প্রশ্ন: API সিকিউর করার উপায় কী?

উত্তর:

১. HTTPS ব্যবহার করুন
২. Token ভিত্তিক authentication (যেমন: JWT)
৩. Input validation করুন
৪. API rate limit করুন
৫. তথ্য URL এ না পাঠিয়ে body তে পাঠান
৬. OAuth ব্যবহার করুন

প্রশ্ন: Mongoose কী? এটি কিভাবে কাজ করে? আপনি কি এটি ব্যবহার করেছেন?

উত্তর:

Mongoose হলো MongoDB এর জন্য একটি ODM (Object Data Modeling) লাইব্রেরি যা schema validation, relationship এবং query পরিচালনা সহজ করে।
হ্যাঁ, আমি এটি ব্যবহার করেছি।

প্রশ্ন: Webpack কী?

উত্তর:
Webpack হলো একটি module bundler, যা একাধিক ফাইল/মডিউলকে একত্র করে একটি বা কিছু ফাইলে পরিণত করে।

প্রশ্ন: REST API কী?

উত্তর:

REST API হলো Representational State Transfer নীতিমালা অনুযায়ী তৈরি একটি API। এটি HTTP Method (GET, POST, PUT, DELETE) ব্যবহার করে ক্লায়েন্ট ও সার্ভারের মধ্যে ডেটা আদান-প্রদান করে।