Login
ReactJs Project Setup

ReactJs Project Setup

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

রিঅ্যাক্ট এ প্রোজেক্ট দুইভাবে সেটআপ করা করা যায়ঃ

১। অলরেডি আছে এমন ওয়েবসাইটে/ওয়েবপেজে রিঅ্যাক্ট অ্যাড করা;

২। একদম নতুন প্রোজেক্ট শুরু করা পুরোপুরি রিঅ্যাক্ট লাইব্রেরী দিয়ে।

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

আর দ্বিতীয়টায় একদম নতুন করে একটা রিঅ্যাক্ট এর প্রোজেক্ট সেটআপ করে সেখানে সব কাজ সম্পূর্ন রিঅ্যাক্ট দিয়েই করা হয়। এই পদ্ধতিতেই আমরা এই সিরিজে আলোচনা করবো এবং এটাই বেস্ট ওয়ে।

রিঅ্যাক্ট এ কাজ করার আগে আপনাকে শিউর হয়ে নিতে হবে আপনার ম্যাশিনে নোড জেএস(Node JS) এবং এনপিএম (NPM) ইন্সটল করা আছে। যদি ইন্সটল করা না থাকে তাহলে এখান থেকে নোড জেএস এর এলটিএস (LTS) ভার্শন ডাউনলোড করে নিন। তারপর সেটআপ করে ফেলুন, সেটআপে অতিরিক্ত কোন ঝামেলা নেই তাই করে ফেলতে পারবেন সহজেই। আর আশা করি আপনার কমান্ড লাইন সম্পর্কে ব্যাসিক ধারনা আছে। যদি না থাকে তাহলে আমি ঠিক যেভাবে যেভাবে কমান্ডগুলো লিখবো সেগুলো ফলো করলেই হয়ে যাবে। আর কমান্ড লাইনের ব্যাসিকটা শিখে নেওয়াই ভালো। তাই শিখে না থাকলে শিখে ফেলবেন তাড়াতারি।

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

এবং

দেখবেন দুইটা কমান্ডই ভার্শন নাম্বার দেখাচ্ছে। অন্যকিছু দেখালে বা কমান্ড নট ফাউন্ড(Command Not Found) টাইপের এরর আসলে নোড জেএস আবার পুনরায় সেটআপ করে ট্রাই করবেন। আর আপনি এরকম ভার্শন নাম্বার দেখতে পারলে বুঝবেন আপনি এবার রিঅ্যাক্ট এর প্রোজেক্ট ক্রিয়েট কওরার জন্যে রেডীঃ

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

রিঅ্যাক্ট একটা কমান্ড লাইন ইন্টারফেস (CLI) তৈরী করেছে যেটা দিয়ে সহজেই আপনি একদম নতুন একটা রিঅ্যাক্ট এর প্রোজেক্ট তৈরী করতে পারবেন। আর প্রথমে শিখার সময়, এমনকি পরে কাজ করার সময়েও খুব বেশী দরকার না হলে আপনাকে ম্যানুয়ালি প্রোজেক্ট সেটআপ করতে হবে না, আপনি এটা ইউজ করেই সহজে প্রোজেক্ট তৈরী করে ফেলতে পারবেন। এমনিতে একেবারে শূন্য থেকে শুরু করতে গেলে অনেকগুলো কাজ করতে হয়। তারপরেও আপনার ইন্টারেস্ট থাকলে একদম শূন্য থেকে কিভাবে রিঅ্যাক্ট এর প্রোজেক্ট শুরু করবেন তাহলে আমি এই লেখার একদম শেষে একটা লিঙ্ক দিয়ে দিবো। তবে এখন যদি আপনি রিঅ্যাক্ট শিখার উদ্দেশ্যে আমার লেখা পরে থাকেন তাহলে আপনার শূন্য থেকে প্রোজেক্ট স্টার্ট করতে হবে না। আপনি কমান্ড লাইন ইন্টারফেস (CLI) ইউজ করেই এখন প্রোজেক্ট করা শুরু করতে পারেন। আর এটাই আমার কাছ থেকে রিকোমেন্ডেড থাকবে। কারণ প্রথমেই ঐদিকে গেলে ব্যাপারটা কমপ্লেক্স মনে হতে পারে, যেটা শিখার জন্যে মোটেও ইন্সপায়ারেশনাল না।

আর তাই আমরা সেই create-react-app নামের কমান্ড লাইন ইন্টারফেসটা প্রথমে ইন্সটল করবো। এটার কাজই হচ্ছে রিঅ্যাক্ট এর প্রোজেক্ট জেনারেট করা। মূলত এটার ভিতরেই অনেক কাজ অটোমেটেড করা হয় যেগুলো নিয়ে আপাতত আমাদের ভাবা দরকার নাই। আমরা আপাতত আসল জিনসের উপর ফোকাস করবো।

