React অভিযান শুরু করার পূর্ব প্রস্তুতি

যেকোনো যুদ্ধে যাওয়ার আগে যেমন অস্ত্রশস্ত্র প্রস্তুত করে নিতে হয়, তেমনি রিঅ্যাক্ট এর বিশাল জগতে ডুব দেওয়ার আগে আমাদের ডিভাইসে ডেভেলপমেন্ট পরিবেশ (Environment) নিখুঁতভাবে প্রস্তুত করে নেওয়া আবশ্যক। যাতে করে আমরা প্রফেশনাল লেভেলের ডেভেলপমেন্ট অনুসরণ করে কোড লিখতে পারি, যা হবে আরও দ্রুত, ক্লিন ও উন্নতমানের। এবং আমরা হতে পারব একজন দক্ষ ডেভেলপার।

🚀 React অভিযান শুরুর আগে, Environment Set Up এবং Productivity Tips জেনে নাও

✅ ১. Node.js ইনস্টল করুন

রিঅ্যাক্ট অ্যাপ্লিকেশন মূলত জাভাস্ক্রিপ্ট দ্বারা চালিত হয় এবং এটিকে রান করার জন্য একটি রানটাইম এনভায়রনমেন্ট প্রয়োজন। Node.js আমাদের সেই পরিবেশ প্রদান করে। এর সাথে ডিফল্টভাবে চলে আসে npm (Node Package Manager), যা রিঅ্যাক্টের বিভিন্ন লাইব্রেরি ও টুলস ইনস্টল এবং পরিচালনা করতে ব্যবহৃত হয়। তাই ডিভাইসে Node.js (opens in a new tab) ইনস্টল থাকতে হবে।

• ডাউনলোড: প্রথমে Node.js এর অফিসিয়াল ওয়েবসাইট (opens in a new tab) থেকে আপনার অপারেটিং সিস্টেম অনুযায়ী LTS (Long Term Support) ভার্সনটি ডাউনলোড এবং ইনস্টল করুন।

• ভেরিফিকেশন: ইনস্টলেশন সফল হয়েছে কিনা তা পরীক্ষা করতে আপনার কম্পিউটারের টার্মিনাল বা কমান্ড প্রম্পট (CMD) খুলুন এবং নিচের কমান্ডগুলো একটি একটি করে চালান:

  node -v
  npm -v

  যদি ভার্সন নম্বর দেখতে পান, তাহলে আপনি সফলভাবে Node.js ইনস্টল করেছেন।

✅ ২. VS Code ইনস্টল করুন

ডেভেলপারদের জন্য অনেক কোড এডিটর থাকলেও, ভিজ্যুয়াল স্টুডিও কোড (VS Code) বর্তমানে তার গতি, কার্যকারিতা এবং বিশাল এক্সটেনশন সাপোর্টের জন্য সবচেয়ে জনপ্রিয়।

• ডাউনলোড: VS Code এর অফিসিয়াল ওয়েবসাইট (opens in a new tab) থেকে এটি ডাউনলোড করে ইনস্টল করে নিন।

✅ ৩. পছন্দের থিম ব্যবহার করুন

ঘণ্টার পর ঘণ্টা কোডের দিকে তাকিয়ে থাকতে হলে একটি আরামদায়ক থিম ব্যবহার করা বুদ্ধিমানের কাজ। এতে চোখের ওপর চাপ কমে এবং কোড পড়া সহজ হয়।

• জনপ্রিয় একটি থিম: LWS VS Code Theme (opens in a new tab)
  • ইনস্টলেশন: VS Code এর বাম পাশের এক্সটেনশন ট্যাবে (Ctrl+Shift+X) ক্লিক করে "LWS VS Code Theme" লিখে সার্চ করুন এবং ইনস্টল করে নিন।

✅ ৪. React অ্যাপ তৈরি করুন (Vite দিয়ে)

আগে create-react-app খুবই জনপ্রিয় ছিল, কিন্তু এখন Vite ( произносится "вит" ) তার অবিশ্বাস্য গতি এবং আধুনিক বিল্ড সিস্টেমের জন্য ডেভেলপারদের প্রথম পছন্দে পরিণত হয়েছে। Vite দিয়ে আমরা মুহূর্তেই একটি রিঅ্যাক্ট প্রজেক্ট চালু করে ফেলতে পারি।

