React.js এর গুরুত্বপূর্ন ২০ লাইব্রেরী বা প্যাকেজ

🔰 এই সিরিজ থেকে আপনাদের সাথে রিয়েক্ট অ্যাপ্লিকেশন ডেভেলপমেন্ট করার জন্য গুরুত্বপূর্ন ২০টি প্যাকেজ বা লাইব্রেরী নিয়ে আলোচনা করব। আমি অবশ্যই পরামর্শ দিবো এই ২০টি প্যাকেজ বা লাইব্রেরী আপনি যদি আপনার ডেভেলপমেন্ট এ ব্যবহার করেন, তাহলে আপনার ডেভেলপমেন্ট হবে Efficiency, Quality, Performance অনেক বেশি এগিয়ে থাকবে। যেহেতু আপনাদের সাথে আমি রিয়েক্ট এর ২০টি প্যাকেজ নিয়ে আলোচনা করব সেহেতু এই লেখাটি অনেক বড় হয়ে যাবে এজন্য আমি এই সিরিজটি কে ৪টি পর্বে ভাগ করেছি এবং এটি হচ্ছে এই সিরিজের প্রথম পর্ব। আর এই প্রথম পর্বে ৫টি প্যাকেজ বা লাইব্রেরী নিয়ে আলোচনা কর এবং একইভাবে পর্যায়ক্রমে ৪টি পর্বে মোট ২০টি প্যাকেজ নিয়ে আলোচনা করব।

✳️ প্রথম পর্বে যে ৫টি প্যাকেজ বা লাইব্রেরী নিয়ে আপনাদের সাথে আমি আলোচনা করব সেই ৫টি প্যাকেজ হচ্ছেঃ

1. axios
2. cleave.js
3. cogo-toast
4. export-from-json
5. localforage

<hr>

✅ 1. axios: কখন আমরা আমাদের রিয়েক্ট প্রোজেক্ট এ axios ব্যবহার করব, যখন আমরা রিয়েক্ট অ্যাপ্লিকেশন ডেভেলপমেন্ট করি তখন JSON ডেটা নিয়ে কাজ করতে হয় বা Rest API কে কল করে যে JSON রেসপন্স টা পাই সেই JSON রেসপন্স নিয়েই কিন্তু রিয়েক্ট আপ্লিকেশন কাজ করে। অর্থাৎ যখনি আমরা রিয়েক্ট এর ক্লায়েন্ট সাইড থেকে সার্ভার সাইটে কোনো একটা Rest API কে কল করি বা কোনো একটা API এর End পয়েন্টকে আমরা কল করি তখন কল করতে গেলে আমাদের কে Get, Post, Put, Delete মেথড এর প্রয়োজন হয় এবং অনেক সময় ফাইল নিয়ে কাজ করার জন্য আমাদের কে বাইনারি লার্জ অবজেক্ট রিকুয়েস্ট ক্রিয়েট করতে হয়। অনেক সময় আমাদের কে ফাইল স্টিম নিয়ে কাজ করতে হয় ফাইল আপলোড, ডাউনলোড কতটুকু হয়েছে এবং কতটুকু হয়নি সেটার যে progress আছে সেই progress জানার প্রয়োজন হয় অর্থাৎ আপনি যদি axios নিয়ে কাজ করেন তাহলে এই যে সার্ভার সাইড অপারেশন যেগুলো আছে বা সার্ভার সাইড কমিউনিকেশন যেগুলো আমরা করি HTTP ক্লায়েন্ট এর মাধ্যমে সেই সবগুলো ফিচার-ই এই axios এর মধ্যে রয়েছে। আপনি কিন্তু এই axios ছাড়াও আরো বেশ কিছু HTTP ক্লায়েন্ট আছে যেমনঃ Fetch API এবং নরমাল জাভাস্ক্রিপ্ট এর XMLHttpRequests এরকম আপনি যদি আরো সার্চ করেন তাহলে আরো বেশ কিছু axios এর মতো প্যাকেজ পেয়ে জাবেন কিন্তু আমি এই বিষয়ে আপনাদের কে পরামর্শ দিতে পারি যে এই টাইপের যতো গুলো HTTP ক্লায়েন্ট আছে তার মধ্যে axios এর থেকেও ভালো কিছু আসলে আর হয় না।

<small>➡️এই সম্পর্কে বিস্তারিত জানতে ভিজিট করুনঃ https://www.npmjs.com/package/axios</small>

<hr>

✅ 2. cleave.js: এই প্যাকেজটি কেনো আপনি ব্যবহার করবেন, এর প্রধান কারন হচ্ছে ইনপুট ফর্মেটিং। অনেক সময় আমরা আমাদের ওয়েব সাইটে ফর্ম এর ভিতরে গুরুত্বপূর্ণ ডেটা যেমনঃ ক্রেডিট কার্ডের নাম্বার, মোবাইল নাম্বার, জন্মতারিখ এরকম বিভিন্ন ধরনের আমারা ইনপুট নিয়ে থাকি। এই ইনপুট গুলো কে ফর্মমেটিং বা যাচাই করার জন্য cleave.js ব্যবহার করা হয়ে হয়।

<small>➡️এই সম্পর্কে বিস্তারিত জানতে ভিজিট করুনঃ https://www.npmjs.com/package/cleave.js</small>

<hr>

