DEV Community

Mehedi Hasan
Mehedi Hasan

Posted on

React প্রজেক্ট Vite দিয়ে সেটআপ করার পদ্ধতি

Vite দিয়ে React প্রজেক্ট শুরু করা খুবই সহজ। নিচের ধাপগুলো অনুসরণ করুন:

১. নতুন React প্রজেক্ট তৈরি করুন

npm create vite@latest my-react-app --template react
Enter fullscreen mode Exit fullscreen mode

অথবা, যদি আপনি Yarn ব্যবহার করেন:

yarn create vite@latest my-react-app --template react
Enter fullscreen mode Exit fullscreen mode

২. প্রজেক্ট ফোল্ডারে যান

cd my-react-app
Enter fullscreen mode Exit fullscreen mode

৩. নির্ভরশীলতা (Dependencies) ইনস্টল করুন

npm install
Enter fullscreen mode Exit fullscreen mode

অথবা,

yarn install
Enter fullscreen mode Exit fullscreen mode

৪. ডেভেলপমেন্ট সার্ভার চালু করুন

npm run dev
Enter fullscreen mode Exit fullscreen mode

৫. ব্রাউজারে অ্যাক্সেস করুন

Vite সাধারণত http://localhost:5173/ এ সার্ভার চালু করে। আপনার ব্রাউজারে এই URL ওপেন করলেই React অ্যাপটি দেখতে পারবেন।

Vite প্রজেক্টের স্ট্রাকচার

Vite দিয়ে একটি React অ্যাপ তৈরির পর সাধারণত নিম্নলিখিত ফোল্ডার স্ট্রাকচার থাকে:

my-react-app/
├── node_modules/
├── public/
│   ├── vite.svg
├── src/
│   ├── App.jsx
│   ├── main.jsx
│   ├── assets/
│   ├── components/
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
Enter fullscreen mode Exit fullscreen mode

গুরুত্বপূর্ণ ফাইল ও ফোল্ডার:

  • src/: সমস্ত React কম্পোনেন্ট ও অ্যাপের মূল কোড এখানে থাকে।
  • public/: এখানে স্ট্যাটিক ফাইল রাখা হয়।
  • index.html: মূল HTML ফাইল যা অ্যাপ চালানোর জন্য ব্যবহৃত হয়।
  • vite.config.js: Vite কনফিগারেশন সংক্রান্ত ফাইল।

উপসংহার

React ডেভেলপমেন্টের জন্য Vite একটি দুর্দান্ত টুল, বিশেষ করে যখন দ্রুততার প্রয়োজন হয়। Webpack এখনও বড় প্রজেক্টে ব্যবহৃত হয়, তবে ছোট থেকে মাঝারি প্রকল্পের জন্য Vite একটি সহজ, দ্রুত ও উন্নত সমাধান। আপনি যদি React-এ নতুন হন এবং দ্রুত একটি উন্নয়ন পরিবেশ সেটআপ করতে চান, তাহলে Vite ব্যবহার করাই ভালো সিদ্ধান্ত হবে।

Top comments (0)