💻 Web Developer হওয়ার জন্য কম্পিউটারে পরিবেশ তৈরি

Web Development শেখা শুরু করার আগে সবচেয়ে গুরুত্বপূর্ণ বিষয় হলো — আপনার কম্পিউটারকে ঠিকভাবে প্রস্তুত করা।
কারণ একটি ভালো পরিবেশ (Development Environment) থাকলে শেখার গতি, পারফর্মেন্স এবং কাজের আনন্দ — সবকিছুই বহুগুণ বেড়ে যায়।

এই টিউটোরিয়ালে আমি দেখাবো কীভাবে একজন Professional Modern Web Developer (2025)-এর মতো আপনার কম্পিউটার সেটআপ করবেন —
React, Vite, VS Code, Snippets, Git, এবং আরও অনেক কিছু সহ ধাপে ধাপে।

🧩 ধাপ ১: Node.js ইনস্টল করুন

JavaScript কোড রান করানোর জন্য Node.js হলো সবচেয়ে গুরুত্বপূর্ণ সফটওয়্যার।
এটি আপনার মেশিনকে একটি JavaScript রানটাইম এনভায়রনমেন্টে পরিণত করে।

⚙️ React, Vite, Next.js — সবই Node.js ছাড়া চলবে না।

🔽 ইনস্টল পদ্ধতি:

1. Node.js অফিসিয়াল ওয়েবসাইটে যান (opens in a new tab)
2. LTS (Long Term Support) ভার্সন ডাউনলোড করুন
3. ইনস্টল শেষে টার্মিনাল খুলে দেখুন:

node -v
npm -v

যদি দুইটি ভার্সন নাম্বার দেখায়, তাহলে বুঝবেন — Node.js ঠিকভাবে ইনস্টল হয়েছে ✅

🧠 ধাপ ২: VS Code ইনস্টল করুন

একজন আধুনিক ডেভেলপারের প্রিয় টুল — Visual Studio Code। এটি ফ্রি, হালকা, এবং এক্সটেনশন দিয়ে অনেক শক্তিশালী করা যায়।

🔽 ইনস্টল পদ্ধতি:

• VS Code ওয়েবসাইটে যান (opens in a new tab)
• ডাউনলোড ও ইনস্টল করুন

ইনস্টল শেষে টার্মিনালে চেক করুন:

code .

যদি VS Code খুলে যায়, তাহলে কমান্ড ঠিকভাবে কাজ করছে 🎯 না হলে Command Palette (Ctrl + Shift + P) খুলে লিখুন:

Shell Command: Install 'code' command in PATH

🎨 ধাপ ৩: সুন্দর থিম ও ফন্ট ব্যবহার করুন

চোখের আরাম এবং মনোযোগের জন্য সুন্দর থিম ব্যবহার করা জরুরি। প্রস্তাবিত থিম 👉 LWS VS Code Theme

ইনস্টল পদ্ধতি:

1. Ctrl + Shift + X চাপুন (Extension Panel খুলবে)
2. সার্চ দিন → LWS VS Code Theme
3. ইনস্টল করে সক্রিয় করুন (Peace of the eye variant ব্যবহার করুন)

⚡ ধাপ ৪: দরকারি এক্সটেনশন ইনস্টল করুন

এক্সটেনশনগুলো আপনার কোডিং এক্সপেরিয়েন্সকে স্মার্ট, দ্রুত, এবং সুন্দর করে তোলে।

ইনস্টল করতে যান: Extensions Panel → সার্চ দিন → Install

⚙️ ধাপ ৫: VS Code সেটিংস কনফিগার করুন

VS Code যেন ESLint ও Prettier ঠিকভাবে কাজ করে, এজন্য নিচের সেটিংস ব্যবহার করুন। Ctrl + , চাপুন → নিচে ⚙️ আইকনে ক্লিক করে → Open Settings (JSON) সিলেক্ট করুন।

তারপর নিচের কনফিগারেশন যুক্ত করুন 👇

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

💡 ধাপ ৬: .vscode/settings.json (লোকাল প্রজেক্ট স্পেসিফিক সেটিংস)

লোকাল প্রজেক্টের .vscode/settings.json ফাইলে নিজের পছন্দমতো সেটিংস রাখুন 👇

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

🚀 ধাপ ৭: React প্রজেক্ট তৈরি করুন (Vite দিয়ে)

আগে create-react-app ব্যবহার হতো, এখন সবাই Vite ব্যবহার করে কারণ এটি দ্রুত ও আধুনিক।

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

এখন ব্রাউজারে http://localhost:5173 খুলে দেখুন — আপনার প্রথম React অ্যাপ চলছে! 🎉

