রিঅ্যাক্ট ব্যাসিকসঃ ইলিমেন্ট (Element) রেন্ডার

গত পর্বে আমরা জেএসএক্স (JSX) এর সাথে পরিচিত হয়েছিলাম। তার আগের পর্বে আমরা রিঅ্যাক্ট এর একটা প্রোজেক্ট সেটাপ শুরু করেছিলাম। এখন আমরা আজকে সেই প্রোজেক্ট থেকেই কাজ শুরু করবো।

আপনি যদি আপনার এই প্রোজেক্টের index.js ফাইলটা ওপেন করেন, তাহলে এরকম কিছু দেখতে পাবেনঃ

import React from 'react';
import ReactDOM from 'react-dom';

এখানে দেখবেন রিঅ্যাক্ট এর দুইটা লাইব্রেরী। একটা সরাসরি রিঅ্যাক্ট, আর আরেকটা রিঅ্যাক্ট ডম। এখন পূর্বে রিঅ্যাক্ট মূলত একটা লাইব্রেরীই ছিলো। কিন্তু পরে আসল রিঅ্যাক্ট এর ফাংশানালিটিগুলো আলাদা করে একটা লাইব্রেরী তৈরী করা হয়েছে, যেটা মূলত react । আর আরেকটা যেটা আছে react-dom, সেটা হচ্ছে আমাদের ডমের সাথে কাজ করার জন্যে মূলত ব্যবহার হবে।

তাছাড়া এখানে import কীওয়ার্ড দেখবেন, যেটা ইএস৬ এ নতুন অ্যাড করা হয়েছে অন্য কোনো লাইব্রেরী ইম্পোর্ট করার জনে। এই লাইনটা দেখিঃ

import React from 'react';

এটা দ্বারা বুঝানো হয়েছে আমরা react নামক একটা প্যাকেজ থেকে React নামে একটা কিছু ইম্পোর্ট করতে চাচ্ছি। সেইম পরের লাইনটার ক্ষেত্রেওঃ

import ReactDOM from 'react-dom';

এটার দ্বারাও ঠিক বুঝানো হচ্ছে যে আমরা react-dom নামক একটা লাইব্রেরী থেকে ReactDOM নামের একটা কিছু ইম্পোর্ট করতে চাচ্ছি। আপনি যদি আগে নোড জেএস এর সাথে পরিচিত থেকে থাকেন তাহলে এটা অনেকটা require এর মতোই।

আমরা আগে দেখেছিলাম আমাদের প্রোজেক্ট এ public নামে একটা ডিরেক্টরিতে কিছু স্টার্টার ফাইল আছে। ঐখানে একটা index.html ফাইলও আছে। আমরা আমাদের রিঅ্যাক্ট এর সবকিছু আসলে ঐ ফাইলের একটা ডম ইলিমেন্ট এর ভিতরেই রেন্ডার করবো। আর এ কারণেই যেহেতু আমাদের এখন ডম ইলিমেন্ট এর সাথে কথা বলতে হবে, তাই আমাদের react-dom লাইব্রেরী ব্যবহার করতে হবে।

এখন আমাদের index.js ফাইলের আরেকটু নিচে দেখেন এরকম একটা লাইন আছেঃ

ReactDOM.render(<h1>My First React Project</h1>, document.getElementById('root'));