প্রথমে আপনি যে ফোল্ডারে/ডিরেক্টরিতে কাজ করবেন সেখানে যান এবং সেখানে আপনার পছন্দের কমান্ড লাইন ওপেন করেন। যেমন আমার ক্ষেত্রে আমি আমার ডেস্কটপে থাকা Workspace নামের একটা ডিরেক্টরির ভিতরে REACT নামের আরেকটা ডিরেক্টরিতে কাজ করবো। তাই আমি আমার কমান্ড লাইন খুলে সেখানে নিয়ে গেলামঃ

আপনি যেখানেই কাজ করুন না কেনো, এটা কোন ব্যাপার না

আপনি যেখানেই কাজ করুন না কেনো, এটা কোন ব্যাপার না
এখন আমরা বলেছিলাম যে আমরা create-react-app নামের একটা জিনিস ইন্সটল করবো। সেজন্যে আমরা এনপিএম (NPM) ইউজ করবো। এটার মানেই হচ্ছে নোড প্যাকেজ ম্যানেজার। আর তাই আমরা এটা দিয়ে আমাদের প্যাকেজটা ইন্সটল করবোঃ

উইন্ডোজ হলেঃ

লিনাক্স হলেঃ

উপরের এই কমান্ডটা বুঝে না থাকলে সমস্যা নাই আমি খুলে বলছি। এখানে এটুকু বুঝার চেষ্টা করুন যে প্রথমে যে আমরা npm লিখেছি, এর মানে হচ্ছে আমরা এনপিএম প্যাকেজ ম্যানেজার ইউজ করতে চাচ্ছি। তারপর install দিয়ে আমরা বুঝাতে চাচ্ছি আমরা কিছু একটা ইন্সটল করতে চাচ্ছি। তারপরের ফ্ল্যাগ -g দিয়ে বুঝাতে চাচ্ছি আমরা এই জিনিসটা গ্লোবাললি ইন্সটল করতে চাচ্ছি, মানে যাতে সব জায়গা থেকে ইউজ করা যায় এমন করে। তারপরের create-react-app দিয়ে আমরা যে প্যাকেজটা ইন্সটল করতে চাচ্ছি সেটার ইউনিক নামটা দিলাম। আপনি https://www.npmjs.com/ ওয়েবসাইটে গেলে দেখবেন এরকম অনেক প্যাকেজ আছে, আর সব প্যাকেজেরই এরকম ইউনিক নাম আছে। এই কমান্ড দেওয়ার পর একটু হালকা একটা ডাউনলোড হবে। তারপর এরকম কিছু দেখবেনঃ

অন্যকিছু বা এরর দেখলে আবার ট্রাই করে দেখুন। আর সবকিছু ঠিকঠাক থাকলে মনে করবেন আপনার প্যাকেজ সফলভাবে ইন্সটল হয়েছে। এখন এটা ইউজ করা যাবে।

আমরা এখন সেইম জায়গায় আমাদের প্রোজেক্ট টা শুরু করবো। এজন্যে আমাদের এখন ইন্সটল করা create-react-app দিয়ে প্রোজেক্ট জেনারেট করতে হবে এভাবেঃ

এভাবে কমান্ড দেওয়ার মানে হচ্ছে আমরা react-project-setup নামে একটা রিঅ্যাক্ট এর প্রোজেক্ট বানাতে চাচ্ছি create-react-app CLI দিয়ে। একবার এই কমান্ড দেওয়া হয়ে গেলে তারপর আপনার রিঅ্যাক্ট এর প্রোজেক্ট সেটআপ প্রসেস শুরু হয়ে যাবে। এখানে অনেকগুলো প্যাকেজ বা আমরা যেটাকে ডিপেন্ডেসি বলি সেগুলো ইন্সটল হবে। তাই আগে শিউর হয়ে নিবেন আপনার সেজন্যে যথেষ্ট ইন্টারনেট এবং ইন্টারনেট কানেকশন ঠিকঠাক আছে।

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

প্যাকেজ ইন্সটল হচ্ছে
প্রোজেক্ট সফলভাবে সেটআপ হয়ে গেছে, কিছু ইন্সট্রাকশনও দেখাচ্ছে! 

কোন এরর আসলে আবার ট্রাই করবেন। আর সেটআপ হয়ে গেলে এখন আপনার দেওয়া নামে react-project-setup একটা ডিরেক্টরি পাবেন। যেখানে আপনার রিঅ্যাক্ট অ্যাপ তৈরি হয়েছে। এখন কমান্ড লাইন থেকে সেই ডিরেক্টরিতে চলে যানঃ

তারপর কোনকিছু ধরা ছাড়াই কমান্ড লাইনে লিখুনঃ