• প্রজেক্ট তৈরি: আপনার টার্মিনাল খুলুন এবং যে ফোল্ডারে প্রজেক্ট তৈরি করতে চান সেখানে গিয়ে নিচের কমান্ডটি চালান:

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

এই কমান্ডটি চালু করার পর আপনি টার্মিনালে একটি লোকাল সার্ভার অ্যাড্রেস (সাধারণত http://localhost:5173) দেখতে পাবেন। অ্যাড্রেসটি ব্রাউজারে খুললেই আপনার রিঅ্যাক্ট অ্যাপ্লিকেশন দেখতে পাবেন।

✅ ৫. .js vs .jsx

রিঅ্যাক্টে কম্পোনেন্ট ফাইল তৈরি করার সময় আমরা দুটি এক্সটেনশন ব্যবহার করতে পারি:

• .js: এটি সাধারণ জাভাস্ক্রিপ্ট ফাইলের এক্সটেনশন।
• .jsx: এই এক্সটেনশনটি নির্দেশ করে যে ফাইলের ভেতর JSX (JavaScript XML) সিনট্যাক্স ব্যবহার করা হয়েছে। JSX আমাদের জাভাস্ক্রিপ্ট ফাইলের ভেতরেই HTML-এর মতো কোড লেখার সুযোগ করে দেয়।

সুপারিশ: যদিও .js ফাইলে JSX লিখলেও রিঅ্যাক্ট কাজ করে, তবে .jsx এক্সটেনশন ব্যবহার করা একটি ভালো অভ্যাস। এটি স্পষ্টভাবে বুঝিয়ে দেয় যে ফাইলটি একটি রিঅ্যাক্ট কম্পোনেন্ট এবং এতে JSX কোড রয়েছে।

👉 JSX থাকলে .jsx ব্যবহার করুন — এতে কোড আরও পরিষ্কার বোঝা যায়।

✅ ৬. কোড অটো ফরম্যাট ও linting

• Prettier কোড ফরম্যাট করবে
• ESLint আপনাকে ভুল ধরিয়ে দেবে

✅ ৭. VS Code সেটিংস আপডেট করুন

VS Code → settings.json এ নিচের কনফিগারেশন দিন:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.run": "onSave",
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "path-autocomplete.extensionOnImport": true,
  "javascript.validate.enable": false,
  "typescript.validate.enable": false
}

✅ ৮. দরকারি এক্সটেনশন

✅ ৯. .vscode/settings.json – নিজের মতো কাস্টমাইজ করুন

{
  "editor.fontSize": 16,
  "editor.lineHeight": 24
}

✅ ১০. Git ও GitHub

যেকোনো প্রজেক্টের পরিবর্তনগুলো ট্রাক করার জন্য এবং টিমের সাথে কাজ করার জন্য Git একটি অপরিহার্য টুল। GitHub হলো Git রিপোজিটরি হোস্ট করার একটি প্ল্যাটফর্ম।

• ডাউনলোড: Git এর অফিসিয়াল ওয়েবসাইট (opens in a new tab) থেকে এটি ডাউনলোড ও ইনস্টল করুন।
• ব্যবহার: আপনার প্রজেক্ট ফোল্ডারে টার্মিনাল খুলে git init কমান্ড দিয়ে Git রিপোজিটরি শুরু করতে পারেন।

প্রাথমিক কমান্ড:

git init
git add .
git commit -m "Initial commit"

✅ ১১. VS Code টার্মিনাল খুলুন

