React (পর্ব ০১) পরিচিতি ও সেটআপ

React.js কী?

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

React কেন জনপ্রিয়? তার ৪টি প্রধান কারণ

১. ভার্চুয়াল DOM (Virtual DOM)

React ভার্চুয়াল DOM (Document Object Model) ব্যবহার করে, যা আসল DOM-এর একটি লাইটওয়েট কপি। যখন অ্যাপ্লিকেশনের ডেটা পরিবর্তন হয়, React প্রথমে ভার্চুয়াল DOM-এ পরিবর্তনগুলো প্রয়োগ করে এবং তারপর শুধুমাত্র প্রয়োজনীয় অংশই আসল DOM-এ আপডেট করে। এই চমৎকার কাজের ফলে পারফরম্যান্স বৃদ্ধি পায় কারণ পুরো পেজ রিলোড করতে হয় না।

(DOM নিয়ে যদি বিস্তারিত জানতে চান, তবে কমেন্টে জানাতে পারেন)

২. কম্পোনেন্ট-ভিত্তিক আর্কিটেকচার (Component-Based Architecture)

React একটি অ্যাপ্লিকেশনকে ছোট ছোট এবং পুনরায় ব্যবহার যোগ্য কম্পোনেন্ট-এ ভাগ করে নেয়। বিষয়টি বোঝার জন্যে, মনে করুন আপনার কাছে একটা ২০০ পাতার বই আছে। বই এর প্রতিটি পাতা এক একটা কম্পোনেন্ট যা একটার পর একটা জোড়া লাগিয়ে পূর্ণ একটি বই তৈরি হয়েছে এবং আপনি চাইলে পাতাগুলো ফটোকপি করে অন্য কোথাও ব্যবহার করতে পারেন। এটাই React এর সৌন্দর্য্য। React কোনো অ্যাপ্লিকেশনের ফ্রন্টেন্ডকে ছোট ছোট টুকরা হিসেবে চিন্তা করে এবং এই ছোট টুকরাগুলোকে অন্য কোথাও বা অন্য কাজে পূনরায় ব্যবহারের সুযোগ করে দেয়।

৩. একমুখী ডাটা ফ্লো (Unidirectional Data Flow)

React এ ডেটা শুধুমাত্র প্যারেন্ট কম্পোনেন্ট থেকে প্রপস এর মাধ্যমে চাইল্ড কম্পোনেন্ট এ যায়। এতে ডেটা ম্যানেজমেন্ট সহজ হয়, স্টেট এর প্রেডিক্টেবল আচরণ বজায় থাকে এবং কোনো সমস্যা হলে দ্রুত ডিবাগ করা সম্ভব হয়। তার সাথে পারফরম্যান্সও বৃদ্ধি পায় এই একমুখীতার কারনে।

৪. বড় কমিউনিটি ও ইকোসিস্টেম (Big Community & Ecosystem)

React এর বিশাল কমিউনিটি রয়েছে, তাই আপনি কোড করতে গিয়ে কোনো সমস্যার সম্মুখীন হলে খুব দ্রুত সমস্যার সমাধান খুজে নিতে পারেন। তার সাথে এর আছে এক্সটেনশন (যেমন Redux, React Router) এবং টুলস (যেমন Next.js, Gatsby) এর সমৃদ্ধ ইকোসিস্টেম।

React শিখতে হলে যা জানতে হবে (Prerequisites)

১. HTML, CSS (মৌলিক ট্যাগ, স্টাইলিং)

২. JavaScript ES6+ (Let, Const, Arrow Function, Array Methods, Map, Filter etc.)

৩. DOM কীভাবে কাজ করে (Optional কিন্তু খুবই উপকারি)

React সেটআপ (Setting Up React Environment)

React প্রজেক্ট শুরু করার আগে নিচের ধাপগুলো অনুসরণ করুন-

১. Note.js ইন্সটল করুন। লিংকঃ Node.js Official Website

Node.js হলো জাভাস্ক্রিপ্ট এর রানটাইম। এক সময়ের হাসি ঠাট্টা ও উপহাসের জাভাস্ক্রিপ্ট এই Node.js এর কারনেই আজ সারা দুনিয়ায় সমাদৃত। ব্রাউজারের বাইরেও জাভাস্ক্রিপ্ট রান করার অসাধাবণ সুযোগটি করে দিয়েছে Node.js। যাইহোক, Node.js ইন্সটল হয়ে গেলে Terminal এ গিয়ে টাইপ করুন-

