React Installation (Vite / CRA) Setup – সম্পূর্ণ গাইড

React অ্যাপ তৈরি করার জন্য প্রথম ধাপ হলো development environment setup করা। আজকের দিনে React প্রজেক্ট তৈরি করার জন্য দুটি জনপ্রিয় পদ্ধতি হলো Vite এবং Create React App (CRA)। এই টিউটোরিয়ালে আমরা উভয় পদ্ধতি বিস্তারিত শিখব।

কেন Vite বা CRA ব্যবহার করা হয়?

React অ্যাপ তৈরি করতে অনেক সেটআপ প্রয়োজন — যেমন bundler, dev server, JSX compiler ইত্যাদি। এগুলো ম্যানুয়ালি সেট করা কঠিন এবং সময়সাপেক্ষ। তাই Vite এবং CRA আমাদের জন্য সব সেটআপ অটোমেটিক করে দেয়।

• Development server পাওয়া যায়
• JSX support থাকে
• Hot Reloading / Fast Refresh থাকে
• ফোল্ডার structure অটোমেটিক তৈরি হয়
• কোড bundle হয়ে production-ready output দেয়

Prerequisites (React install করার আগে যা লাগবে)

• Node.js (LTS version)
• npm বা yarn (Node install করলেই থাকে)
• VS Code (or any code editor)
• Basic Terminal knowledge

Node.js ডাউনলোড করুন: https://nodejs.org

Method 1: Vite দিয়ে React App Installation

Vite হলো React প্রজেক্ট তৈরির আধুনিক ও সবথেকে দ্রুত পদ্ধতি। এটি CRA-এর তুলনায় 10x বেশি দ্রুত এবং লাইটওয়েট।

Vite কেন ব্যবহার করবেন?

• ফাস্ট লোডিং ও ফাস্ট বিল্ড
• ছোট bundle size
• কম সময় লাগে প্রজেক্ট লোড হতে
• Simple & Modern setup

Step 1: নতুন React প্রজেক্ট তৈরি করুন

npm create vite@latest my-react-app --template react

এখানে my-react-app আপনার প্রজেক্ট ফোল্ডারের নাম।

Step 2: প্রজেক্ট ফোল্ডারে যান

cd my-react-app

Step 3: Dependencies install করুন

npm install

Step 4: Development server চালু করুন

npm run dev

এখন ব্রাউজারে ওপেন করুন: http://localhost:5173

Vite Project Structure বোঝা

• index.html – main HTML file
• src/ – all React components
• main.jsx – React entry point
• App.jsx – main component
• package.json – project config & dependencies

Method 2: Create React App (CRA) দিয়ে Installation

Create React App (CRA) হচ্ছে React-এর পুরনো এবং অফিসিয়াল সেটআপ সিস্টেম। Vite-এর তুলনায় ধীর হলেও অনেক প্রজেক্টে এটি ব্যবহার করা হয়।

Step 1: CRA দিয়ে প্রজেক্ট তৈরি

npx create-react-app my-react-app

Step 2: প্রজেক্ট ফোল্ডারে যান

cd my-react-app

Step 3: Development server চালু করুন

npm start

এখন ব্রাউজারে ওপেন করুন: http://localhost:3000

CRA Project Structure বোঝা

• public/ – static files
• src/ – components & scripts
• App.js – main App component
• index.js – app entry point
• package.json – all configuration

Vite vs CRA – কোনটি ভালো?

Recommendation: নতুনদের জন্য Vite ব্যবহার করাই সবচেয়ে ভালো।

React Project Start করার পর পরবর্তী স্টেপ

• ফোল্ডার স্ট্রাকচার বোঝা
• JSX ব্যবহার করা শেখা
• Components তৈরি করা
• Props ও State শেখা
• React Hooks শেখা
• React Router setup

উপসংহার

React অ্যাপ তৈরি করা আজকের দিনে খুব সহজ, কারণ Vite ও CRA আমাদের জন্য সব সেটআপ আগে থেকে করে দেয়। Vite দ্রুত, আধুনিক ও লাইট হওয়ায় এটি নতুন এবং অভিজ্ঞ—দুজনের জন্যই সেরা পছন্দ।

React শেখার প্রথম ধাপ হলো এই Installation এবং Setup বুঝে নেওয়া। এটি ভালোভাবে বুঝলে পরবর্তী সকল রিয়্যাক্ট টপিক শিখতে সহজ হবে।

এই কনটেন্টটি ছাত্রদের জন্য সহজ ভাষায় লেখা হয়েছে যাতে একজন নতুন ডেভেলপারও সহজে React Setup বুঝতে পারে।