Ctrl + `

✅ ১২. .gitignore ও .env ফাইল তৈরি

.gitignore উদাহরণ:

node_modules/
.env
dist/

• .gitignore: এই ফাইলে উল্লেখিত ফাইল বা ফোল্ডারগুলো Git ট্র্যাক করবে না। যেমন: node_modules ফোল্ডার, যা আকারে অনেক বড় এবং এটি সরাসরি রিপোজিটরিতে পুশ করা উচিত নয়।
• .env: এই ফাইলে আমরা আমাদের প্রজেক্টের গোপন তথ্য, যেমন— API Key, ডাটাবেজ পাসওয়ার্ড ইত্যাদি সংরক্ষণ করি। এই ফাইলটিও .gitignore-এ যোগ করা আবশ্যক।

✅ ১৩. User Snippets দিয়ে টাইম বাঁচান

বারবার একই কোড না লিখে আমরা শর্টকাট তৈরি করে রাখতে পারি। যেমন, rfc লিখলেই একটি ফাংশনাল কম্পোনেন্টের বয়লারপ্লেট কোড চলে আসবে।

• স্নিপেট তৈরি:

  1. Ctrl + Shift + P চাপুন।
  2. "Configure User Snippets" লিখে সার্চ করুন।
  3. প্রথমে javascript.json ফাইলটি সিলেক্ট করুন এবং নিচের কোডটি পেস্ট করুন।
  4. একইভাবে javascriptreact.json ফাইলটিও সিলেক্ট করে কোডটি পেস্ট করুন।

উদাহরণ Snippet (rfc):

{
  "React component": {
    "prefix": "rfc",
    "body": [
      "export default function $1() {",
      "  return (",
      "    <div>",
      "      $2",
      "    </div>",
      "  );",
      "}"
    ],
    "description": "React functional component"
  }
}

⚡ Productivity Boost Tips

০. দিনের কাজ শুরুর আগে প্লান করুন

👉 Google Keep অথবা খাতা

🚀 ১. "ধাপভিত্তিক কাজ করো, ঝাপিয়ে পড়ো না"

👉 বড় কাজকে ছোট টুকরো করো: যেমন, একটা ফর্ম বানাতে হলে:

• প্রথমে HTML structure,
• তারপর Tailwind দিয়ে ডিজাইন,
• তারপর validation যোগ করো React Hook Form দিয়ে।

⏱ এতে সময় বাঁচবে, মাথাও ঠান্ডা থাকবে।

🧠 ২. "নিজের জন্য Reusable Component বানাও"

👉 বারবার একই বাটন বা মডাল বানানোর দরকার নাই। একবার Button.jsx বা Modal.jsx বানিয়ে নাও, তারপর বারবার শুধু প্রপস দিয়ে কাস্টোমাইজ করো।

একটা টাইমে তোমারই বিশ্বাস হবে: "আমি efficient coder!"

📁 ৩. "VS Code এ কাজ করো, কিন্তু Smart ভাবে!"

🛠️ VS Code Extension গুলা কাজে লাগাও:

• Tailwind CSS IntelliSense – ক্লাস লিখতে বাঁচাবে টাইম
• ESLint + Prettier – অটোমেটিক ফরম্যাটিং
• Auto Import – কম্পোনেন্ট ইম্পোর্ট নিয়ে আর চিন্তা নাই

⌨️ ৪. "কীবোর্ড শর্টকাট শিখে ফেলো"

👉 বারবার মাউস ব্যবহার টাইম খায়।

কিছু দরকারি শর্টকাট:

• Ctrl + P: ফাইল খুঁজে ওপেন করা
• Alt + Shift + ↓: লাইনের ক্লোন কপি
• Ctrl + /: কোড কমেন্ট/আনকমেন্ট কিবোর্ড শর্টকাট ব্যবহার মাউসের উপর নির্ভরশীলতা কমিয়ে আপনার কাজের গতিকে বহুগুণে বাড়িয়ে দেয়।

• মাল্টি-কার্সর এডিটিং:
  • Ctrl + D: একই রকম শব্দ একটি একটি করে সিলেক্ট করে একসাথে এডিট করার জন্য এটি অসাধারণ।
  • Ctrl + Shift + L: একটি শব্দের সমস্ত অকারেন্স (occurrence) একসাথে সিলেক্ট করার জন্য।
• লাইন ম্যানেজমেন্ট:
  • Alt + ↑/↓: বর্তমান লাইনটিকে কোডের উপরে বা নিচে সরানোর জন্য।
  • Alt + Shift + ↑/↓: বর্তমান লাইনটিকে উপরে বা নিচে দ্রুত কপি করার জন্য।
• দ্রুত ন্যাভিগেশন ও অ্যাকশন:
  • Ctrl + P: হাজারো ফাইলের মধ্য থেকে যেকোনো ফাইল দ্রুত খুঁজে বের করার জন্য।
  • Ctrl + /: এক বা একাধিক লাইনকে এক ক্লিকে কমেন্ট বা আনকমেন্ট করার জন্য।
  • `Ctrl + `` (Backtick): কোড এডিটরের ভেতরেই টার্মিনাল খোলা বা বন্ধ করার জন্য।

