একটি বাংলা রিএ্যাক্ট টিউটোরিয়াল
আসুন জাতীয় বিশ্ববিদ্যালয়ের জিপিএ হিসাব করার জন্য শুরু থেকে একটি রিএ্যাক্ট অ্যাপ বানাই।
আজকে আমরা শুরু থেকে স্টেপ বাই স্টেপ একটি রিএ্যাক্ট অ্যাপ বানাব। ব্যাসিক জাভাস্ক্রিপ্ট আর HTML জানলে এই টিউটোরিয়াল ফলো করতে পারবেন। ES6 আর OOP-র সাথে পরিচিত হয়ে থাকলে প্লাস। টিউটরিয়াল শেষ হলে অ্যাপটি দেখতে কিছুটা এমন হবে —
অলরেডি না থাকলে Node ইন্সটল করে নিতে হবে। আপনার অপারেটিং সিস্টেম অনুযায়ী ইন্সটল করে নিতে পারবেন আশা করি।
আমরা create-react-app নামে একটি নোড প্যাকেজ ইন্সটল করব। তারপর সেই টুলটি দিয়ে একটি রিএ্যাক্ট প্রজেক্ট তৈরী করব। তাহলে টার্মিনালে এই কমান্ডগুলো দেই।
sudo npm install -g create-react-app
create-react-app gpacalculatorএখন দেখবেন যে আপনার কারেন্ট ফোল্ডারে gpacalculator নামে একটি ফোল্ডার তৈরী হয়েছে। ফোল্ডারের ভেতরে বেশ অনেকগুলো সাবফোল্ডার এবং ফাইলও তৈরী হয়েছে। ঐগুলো নিয়ে আমাদের মাথা ঘামাতে হবে না। আমারা আপাতত শুধু src ফোল্ডারের App.js ফাইলটি নিয়ে কাজ করব। ফাইলটি খুলে ভেতরে যা আছে মুছে এই কোডগুলো দিয়ে সেইভ করুন।
এখন gpacalculator ফোল্ডারে টার্মিনাল খুলে npm start কমান্ড দিন। কিছুটা সময় লাগবে, তারপর অটোমেটিক ব্রাউজার ওপেন হবে এবং এমন একটি পেজ দেখতে পাবেন।
এখন আসুন দেখি কোডটাতে আমার কি করছি। প্রথম লাইনে আমার রিএ্যাক্ট ইম্পোর্ট করছি।
তারপর আমরা রিএ্যাক্টের Component ক্লাস এক্সডেন্ড করে আমাদের নিজেদের একটি কম্পোনেন্ট তৈরী করছি। আমারা যেসব কম্পোনেন্ট তৈরী করব সবগুলোতে একটি render মেথড থাকতে হবে। এই মেথড থেকে আমাদের ঐ কম্পোনেন্টের HTML কোড রিটার্ণ করতে হবে। আমরা আপাতত শুধু একটি div ইলিমেন্টে Hello World! রিটার্ণ করছি। রিএ্যাক্ট এই কোডগুলোকে একটি HTML টেমপ্লেট ফাইলে ঢুকিয়ে দিয়ে ওয়েব পেজ তৈরী করবে। (টেম্প্লেট ফাইলটি gpacalculator/public ফোল্ডারে আছে, index.html। চাইলে খুলে দেখতে পারেন। আমাদের কোডগুলো #root ইলিমেন্টে ঢুকানো হবে।)
খেয়াল করুন আমারা জাভাস্ক্রিপ্টের মধ্যেই HTML লিখে ফেলছি। এগুলোকে বলে JSX যা কিনা পরবর্তীতে babel এর মাধ্যমে কনভার্ট হবে। যা নিয়ে আমাদের আপাতত মাথা ঘামাতে হবে না। তবে আপনার টেক্সট এডিটরে HTML কোডগুলো হইলাইট নাও হতে পারে। সেক্ষেত্রে আপনার এডিটর অনুযায়ী JSX প্লাগিন ইন্সটল করে নিতে পারেন। তাহলে কোডগুলো একটু সুন্দর দেখাবে।
আমাদের হ্যালো ওয়ার্ল্ড শেষ। চলুন আসল কাজে নেমে যাই। প্রত্যেক কোর্সের ক্রেডিট আর গ্রেড ইনপুট নেয়ার জন্য আমাদের দুটি করে HTML select ইলিমেন্ট দরকার হবে। চলুন সেগুলো আমাদের div ইলিমেন্টের ভেতরে ঢুকিয়ে দেই।
নতুন কোড দিয়ে ফাইল সেইভ হলে আমাদের ব্রাউজারে অ্যাপ উইন্ডো অটোমেটিক রিলোড হবে।
এখন দেখুন, আমাদের প্রত্যেকটা কোর্সের জন্য এমন দুইটি করে সিলেক্ট ইলিমেন্ট লাগছে। প্রত্যেক কোর্সের জন্য কপি পেস্ট করা কি ভাল হবে? তাছাড়া আমার পরবর্তীতে বাটন ক্লিকের মাধ্যমে নতুন কোর্স যোগ করার ফিচার এড করতে চাই। সেক্ষেত্রে কিন্তু আপনি পিসি নিয়ে বসে থাকতে পাবেন না যে ইউজার বাটন ক্লিক করবে আর আপনি একেকটা কোর্স পেস্ট করে দেবেন 😂
তাহলে কি করা যায়? আমারা কোর্স রিপ্রেজেন্ট করার জন্য একটি আলাদা কম্পোনেন্ট তৈরী করতে পারি। src ফোল্ডারে Course.js নামে একটা ফাইল তৈরী করে এই কোডগুলো দিন।
এখন এই Course কম্পোনেন্টটি আমরা আমাদের মূল কম্পোনেন্ট App কম্পোনেন্টে ইমপোর্ট করে ব্যবহার করতে পারব। যত খুশি ততবার।
অথবা,
সুন্দর না? আমারা এখন ইচ্ছা করলে লুপের মাধ্যমে courses অ্যারেতে একশটা কোর্স ঢুকাতে পারি!
খেয়াল করুন html কোডের ভেতরে যখন আবার কোন জাভাস্ক্রিপ্ট ভ্যারিএবল ব্যবহার করব তখন সেটা {} এর ভেতরে দিতে হবে।
এতক্ষণ যা করলাম সেটা করার জন্য রিএ্যাক্টের কোন দরকার ছিল না। প্লেইন HTML — এ ই করা যেত। এখন আমাদের আসল কাজ করতে হবে। মনে জিপিএ হিসাব করতে হবে। এজন্য আমাদের রিএ্যাক্টের স্টেট ব্যবহার করতে হবে। স্টেট অর্থ যা এখনেও তাই বুঝায়। অবস্থা, বা অবস্থা নির্দেশকারী ভ্যারিএবল। এখন আমার প্রত্যেকটা কোর্সের জন্য সিলেক্ট ইলিমেন্ট দুটির মান আমাদের মূল কম্পোনেন্টের state ভ্যারিয়েবলে রাখব। এজন্য আমাদের মূল কম্পোনেন্টে একাটি কন্সট্রাক্টর মেথড এড করে সেখানে state সেট করে দিতে হবে। পরে আমরা এই স্টেট ব্যবহার করে রেন্ডার মেথডে জিপিএ হিসাব করে html আকারে দেখাব। ইউজার যখন কোন একটা কোর্সের ক্রেডিট বা গ্রেড চেন্জ করবে আমরাও আমাদের স্টেট চেন্জ করব। আর স্টেট চেন্জ করেলে হবে কি, রেন্ডার মেথডটা আবার অটোমেটিক্যালি কল হবে। ফলে ইউজার আপডেটেট জিপিএ দেখতে পাবে। এখনেই রিএ্যাক্টের ক্যালমা শুরু।
তাহলে,
আশা করি কোড দেখেই বুঝতে পারছেন কি করা হচ্ছে। ম্যাপ ফাংশনটা না বুঝলেও আসুবিধা নেই। আমরা জাস্ট এখানে স্টেট এর প্রত্যেকটা কোর্সের জন্য একটা করে কোর্স কম্পোনেন্ট তৈরী করে courses অ্যারেতে রাখছি। আর প্রতি কোর্সের গ্রেড, ক্রেডিট টুকে নিচ্ছি। আপনি চাইলে state.courses এর উপর লুপ চালিয়েও এই কাজটা করতে পারেন।
তাছাড়া এখানে অ্যারো ফাংশনও ব্যবহার করা হচ্ছে। না বুঝতে পারলে এই আর্টিকেলের শেষে রেফেরেন্স দেয়া আছে। দেখতে পারেন।
এখন আর একটা কাজ করতে পারলে আমাদের মুটামুটি হয়ে যায়। তা হল ইউজার সিলেক্ট ইনপুট থেকে কোন কোর্সের ক্রেডিট/গ্রেড পরিবর্তন করলে আমাদের স্টেট পরিবর্তন করা। এজন্য আমরা App কম্পোনেন্টে handleChange একটা মেথড ডিফাইন করব। সেটা আর্গুমেন্ট হিসাবে নিবে i, যে কোর্স চেন্জ হয়েছে তার ইন্ডেক্স আর change, মানে সেই কোর্সের পরিবর্তিত অংশ। এখানে তৃতীয় লাইনে স্প্রেড অপারেটর ব্যবহার করা হচ্ছে। বুঝতে না পারলে গুগল করে নিন।
আর আমরা যদি সরাসরি স্টেট মডিফাই করি তাহলে রেন্ডার মেথড অটোমেটিক্যালি কল হবে না। তাই প্রথমে স্টেট এর courses প্রপার্টি কপি করে নিয়ে setState এর মাধ্যমে স্টেট আপডেট করছি।
এখন এই মেথডটি আমরা প্রতিটি Course কম্পোনেন্টে পাস করব। আবার সেই কোর্সের ইন্ডেক্সটাও পাস করব যাতে Course কম্পোনেন্ট থেকে কল করার সময় ইন্ডেক্সটা দিয়ে কল করা যায়।
এখন Course কম্পোনেন্টে থেকে এই মেথডটি কল করতে হবে, যখনই ইউজার ক্রেডিট বা গ্রেড চেন্জ করবে। এখন Course কম্পোনেন্টে গ্রেড চেন্জ আর ক্রেডিট চেন্জের জন্য দুইটি আলাদা আলাদা মেথড ইম্প্লিমেন্ট করব। আর সিলেক্ট ইলিমেন্ট দুটির onChange মেথড হিসেবে এই দুটিকে সেট করে দেব।
আরেকটা ব্যাপার খেয়াল করুন যে, আমার যেহেতু আমাদের স্টেটে প্রত্যেক কোর্সের ডিফল্ট গ্রেড B, ক্রেডিট 4 নিচ্ছি, সিলেক্ট ইলিমেন্টগুলোতেও সেই অপশনগুলো বাই ডিফল্ট সিলেক্ট করে দিচ্ছি।
তাহলে,
আমাদের অ্যাপ অলরেডি কাজ করেছে। এখন নতুন কোর্স এড করার সুবিধা দিলেই ব্যবহারযোগ্য হবে। কিভাবে দেব ? প্রথমেই App কম্পোনেন্টে মেথড ইম্প্লিমেন্ট করি, addCourse । এই মেথডটির কাজ হবে আমাদের স্টেটে নতুন কোর্স এড করা।
এখন App কম্পোনেন্টের রেন্ডার মেথডে একটি বাটন এড করে সেটির onClick মেথড হিসেবে এই মেথডটি সেট করে দেব। ব্যাস।
তাহলে এখন আমরা + বাটনে ক্লিক করে কোর্স এড করতে পারছি। এখন খালি একটু দেখতে সুন্দর হলেই আমাদের অ্যাপ কম্প্লিট। এজন্য আমরা Bulma CSS ফ্রেমওয়ার্ক ব্যবহার করব।
প্রথমেই আমাদের টেম্প্লেটে Bulma এড করে নিতে হবে। এজন্য gpacalculator/public ফোল্ডার থেকে index.html ফাইলটি খুলে হেড সেকশনে এই কোডগুলো এড করে দিব।
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.0/css/bulma.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
Bulma-র পাশাপাশি ফন্টগুলো সুন্দর দেখানোর জন্য Open Sans ফন্টও এড করে নিলাম। তারপরে একই ফাইলে #root ইলিমেন্টটাকে কিছু বয়লারপ্লেট কোডের ভেতরে ঢুকিয়ে দেই।
আমাদের সিলেক্ট ইলিমেন্টদুটিকেও কিছু হাবিজাবির ভেতরে ঢুকাই।
বাটনটিকেও + জিপিএ টেক্সটটিকে,
তাহলে আমরা কি পেলাম?
মুটামুটি চলে, জিপিএ লেখাটাকে মাঝখানে আনতে হয়, আর সবুজ ব্যাকগ্রাউন্ডটাকেও চেন্জ করলে ভাল হয়। তাহলে src ফোল্ডার থেকে index.css ফাইলটি খুলে আগে যা ছিল মুছে এই কোডগুলো দিন।
body {
font-family: 'Open Sans', serif;
}.hero.is-success {
background: #F2F6FA;
color: #4a4a4a;
}.hero-body {
padding: 2rem 1.5rem;
}.field {
margin: .5rem;
}.gpa {
justify-content: center;
margin: 1rem;
}
App কম্পোনেন্টটিতে কিছু হেল্পফুল টেক্সট দেয়া যতে পারে।
তাহলে,
তাহলে হয়ে গেল আমাদের অ্যাপ। এখন আরো কিছু কাজ করা যেতে পারে, যেমন icon, title চেন্জ করতে পারেন। নিচে ফুটারে ক্রেডিট জাতীয় কিছু এড করতে পারেন। ফেসবুকের জন্য og ট্যাগ ব্যবহার করে ব্যানার এড করতে পারেন। সবশেষে গিটাহাবে পুশ করে ডিপ্লয় করে দিতে পারেন। সেগুলো আপনাদের জন্যই রেখে দিলাম।
আমারটা এখানে লাইভ আছে, দেখে আসতে পারেন। কাজে লাগলে ব্যবহারও করতে পারেন :)
এখনে খুবই হালকাভাবে রিএ্যাক্ট আলোচনা করা হয়েছে। রিএ্যাক্ট কিভাবে কাজ করে সেদিকে একেবারেই যাওয়া হয়নি।তাছাড়া আমি নিজেই কয়েক মাস হল রিএ্যাক্ট নিয়ে কাজ শুরু করেছি। ভুল ত্রুটি হলে অবশ্যই ধরিয়ে দেবেন।
রিএ্যাক্ট নিয়ে কাজ করতে চাইলে এখনই রিএ্যাক্টের অফিশিয়াল টিউটোরিয়ালটা শেষ করে ফেলুন।
এই টিউটরিয়ালে ব্যবহৃত ম্যাপ ফাংশন বুঝতে,
অ্যারো ফাংশন বুঝতে,
