ফ্রন্ট-এন্ড ওয়েব ডেভেলপমেন্ট এর এক যুগান্তকারী টুলস এর নাম রিয়েক্ট জেএস। এটি একটি ইন্টারেক্টিভ ইউজার ইন্টারফেস (UI) ভিত্তিক জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক যা দিয়ে খুব দ্রুত ওয়েব ও মোবাইল অ্যাপ তৈরী করা যায়।
ReactJS ওপেন-সোর্স প্ল্যাটফর্মে তৈরী; অধিক কম্পোনেন্ট সমৃদ্ধ লাইব্রেরী। যা দিয়ে খুব সহজেই ওয়েব ও মোবাইল অ্যাপ্লিকেশনের (ফ্রন্ট-এন্ড) ভিউ লেয়ার ডেভেলপ করা যায়। মডেল ভিউ কন্ট্রোলার (MVU) এর কাঠামো আপনার অ্যাপটি দেখতে কেমন হবে তা নির্ধারণ করে।
রিয়েক্ট দিয়ে খুব দ্রুত, নিরাপদ এবং স্কেলেবল অ্যাপ প্রতিনিয়তই ডেভেলপ করা হচ্ছে। রিয়েক্ট জেএস ইউজার ও ডেভেলপারকে এমন সব অভিজ্ঞতা দিয়ে থাকে যা অন্যান্য ফ্রেমওয়ার্কে সচরাচর দেখতে পাওয়া যায় না। তাই আপনি যদি আপনার পরবর্তী প্রজেক্টের জন্য কোন ফ্রেমওয়ার্ক ব্যবহার করবেন তা নিয়ে চিন্তিত থাকেন, তাহলে আমি বলবো আপনি নিশ্চিন্তে রিয়েক্ট জেএস কে বেছে নিতে পারেন (*শর্তসাপেক্ষ)।
ফ্রন্ট-এন্ড এবং ব্যাক-এন্ড ওয়েব ডেভেমপমেন্ট সম্পর্কে বিস্তরিত জানতে “প্রযুক্তির অভিযাত্রি” কর্তৃক প্রকাশিত প্রযুক্তি সাময়িকী’তে ‘ফ্রন্ট-এন্ড বনাম ব্যাক-এন্ডডেভেলপমেন্ট‘ নিয়ে আমার লেখাটি পড়তে পারেন। যা আপনাকে ফ্রন্ট-এন্ড এবং ব্যাক-এন্ড ডেভেমপমেন্ট সম্পর্কে পুর্নাঙ্গ ধারণা দিতে সক্ষম হবে বলে আমার বিশ্বাস।
কেনো আপনি ReactJS কে বেছে নেবেন তার সঠিক ধারণা পেতে পুরো প্রকাশনাটি পড়তে থাকুন শেষ পর্যন্ত।
ReactJS কি?
এটি একটি জাভাস্ক্রিপ্টের জনপ্রিয় ফ্রেমওয়ার্ক যা ব্যবহারকারী ইন্টারফেস ডেভেলপমেন্টের জন্য ব্যবহার করছে। কোনো সফ্টওয়্যার ইন্জিনিয়ার এটাকে “ফ্রেমওয়ার্ক” বলতে নারাজ কেননা, এটি ডেভেলপারদের স্বাধীনতা, কাজের গতি, নির্ভুল কোড ও বিশেষ সুবিধা দিয়ে থাকে যা অন্যান্য ফ্রেমওয়ার্ক দিতে ব্যর্থ হয়েছে।
ReactJS একটি ফ্লেক্সিবল, ডিক্লারেটিভ ও ইফেক্টিভ জাভাস্ক্রিপ্ট লাইব্রেরী। এটি একটি কম্পোনেন্ট-বেজড ফ্রন্ট-এন্ড লাইব্রেরী যা দিয়ে শুধু মাত্র একটি অ্যাপ্লিকেশনের ভিউ লেয়ার তৈরী করা যায়।
পেছনের ইতিহাস-
ফেসবুকের ইন্জিনিয়ার জর্ডান ওয়াক (Jordan Walke) মর্ডান ইউআই ডেভেলপমেন্টের একটি নতুন মাত্রা যোগ করতে চেয়েছেন রিয়েক্ট জেএসের মাধ্যমে। যখন তিনি একটি ক্লায়েন্ট সাইড অ্যাপ্লিকেশন তৈরী করতে গিয়েছিলেন তখন দেখতে পেলেন DOM (ডকুমেন্ট অবজেক্ট মডেল) স্লো হয়ে যাচ্ছে কোনো একটা কারণে। অ্যাপটির এপিআই (অ্যাপ্লিকেশন প্রোগ্রামিং ইন্টরফেস) এর মধ্যে এইচটিএমএল (HTML) ও এক্সএমএল (XML) ফাইল অ্যাড করতে গিয়ে এই বিষয়টি তার নজরে আসে। লজিক্যাল কাঠামো এর ভিত্তিকে আরো শক্তিশালী করে রিয়েক্ট জেএস কে তিনি প্রস্তুত করেন।
সর্বপ্রথম রিয়েক্ট জেএসকে তিনি ২০১২ সালে পরিচয় করিয়ে দেন। তার আগে অ্যাপে HTML5 এর পরিবর্তে রিয়েক্ট জেএস ব্যবহার করে ব্যাপক সফলতা তিনি দেখতে পান। এবং অফিসিয়ালি ২০১৩ সালে এটি উন্মুক্ত করে ওপেন-সোর্স করে দেয় ফেসবুক কর্তৃপক্ষ।
কেন ডেভেলপারদের পছন্দের শীর্ষে রিয়েক্ট জেএস-
প্রথমত, এটি একটি ওপেন-সোর্স প্ল্যাটফর্ম তাই সকল ডেভেলপারদের কাছে এটি ইতিমধ্যে খুবই গ্রহনযোগ্যতা অর্জন করে নিয়েছে। React দিয়ে আপনি ডাইনামিক অ্যাপ্লিকেশন তৈরী করতে পারবেন যা ব্রাউজারের ফাংশনালিটির একটি উল্লেখযোগ্য কাজ সম্পাদন করে থাকে এবং ডেভেলপাররা সার্ভারের সাথে কানেক্ট না করেই কাজ করতে পারে। এতে করে ডেভেলপার অ্যাপ্লিকেশনে স্বাধীনভাবে ডেটা এবং ইন্টারফেস আপলোত করতে পারে।
ReactJS ফ্রেমওয়ার্ক ডেভেলপারদের ইউজার ইন্টারফেস (UI) তৈরীতে সহায়তা করে। ইউআই এর অন-স্ক্রিন মেনু, সার্চবার, বাটন ও সকল ইলিমেন্টগুলোকে ওয়েবসাইট এবং ওয়েব অ্যাপ্লিকেশনের মধ্যে সম্পর্ক স্থাপন করতে সহায়তা করে।
ReactJS আসার আগে ডেভেলপাররা ইউআই ডিজাইন করতে “ভেনিলা জাভাস্ক্রিপ্ট” অথবা “জেকুয়েরি” যা ছিলো দীর্ঘ সময়ের ব্যপার এবং প্রচুর ইরর ও বাগে পরিপূর্ণ।
রিইউজেবল রিয়েক্ট লাইব্রেরী কোড সহ কম সময়ে দ্রুত ডেভেলপমেন্ট এবং কোডিংয়ে ইরর কমাতে সাহায্য করে। এবং ইউজার ইন্টারফেসের ডিজাইন অসাধারন ও দ্রুতগতি সম্পন্ন হওয়ার কারণে এটি ডেভেলপারদের কাছে অত্যন্ত জনপ্রিয় হয়ে উঠেছে। এছাড়াও,
- রিয়েক্ট জেএসের কোড রিডাকশন হয় স্নিপেট ও কম্পোনেন্ট হিসেবে।
- জেএসএক্স (JSX) এর অপশন গুলো সরাসরি DOM কে ম্যনিপুলেট করে।
- ভার্চুয়াল DOM ওয়েব সাইটের পারফর্মেন্স বৃদ্ধিতে অনেক সহায়ক।
একারণেই মূলত রিয়েক্ট দিয়ে ডেভেলপ করা সকল ওয়েবসাইট অসম্ভব রকম ফাস্ট হয়ে থাকে। ডেভেলপারদের জন্য রিয়েক্টকে পছন্দ করার এটিই অন্যতম কারণ।
একজন ডেভেলপার হিসেবে কেনো আপনি রিয়েক্ট ব্যবহার করবেন?
ফ্রন্ট-এন্ড ওয়েব ডেভেলপমেন্ট এর ক্ষেত্রে ReactJS এর বর্তমান জনপ্রিয়তা আকাশচুম্বী। তাই আপনিও এটি নিয়ে কাজ শুরু করতে পারেন। কিন্তু কেনো করবেন? চলুন জেনে নেওয়া যাক –
খুব সহজে ডাইনামিক অ্যাপ্লিকেশন তৈরী করা যায়-
ডাইনামিক অ্যাপ্লিকেশন বানানো পূর্বে অনেক কঠিন ব্যাপার ছিলো কিন্তু React এটাকে খুব সহজ করে দিয়েছে। এর জন্য কম কোডিং প্রয়োজন এবং এর কার্যকারিতা অনেক বেশি।
অধিক কর্মক্ষমতা সম্পন্ন অ্যাপ্লিকেশন তৈরী করা যায়-
React যেহেতু ভার্চুয়াল DOM ব্যবহার করে তাই, অ্যাপ্লিকেশনের পারফর্মেন্স ও স্পীড তুলনামূলক অধিক হয়ে থাকে। এর একটি কারণ হচ্ছে, সকল কম্পোনেন্টস মুহুর্তের মধ্যে আপলোড হয় এবং সাথে সাথেই এক্সিকিউট করতে পারে।
কম্পোনেন্ট গুলো একাধিকবার ব্যবহার করা যায়-
রিয়েক্টের কম্পোনেন্ট মিলে একটি ব্লক তৈরী করে যা অ্যাপ্লিকেশনের বিভিন্ন অংশে ব্যবহৃত হয়। React লজিক অনুযায়ী কম্পোনেন্টকে নিজের মতো পরিবর্তন করে নেয় যার ফলে ইউজার বেষ্ট পারফরমেন্স পেয়ে থাকে এবং ফ্রন্ট-এন্ডের জটিল একশন গুলো খুব সহজেই হয়ে যায়।
একমুখী ডেটা প্রবাহ-
ReactJS সর্বদাই একমুখী ডেটা প্রবাহ করে থাকে। তার মানে, যখন একটি রিয়েক্ট অ্যাপ ডিজাইন করা হয়, তখন প্যারেন্ট ও চাইল্ড কম্পোনেন্টের মধ্যে কানেকশন তৈরী করতে হয়। এতে করে খুব সহজে বিভিন্ন ইরর ডিবাগ করা যায়। ও কোনো বাগ পাওয়া গেলে সেটা দ্রুত ফিক্স করা সম্ভব হয়।
রিয়েক্ট দিয়ে ওয়েব ও মোবাইল অ্যাপ ডেভেলপ করা যায়-
আমি ইতিপূর্বেই বলেছি রিয়েক্ট দিয়ে ওয়েব অ্যাপ ডেভেলপ করা হয়। কিন্তু শুধু তাই নয় এটি দিয়ে খুব সুন্দর মোবাইল অ্যাপও ডেভেলপ করা যায়। রিয়েক্ট নেটিভ নামক একটি ফ্রেমওয়ার্ক আছে যা দিয়ে মোবাইল অ্যাপ খুব সহজেই ডেভেলপ করা। এবং তা একই সাথে সব প্ল্যাটফর্মে সাপোর্ট করে।
সহজে ডিবাগ করা যায়-
ফেসবুক ক্রোম এক্সটেনশন ডেভেলপ করেছে যা দিয়ে খুব সহজে রিয়েক্ট ডিবাগ করা যায়। এটি রিয়েক্ট ওয়েব অ্যাপ্লিকেশনক ডিবাগিং প্রসেসকে করেছে অনেক সহজ ও দ্রুত। ডিবাগিং কি ও এটা সম্পর্কে বিস্তারিত জানতে আমার লেখা “ডেভেলপারের জন্য ডিবাগিং কেন গুরুত্বপূর্ণ!” পড়তে পারেন।
রিয়েক্টের তিনটা টার্মস যা আপনার জানা খুবই জরুরী-
রিয়েক্টের তিনটি এক্সপ্রেশন রয়েছে যে গুলো আপনি জানলে রিয়েক্ট সম্পর্কে একটু ধারণা পেয়ে যাবেন।
- কম্পোনেন্টস (Components):ব্লক আকারে কম্পোনেন্টস গুলো সাজানো হয় যা অ্যাপ্লিকেশনের সব গুলো ইলিমেন্টকে একত্রে রাখতে সহায়তা করে। রিয়েক্টে কাস্টম কম্পোনেন্ট বানানো যায় যা একটি পরিপূর্ণ ইউআই লাইব্রেরী তৈরী করতে ও কাস্টম লজিকের সাথে কানেকশন করতে সহায়তা করে।
- জেএসএক্স (JSX): জাভাস্ক্রিপ্টের একটি সিনট্যাক্স এক্সটেনশন হচ্ছে জেএসএক্স। ইউআই সুন্দর করতে মূলত এটি রিয়েক্টে ব্যবহার করা হয়। একই সাথে এটি অনেকটা টেমপ্লেট ইঞ্জিনের মতো কাজ করে থাকে, যা জাভাস্ক্রিপ্টকে পরিপূর্ণ সক্ষম করে তোলে। রিয়েক্টের ইলিমেন্টস গুলোকে DOM এর মধ্যে রেন্ডারিং করতে জেএসএক্স অসাধারণ কাজ করে থাকে।এটি একটি জাভাস্ক্রিপ্ট এক্সটেনশন যা ডেভেলপারদের এইচটিএমএল ও এক্সএমএল সিনটেক্সট কন্ট্রোল ও লজিক কে একসাথে করে।
- রিডাক্স (Redux): এটি একটি স্টেট ম্যানেজমেন্ট লাইব্রেরী যা কোডকে ভেরিয়েন্ট ইকোসিস্টেমের আওতায় নিয়ে আসে। রিডাক্স অ্যাপ্লিকেশনের কোডকে ধারাবাহিক ভাবে সাজাতে ও বিভিন্ন এনভায়রনমেন্টে (যেমন: ক্লায়েন্ট, সার্ভার ও নেটিভ) রান করতে সহায়তা করে। এবং রিডাক্সের সবচেয়ে আকর্ষনীয় ফিচার হলো এটি দিয়ে লাইভ কোড ইডিট করা যায়।
React দিয়ে তৈরী কিছু জায়ান্ট অ্যাপ সম্পর্কে জেনে নিই-
প্রথমেই ফেসবুকের এর কথাই চিন্তা করুন। ২০১২ সালে প্রথম ফেসবুক রিয়েক্ট ব্যবহার করে। ফেসবুক এ তখন অ্যাড (বিজ্ঞাপন) দেয়া এবং সোস্যাল নেটওয়ার্ক ম্যানেজ করা অনেক চ্যালেন্জিং ছিলো। ফেসবুক তখন HTML5 থেকে সরে রিয়েক্টে মুভ করে এবং একটি অসাধারন মোবাইল ও ওয়েব ইউআই (UI) দিতে সক্ষম হয়।
পরবর্তীতে Instagram এ এটি ব্যবহার করে ব্যাপক সফলতা অর্জন করে কোম্পানিটি।এছাড়া আরো অনেক বড় বড় কোম্পানি তাদের ওয়েব অ্যাপ ও মোবাইল অ্যাপে রিয়েক্ট জেএস ব্যবহার করেছে। তাদের মধ্যে অন্যতম অ্যাপ্লিকেশন গুলো হলো:
- সোস্যাল নেটওয়ার্কিং অ্যাপ্লিকেশন
- ফেসবুক
- ইনস্টাগ্রাম
- প্রিন্টারেস্ট
- টুইটার
- রেডিট
- শেয়ারিং প্ল্যাটফর্ম
- এয়ারবিএনবি (Airbnb)
- লিফ্ট (Lyft)
- উবার
- মিডিয়া সাইটস
- ইয়াহু! (তাদের মেইল ক্লায়েন্ট রিয়েক্ট দিয়ে ডেভেলপ করা হয়েছে)
- নিউইয়র্ক টাইমস
- ভিডিও প্ল্যাটফর্ম
- নেটফ্লিক্স
- SaaS (সফটওয়্যার এজ এ সার্ভিস)
- ড্রপবক্স
- সেন্ডগ্রিড
- আসানা
- ইনভিশনঅ্যাপ
- জ্যাপিয়ার
- অন্যান্য বিশেষ
- মাইক্রোসফট
- ইবে (ebay)
React এর ভবিষ্যৎ-
ReactJS এতোটা জনপ্রিয় হবার পেছনে অবশ্যই কারন আছে। এটি Stack Overflow Developer Survey 2019 এর রিপোর্ট মতে পৃথিবীর সবচেয়ে জনপ্রিয় এবং চাহিদা সম্পন্ন ওয়েব ফ্রেমওয়ার্ক। স্ট্যাকওভার ফ্লোতে রিয়েক্টের ট্রেন্ডস দেখা যাচ্ছে
২০১৯ সালের সার্ভে অনুযায়ী বিশ্বের প্রায় ৩১.৩% ডেভেলপার এটি নিয়ে কাজ করে এবং ২১.৫% সফটওয়্যার ইঞ্জিনিয়ার এটি সম্পর্কে জানে এবং তারা রিয়েক্ট নিয়ে কাজ করতে আগ্রহী। গুগলে রিয়েক্ট টপিকে সার্চ করা গত ৫ বছরের ট্রেন্ডস
রিয়েক্ট জেএস ডেভেলপাররা অন্যান্য ওয়েব ডেভেলপারদের তুলনায় অনেক বেশি টাকা ইনকাম করে থাকে। রিয়েক্ট জেএসে অ্যাপের দ্রুত উপস্থাপনা ও উত্থানের কারনে সামনের পুরো ওয়েব ডেভেলপমেন্ট ইন্ডাস্ট্রি ডোমিনেট করতে পারে বলে অনেকে মন্তব্য করে থাকেন।
React কিভাবে কাজ করে?
এবার আসি আরেকটু গভীরে যাই। আমরা সাধারণত ওয়েবসাইটে এইচটিএমএল, সিএসএস সহ জাভাস্ক্রিপ্ট ইউজ করি। এখন ব্রাউজার বিহ্যাইন্ড দ্যা সীনে একটা ডম ট্রি তৈরী করে যাতে ইউজার সেই ডমের সাথে ইন্টার্যাক্ট করতে পারে। ব্রাউজারের এই প্রসেসটাকে ক্রিটিক্যাল রেন্ডার পাথ [] বলে।
এখানে প্রসেসগুলো দেখুন। এভাবে একেকটা ধাপ পেরিয়ে একটা ডম (DOM) তৈরী করা হয়। তারপরে আমাদের সামনে একটা ওয়েবপেজ প্রদর্শিত হয়। কিন্তু আমরা জানি জাভাস্ক্রিপ্ট ডম ম্যানিপুলেট করতে পারে। তো জাভাস্ক্রিপ্ট দিয়ে রেন্ডার কমপ্লিট হওয়া কোন পেজের ডম ম্যানিপুলেট করলে সেই ওয়েবপেজ আবার পুরোপুরি রেন্ডার হয়(দুই একটা লেটেস্ট ব্রাউজার ছাড়া বাকী বেশীরভাগ ব্রাউজারই পুরোপুরি নতুন করে আবার ডম ট্রি তৈরী করে রেন্ডার করে) যেটা সময় সাপেক্ষ। আর তাই একটা পেজে ডম ম্যানিপুলেট করার মতো ততো বেশী জাভাস্ক্রিপ্ট থাকলে সেই ওয়েবপেজ স্লো হয়ে যাবে। তো এখানেই রিঅ্যাক্ট এর আসল খেলা।
React কি করে? রিঅ্যাক্ট একটা সেইম টু সেইম এই ব্রাউজারের ডমের মতো করে আরেকটা ডম তৈরী করে যেটাকে ভার্চুয়াল ডম বলা হয়। এখন এই ডম দেখতে পুরো সেই আসল ডমের মতোই, কিন্তু এই ভার্চুয়াল ডমটা আসলে একটা জাভাস্ক্রিপ্ট অবজেক্ট। রিঅ্যাক্ট এটাকে এমনভাবে তৈরী করে যে এই ডমের সাথে সহজেই জাভাস্ক্রিপ্ট ইউজ করে যেকোনো ইলিমেন্ট মডিফাই করা যায় কম সময়ের মধ্যে এবং এফিসিয়েন্টলি।
এখন এখানেও রিঅ্যাক্ট আরেকটা কাজ করে। রিঅ্যাক্ট একটা না বরং দুইটা ভার্চুয়াল ডম তৈরী করে। কিন্তু দুইটা কেনো? হ্যা এখানেই ট্রিকটা। ইউজার যখন রিঅ্যাক্ট অ্যাপের মধ্যে কোনো অ্যাকশন নেয় বা আমরা যেটা বলি ডমে কোনো চেঞ্জ আনার মতো কিছু করে তখন রিঅ্যাক্ট দুইটা ভার্চুয়াল ডমের মধ্যে একটাতে সেই চেঞ্জগুলো রাখে, আর আরেকটা থাকে আগের ভার্শনের। এখন আগেরটার সাথে নতুনটার তুলনা করে রিঅ্যাক্ট দেখে আসলে স্পেসেফিক ঠিক কোন ইলিমেন্ট পরিবর্তন করা হয়েছে। সে অনুসারে রিঅ্যাক্ট পুরো ডমটাকে রি-রেন্ডার বা রি-পেইন্ট না করে শুধুমাত্র যেই জিনিসটা চেঞ্জ হয়েছে সেটাকেই চেঞ্জ করে। এতে সহজেই দ্রুত কাজ হয়ে যায় আর অতিরিক্ত, অপ্রয়োজনীয় কোনো কাজও করতে হয় না ব্রাউজারের। আর এভাবেই, এই টেকনিক ইউজ করেই রিঅ্যাক্ট এতো ফাস্ট রেন্ডার করতে পারে।
জাভাস্ক্রিপ্ট শেখার পর আমি বুঝবো যে আমার এখন রিয়েক্ট জেএস শেখা উচিত?
নির্ভর করছে আপনি রিয়্যাক্ট দিয়ে কি করতে চান বা রিয়্যাক্ট নিয়ে কতদুর দৌড়াতে চান তার উপর । তবে আমার মতে কেউ রিয়্যাক্ট শিখতে আসার আগে তার নিম্নোক্ত বিষয়গুলিতে হাত পাকিয়ে আসা উচিত , না হলে মাঝপথে খাবি খেতে হয়।
- Class
- Modules (import , export)
- Template Literals
- Inheritance
- Data Types , Type Casting
- Constructor , Member variable , Member function
- In Depth concept of null and undefined
- Difference between let , var and const
- Array.forEach() , Array.map() , Function.call() , Function.apply() , Function.bind() and similar Functions/Properties
- Block scoping & Hoisting
- Working with keyword this
- Object manipulation
- Arrow function
- Rest and spread operator
- Exception handling
- String manipulation
- Callbacks
- Asynchronous programming
- Associative array , for-in loop , Map , WeakMap , Set , WeakSet
- Promise
- Working with events , event propagation & delegation , bubbling, capturing
- Fetch for consuming APIs
আপাতত, এইটুকু জানা থাকলে আশা করি খাবি খেতে হবে না এবং এরপর রিয়্যাক্টে হাত দিলে আপনি নিজেই বুঝতে পারবেন আপনার কোথায় খামতি আছে বা কি শেখা দরকার।
React এর সীমাবদ্ধতা-
- অ্যাপ্লিকেশনের কেবলমাত্র ভিউ লেয়ার কভার করে, তাই ডেভেলপমেন্টের জন্য একটি সম্পূর্ণ টুলস নির্ধারণে আপনাকে অন্যান্য প্রযুক্তির সাহায্য নিতে হবে।
- ইনলাইন টেম্প্লেটিং এবং জেএসএক্স ব্যবহার করে যা কিছু ডেভেলপারের কাছে বিশ্রী মনে হতে পারে।
ReactJS এনভাইরনমেন্ট সেটআপ-
এই অধ্যায়ে আমরা আপনাকে দেখাবো React ডেভেলপমেন্টের জন্য কীভাবে একটি এনভাইরোমেন্ট সেটআপ করতে হয়। লক্ষ্য করলে দেখবেন যে, এতে অনেকগুলি ধাপ জড়িত রয়েছে তবে এটি পরবর্তীতে আপনার ডেভেলপমেন্ট প্রক্রিয়ার গতি বাড়াতে সহায়তা করবে। আমাদের NodeJS প্রয়োজন হবে, সুতরাং আপনার যদি এটি ইনস্টল না করা থাকে তবে নীচের টেবিল থেকে লিঙ্কে ক্লিক করে এটি ইন্সটল করুন।
| ক্রমিক নং | সফটওয়্যার এবং বর্ণনা |
| 1 | NodeJS এবং NPM
NodeJS হল ReactJS ডেভেলপমেন্টের জন্য একটি প্রয়োজনীয় প্ল্যাটফর্ম।এটি ইন্সটল করার জন্য NodeJS এনভায়রনমেন্ট সেটআপ বাটনে ক্লিক করুন। |
NodeJS সফলভাবে ইনস্টল করার পরে, আমরা NPM ব্যবহার করে এর উপরে React সেটআপ এর কাজটি শুরু করতে পারি। আপনি দুইভাবে ReactJS ইনস্টল করতে পারেনঃ
- Webpack এবং Babel ব্যবহার করে।
- create-react-app কমান্ড ব্যবহার করে।
Webpack এবং Babel ব্যবহার করে ReactJS ইন্সটল-
ওয়েবপ্যাক হল মডিউল বান্ডেলার(module bundler)। এটি নির্ভরশীল মডিউল গ্রহণ করে এবং সেগুলিকে একটি একক (ফাইল) বান্ডেলে সংকলন(compile) করে। অ্যাপ্লিকেশন ডেভেলপমেন্টের সময় কমান্ড লাইন ব্যবহার করে বা webpack.config ফাইল কনফিগার করে আপনি এই বান্ডিলটি ব্যবহার করতে পারেন।
বাবেল একটি জাভাস্ক্রিপ্ট কম্পাইলার(compiler) এবং ট্রান্সপিলার(transpiler)। এটি এক সোর্স কোড হতে অন্য কোডে রূপান্তর করতে ব্যবহৃত হয়। এটি ব্যবহার করে আপনি আপনার কোডে নতুন ES6 বৈশিষ্ট্যগুলি ব্যবহার করতে সক্ষম হবেন, যেখানে বাবেল এটিকে পুরানো ES5 এ রূপান্তর করে এবং যা সমস্ত ব্রাউজারে সমর্থন করে।
ডেস্কটপে mkdir কমান্ড ব্যবহার করে প্রয়োজনীয় সমস্ত ফাইল ইনস্টল করতে reactApp নামে একটি ফোল্ডার তৈরি করুন।
C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactApp
যে কোন মডিউল তৈরি করতে package.json ফাইল তৈরি করা দরকার। সুতরাং, ফোল্ডারটি তৈরি করার পরে, আমাদের একটি package.json ফাইল তৈরি করা দরকার। এটি করার জন্য আপনাকে কমান্ড প্রম্পট থেকে npm init কমান্ডটি চালাতে হবে।
C:\Users\username\Desktop\reactApp>npm init
এই কমান্ডটি মডিউল সম্পর্কে তথ্য জিজ্ঞাসা করে যেমন- প্যাকেজ নাম, বিবরণ, লেখক ইত্যাদি। -y বিকল্পটি ব্যবহার করে আপনি এগুলি এড়িয়ে যেতে পারেন।
C:\Users\username\Desktop\reactApp>npm init -y
C:\reactApp\package.json:
{
"name": "reactApp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
ধাপ ২ – React এবং react dom ইন্সটল
যেহেতু আমাদের মূল কাজ হল ReactJS এবং এর ডোম প্যাকেজ ইনস্টল করা। তাই আমরা যথাক্রমে npm এর install react এবং react-dom কমান্ড ব্যবহার করে এগুলো ইনস্টল করবো। –save অপশন ব্যবহার করে package.json ফাইলটিতে আমরা ইনস্টল করা প্যাকেজগুলি যুক্ত করতে পারি।
C:\Users\Satt\Desktop\reactApp>npm install react --save
C:\Users\Satt\Desktop\reactApp>npm install react-dom --save
অথবা, আপনি এগুলি সিঙ্গেল কমান্ডেই ইনস্টল করতে পারেন -
C:\Users\username\Desktop\reactApp>npm install react react-dom --save
ধাপ ৩ – Webpack ইন্সটল
ওয়েবপ্যাক ইন্সটল করার জন্য কমান্ড প্রম্পট থেকে যথাক্রমে install webpack, install webpack-dev-server এবং install webpack-cli কমান্ড ব্যবহার করুন-
C:\Users\username\Desktop\reactApp>npm install webpack –save
C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --save
C:\Users\username\Desktop\reactApp>npm install webpack-cli --save
অথবা, আপনি উপরের সবগুলোকে এক কমান্ডেই ইনস্টল করতে পারেন -
C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-server webpack-cli --save
ধাপ ৪ – Babel ইন্সটল
ব্যাবেল ইনস্টল করুন এবং এর প্লাগইনসমূহ babel-core, babel-loader, babel-preset-env, babel-preset-react এগং html-webpack-plugin ইত্যাদি ইনস্টল করুন-
C:\Users\username\Desktop\reactApp>npm install babel-core --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-loader --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-env --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-react --save-dev
C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin --save-dev
অথবা, আপনি উপরের সবগুলোকে এক কমান্ডেই ইনস্টল করতে পারেন -
C:\Users\username\Desktop\reactApp>npm install babel-core babel-loader babel-preset-env
babel-preset-react html-webpack-plugin --save-dev
ধাপ ৫- ফাইল তৈরি
ইনস্টলেশন সম্পন্ন করতে আমাদের কিছু ফাইল তৈরি করতে হবে। যেমন index.html, App.js, main.js, webpack.config.js এবং .babelrc । আপনি এই ফাইলগুলি ম্যানুয়ালি বা কমান্ড প্রম্পট ব্যবহার করে তৈরি করতে পারেন ।
C:\Users\username\Desktop\reactApp>type nul > index.html
C:\Users\username\Desktop\reactApp>type nul > App.js
C:\Users\username\Desktop\reactApp>type nul > main.js
C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc
ধাপ ৬ – Compiler, Server এবং Loader সেট করা
webpack-config.js ফাইল ওপেন করুন এবং নিম্নের কোড যুক্ত করুন। আমরা ওয়েবপ্যাক এর এন্ট্রি পয়েন্ট main.js এ স্থাপন করেছি। আউটপুট পাথ এমন এক স্থানকে বুঝায় যেখানে বান্ডিল অ্যাপটি পরিবেশন করা হবে। আমরা 8001 পোর্ট যুক্ত করে ডেভলপমেন্ট সার্ভারটিও সেট করেছি। আপনি আপনার ইচ্ছামত পোর্ট চয়ন করতে পারেন।
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
path: path.join(__dirname, '/bundle'),
filename: 'index_bundle.js'
},
devServer: {
inline: true,
port: 8001
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template: './index.html'
})
]
}
package.json ফাইল ওপেন করুন এবং “scripts” অবজেক্টের ভিতরে “test” :”echo \”Error: no test specified\” && exit 1” মুছে ফেলুন। এই লাইনটি মুছে ফেলার কারণ হচ্ছে আমরা এই টিউটোরিয়ালে কোন পরীক্ষা(test) করব না। এর পরিবর্তে নিম্নের ন্যায় start এবং build কমান্ড যুক্ত করুন।
“start”: “webpack-dev-server –mode development –open –hot”,
“build”: “webpack –mode production”
ধাপ ৭ index.html ফাইল তৈরি
এটি একটি সাধারণ এইচটিএমএল ফাইল। আমরা div id = “app” কে আমাদের অ্যাপ্লিকেশনের জন্য মূল(root) উপাদান হিসাবে সেট করেছি এবং index_bundle.js স্ক্রিপ্ট যুক্ত করছি যা আমাদের বান্ডিল অ্যাপ্লিকেশন ফাইল।
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = 'index_bundle.js'></script>
</body>
</html>
ধাপ ৮ − App.jsx এবং main.js
এটি React এর প্রথম কম্পোনেন্ট। আমরা পরবর্তী অধ্যায়ে সবগুলো React কম্পোনেন্ট সম্বন্ধে বিশদ ব্যাখ্যা করব। এই কম্পোনেন্ট Hello World কে রেন্ডার করে।
App.js
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>Hello World</h1>
</div>
);
}
}
export default App;
আমাদের এই কম্পোনেন্টটি ইম্পোর্ট করতে হবে এবং এটি আমাদের মূল অ্যাপ এলিমেন্টে রেন্ডার করতে হবে, যাতে আমরা এটি ব্রাউজারে দেখতে পারি।
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
নোট – আপনি যখনই কোনকিছু ব্যবহার করতে চাইবেন, আপনাকে প্রথমে এটি import করতে হবে। আপনি যদি অ্যাপটির অন্যান্য অংশগুলিতে উপাদানটি ব্যবহারযোগ্য করে তুলতে চান তবে আপনাকে তৈরির পরে এটি export করতে হবে এবং যে ফাইলে আপনি এটি ব্যবহার করতে চান সেখানে তা import করতে হবে।
Babelrc নামে একটি ফাইল তৈরি করুন এবং এতে নীচের কন্টেন্ট কপি করুন।
{
“presets”:[“env”, “react”]
}
ধাপ ৯ – সার্ভার রান করানো
সেটআপটি সম্পূর্ণ হয়ে গেছে। এখন আমরা নিম্নলিখিত কমান্ডটি চালিয়ে সার্ভারটি রান করতে পারি।
.
C:\Users\username\Desktop\reactApp>npm start
It will show the port we need to open in the browser. In our case, it is http://localhost:8001/. After we open it, we will see the following output. এটি ব্রাউজারে যে port খুলতে হবে তা প্রদর্শন করবে। আমাদের ক্ষেত্রে এটি http://localhost:8001/ । এটি খোলার পরে, আমরা নিম্নলিখিত আউটপুটটি দেখতে পাব।
ধাপ ১০- বান্ডেল জেনারেট করা
অবশেষে, বান্ডিল তৈরি করতে আপনার কমান্ড প্রম্পটে নিম্নের ন্যায় build কমান্ড চালাতে হবে –
−
C:\Users\Satt\Desktop\reactApp>npm run build
এটি নীচের চিত্রের মতো বর্তমান ফোল্ডারে বান্ডিল তৈরি করবে।
create-react-app কমান্ডটি ব্যবহার করে
ওয়েবপ্যাক এবং ব্যাবেল ব্যবহার না করে আপনি আরও সহজে create-react-app ইনস্টল করে ReactJS ইনস্টল করতে পারেন।
ধাপ ১ – create-react-app ইনস্টল
ডেস্কটপের মাধ্যমে ব্রাউজ করুন এবং কমান্ড প্রম্পটটি ব্যবহার করে নীচের মত করে create-react-app ইনস্টল করুন –
C:\Users\Satt>cd C:\Users\Satt\Desktop\
C:\Users\Satt\Desktop>npx create-react-app my-app
এটি ডেস্কটপে my-app নামে একটি ফোল্ডার তৈরি করবে এবং এতে প্রয়োজনীয় সমস্ত ফাইল ইনস্টল করবে।
ধাপ ২ – সমস্ত সোর্স ফাইল মুছে ফেলুন
উৎপন্ন My-app ফোল্ডারে src ফোল্ডারটি ব্রাউজ করুন এবং নীচের মতো করে এটি থেকে সমস্ত ফাইল সরিয়ে ফেলুন-
−
C:\Users\Satt\Desktop>cd my-app/src
C:\Users\Satt\Desktop\my-app\src>del *
C:\Users\Satt\Desktop\my-app\src\*, Are you sure (Y/N)? y
ধাপ ৩ – ফাইল যোগ করুন
src ফোল্ডারে index.css এবং index.js নামের ফাইল যুক্ত করুন –
−
C:\Users\Satt\Desktop\my-app\src>type nul > index.css
C:\Users\Satt\Desktop\my-app\src>type nul > index.js
index.js ফাইলে নিম্নের কোড যোগ করুন।
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
ধাপ ৪ – প্রোজেক্ট রান করান
পরিশেষে, start কমান্ড ব্যবহার করে প্রোজেক্টটি রান করান।
npm start
পরিশেষে বলবো-
অনেক কোম্পানিই ReactJS এ মাইগ্রেট হচ্ছে এবং নতুন অনেক প্রজেক্ট তৈরীতে ইতিমধ্যে ব্যাবহার শুরু করেছে। তাই সকল জুনিয়র ও সিনিয়র ডেভেলপাররা এটি শিখছে ও নতুন প্রজেক্ট করছে।
ফেসবুক সহ অন্যান্য প্রতিষ্ঠান এটিকে ধারাবাহিক ও নিরাপদ রাখতে কাজ করে যাচ্ছে। যাতে করে ReactJS কে আরো ফ্ল্যাক্সিবল, স্ক্যালেবল ও সেফ রাখা যায়। এর সাথে সাথেই কিছু কমিউনিটি গড়ে উঠেছে যারা একযোগে এই টেকনোলোজি নিয়ে কাজ করে যাচ্ছে।
দিন দিন এটির ব্যবহার সহজ থেকে আরো সহজতর হচ্ছে। তাই সব ধরনের কমপ্লিক্সিটি থেকে রক্ষা পেতে চাইলে আপনার পরবর্তী ফ্রন্ট-এন্ড প্রজেক্টে রিয়েক্ট ব্যবহার করতে পারেন।