🧪 ৫. "একটা টুল বা লাইব্রেরি ফোকাস করে মাস্টার করো"

👉 যেমন ধরো শুধু React Hook Form নিয়ে ৫টা ছোট ফর্ম প্রজেক্ট বানাও। সাথে Zod বা Yup দিয়ে validation শিখে ফেলো।

বারবার ডকুমেন্টেশন না দেখে টাইপ করতে পারলে — তখনই প্রোডাক্টিভ!

🕒 ৬. "Pomodoro টাইম ম্যানেজমেন্ট"

25 মিনিট ফোকাস → 5 মিনিট রেস্ট 🧘 এতে মাথা ক্লান্ত হয় না, কাজের গতি বাড়ে।

একটা ওয়েব অ্যাপ ইউজ করো: 👉 pomofocus.io (opens in a new tab)

🗂️ ৭. "তোমার নিজের Code Snippet ব্যাংক রাখো"

👉 যেসব ইউজফুল কোড বারবার লাগে (pagination, form, login, etc.) তোমার একটা ফোল্ডারে বা GitHub গিস্টে রেখে দাও।

সময় বাঁচবে, আবার নিজেকেই হেল্পফুল মনে হবে।

📒 ৮. "React বা Tailwind ডকুমেন্টেশন পড়া অভ্যাস করো"

👉 প্রতিদিন ১৫-২০ মিনিট শুধু Documentation পড়ো। জানি, একটু বোরিং লাগে—but এইটাই long-term productivity boost দেয়।

🧘‍♂️ ৯. "Stress নিলে Code হবে না"

👉 কাজে stuck হলে, ৫ মিনিট ওয়াক দাও। তোমার মাথা ঠান্ডা থাকলে bug নিজেই চোখে পড়ে।

✅ উন্নত কোডিং অভ্যাস গড়ে তুলুন

ভালো অভ্যাস দীর্ঘমেয়াদে আপনাকে একজন দক্ষ এবং গোছানো ডেভেলপার হিসেবে গড়ে তুলবে।

• কম্পোনেন্ট ভিত্তিক চিন্তা করুন: যেকোনো ইউজার ইন্টারফেস (UI) ডিজাইনকে ছোট ছোট পুনঃব্যবহারযোগ্য (reusable) কম্পোনেন্টে ভাগ করে ফেলার অভ্যাস করুন। এতে কোড পরিচালনা করা এবং পরে পরিবর্তন করা অনেক সহজ হয়।
• DRY (Don't Repeat Yourself) নীতি: একই কোড বারবার না লিখে সেটিকে একটি ফাংশন বা কম্পোনেন্ট বানিয়ে ফেলুন এবং প্রয়োজন মতো ব্যবহার করুন।
• স্নিপেট ব্যবহার: যে কোডগুলো আপনাকে বারবার লিখতে হয়, সেগুলোর জন্য নিজের কাস্টম স্নিপেট তৈরি করে রাখুন। যেমন rfc স্নিপেটটি আমরা আগের পর্বে তৈরি করেছি।
• অর্থপূর্ণ নাম দিন: ভেরিয়েবল, ফাংশন বা কম্পোনেন্টের নাম এমনভাবে দিন যেন তা দেখেই এর কাজ কী, তা পরিষ্কার বোঝা যায়। যেমন: const userList const u এর চেয়ে অনেক বেশি বোধগম্য।

📌 Bonus Tip:

নিজের প্রজেক্টে Task List লেখো – Google Keep, Notion বা টুডু অ্যাপে। 👉 এতে ব্রেইনের চাপ কমে, কাজ পরিষ্কারভাবে সামনে থাকে।

🔚 উপসংহার

এই সম্পূর্ণ সেটআপটি আপনাকে একটি শক্তিশালী এবং প্রফেশনাল রিঅ্যাক্ট ডেভেলপমেন্ট Environment প্রদান করবে। যদিও শুরুতে এতগুলো ধাপ কিছুটা জটিল মনে হতে পারে, তবে দীর্ঘমেয়াদে এটি আপনার সময় বাঁচাবে এবং আপনাকে একজন গোছানো ডেভেলপার হিসেবে প্রতিষ্ঠিত করবে।

✍️ লেখক: Md. Mojnu Miah