What is React ?

প্রিয় ডেভেলপারস , আসসালামু আলাইকুম । আশা করি আপনারা সবাই ভালো আছেন । আজকের ব্লগে React এর সম্পর্কে বিস্তারিত আলোচনা করবো , তাহলে চলুন শুরু...

প্রিয় ডেভেলপারস, আসসালামু আলাইকুম। আশা করি আপনারা সবাই ভালো আছেন। আজকের ব্লগে React এর সম্পর্কে বিস্তারিত আলোচনা করবো, তাহলে চলুন শুরু করা যাক।

React হলো বর্তমান সময়ের সবচেয়ে জনপ্রিয় ওপেন-সোর্স জাভাস্ক্রিপ্ট লাইব্রেরি যা ইউজার ইন্টারফেস (UI) বা ইউজার ইন্টারফেস কম্পোনেন্ট তৈরি করার জন্য ২০১৩ সালে ফেসবুক দ্বারা ডেভেলপ করা হয়েছে। React এর মাধ্যমে অতি দ্রুত সিঙ্গেল-পেজ এ্যাপ্লিকেশন তৈরি করা যায়। নিম্নে React অন্যাতম কিছু বৈশিষ্ট্য উল্লেখ করা হলো-

 

✔ React এ্যাপ্লিকেশনগুলো কম্পোনেন্ট এর ভিত্তিতে তৈরি করা হয়। কম্পোনেন্ট হলো একটি বিশাল অংশকে ছোট ছোট করে ভাগ করা এবং এই কম্পোনেন্ট গুলো পুনরায় ব্যবহারযোগ্য করে তোলা। আর এর মাধ্যমে বড় বড় কোডবেস সহজে ব্যবস্থাপন এবং রক্ষণাবেক্ষণ করা যায়।

 

✔ JSX এর পূর্ণরূপ হলো জাভাস্ক্রিপ্ট এক্সএমল (JavaScript XML), JSX হলো জাভাস্ক্রিপ্টের জন্য একটি সিনট্যাক্স এক্সটেনশন, যা XML বা HTML এর মতো দেখা যায়। এর মাধ্যমে জাভাস্ক্রিপ্ট কোডে HTML এর সকল Element লেখা যায় এবং তা বিভিন্ন কম্পাইলার এর মাধ্যমে সংঘটিত হয়ে থাকে। তার মধ্যে উল্লেখযোগ্য হলো – Babel

 

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

 

✔ React এ One Way Data Binding অর্থ্যাৎ, প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডাটা আদান প্রদান করে। যার ফলে এ্যাপ্লিকেশনে ডিবাগ করতে সহজ হয়।

 

✔ React এ state এবং props কম্পোনেন্ট এর জন্য খুবই গুরুত্বপূর্ণ একটি বৈশিষ্ঠ্য।

স্টেট (State) asynchronous ভাবে কাজ করে এবং ইহা পরিবর্তনযোগ্য (mutable)। স্টেট (State) একটি কম্পোনেন্টের ডাটা ষ্টোর করে এবং চাইল্ড কম্পোনেন্টে পেরেন্ট কম্পোনেন্টের স্টেট এর ডাটা এক্সেস করা যায় না। স্টেট এর মাধ্যমে কম্পোনেন্টকে পনুরায় ব্যাবহারযোগ্য করা যায় না।

প্রপস (Props) read-only এবং ইহা অপরিবর্তনযোগ্য (Immutable)। প্রপস এর মাধ্যমে এক কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে Argument আকারে ডাটা পাঠানো যায়। পেরেন্ট কম্পোনেন্টের ডাটা প্রপস এর মাধ্যমে চাইল্ড কম্পোনেন্টে এক্সেস করা যায়। স্টেট এর মাধ্যমে কম্পোনেন্টকে পনুরায় ব্যাবহারযোগ্য করা যায় ।

 

✔ React Lifecycle Methods, React এ তিন ধরনের লাইফসাইকেল মেথডস রয়েছেঃ

• Mounting (componentDidMount()),
• Updating (componetntDidUpdate()) এবং
• Unmounting (componentWillUnmont())

 

✔ React Hooks 16.8 ভার্সনের অন্যতম একটি বৈশিষ্ঠ্য। Hooks সাধারণত জাভাস্ক্রিপ্টের ফাংশনের মতো কাজ করে। React এ দুই ধরনের কম্পোনেন্ট রয়েছেঃ Class Component এবং Functional Component। তবে হুক Functional Component এ কাজ করে কিন্তু Class Component এ কাজ করে না। উল্লেখযোগ্য কিছু হুক এর তালিকা – useState(), useEffect(), useReduce(), useCallback(), useMemo() এবং useRef() ইত্যাদি।

 

✔ React Router হলো একটি লাইব্রেরি যা React এ্যাপ্লিকেশনের জন্য Navigation এবং Routing এর কাজ করে।

 

আশা করি আপনি আজকের এই ব্লগটি মনোযোগ সহকারে পড়েছেন। আজকের ব্লগটি আপনার কাছে কেমন লেগেছে অবশ্যই  কমেন্ট করে জানাবেন, আর যদি কোন ভূল হয়ে থাকে তাহলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন এবং কোথায় ভূল হয়েছে কমেন্ট করে জানাবেন। পোষ্টে উল্লিখিত কোনো অংশ যদি বুঝতে সমস্যা হয়, তাহলে কমেন্ট বক্সে জানিয়ে দিন। ইনশাআল্লাহ্‌, সমস্যা সমাধানের চেষ্টা করবো। আর ওয়েবসাইটটি বন্ধুদের মাঝে শেয়ার করবেন। আজকের মতই এখানেই বিদায় নিলাম, ইনশাআল্লাহ দেখা হবে অন্য কোন ব্লগে। ভালো থাকবেন সুস্থ থাকবেন। আল্লাহ হাফেয।