ReactJS দিয়ে প্রথম প্রজেক্ট তৈরি এবং রান করার প্রক্রিয়া খুবই সহজ এবং সরল। এখানে আপনি কিভাবে প্রথম ReactJS প্রজেক্ট তৈরি করবেন এবং সেটি রান করবেন তা ধাপে ধাপে দেখানো হলো।
১. ReactJS প্রজেক্ট তৈরি করা
প্রথমে, React অ্যাপ তৈরি করতে, আপনি create-react-app টুল ব্যবহার করবেন। এটি React অ্যাপ্লিকেশন তৈরি করার জন্য একটি প্রস্তুতকৃত স্ক্যাফোল্ডিং সরবরাহ করে, যেখানে ডিপেনডেন্সি ম্যানেজমেন্ট, Webpack কনফিগারেশন এবং অন্যান্য সেটআপগুলো স্বয়ংক্রিয়ভাবে করা হয়ে থাকে।
স্টেপ ১: Node.js এবং NPM ইনস্টলেশন
ReactJS ব্যবহার করার জন্য Node.js এবং NPM (Node Package Manager) ইনস্টল থাকা প্রয়োজন। Node.js ইনস্টল করতে Node.js অফিসিয়াল সাইট থেকে ডাউনলোড করুন।
ইনস্টলেশনের পরে, টার্মিনালে বা কমান্ড প্রম্পটে নিচের কমান্ড ব্যবহার করে Node.js এবং NPM এর ভার্সন চেক করুন:
node -v
npm -v
স্টেপ ২: Create React App ব্যবহার করে নতুন প্রজেক্ট তৈরি করুন
npx (NPM এর একটি টুল) ব্যবহার করে create-react-app ইনস্টল না করেই React প্রজেক্ট তৈরি করা যায়। নিচের কমান্ডটি ব্যবহার করুন:
npx create-react-app my-app
এখানে, my-app হচ্ছে আপনার প্রজেক্টের নাম। আপনি ইচ্ছা করলে অন্য নামও দিতে পারেন।
এই কমান্ডটি রান করলে ReactJS এর প্রাথমিক কাঠামো তৈরি হয়ে যাবে এবং সমস্ত ডিপেনডেন্সি ইনস্টল হয়ে যাবে।
স্টেপ ৩: প্রজেক্ট ফোল্ডারে প্রবেশ করুন
প্রজেক্ট তৈরি হওয়ার পরে, টার্মিনালে গিয়ে cd কমান্ড দিয়ে আপনার প্রজেক্ট ফোল্ডারে চলে যান:
cd my-app
২. ReactJS প্রজেক্ট রান করা
এখন, React অ্যাপ চালানোর জন্য npm start কমান্ডটি ব্যবহার করতে হবে। এটি আপনার অ্যাপকে লোকাল ডেভেলপমেন্ট সার্ভারে চালু করবে।
স্টেপ ১: React অ্যাপ চালু করুন
npm start
এই কমান্ডটি React অ্যাপটি চালু করবে এবং সাধারণত এটি http://localhost:3000 এ চলে যাবে। আপনার ব্রাউজারে গিয়ে এই লিংকে প্রবেশ করুন এবং আপনার প্রথম React অ্যাপ দেখতে পাবেন।
স্টেপ ২: অ্যাপ রিফ্রেশ করা
আপনি যদি কোডে কোন পরিবর্তন করেন, তবে React অ্যাপটি স্বয়ংক্রিয়ভাবে রিফ্রেশ হবে। এটি React এর হট রিলোড ফিচারের কারণে সম্ভব, যার মাধ্যমে আপনি কোডের পরিবর্তন করতে থাকলেও অ্যাপ আবার লোড করতে হবে না।
৩. ReactJS প্রজেক্ট স্ট্রাকচার
আপনি যখন প্রথম React প্রজেক্ট তৈরি করবেন, তখন একটি ডিফল্ট ফোল্ডার স্ট্রাকচার তৈরি হবে, যার মধ্যে থাকবে কিছু গুরুত্বপূর্ণ ফাইল এবং ডিরেক্টরি:
my-app/
├── node_modules/ # ইনস্টল করা ডিপেনডেন্সি
├── public/ # পাবলিক ফাইল (index.html, images)
│ ├── index.html # অ্যাপের মূল HTML ফাইল
├── src/ # সোর্স কোড
│ ├── App.js # অ্যাপের মূল কম্পোনেন্ট
│ ├── index.js # React অ্যাপের এন্ট্রি পয়েন্ট
├── package.json # অ্যাপের ডিপেনডেন্সি এবং স্ক্রিপ্ট
└── README.md # প্রজেক্ট সম্পর্কিত তথ্য
- src/index.js: এখানে React অ্যাপ্লিকেশনটি রেন্ডার হয়। এই ফাইলেই
ReactDOM.render()ফাংশন ব্যবহার করেApp.jsকে রেন্ডার করা হয়। - src/App.js: এই ফাইলটি আপনার অ্যাপের মূল কম্পোনেন্ট। আপনি এখানে নিজের কম্পোনেন্ট তৈরি করতে পারেন।
- public/index.html: এই ফাইলটি মূল HTML, যেখানে React অ্যাপটি রেন্ডার হবে।
৪. ReactJS প্রজেক্টে পরিবর্তন করা
React অ্যাপ চালানোর পরে, আপনি কোডে পরিবর্তন করতে পারেন। উদাহরণস্বরূপ, src/App.js ফাইলটি খুলে এখানে কিছু পরিবর্তন করতে পারেন। যেমন:
function App() {
return (
<div className="App">
<h1>Hello, React!</h1>
</div>
);
}
এটি পরিবর্তন করার পর, আপনার ব্রাউজারে ফ্রিৎভাবে পরিবর্তনগুলো রিফ্রেশ হবে।
সারাংশ
এটি ছিল ReactJS দিয়ে প্রথম প্রজেক্ট তৈরি ও রান করার প্রক্রিয়া। আপনি create-react-app টুল ব্যবহার করে দ্রুত একটি React অ্যাপ তৈরি করতে পারেন, এবং npm start কমান্ড দিয়ে অ্যাপটি লোকাল সার্ভারে চালু করতে পারেন। এই প্রক্রিয়াটি নতুন React ডেভেলপারদের জন্য খুবই সুবিধাজনক, কারণ এটি সমস্ত কনফিগারেশন ও সেটআপ স্বয়ংক্রিয়ভাবে করে দেয়।
Read more