✅ 3. cogo-toast: এই প্যাকেজটি কেনো আপনি ব্যবহার করবেন এর প্রধান কাজ হচ্ছে Toast ম্যাসেজ জেনারেট করার জন্য এই প্যাকেজটি ব্যবহার করা হয়। আপনি Toast ম্যাসেজ জেনারেট করার জন্য cogo-toast ছাড়াও আরো বেশ কিছু প্যাকেজ আপনি NPM এ সার্চ করলে পেয়ে জাবেন কিন্তু আমার কাছে সব থেকে বেস্ট মনে হয় cogo-toast। cogo-toast কেনো বেস্ট মনে হয় এর প্রধান যে কারন সেটা হচ্ছে মিনিমাইজ কোড অর্থাৎ খুব অল্প কোড লিখে cogo-toast দিয়ে নোটিফিকেশন জেনারেট করা যায় আর এটি দেখতেও অনেক সুন্দর। আবার আপনি চাইলে এই Toast নোটিফিকেশন কে বিভিন্ন ভাবে কাস্টমাইজড করতে পারবেন আপনার মন মতো করে।

<small>➡️এই সম্পর্কে বিস্তারিত জানতে ভিজিট করুনঃ https://www.npmjs.com/package/cogo-toast</small>

<hr>

✅ 4. export-from-json: এর মানে হচ্ছে JSON থেকে কোন কিছু export করা। আমরা যেহেতু রিয়েক্ট আপ্লিকেশন এর ভিতরে JSON ডেটা নিয়ে কাজ করি সেহেতু এই JSON ডাটা কে বিভিন্ন সময়ে export করতে হয় যেমনঃ কখনো দেখা যাচ্ছে যে csv ফর্মেটে export করতে হচ্ছে। আর এইসব কাজ করার জন্য আমাদের কে এই export-from-json প্যাকেজ টি ব্যবহার করতে হয়। অর্থাৎ এই প্যাকেজটি দিয়ে খুব অল্প কোড লিখে একটা JSON কে বিভিন্ন ফাইলে এ export করা যায়।

<small>➡️এই সম্পর্কে বিস্তারিত জানতে ভিজিট করুনঃ https://www.npmjs.com/package/export-from-json</small>

<hr>

**✅ 5. localforage: **এই প্যাকেজটি মূলত প্রোজেক্ট এর যে অফলাইন ক্যাপাবিলিটি আছে সেই অফলাইন ক্যাপাবিলিটি ম্যানেজ করার জন্য localforage প্যাকেজটি ব্যবহার করা হয়। আমরা জানি যে, রিয়েক্ট এর ওয়েব অ্যাপ্লিকেশন ব্রাউজারে রান হয় এই ব্রাউজারের কিন্তু একটা ডেটা ম্যানেজমেন্ট সিস্টেম এর মধ্যে ইন্টিগ্রেট অবস্তাই আছে। অর্থাৎ ব্রাউজারের মধ্যে Local Storage, Session Storage, indexedDB এবং Web SQL স্টোরেজ আছে। এইযে ফিচার গুলো ব্রাউজারের মধ্যে আছে এই প্রতিটি ফিচার-ই কিন্তু দেওয়া হয়েছে আমরা যাতে করে ব্রাউজারের ভিতরে ডেটা স্টোর করে আবার সেটা ব্যবহার করতে পারি।

অর্থাৎ ব্রাউজারের যে সেশন স্টোরেজ এবং লোকাল স্টোরেজ ফিচারটি দেওয়া আছে সেখানে আমরা চাইলে ৫ মেগাবাইট ডেটা স্টোর করে রাখতে পারি। আবার চাইলে ইনডেক্সডিবি নামে যে ডেটাবেজ সুবিধাটি ব্রাউজার আমাদের দিচ্ছে সেখানে আমরা চাইলে ২৫৫ মেগাবাইট পর্যন্ত ডেটা রেখে দিতে পারি। ব্রাউজার যে ডেটা স্টোরেজ করার যে ফিচার গুলো দেই এইগুলো ব্যবহার করে আমাদের ওয়েব আপ্লিকেশন কে অফলাইনে রান করাতে পারি বা অফলাইনে অনেক ডেটা আমরা ব্রাউজারে স্টোর করে রিইউজ করতে পারি। এছাড়াও ওয়েব আপ্লিকেশনের ইউজার এক্সপেরিয়েন্স বা পার্ফমেন্স বাড়ানোর জন্য যেসব বড় বড় ডেটা গুলো থাকে সেগুলো ব্রাউজারে স্টোর করে রাখতে পারি।

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

<small>➡️এই সম্পর্কে বিস্তারিত জানতে ভিজিট করুনঃ https://www.npmjs.com/package/localforage</small>

<hr>

✳️ আশা করি, আজকের এই পর্বে ৫টি প্যাকেজ বা লাইব্রেরী সম্পর্কে আপনারা জানতে পেরেছেন। পর্বরতী সিরিজে ৬ থেকে শুরু করে ১০ পর্যন্ত আরো ৫টি প্যাকেজ নিয়ে আলোচনা করা হবে এবং একইভাবে পর্যায়ক্রমে ৪টি সিরিজে মোট ২০টি লাইব্রেরী বা প্যাকেজ নিয়ে আপনাদের সাথে আমি আলোচনা করবো ইনশাআল্লাহ্‌।