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

## React.js কী?
React হলো ফেসবুক টিম দ্বারা তৈরিকৃত একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা কোনো অ্যাপ্লিকেশনের ইউজার ইন্টারফেস (UI) বা ফ্রন্টেন্ড তৈরিতে ব্যবহার করা হয়। বর্তমানে এটি ফ্রন্টেন্ড টেকনোলজি দুনিয়ায় সবচেয়ে জনপ্রিয় একটি লাইব্রেরি।

## React কেন জনপ্রিয়? তার ৪টি প্রধান কারণ
### ১. ভার্চুয়াল DOM (Virtual DOM)

React ভার্চুয়াল DOM ব্যবহার করে, যা আসল DOM-এর একটি লাইটওয়েট কপি। যখন অ্যাপ্লিকেশনের ডাটা পরিবর্তন হয়, React প্রথমে ভার্চুয়াল 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 প্রজেক্ট শুরু করার আগে কিছু বেসিক টুল আপনার মেশিনে ইন্সটল থাকতে হব।

১. Node.js যা জাভাস্ক্রিপ্ট এর রানটাইম এটি আপনাকে npm (Node Package Manager) ব্যবহার করতে সাহায্য করবে। Node.js এই অফিসিয়াল সাইট থেকে LTS version ইন্সটল করুন। এরপর মেশিনের Terminal এ গিয়ে টাইপ করুন node --version এবং npm --version সবকিছু ঠিকঠাক থাকলে আপনাকে Node এবং npm এর কত ভার্সন ইন্সটল করেছেন সেটা দেখাবে।

২. Vs Code যা সবচেয়ে জনপ্রিয় Code Editor। অফিসিয়াল সাইট VS Code থেকে এটি ইন্সটল করে নিন।

React সেটআপের যত উপায় আছে তার মধ্যে Vite সবচেয়ে আধুনিক এবং সুপার ফাস্ট। আগে Node ইন্সটল করুন তারপর Terminal এ গিয়ে টাইপ করুন npm create vite@latest my-app -- --template react পরের কমান্ড cd my-app তারপর npm install এরপর npm run dev কমান্ডগুলো ঠিকঠাক দেওয়া হলে my-app নামের ফোল্ডারে প্রয়োজনীয় সকল কিছু ইন্সটল হয়ে আপনাকে একটা URL দিবে যা একটা লাইভ সার্ভারের মত প্রজেক্টের আউটপুট দেখাবে।

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

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

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

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

পরবর্তী অংশে আমরা শিখব

## JSX কী?

## React কম্পোনেন্ট (ফাংশনাল ও ক্লাস)

## প্রপস কী?

লেখকঃ Alamgir Hossain (BitBangla)