Advanced Topics & Third-Party Solutions We Need Alongside React

Advanced React Features

যে কোনো টেকনলজি এর ক্ষেত্রে এর কোর ফিচার গুলোকেই সব থেকে বেশি গুরুত্ব দেওয়া হয়ে থাকে। এই কোর ফিচার গুলো ব্যবহার করে যে কোন ধরনের কাজ করা যায়। 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 এর অ্যাডভান্সড ফিচার এবং ডিজাইন প্যাটার্ন ব্যবহার করে কিভাবে এই প্রব্লেম গুলোর সমাধান করা যায়।

Tools We Need to Work with React

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

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

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

প্রধান প্রব্লেম গুলো যা না হলে ওয়েব অ্যাপ্লিকেশন হবে না, কিন্তু সে গুলো React এর সাথে বিউল্ট ইন ভাবে নেই -

• AJAX: React অ্যাপ্লিকেশনে সার্ভার থেকে ডাটা নিয়ে এসে ব্রাউজারে দেখানো বা ইউজার এর তৈরি করা ডাটা সার্ভারে পাঠানোর জন্য ব্যবহার করা হয় AJAX. এই জন্য আপনি ব্যবহার করতে পারেন Fetch API অথবা Axios লাইব্রেরী। React এ AJAX এর জন্য বিউল্ট ইন কোনো সমাধান দেওয়া নেই।
• Routing: যখন আপনি সিঙ্গেল পেজ অ্যাপ্লিকেশন বানাবেন তখন আপনাকে ক্লাইন্ট সাইডে রাউটিং করার প্রয়োজন পরবে। অর্থাৎ বিভিন্ন রাউটের জন্য বিভিন্ন পেজ রেন্ডার করার সিস্টেম দরকার পরবে। React এর জন্য কোনো সমাধান নেই। আপনি থার্ড পার্টি টুলস হিসেবে React Router 5 or Reach Router ব্যবহার করতে পারেন।
• Redux: অ্যাপ্লিকেশন যখন বড় হয়ে যায় তখন অ্যাপ্লিকেশনের ডাটা ম্যানেজ করা খুব কষ্টকর ব্যাপার হয়ে যায়। React এ বিউল্ট ইন ভাবে যে সমাধান দেওয়া আছে, তা এই প্রব্লেম এর সমাধান করতে পারে না। তাই আমাদের দরকার হয় কোনো একটা স্টেট ম্যানেজমেন্ট টুল। এই কাজের জন্য জনপ্রিয় লাইব্রেরী হচ্ছে Redux। কিন্তু আপনি আপনার পছন্দ মত যে কোনো একটা স্টেট ম্যানেজমেন্ট লাইব্রেরী ব্যবহার করতে পারেন।
• Responsive CSS Frameworks: React আপনার অ্যাপ্লিকেশন কে রেস্পন্সিভ করবে না। এর জন্য আপনার অন্য কোনো একটা টুলস এর সাহায্য নিতে হবে। আপনি Bootstrap এর সাহায্য নিতে পারেন, Bootstrap কে React এর জন্য আলাদা ভাবে ইমপ্লিমেন্ট করে বানানো হয়েছে ReactStrap। এটা খুবই ভাল একটা লাইব্রারি যদি আপনি আগে থেকেই Bootstrap জেনে থাকেন। কিন্তু আমার সাজেশন হল এর সাথে সাথে Material UI টা শিখবেন। এটা খুবই জনপ্রিয় একটা ফ্রেমওয়ার্ক।

এই গুলোই হল প্রধান প্রব্লেম যে গুলোর সমাধান React আগে থেকে করে দিলে আমাদের জন্য ভাল হত। কিন্তু না করাতে ও খারাপ কিছু হয়নি। আমরা এখন আমাদের পছন্দ মত যে কোনো টুলস ব্যবহার করে কাজ করতে পারছি। এছাড়া আপনার বিভিন্ন সময় বিভিন্ন ইউটিলিটি লাইব্রেরী এর সাহায্য নিতে হতে পারে।

কোর্স লিংকঃ https://courses.stackschool.co/courses/understand-reactjs-core-features

Youtube Video Link: https://youtu.be/jc12ox_bisU