React-এর জগতে স্বাগতম! আপনি যদি ওয়েব ডেভেলপমেন্টে নতুন হন বা সবেমাত্র React শুরু করছেন, আপনি সঠিক জায়গায় আছেন। এই গাইডে, আমরা দেখব React কী, কেন এটি গুরুত্বপূর্ণ, এবং এর তৈরি হওয়ার পেছনের আকর্ষণীয় গল্প। চলুন শুরু করা যাক!
React হলো ইউজার ইন্টারফেস তৈরির জন্য একটি জাভাস্ক্রিপ্ট লাইব্রেরি। এটি Facebook (এখন Meta) তৈরি করেছে ডেভেলপারদের দ্রুত ও ইন্টারঅ্যাক্টিভ ওয়েব অ্যাপ্লিকেশন তৈরিতে সাহায্য করার জন্য। React দিয়ে, আপনি এমন ওয়েব পেজ তৈরি করতে পারেন যা ডেটা পরিবর্তন হলে স্বয়ংক্রিয়ভাবে আপডেট হয়, ম্যানুয়ালি পেজ রিলোড করার দরকার হয় না।
React আসার আগে, একটি ওয়েবপেজের আপডেট ম্যানেজ করতে ডেভেলপারদের অনেক কোড লিখতে হতো। কিছু পরিবর্তন হলেই (যেমন একটি নতুন মেসেজ বা নতুন কমেন্ট), পুরো পেজটি রিলোড বা ম্যানুয়ালি আপডেট করতে হতো। এটি ধীর ও অদক্ষ ছিল।
React ওয়েব ডেভেলপমেন্টকে দ্রুততর, সহজ, এবং আরও কার্যকর করে তোলে:
React তৈরি হয়েছিল Facebook-এ একটি বিরক্তিকর সমস্যা সমাধান করতে, যেখানে নোটিফিকেশনে এমন অপঠিত মেসেজ দেখাত যেগুলো আসলে ছিল না। সমস্যাটি হতো কারণ মেসেজ একাধিক জায়গায় দেখানো হতো কিন্তু সেগুলো সিঙ্কে থাকত না। এই সমস্যা সমাধানের জন্য, Facebook-এর ইঞ্জিনিয়াররা React তৈরি করেন, যা ভার্চুয়াল DOM ব্যবহার করে UI কার্যকরভাবে আপডেট করে। এটি পারফরম্যান্স উন্নত করে এবং অসামঞ্জস্য দূর করে, যার ফলে ২০১৩ সালে React প্রকাশ্যে রিলিজ হয়। আজ, এটি সবচেয়ে জনপ্রিয় ওয়েব ডেভেলপমেন্ট টুলগুলোর একটি।
আজ, Instagram, WhatsApp, Airbnb, Uber, Netflix-এর মতো বড় বড় কোম্পানি ওয়েব অ্যাপ্লিকেশন তৈরি করতে React ব্যবহার করে। React শেখা দারুণ ক্যারিয়ারের সুযোগ এনে দিতে পারে, আপনি নিজের প্রজেক্ট তৈরি করুন বা টেকে চাকরি খুঁজুন।
এখন আপনি বুঝেছেন React কী এবং কেন এটি তৈরি হয়েছিল, এখন সময় এতে ডুবে যাওয়ার! ধাপে ধাপে, আমরা শিখব React কীভাবে কাজ করে, পাশাপাশি কিছু আকর্ষণীয় প্রজেক্টও তৈরি করব।
React হলো Facebook-এর তৈরি একটি জাভাস্ক্রিপ্ট লাইব্রেরি, যা ইউজার ইন্টারফেস (UI) তৈরির জন্য ব্যবহৃত হয়, বিশেষ করে সিঙ্গেল-পেজ অ্যাপ্লিকেশনের (SPA) জন্য। এটি UI-কে পুনঃব্যবহারযোগ্য কম্পোনেন্টে ভাগ করে ডাইনামিক ওয়েব অ্যাপ তৈরি সহজ করে তোলে।
ভ্যানিলা জাভাস্ক্রিপ্ট বলতে বোঝায় কোনো লাইব্রেরি বা ফ্রেমওয়ার্ক ছাড়া সাধারণ, নেটিভ জাভাস্ক্রিপ্ট ব্যবহার করা। এটি শক্তিশালী, কিন্তু আপনার অ্যাপ যত জটিল হবে, ততই এটি দীর্ঘ ও পরিচালনা করা কঠিন হয়ে উঠতে পারে।
| ফিচার | ভ্যানিলা JS | React |
|---|---|---|
| DOM ম্যানিপুলেশন | ম্যানুয়াল ও দীর্ঘ | ভার্চুয়াল DOM-এর মাধ্যমে বিমূর্ত |
| UI পুনঃব্যবহারযোগ্যতা | কাস্টম ফাংশন ও HTML টেমপ্লেট | কম্পোনেন্ট-ভিত্তিক |
| স্টেট ম্যানেজমেন্ট | ম্যানুয়াল স্টেট ট্র্যাকিং | hook (useState)-সহ বিল্ট-ইন স্টেট |
| পারফরম্যান্স অপ্টিমাইজেশন | ম্যানুয়াল টিউনিং | ভার্চুয়াল DOM ডিফিং |
| লার্নিং কার্ভ | কম (শুরুতে) | কিছুটা বেশি, কিন্তু আরও ভালোভাবে স্কেল করে |
ভ্যানিলা JS হলো ধাতু, বোল্ট এবং ইঞ্জিন দিয়ে শুরু থেকে একটি গাড়ি তৈরি করার মতো।
React হলো উচ্চমানের প্রি-বিল্ট কম্পোনেন্ট (ইঞ্জিন ব্লক, সিট, ড্যাশবোর্ড) দিয়ে নমনীয় কাস্টমাইজেশনসহ একটি গাড়ি একত্রিত করার মতো।
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Vanilla JS Button</title>
</head>
<body>
<div id="app"></div>
<script>
const app = document.getElementById('app');
const button = document.createElement('button');
button.textContent = 'Click Me';
button.style.padding = '10px 20px';
button.style.fontSize = '16px';
button.addEventListener('click', () => {
alert('Hello from Vanilla JS!');
});
app.appendChild(button);
</script>
</body>
</html><!-- react.html -->
<!DOCTYPE html>
<html>
<head>
<title>React Button</title>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigi></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() {
const handleClick = () => {
alert('Hello from React!');
};
return (
<button
onClick={handleClick}
style={{ padding: '10px 20px', fontSize: '16px' }}
>
Click Me
</button>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
</script>
</body>
</html>onClick হলো ইভেন্ট লিসেনারের একটি সিনট্যাক্টিক সুগার।| ফিচার | ভ্যানিলা JS | React |
|---|---|---|
| DOM অ্যাক্সেস | document.getElementById | প্রয়োজন নেই; ডিক্লারেটিভ রেন্ডারিং |
| ইভেন্ট বাইন্ডিং | addEventListener | props-এর মাধ্যমে onClick, onChange |
| UI সংজ্ঞায়ন | HTML + JS DOM ম্যানিপুলেশন | JSX + কম্পোনেন্ট ফাংশন |
| পঠনযোগ্যতা | বড় অ্যাপের জন্য কম | বেশি (বিশেষ করে পুনঃব্যবহারে) |
দ্বিতীয় অধ্যায়ে, আমরা: