React শেখার আগে যেসব JavaScript কনসেপ্ট মাস্টার করা জরুরি

React JS শেখার আগে যেসব JavaScript কনসেপ্টগুলোতে মাস্টার হওয়া জরুরি

ReactJS বর্তমানে ওয়েব ডেভেলপমেন্টের অন্যতম জনপ্রিয় লাইব্রেরি। তবে অনেকেই শুরুতেই React শিখতে গিয়ে হতাশ হয়ে পড়েন কারণ তাদের JavaScript এর বেস ঠিকভাবে তৈরি হয়নি। এই ব্লগে আমরা জানব React শেখার আগে JavaScript এর কোন কোন কনসেপ্টগুলো জানা অত্যন্ত জরুরি।

কেন JavaScript শেখা জরুরি React শিখার আগে?

React হচ্ছে JavaScript এর উপর ভিত্তি করে তৈরি। তাই JavaScript যদি ভালো না বোঝেন তাহলে React এর কম্পোনেন্ট, স্টেট, প্রপস বা হুকস আপনাকে জাদুর মত লাগবে এবং সব কিছু মাথার উপর দিয়ে যাবে। তাই নিচে উল্লেখ করা কনসেপ্টগুলো ভালোভাবে না শিখলে আপনি React বুঝবেন না, শুধু মুখস্থ করে যাবেন।

মাস্টার করতে হবে এমন JavaScript কনসেপ্ট

১. ভেরিয়েবল ডিক্লারেশন (var, let, const)

var a = 5;
let b = 10;
const c = 15;

React এ সাধারণত

const এবং

let ব্যবহার করা হয়। বিশেষ করে স্টেট বা ফাংশন ডিক্লার করার ক্ষেত্রে।

২. Arrow Functions

React এ

map(), ইভেন্ট হ্যান্ডলার, হুকস সবখানেই arrow function ব্যবহৃত হয়।

const handleClick = () => {
  console.log("Button clicked");
}

৩. ES6 Destructuring

Props ও State থেকে ডেটা বের করতে বেশিরভাগ ক্ষেত্রে Destructuring করা হয়:

const { name, age } = props;

৪. Template Literals

JSX এর মধ্যে ডায়নামিক ভ্যালু দেখাতে লাগে Template Literals অনেক বেশি ব্যবহার করা হয়:

const name = "Rahim";
return <h1>{`Hello, ${name}`}</h1>

৫. Spread এবং Rest Operator (…)

const newArray = [...oldArray];
const newObj = { ...oldObj };

React এ প্রপস ফরওয়ার্ড, স্টেট আপডেট বা কম্পোনেন্ট কপি করতে Spread এবং Rest Operator ব্যবহৃত হয়।

৬. Array Methods (map, filter, find, reduce)

React এ সবচেয়ে বেশি ব্যবহার মেথড হলো map() method. ডায়নামিক মাল্টিপল কার্ড, একই ডিজাইন দিয়ে মাল্টিপল টেবিল দেখানো ইত্যাদি প্লেসে map() method ইউজ করা হয়। এছাড়া সিঙ্গেল ডাটা আইডি, বা নিদিষ্ট কোন কন্ডিশন অনুযায়ী বের করে আনার জন্য ব্যবহার করা হয় find() method. এছাড়া রয়েছে filter, reduce

const list = items.map(item => <li>{item}</li>);

৭. Callback Functions

ইভেন্ট হ্যান্ডলিং,

setTimeout, API কল সবকিছুতে callback দরকার।

setTimeout(() => {
  console.log("Delayed");
}, 2000);

৮. Truthy/Falsy এবং Short-Circuit Evaluation

{ isLoggedIn && <p>Welcome!</p> }

React JSX এ conditionally component দেখাতে ব্যবহৃত হয়।

৯. Object এবং Array Manipulation

State update করার সময় অবজেক্ট বা অ্যারে কপি করতে জানতে হবে।

১০. Closures এবং Scope

React এর useState,useEffect এর মধ্যে স্কোপ বুঝতে না পারলে ডাটা লিক বা ভুল আপডেট হতে পারে।

১১. DOM এবং Events

React Virtual DOM ব্যবহার করে, কিন্তু Event Handling, onClick, onChange ইত্যাদির ভিত্তি JavaScript DOM থেকেই আসে। তাই React কম্পোর্টেবল হওয়ার জন্য DOM এবং Events ক্লিয়ার ধারনা থাকতে হবে।

১২. Asynchronous JavaScript (Promises, Async/Await)

React এ API কল বা useEffect এর মধ্যে ডেটা ফেচ করতে fetch বা axios ব্যবহার হয়।

const getData = async () => {
  const res = await fetch("url");
  const data = await res.json();
}

এই আর্টিকেল থেকে আমরা কি কি নিতে পারিঃ

• প্রতিটি কনসেপ্টের জন্য ছোট প্রজেক্ট বা টাস্ক তৈরি করা।
• React শেখার আগে JavaScript এর মাধ্যমে To-Do App, Counter App, Form Validation এর মত ছোট খাট প্রজেক্ট করতে পারেন।
• কন্সেপ্ট গুলো সম্পর্কে এমনভাবে ধারনা থাকতে হবে যেন আপনি এগুলো visualize করতে পারেন।
• সবচেয়ে বড় ব্যাপার হলো Syntax গুলো সম্পর্কে ক্লিয়ার ধারনা থাকা।

টেবিল: React শেখার আগে JavaScript Checklist

কনসেপ্ট	ব্যবহার
Arrow Functions	ইভেন্ট হ্যান্ডল, হুকস
Destructuring	Props/State থেকে ডেটা পাওয়া
Map	লিস্ট রেন্ডার
Async/Await	API কল
Spread	State আপডেট
Variables	ডাটা স্টোর
Ternary Operator	কন্ডিশনাল রেন্ডারিং-এর জন্য
Modules (import/export)	জাভাস্ক্রিপ্ট ফাইল import এবং export

রেফারেন্স:

• MDN JavaScript Guide
• JavaScript ES6 Features

React শেখার আগেই JavaScript ভালোভাবে না জানলে ভবিষ্যতে সমস্যা হবে। আপনি চাইলে আমাদের Best Web Development Course in Bangladesh ব্লগটি দেখে নিতে পারেন যাতে শেখার পথ আরও পরিস্কার হয়।

React শেখা এখন JavaScript ভালোভাবে না জানলে আপনি React শেখার সময় হোঁচট খেতে বাধ্য। তাই আগে ভিত্তি গড়ে তুলুন, তারপর React শেখা শুরু করেন তাহলেই আপনার শেখা হবে মজার ও ফলপ্রসূ।

আরও বিস্তারিত ব্লগ পড়তে ভিজিট করুনঃ ওয়েবসাইট