Created At: 2/15/2025
React.js এর মূল কনসেপ্টসমূহ
React.js হল একটি জনপ্রিয় JavaScript লাইব্রেরি যা ডায়নামিক ইউজার ইন্টারফেস (UI) তৈরি করতে ব্যবহৃত হয়। এখানে React.js এর কিছু গুরুত্বপূর্ণ মূল কনসেপ্ট নিয়ে আলোচনা করা হলো:
1️⃣ JSX (JavaScript XML) কি?
JSX হল একটি বিশেষ সিনট্যাক্স যা HTML এবং JavaScript একত্রে লেখার সুবিধা দেয়। এটি React কম্পোনেন্টের ভেতরে HTML-এর মতো দেখতে হলেও এটি আসলে JavaScript এর মধ্যেই কনভার্ট হয়।
const element =
Hello, React!
;👉 JSX ব্যবহারের সুবিধা:
HTML এবং JavaScript একসাথে ব্যবহার করা যায়।
কোড আরও সংক্ষিপ্ত এবং সহজবোধ্য হয়।
Virtual DOM এর সাথে কাজ করা সহজ হয়।
2️⃣ Components: React-এর ভিত্তি
React অ্যাপে প্রতিটি UI অংশকে "Component" বলা হয়। এটি মূলত দুটি ভাগে বিভক্ত:
১. Functional Component:
function Welcome() {
return
Hello, React!
;}
২. Class Component:
class Welcome extends React.Component {
render() {
return
Hello, React!
;}
}
👉 Functional Components হালকা এবং সহজ, যেখানে Class Components ব্যাকডেটেড এবং কম ব্যবহৃত হয়।
3️⃣ Props vs State: পার্থক্য কী?
Props (Properties)
কম্পোনেন্টের ডাটা এক জায়গা থেকে অন্য জায়গায় পাঠাতে সাহায্য করে।
Immutable (পরিবর্তন করা যায় না)।
function Greeting(props) {
return
Hello, {props.name}!
;}
State
কম্পোনেন্টের নিজস্ব ডাটা ধারণ করে।
Mutable (পরিবর্তন করা যায়)।
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
Count: {count}
);
}
4️⃣ useEffect Hook: Side Effects পরিচালনা করা
useEffect হল React Hook, যা API থেকে ডাটা আনতে বা ব্রাউজারের টাইটেল পরিবর্তন করতে ব্যবহার করা হয়।
import { useState, useEffect } from "react";
function DataFetcher() {
const [data, setData] = useState(null);
useEffect(() => {
fetch("https://api.example.com/data")
.then((response) => response.json())
.then((data) => setData(data));
}, []); // Empty dependency array = Runs once
return
{data ? JSON.stringify(data) : "Loading..."}
;}
👉 এটি API কল, ডাটা ফেচ, বা অন্যান্য সাইড ইফেক্ট পরিচালনার জন্য ব্যবহৃত হয়।
5️⃣ React Router: SPA (Single Page Application) তৈরি করা
React Router ব্যবহার করে আমরা বিভিন্ন পেজের মধ্যে নেভিগেশন করতে পারি।
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
function Home() {
return
Home Page
;}
function About() {
return
About Page
;}
function App() {
return (
);
}
👉 এটি Multiple Page Navigation তৈরি করতে সাহায্য করে।
✅ শেষ কথা
React.js শেখার জন্য উপরোক্ত কনসেপ্ট গুলো অত্যন্ত গুরুত্বপূর্ণ। তুমি যদি এগুলো ভালোভাবে আয়ত্ত করতে পারো, তাহলে React-এর উপর দক্ষতা অর্জন করতে পারবে।
💡 পরবর্তী ধাপে: Redux, Context API, Performance Optimization ইত্যাদি শেখার চেষ্টা করো।
🔥 Happy Coding! 🚀