সব কিছু ঠিক থাকলে আপনাকে Node এবং npm এর ভার্সন দেখাবে। npm হলো (Node Package Manager) যা Node ইন্সটলের সময় নিজে থেকেই আপনার মেশিনে ইন্সটল হয়ে যাবে।

২. VS Code ইন্সটল করুন। লিংকঃ VS Code Official Website

VS Code অধিকাংশ প্রোগ্রামারের প্রিয় Code Editor। এটি আপনার লাইফটাকে সহজ করে দিবে। বিভিন্ন এক্সটেনশন ব্যবহার করে অনেক কঠিন এবং সময় সাপেক্ষ কাজ খুব সহজে করে ফেলতে পারেন VS Code দিয়ে।

৩. Vite দিয়ে React প্রোজেক্ট তৈরিঃ

Vite একটি আধুনিক ফ্রন্টএন্ড বিল্ড টুল, যা দ্রুত সময়ে যে কোনো স্কেলের প্রজেক্ট তৈরি করার জন্য ব্যবহৃত হয়। React প্রোজেক্ট তৈরি করার এটিই সব থেকে আধুনিক ও সুপার ফাস্ট টেকনোলজি। আপনি শুধু কয়েকটা কমান্ড দিবেন ব্যাস- Vite আপনার প্রয়োজনীয় ডিপেনড্যানসি নিয়ে হাজির হয়ে যাবে। VS Code Terminal এ গিয়ে টাইপ করুন-

my-app নামক ফোল্ডারে আপনার React প্রোজেক্ট রেডি। অভিনন্দন! প্রথম React প্রোজেক্ট তৈরি করে ফেলেছেন। Terminal এ আপনাকে একটা লোকাল হোস্ট URL দেওয়া হয়েছে। এই URLএর মাধ্যমে আপনার প্রোজেক্টের আউটপুট দেখতে পাবেন, কোনো রিলোড করতে হবে না। my-app নামক ফোল্ডারে নিচের মত আরও অনেক ফোল্ডার দেখতে পাবেন-

এই ফোল্ডারগুলোর মধ্যে খুবই গুরুত্বপূর্ণ দুইটা ফাইল আছে, যেটা সম্পর্কে বলতেই হবে-

App.jsx - এটি হলো React প্রোজেক্টের Root Component (Component হলো UI এর ছোট ছোট অংশ যা নিয়ে পরের পর্বে বিস্তারিত আলোচনা থাকবে)। অনেকগুলো Component কে এই App.jsx এ এনে জোড়া লাগিয়ে একটা কমপ্লিট UI তৈরি করা হয় এবং এখান থেকে রিটার্ন করা হয় Main.jsx এর কাছে।

Main.jsx - এটি একটি React অ্যাপ্লিকেশনের সত্যিকার এন্ট্রি পয়েন্ট। এতে আসা App Component এখান থেকে DOM এ রেন্ডার করা হয় আর সেটা আউটপুট হিসেবে দেখতে পাই।

সারসংক্ষেপ (Summary)

১. React একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা UI বা ফ্রন্টেন্ড বানানোর জন্য ব্যবহৃত হয়।

২. ভার্চুয়াল DOM, কম্পোনেন্ট-ভিত্তিক ডিজাইন ও একমুখী ডাটা ফ্লো React কে অনন্য করে।

৩. Vite ব্যবহার করে সহজেই React প্রোজেক্ট শুরু করা যায়।

নিজেকে যাচাইঃ

প্রশ্ন ১- ভার্চুয়াল DOM কী?

প্রশ্ন ২- React এর ডেটা ফ্লো কেমন?

প্রশ্ন ৩- কাকে React এর রুট কম্পোনেন্ট বলা হয়?

প্রশ্ন ৪- React রেন্ডারিং বলতে কী বুঝানো হয়?

প্রশ্ন ৫- SPA কী?

যে কোনো ধরনের প্রশ্ন থাকলে জানাতে ভুলবেন না। যুক্ত হতে পারেন ফেসবুক এ। লিংকঃ BitBangla

পরবর্তী পর্বে শিখবঃ

JSX ও React কম্পোনেন্ট

লেখকঃ Alamgir Hossain (BitBangla)