রিয়েক্ট জে.এস এর অ্যাডভান্স ফিচার্স।

কোনো টেকনলজি এর ক্ষেত্রে এর কোর ফিচার গুলোকেই সব থেকে বেশি গুরুত্ব দেওয়া হয়ে থাকে। এই কোর ফিচার গুলো ব্যবহার করে যে কোন ধরনের কাজ করা যায়। React এর ব্যতিক্রম না। আপনি এই Chunk এ React সম্পর্কে যা কিছু শিখবেন, সব কিছুই React এর কোর ফিচার।

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

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

React এর অ্যাডভান্সড বিষয় গুলো -

• Advanced Component & Life Cycle Methods — আমরা এই Chunk এ React এর বেসিক কম্পোনেন্ট ফিচার গুলো দেখবো, এই গুলো বাদেও কম্পোনেন্টের অ্যাডভান্সড কিছু ফিচার আছে। যেই বিষয় গুলো না জানা থাকলে বড় কোনো অ্যাপ্লিকেশন নিয়ে কাজ করা খুবই কষ্টসাধ্য ব্যাপার হয়ে যায়।
• Asynchronous Operations & Side Effects — একটা ওয়েব অ্যাপ্লিকেশনে বিশেষ করে সিঙ্গেল পেজ অ্যাপ্লিকেশন গুলতে AJAX এর মাধ্যমে সার্ভারে রিকুয়েস্ট পাঠানো হয়। এই একই ভাবে সার্ভার থেকে ডাটা এনে ব্রাউজারে শো করানো হয়, আবার ইউজার যেই ডাটা গুলো তৈরি করে সেই গুলো সার্ভারে সংরক্ষণের জন্য পাঠিয়ে দেওয়া হয়। এই কাজ গুলো ভালো ভাবে বোঝার জন্য কম্পোনেন্ট এবং এর লাইফ সাইকেল মেথড সম্পর্কে ভাল ধারণা থাকতে হয়।
• Smart vs Dumb Component — React এ সাধারণত দুই ধরনের কম্পোনেন্ট নিয়ে কাজ করা হয়। এক ধরনের কম্পোনেন্ট ডাটা এবং রিপ্রেসেন্টেশন নিয়ে কাজ করে থাকে, এই গুলোকে বলা হয় স্মার্ট কম্পোনেন্ট। অন্য দিকে কিছু কম্পোনেন্ট আছে যার কাজ শুধু ছোট্ট একটা অংশ ব্রাউজারে রেন্ডার করা, যাদেরকে ডাম্ব কম্পোনেন্ট বলে।
• Higher Order Component — মাঝে মাঝে আমাদের কিছু ফাংশন দরকার হয়, যা একটা React কম্পোনেন্টকে আর্গুমেন্ট আকারে নিয়ে থাকে এবং আর একটা নতুন মডিফাইড কম্পোনেন্ট রিটার্ন করে থাকে। সাধারণত একই ধরনের কাজ বার বার না করে কোড রিইউজ করার জন্য এই ধরনের ফাংশন ব্যবহার করা হয়ে থাকে। এদের কে Higher Order Component বলে।
• Error Boundary — আপনি যত ভাল মাপের ডেভেলপারই হন না কেন, আপনাকে ইরর এর সম্মুখীন হতেই হবে। যখন একটা অ্যাপ্লিকেশনে কোনো ইরর ঘটে থাকে তখন পুরো অ্যাপ্লিকেশনটাই অকেজো হয়ে যায়। আর আপনার ইউজার যদি এইরকম সিসুয়েশনের সম্মুখীন হয় যখন আপনার অ্যাপ্লিকেশন আর কাজ করছে না, তাহলে ওই ইউজার আর আপনার অ্যাপ্লিকেশনটা ব্যবহার করবে না। তাই খুব সুব্দর ভাবে আমাদের ইরর গুলো হ্যান্ডেল করতে হয়। যদি কোনো ইরর ঘটে থাকে তাহলে পুরো অ্যাপ্লিকেশনটা যেন ক্রাশ না করে, এবং ইউজারকে একটা সুন্দর ফিডব্যাক দেই।
• Context API — এটা তুলনামূলক নতুন একটা ফিচার। যখন আপনি অনেক বড় অ্যাপ্লিকেশন বানাবেন তখন অনেক অনেক ডাটা হবে, সেই ডাটা গুলো ম্যানেজ করা খুব কষ্টের কাজ। সহজে যেন সেই ডাটা গুলো ম্যানেজ করা যায় তাই React নিয়ে এসেছে Context API।
• Refs — React পুরো কাজটা করে ভার্চুয়াল ডম এ। অর্থাৎ ব্রাউজারে সব কিছু রেন্ডার করার আগে সব কিছু স্টোর করা থাকে র‍্যাম এ। আমরা যেই এলিমেন্ট গুলো নিয়ে কাজ করি সেই গুলোর ও বাস্তবে কোন অস্তিত্ব তৈরি হওয়ার আগেই আমরা ব্যবহার করি। ইভেন্ট যুক্ত করি। যখন একটা এলিমেন্ট ব্রাউজারে সফল ভাবে রেন্ডার হয়ে যাবে তখন তার স্টেটটা যদি আমরা জানতে চাই তখন আমাদের সাহায্য নিতে হবে Refs এর।
• Controlled Component — যখন একটা ফর্ম এর স্টেট বা ডাটা আমাদের তৈরি করা কম্পোনেন্ট ম্যানেজ করে থাকে তখন সেটা হচ্ছে Controlled Component।
• UnControlled Component — যখন একটা ফর্ম এর ডাটা ব্রাউজার ম্যানেজ করে থাকে তখন তাকে বলে UnControlled Component।
• Hooks — এটা হচ্ছে React এর সব থেকে নতুন ফিচার। এই ফিচারের মাধ্যমে React এর আর্কিটেকচারটাই পুরো পুরি পরিবর্তিত হয়ে গেছে। এখন React অ্যাপ্লিকেশন গুলো তৈরি করা এবং ম্যানেজ করা আগের থেকে অনেক সহজ হয়ে গিয়েছে। তবে Hooks নিয়ে কাজ করতে চাইলেও আগে আমাদের আগের React টা ভাল করে জানতে এবং বুঝতে হবে।
• Design Patterns — এটা React এর কোনো ফিচার না। যখন আপনি React ব্যবহার করে বড় কোনো অ্যাপ্লিকেশন ডেভেলপ করতে যাবেন তখন অনেক ধরনের প্রব্লেম এর সম্মুখীন হবে। বড় বড় ডেভেলপার রাও হয়ে ছিল। তারা যখন প্রব্লেম এর সম্মুখীন হয়েছিল তখন তারা কিভাবে প্রব্লেমটার সমাধান করেছিল? আসলে ডেভেলপমেন্ট এ দেখা যায় আমরা সব সময় প্রায় একই ধরনের প্রব্লেম এর সম্মুখীন হয়। আর এই প্রব্লেম গুলোর সমাধান আগে থেকেই খুব সহজ এবং সঠিক ভাবে করে রাখা আছে। এই গুলই মূলত ডিজাইন প্যাটার্ন।

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