Introduction

React JS Bangla Tutorial-এ আপনাকে স্বাগতম!

এই টিউটোরিয়ালটি React এর অফিসিয়াল ডকুমেন্টেশন ফলো করে তৈরি করা হয়েছে, যা আপনাকে React.js গভীরভাবে শিখতে সাহায্য করবে। আশা করছি, এই টিউটোরিয়াল ফলো করলে আপনাদের React এর বিগিনার থেকে এডভান্সড সকল টপিকের ধারণা হয়ে যাবে।

What is React?

React হচ্ছে একটা জাভাস্ক্রিপ্ট লাইব্রেরি, যার সাহায্যে ইউজার ইন্টারফেস (UI) বানানো হয়। এটি কম্পোনেন্ট-ভিত্তিক আর্কিটেকচার ফলো করে, এর মাধ্যমে আমরা UI এর ছোট ছোট অংশ তৈরি করি। এই কম্পোনেন্টগুলো দিয়ে ট্রি স্ট্রাকচার ফলো করে একটি বড় এপ্লিকেশন বানাতে পারি।

React-এর মূল কনসেপ্টগুলো হলো—

• কম্পোনেন্ট-ভিত্তিক UI: পুরো অ্যাপকে ছোট ছোট অংশে ভাগ করে সহজে ম্যানেজ করা যায়।
• ভার্চুয়াল DOM: সরাসরি DOM পরিবর্তন না করে দ্রুত পারফরম্যান্স নিশ্চিত করে।
• ডিক্লারেটিভ UI: UI কেমন হবে তা সহজে ডিফাইন করা যায় ও ম্যানেজ করা সহজ হয়।

React মূলত ওয়েব অ্যাপের জন্য ডিজাইন করা হলেও, এটি মোবাইল (React Native) এবং ডেস্কটপ অ্যাপ ডেভেলপমেন্টেও ব্যবহৃত হয়।

রিঅ্যাক্ট কাজ করে কম্পোনেন্টের মাধ্যমে। কম্পোনেন্টগুলো হচ্ছে ছোট, পুনর্ব্যবহারযোগ্য ইউনিট, যা আপনার ইউজার ইন্টারফেসকে গঠন করে। প্রতিটা কম্পোনেন্ট নিজের ডেটা এবং লজিক নিয়ে কাজ করে, ফলে আপনার অ্যাপটিকে ছোট ছোট পিসে ভাগ করে সহজে ম্যানেজ করা যায়।

UI এ অনেক পার্ট থাকে। দেখা যায় যে, কিছু পার্ট দেখতে একই রকম কিন্তু শুধু ডাটাগুলো ভিন্ন। তখন আমরা একটি কম্পোনেন্ট বানিয়ে সেখানে ডাটা পাস করে কাজ করব। তাই বলা হয়ে থাকে, কম্পোনেন্টগুলো সিমিলার ইন লুক, ডিফারেন্ট ইন ডাটা।

React.js-এর ইতিহাস

React.js প্রথমে ২০১১ সালে ফেসবুকের সফটওয়্যার ইঞ্জিনিয়ার Jordan Walke তৈরি করেন। তিনি PHP-এর একটি Component-Based Framework "XHP" থেকে অনুপ্রাণিত হয়ে এটি ডেভেলপ করেন। React দিয়ে প্রথমে ফেসবুকের নিউজফিড ইমপ্লিমেন্ট করা হয়, এবং পরে ২০১২ সালে ইনস্টাগ্রামে ব্যবহৃত হয়।

এর জনপ্রিয়তা এবং কার্যকারিতা বিবেচনা করে ফেসবুক ২০১৩ সালে React.js-কে ওপেন সোর্স ঘোষণা করে। এর ফলে React.js দ্রুত জনপ্রিয় হয়ে ওঠে এবং বড় বড় কোম্পানি ও ডেভেলপাররা ব্যবহার করতে শুরু করে।

এই প্রযুক্তি একদম নতুন চিন্তাধারা নিয়ে আসে, যেখানে Virtual DOM, Declarative UI, Component-Based Architecture— এই বিষয়গুলো ওয়েব ডেভেলপমেন্টকে আরও সহজ ও দ্রুতগতির করে তোলে। React.js-এর ক্রমাগত উন্নয়ন এবং বৃহৎ কমিউনিটির সাপোর্টের ফলে এটি বর্তমান সময়ের অন্যতম জনপ্রিয় ফ্রন্টএন্ড লাইব্রেরি হিসেবে প্রতিষ্ঠিত হয়েছে।