ব্যাস! তারপর একটু সময় পরে দেখবেন আপনার ব্রাউজারে একটা পেজ ওপেন হবে এবং অনেকটা এরকম একটা পেজ দেখতে পাবেনঃ

এখন আপনার কমান্ড লাইনে দেখবেন আপনার ডেভেলপমেন্ট সার্ভার চলছে। আপনি এখন এই ডিরেক্টরিতে কাজ করতে চাইলে অবশ্যই ডেভেলপমেন্ট সার্ভার চালু রাখতে হবে। তবে এখন আমরা সার্ভার অফ করে দিবো ctrl + c প্রেস করে।

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

এবার দেখুন এখানে অনেকগুলো ফাইল আছে। আপনি src এর ভিতর থেকে App.js ফাইলটা ওপেন করুন আর এখানে Welcome to React নামের লেখাটা এডিট করে সেইভ করুনঃ

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

এখন ডেভেলপমেন্ট সার্ভার চালু থাকা অবস্থায় যদি প্রোজেক্ট এর ভিতরের কোন ফাইল মডিফাই করেন তাহলে দেখবেন আপনার সেই ব্রাউজার উইন্ডোটা রিলোড হবে অটোম্যাটিক্যালি আর আপনিও আপনার পরিবর্তন দেখতে পাবেন। এটাই মূলত create-react-app এর খেলা, আর তাই এটা ইউজ করে ডেভেলপমেন্ট প্রসেস সহজ করা যায়।

এবার আসুন আমরা আমাদের প্রোজেক্টে থাকা ফাইল এবং ফোল্ডার/ডিরেক্টরি গুলো কিসের সেগুলো নিয়ে আলোচনা করি।

প্রথমেই দেখবেন একটা ফোল্ডার node_modules নামে। এখানে মূলত আপনার প্রোজেক্ট তৈরি করার জন্যে যে যে প্যাকেজগুলো লাগবে সেগুলো সব স্টোর করা থাকে। আপনাকে এটা টাচও করতে হবে না।

তারপরে দেখতে পাবেন public নামের একটা ডিরেক্টরি। প্রথমে দেখবেন favicon.ico নামের একটা ফাইল। বুঝতেই পারছেন এটা ফ্যাভিকনের জন্যে ইউজ হচ্ছে। আর তাই আপনি আপনার কাস্টম ফ্যাভিকন চাইলে এই ফাইলটা রিপ্লেস করতে হবে। তারপর দেখবেন index.html ফাইলটা। এখানে আমাদের একদম প্রাথমিক এইচটিএমএলের মার্কাপটা থাকে। এখানে চাইলে আপনি কাস্টম সিএসএস বা ক্লাইন্ট সাইডেড জাভাস্ক্রিপ্ট এর স্ক্রিপ্টও অ্যাড করতে পারবেন। তবে খুব বেশী দরকার না হলে এখানে এগুলো অ্যাড না করাই ভালো। এখানে যেটা গুরুত্বপূর্ন সেটা হচ্ছে আপনার পেজের টাইটেল। তাই এখান থেকে টাইটেলটা চেঞ্জ করে নিবেন। আমরা একটা টাইটেল দিলাম My First React Project

এটা ঠিক এখানেই ডিফাইন করতে হয়। আমরাও একটু চেঞ্জ করে দিবো এখানে #61dafb. সবগুলো লেখা এডিট করার পর index.html ফাইলটা এমন হবেঃ

তারপরে এখানেই আরেকটা লাইন দেখবেনঃ

মূলত এখানেই এই root আইডিতে আমাদের রিঅ্যাক্ট অ্যাপটা রেন্ডার হবে। এটা নিতে পরে আলোচনা করা হবে।

তারপরে এই ডিরেক্টরিতেই আরেকটা ফাইল দেখবেন manifest.json নামে। create-reacta-app দিয়ে প্রোজেক্ট সেটআপ করলে বাই ডিফল্ট প্রগ্রেসিভ ওয়েব অ্যাপ ফ্রেন্ডলি প্রোজেক্ট সেটআপ হয়। আপনি যদি না জেনে থাকেন প্রগ্রেসিভ ওয়েব অ্যাপ সম্পর্কে, তাহলে এটার অনেকগুলো কাজের মধ্যে একটা কাজ হচ্ছে আপনি আপনার ওয়েবসাইটটাকে মোবাইলের ব্রাউজারের(Google Chrome, Firefox for Mobile) Add to Home এ ক্লিক করে মোবাইল অ্যাপের মতো একটা ভার্শন করতে পারবে ইউজার। এর সম্পর্কে আরো জানতে এখানে দেখুন। আর manifest.json ফাইলটাও সেইম এটার সেটআপের জন্যেই। এখানেও আপনি চাইলে আপনার অ্যাপসের নাম অনুযায়ী ভিতরে short_namenametheme_colorএবং background_color গুলো চেঞ্জ করে দিতে পারেন। চেঞ্জ করা এমন হবে ফাইলটাঃ