📁 ধাপ ৮: .js বনাম .jsx

React কম্পোনেন্ট লেখার জন্য .jsx এক্সটেনশন ব্যবহার করা উত্তম। এতে আপনার ফাইলের ধরন পরিষ্কারভাবে বোঝা যায়।

✅ উদাহরণ: App.jsx, Navbar.jsx, LoginForm.jsx

🧠 ধাপ ৯: User Snippets দিয়ে Productivity বাড়ান

প্রতিবার একই কোড লিখতে লিখতে বিরক্ত লাগছে? 😩

তাহলে এবার থেকে ব্যবহার করুন User Snippets — যা কয়েকটি কীওয়ার্ড লিখেই পুরো কোড তৈরি করে দিতে পারে। একই কোড বারবার না লিখে VS Code Snippet ব্যবহার করুন।

🔹 ধাপ ১: ctrl + shift + p দিয়ে Command Palette খুলে → সার্চ দিন “snippets”

🔹 ধাপ ২: Configure User Snippets → javascriptreact এবং javascript সিলেক্ট করুন

🔹 ধাপ ৩: নিচের স্নিপেটগুলো পেস্ট করুন

javascriptreact.json এবং javascript.json — এই দুই ফাইলে নিচের JSON টি পেস্ট করে দিন 👇

{
  "React Component (Named Function)": {
    "prefix": "rfc",
    "body": [
      "export default function $1() {",
      "  return (",
      "    $2",
      "  );",
      "}"
    ],
    "description": "Create a React functional component (named function)"
  },
  "React Component (Arrow Function)": {
    "prefix": "rafc",
    "body": [
      "const $1 = () => {",
      "  return (",
      "    $2",
      "  );",
      "};",
      "",
      "export default $1;"
    ],
    "description": "Create a React functional component using arrow function"
  }
}

এখন লিখুন rfc → Tab → Named Function অথবা rafc → Tab → Arrow Function 🚀

✅ এখন থেকে কী লাভ?

• ⏱ সময় বাঁচবে — বারবার একই কোড লিখতে হবে না
• 🎯 টাইপো কমবে
• ⚙️ কোডের ধারাবাহিকতা (consistency) বজায় থাকবে

🔥 React Bangla টিপস: নিজের প্রয়োজন অনুযায়ী আরও স্নিপেট বানাতে পারেন — যেমন useState, useEffect, বা custom hook স্নিপেট।

চাইলে আমি পরের অধ্যায়ে “Custom Hook Snippet” বানানোর world-class ভার্সনটিও লিখে দিতে পারি।

🧰 ধাপ ১০: Git এবং GitHub সেটআপ করুন

কোড ট্র্যাক রাখতে ও ব্যাকআপ রাখতে Git অপরিহার্য।

🔽 ইনস্টল:

• Git ডাউনলোড করুন (opens in a new tab)

• ইনস্টল শেষে চেক করুন:

  git --version

🔽 নতুন প্রজেক্টে ইনিশিয়ালাইজ:

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

GitHub অ্যাকাউন্ট খুলে কোড আপলোড করুন 💪

🔒 ধাপ ১১: .gitignore ও .env ফাইল

প্রজেক্টের গোপন বা ভারি ফাইল বাদ দিতে .gitignore ব্যবহার করুন।

node_modules/
.env
dist/

.env ফাইল গোপন রাখুন — কখনোই GitHub-এ পুশ করবেন না।

⚡ ধাপ ১২: VS Code টার্মিনাল শর্টকাট

টার্মিনাল খুলুন সহজে: `Ctrl + `` (Backtick) চাপুন একাধিক টার্মিনাল ট্যাবও খুলতে পারবেন।

💎 কিছু অতিরিক্ত প্রো টিপস

• ✅ প্রতিদিন ছোট ছোট টাস্ক লিস্ট করুন
• ✅ বড় কাজকে ছোট ভাগে ভাগ করুন
• ✅ VS Code শর্টকাট শিখে ফেলুন
• ✅ StackOverflow আর অফিসিয়াল ডকুমেন্টেশন পড়ার অভ্যাস করুন
• ✅ আরামদায়ক চেয়ার + মনোযোগী workspace তৈরি করুন

🏁 উপসংহার

এতদূর ফলো করলে আপনি এখন একজন Modern Web Developer (2025) হওয়ার জন্য একদম প্রস্তুত। আপনার কম্পিউটার এখন একটি Powerful Web Development Environment 💪

React, Tailwind CSS, Next.js, Node.js — যা-ই শিখতে চান, সব এখন হাতের নাগালে।