রিঅ্যাক্ট এ সুবিধা ওভার জাভাস্ক্রিপ্ট:

এখন কথা হলো, আমরা তো HTML, CSS, JavaScript দিয়ে ওয়েবসাইট বানাতে পারি। তাহলে কেন আমরা আমাদের ওয়েবসাইটে রিঅ্যাক্ট ব্যবহার করব?

সহজ কথায় যদি বলি, আগে ওয়েবসাইটগুলো খুব বেশি ইন্টারঅ্যাক্টিভ ছিল না। সাইটগুলো ছিল কন্টেন ফোকাস। মানে ক্লিক, হোভার এই ফাংশনালিটি গুলো ছিল না। দিন যত যেতে লাগলো ইউজারের চাওয়া হয়ে গেল, এপ্লিকেশনে শুধু কন্টেন থাকলে চলবে না। ইন্টারঅ্যাক্টিভিটি থাকতে হবে। এই জন্য প্রোগ্রামিং ল্যাংগুয়েজ 'জাভাস্ক্রিপ্ট' আসলো। যে 'DOM' ম্যানুপুলেশন করে ওয়েবসাইটকে ইন্টারঅ্যাক্টিভ করে। মানে কোথাও ক্লিক করে ওয়েবসাইটের অবস্থা(state) পরিবর্তন হবে। কিন্তু সমস্যা হলো, জাভাস্ক্রিপ্ট দিয়ে আমরা যদি অসংখ্য বার ডোম ম্যানুপুলেশন করতে থাকি। প্রত্যেকবার ডোম রি-রেন্ডার হবে। এক কথায়, ব্রাউজারের ইঞ্জিন কম্পাইল বা প্রসেস করে ড্রয়িং করতে সময় নিবে। এতে আমাদের ওয়েবসাইট ধীরগতি হয়ে যাবে।

এডভান্সড ব্যাখ্যার জন্য সুমিত ভাইয়ের Play with DOM Playlist (opens in a new tab) টি দেখুন।

তাই আসলো রিঅ্যাক্ট। এ কি করলো, একটি টেকনিক ফলো করে 'DOM' কে প্রথমে ভার্চুয়াল ডোমে রাখে। ওয়েবসাইটে কোনো অবস্থার পরিবর্তন হলে সে আগে ডোমের সাথে নতুন ডোমের তুলনা করে দেখে, ওয়েবসাইটের ঠিক কোথায় পরিবর্তন হয়েছে। এবং সে রিয়েল ডোমে ঠিক ঐটুকু ধরে পরিবর্তন করে। তাতে পুরা ডোমকে নতুন রি-রেন্ডার হতে হয় না। এতে ওয়েবসাইটের পারফরমেন্স ভালো হয়। রিঅ্যাক্ট এর এই টেকনিকের নাম- 'Diffing' এলগরিদম।

React ব্যবহারের বেশকিছু সুবিধার লিস্ট:

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

React JS শেখার রিসোর্স

আপনি রিঅ্যাক্ট শিখতে চাইলে নিচের রিসোর্সগুলো আপনাকে সাহায্য করতে পারে:

📖 React official Documentation: https://react.dev/ (opens in a new tab)
🎥 React Bangla Tutorial: YouTube Link (opens in a new tab)

যদি আপনি ওয়েব ডেভেলপমেন্টে ক্যারিয়ার গড়তে চান, তাহলে React.js শেখা আপনার জন্য একটি দারুণ সিদ্ধান্ত হতে পারে! 🚀

Summary

যদি আপনার একটি ছোট এবং সহজ ওয়েবসাইট তৈরি করতে হয়, তাহলে HTML এবং JavaScript দিয়ে কাজ করা সহজ এবং যথেষ্ট হতে পারে। তবে, আপনার যদি একটি বড়, জটিল বা রিয়েল-টাইম ডেটা-ভিত্তিক অ্যাপ্লিকেশন তৈরি করতে হয়, তাহলে রিয়্যাক্ট একটি ভাল পছন্দ হতে পারে।