তারপরে আছে src ডিরক্টরি, এটা নিয়ে শেষে আলোচনা করবো। কিন্তু এবার রুট ডিরেক্টরিতে দেখেন কিছু ফাইল আছে। তারমধ্যে .gitignore হচ্ছে গিট এ অপ্রয়োজনীয় ফাইল কমিট করা থেকে বিরত রাখার জন্যে। এখানে আপনি কিছু চেঞ্জ না করলেও হবে। তারপর আছে package-lock.json ফাইল, যেটা আসলে package.json ফাইল থেকেই তৈরি হয়। আর তাই আপনার এটা নিয়েও চিন্তা করতে হবে না। এবার দেখুন package.json ফাইলটা। এটা অনেক ইম্পরট্যান্ট আমাদের প্রোজেক্ট এর জন্যে। এটা অনেকটা রেসিপির মতো। একটা রেসিপিতে যেমন কিভাবে কিভাবে রান্না করতে হয় সেগুলো বলা থাকে, ঠিক তেমনভাবেই আমাদের অ্যাপ্লিকেশন বানাতে কি কি প্যাকেজ, টুলস লাগবে এগুলো এখানে বলা থাকে। তাই এটা অনেক ইম্পরট্যান্ট। এখানেও আপনাকে কিছু করতে হবে না। তবে ভিতরে dependencies তে দেখুন কিছু প্যাকেজের নাম আছে।

আপনি নতুন কোন প্যাকেজও আপনার এই প্রোজেক্টে এনপিএম দিয়ে ইন্সটল করলে এখানে চলে আসবে। এখানে আমাদের কোনোকিছুতে ধরতে হবে না। সবশেষে README.md ফাইলটা গিটহাবে আপলোড করলে ডকুমেন্টেশন হিসাবে সামনে যে বর্ণনাগুলো আসে সেগুলো এই ফাইলে লেখা হয়ে থাকে। এখানে যে সিনট্যাক্স টা ইউজ করা হয় সেটাকে মার্কডাউন মার্কাপ ল্যাঙ্গুয়েজ বলে। আপনার এখনি এটা জানতে হবে না, তবে জানতে চাইলে আমার একটা আর্টিকেল আছে, ঐটা দেখতে পারেন।

এবার আসুন আমরা src ডিরেক্টরি নিয়ে কথা বলি। এখানেই মূলত আমাদের সব প্রোজেক্টের ফাইলগুলো যাবে। এখানে যত ফাইল আছে সবগুলোর মধ্যে সবচেয়ে বেশি ইম্পরট্যান্ট হচ্ছে index.js ফাইলটা। কারণ create-react-app এমনভাবে প্রোজেক্ট সেটআপ করে যে এটা এই src ডিরেক্টরির ভিতরে প্রথম index.js ফাইলটাকেই খোঁজ করবে। আর বাকি যত ফাইল আছে সবগুলো এটার ভিতরে বলা আছে কে কোথায়, কিভাবে কাজে লাগাতে হবে। আর তাই আমরা এই index.js এবং registerServiceWorker.js বাদেsrc ডিরেক্টরির ভিতরের বাকি সবগুলো ফাইল ডিলেট করে ফেলবো এখনঃ

এই দুইটা থাকবে

তারপর index.js এর ভিতরেও যত ফাইল ইম্পোর্ট করা হয়েছে তারমধ্যে কিছু রেফারেন্স ডিলেট করে দিবো। সেই সাথে <App /> এর বদলে কিছু এইচটিএমএলের মতো দেখতে সিনট্যাক্স লিখবো। সবশেষে index.js ফাইলটা এরকম দেখা যাবেঃ

ব্যাস এবার সেইভ করে আপনার ব্রাউজারে দেখুন এরকম কিছু দেখাবেঃ

ব্যাস! আপনার প্রথম রিঅ্যাক্ট অ্যাপ তৈরি ডেভেলপমেন্ট এর জন্যে। প্রথমে প্রোজেক্ট সেটআপ করাটা ঝামেলার মনে হলেও পরে ঠিক হয়ে যাবে। তাই একটু ধৈর্য্য ধরে কিভাবে প্রোজেক্ট জেনারেট করতে হয় সেটা শিখে ফেলুন। আশা করি প্রোজেক্ট তৈরি করতে আর কোন সমস্যা হবে না। তারপরেও কেউ কোন প্রব্লেম ফেস করলে আমাকে অবশ্যই জানাবেন।

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

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

Courtesy: https://with.zonayed.me

About the Author

Leave a Reply