প্রথমে আমরা react-dom ইম্পোর্ট করেছি, কারণ এই প্যাকেজের ভিতরে কিছু মেথড আছে যেগুলো আমাদের রিঅ্যাক্ট অ্যাপ্লিকেশনটা আমাদের আসল ফাইল index.html এর ভিতর রেন্ডার করতে সাহায্য করবে। react-dom থেকে ReactDOM নামে একটা অবজেক্ট ইম্পোর্ট করেছি যেটার একটা render বলে মেথড আছে। এই রেন্ডার মেথড দুইটা আর্গুমেন্ট নিয়েছে। প্রথমটা জেএসএক্স, বা এখানে আপনি জেএসএক্স ইন্সট্যান্স ও দিতে পারবেন। তারপর দ্বিতীয় আর্গুমেন্ট এ আমরা এটা কোথায় রেন্ডার করতে চাচ্ছি সেটা সিলেক্ট করে দিয়েছি। এখন এখানে কথা আসতে পারে আমরা তো কোথাও বলি নাই যে index.html ফাইলের ভিতরে গিয়েই একটা ইলিমেন্ট সিলেক্ট করে সেখানে রেন্ডার করতে। আমরা কিন্তু কোথাও বলি নাই। আবার আমাদের প্রোজেক্ট থেকে src ডিরেক্টরির ভিতর থেকেই index.js ফাইলটাকে প্রথম ধরতে হবে এরকম কিছুও আমরা কোথাও বলি নাই। কিন্তু আমরা আমাদের প্রোজেক্ট সেটাপ করেছিলাম create-react-app নামক CLI দিয়ে। মূলত এই CLI ই বাই ডিফল্ট এসব কনফিগারেশন করে রেখেছে। যে অ্যাপ্লিকেশন প্রথম src ডিরেক্টরির ভিতরে index.js ফাইল দিলেই শুরু হবে। আর এখানে আমরা কোনো ডম সিলেক্ট করলে সেটা public ডিরেক্টরির ভিতরে থাকা index.html ফাইল থেকেই সিলেক্ট হবে। এসব কিছু এই create-react-app দিয়ে অ্যাপ জেনারেট করার সাথে সাথেই কনফিগার হয়ে গেছে। তাই আর আমাদের আর ভাবতে হয় না এগুলো নিয়ে। আবার এগুলো ম্যাজিক্যালিও যে হয়ে যাচ্ছে ঠিক তাও কিন্তু না। সবকিছুই কনফিগার করা হয়েছে পিছন পিছন।

আর তাই এখানে আমরা দ্বিতীয় আর্গুমেন্টে এরকম কিছু কোড লিখেছিঃ

document.getElementById('root')

এটা পিউর জাভাস্ক্রিপ্টই, এবং আশা করি সবাই এই সিলেক্টরের সাথে পরিচিত আছেন। এটা দ্বারা বুঝানো হয়েছে root নামে একটা আইডি সিলেক্ট করতে হবে। আর কোন জায়গা থেকে জানি সিলেক্ট করবে? হ্যাঁ সেটা সিলেক্ট করা হবে public ডিরেক্টরির ভিতরে থাকা index.html ফাইল থেকে।

আর তাই আপনি আপনার রিঅ্যাক্ট অ্যাপ্লিকেশন স্টার্ট দেওয়ার পর যদি ব্রাউজারের ইন্সপেক্ট করে দেখেন তাহলে দেখবেন আপনার অ্যাপ্লিকেশন ঠিক এই root আইডিতেই রেন্ডার হয়েছেঃ

আরেকটু দেখতে চাইলে আপনি public ডিরেক্টরি থেকে index.html ফাইলটা ওপেন করুন আর এই root আইডিটার নাম বদলে যেকোনো কিছু দিনঃ

<div id="renderhere"></div>

এবার ব্রাউজারে আপনার অ্যাপ্লিকেশন অটো রিলোড হবে আর এরকম কিছু দেখতে পাবেনঃ

মানে আপনার ডম ইলিমেন্ট পাচ্ছে না, কারণ আপনি index.js ফাইলে বলেছেন root নামক একটা আইডিওয়ালা ইলিমেন্ট এ আপনার অ্যাপ্লিকেশন রেন্ডার করতে। কিন্তু এখন তো ঐরকম কোনো আইডিই নাই। তাই এবার index.js ফাইলটাও ওপেন করুন আর আপনার নতুন দেওয়া নামটা দিয়ে root রিপ্লেস করে দিনঃ

document.getElementById('renderhere')

ব্যাস এবার আবার আপনার অ্যাপ্লিকেশন রিলোড হবে আর দেখবেন সব ঠিকঠাকঃ

ব্যাস! এভাবেই আপনি আপনার html এর ভিতরে যেকোনো ইলিমেন্ট এ এভাবে আপনার রিঅ্যাক্ট অ্যাপ্লিকেশন রেন্ডার করতে পারবেন।

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

npm install

ব্যাস! এবার আপনি এটা নিয়ে নাড়াচাড়া করতে পারবেন, প্র্যাক্টিস করতে পারবেন যত ইচ্ছা।

আমার এই লেখা পূর্বে আমার ব্লগে প্রকাশিত হয়েছে। চাইলে আমার ব্লগ থেকে ঘুরে আসতে পারেন। ব্লগ থেকে সাবস্ক্রাইব করলে আমি নিজে থেকেই আমার নতুন লেখাগুলো আপনার ইমেইলে প্রতি শুক্রবার সকালে পাঠিয়ে দিবো। ভালো থাকবেন। হ্যাপী প্রোগ্রামিং!