Introduction

Introduction

ওয়েলকাম টু React JS Bangla Tutorial! এই ডকুমেন্টটি আমরা লিখছি, React এর অফিসিয়াল ডকুমেন্ট ফলো করে। আশা করছি, এই টিউটোরিয়াল ফলো করলে আপনাদের React এর অলমোস্ট সকল টপিকের ধারণা হয়ে যাবে।

What is React?

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

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

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

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

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

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

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

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

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

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

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

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

Describing the UI