React শেখার জন্য পরিবেশ তৈরি

React শিখতে গেলে আগে কিছু জিনিস কম্পিউটারে সেটআপ করতে হবে।
আমি এখানে একদম সহজভাবে বলছি, যেন আপনি নিজের মতো করে শুরু করতে পারেন।

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

React অ্যাপ চালাতে Node.js লাগবে।
এটা ছাড়া React প্রজেক্ট রান হবে না।

• Node.js ওয়েবসাইটে (opens in a new tab) যান।
• LTS ভার্সন ডাউনলোড করে ইনস্টল করুন।

ইনস্টল হয়েছে কিনা দেখতে টার্মিনালে লিখুন:

node -v
npm -v

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

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

কোড লেখার জন্য VS Code খুবই জনপ্রিয়।
এটা ফ্রি, আর অনেক ফিচার আছে।

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

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

VS Code-এ সুন্দর থিম দিলে চোখের আরাম হয়।
যেমন: LWS VS Code Theme।

• এক্সটেনশন ট্যাবে যান (Ctrl+Shift+X)।
• "LWS VS Code Theme" লিখে সার্চ দিন, ইনস্টল করুন।

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

আগে create-react-app ব্যবহার হতো,
এখন Vite দিয়ে খুব দ্রুত React প্রজেক্ট বানানো যায়।

টার্মিনাল খুলে লিখুন:

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

এখন ব্রাউজারে http://localhost:5173 খুললে আপনার অ্যাপ দেখবেন।

৫. .js আর .jsx ফাইল

React কম্পোনেন্ট বানাতে .jsx এক্সটেনশন ব্যবহার করলে ভালো হয়।
এতে কোড পরিষ্কার বোঝা যায়।

৬. কোড ফরম্যাট আর linting

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

VS Code-এ এই এক্সটেনশন দুইটা ইনস্টল করুন।

৭. VS Code সেটিংস

VS Code-এর সেটিংসে নিচের কনফিগারেশন দিন:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

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

৯. .vscode/settings.json কাস্টমাইজ করুন

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

১০. Git আর GitHub

কোডের পরিবর্তন ট্র্যাক করতে Git ব্যবহার করুন।
GitHub-এ কোড রাখলে হারিয়ে যাবে না।

• Git ডাউনলোড করুন (opens in a new tab)।
• টার্মিনালে গিয়ে লিখুন:

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

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

VS Code-এ টার্মিনাল খুলতে
`Ctrl + `` চাপুন।

১২. .gitignore আর .env ফাইল

.gitignore ফাইলে লিখুন:

node_modules/
.env
dist/

.env ফাইলে গোপন তথ্য রাখুন।
এই দুইটা ফাইল Git-এ পুশ করবেন না।

১৩. User Snippets

বারবার একই কোড না লিখে Snippet ব্যবহার করুন।
VS Code-এ rfc লিখলেই React কম্পোনেন্ট চলে আসবে।

কিছু দরকারি টিপস

• কাজ শুরু করার আগে ছোট ছোট টাস্ক লিখে নিন।
• বড় কাজ ছোট টুকরো করে করুন।
• বারবার লাগবে এমন কম্পোনেন্ট আলাদা ফাইলে রাখুন।
• VS Code-এর শর্টকাট শিখে নিন, এতে টাইম বাঁচবে।
• ডকুমেন্টেশন পড়ার অভ্যাস করুন।
• কাজ করতে করতে মাথা গরম হলে একটু হেঁটে আসুন।

উপসংহার

এই ধাপগুলো ফলো করলে আপনি সহজেই React শেখার জন্য পরিবেশ তৈরি করতে পারবেন।
শুরুতে একটু সময় লাগতে পারে, কিন্তু পরে অনেক সুবিধা পাবেন।