অবশ্যই! যেহেতু আপনার ইউজার 'ডিক্লারেটিভ মোড' বেছে নিয়েছেন, তার জন্য একটি সহজ এবং প্রাঞ্জল ভাষায় ব্লগ পোস্ট নিচে দেওয়া হলো। এটি সিরিজের দ্বিতীয় পোস্ট হিসেবে বইয়ে অন্তর্ভুক্ত করার জন্য বিশেষভাবে লেখা হয়েছে।

চলুন শুরু করি: React Router এর ডিক্লারেটিভ মোড ইন্সটলেশন

প্রথমেই আপনাকে অভিনন্দন! React Router v7 এর জগতে আপনার যাত্রা শুরু করার জন্য আপনি সবচেয়ে সহজ এবং সুস্পষ্ট পথ, অর্থাৎ ডিক্লারেটিভ মোড বেছে নিয়েছেন। আমাদের আগের পোস্টে আমরা বিভিন্ন মোড নিয়ে আলোচনা করেছি, আর এই পোস্টে আমরা দেখব কিভাবে আপনি আপনার React প্রোজেক্টে এই মোডটি সেটআপ করবেন।

পুরো প্রক্রিয়াটি খুবই সহজ। আমরা ধাপে ধাপে এগোব, তাই চিন্তার কোনো কারণ নেই।

ধাপ ১: আপনার React প্রোজেক্ট প্রস্তুত করুন

যেকোনো React প্রোজেক্ট দিয়েই আপনি শুরু করতে পারেন। তবে, আমরা আজকের দিনের অন্যতম জনপ্রিয় এবং দ্রুত টুল Vite ব্যবহার করে একটি নতুন প্রোজেক্ট তৈরি করব। আপনার কম্পিউটারে Node.js ইন্সটল করা থাকলেই হবে।

আপনার টার্মিনাল (Terminal) বা কমান্ড প্রম্পট (Command Prompt) খুলুন এবং নিচের কমান্ডটি চালান:

npx create-vite@latest

এই কমান্ডটি চালানোর পর এটি আপনাকে কিছু প্রশ্ন করবে। যেমন, আপনার প্রোজেক্টের নাম কী হবে এবং কোন ফ্রেমওয়ার্ক ব্যবহার করবেন। আপনি প্রোজেক্টের একটি নাম দিন এবং ফ্রেমওয়ার্ক হিসেবে React সিলেক্ট করুন। ব্যস, আপনার বেসিক React প্রোজেক্ট তৈরি!

ধাপ ২: React Router ইন্সটল করুন

এখন আমাদের মূল কাজটি করতে হবে। আমাদের তৈরি করা প্রোজেক্ট ফোল্ডারের ভেতরে প্রবেশ করে React Router ইন্সটল করতে হবে। ওয়েব অ্যাপ্লিকেশনের জন্য আমাদের প্রয়োজন react-router-dom প্যাকেজটি।

টার্মিনালে নিচের কমান্ডটি দিন:

npm install react-router-dom

আপনি যদি yarn ব্যবহার করেন, তাহলে কমান্ডটি হবে:

yarn add react-router-dom

এই একটি কমান্ডের মাধ্যমেই আপনার প্রোজেক্টে রাউটিং এর ক্ষমতা যুক্ত করার জন্য প্রয়োজনীয় সবকিছু ইন্সটল হয়ে যাবে।

ধাপ ৩: আপনার অ্যাপকে রাউটারের সাথে যুক্ত করুন

ইন্সটলেশন তো হলো, কিন্তু React এখনো জানে না যে তাকে রাউটারের কথা শুনতে হবে। এই সংযোগটি তৈরি করার জন্য আমাদের একটি বিশেষ কম্পোনেন্ট ব্যবহার করতে হবে, যার নাম <BrowserRouter>।

ভাবতে পারেন, এই <BrowserRouter> হলো একজন অভিভাবকের মতো, যে তার ভেতরের পুরো অ্যাপ্লিকেশনটিকে রাউটিং এর ক্ষমতা প্রদান করে।

আপনার প্রোজেক্টের src ফোল্ডারের ভেতরে main.jsx (বা index.js) ফাইলটি খুলুন। এখানে আমাদের সামান্য কিছু পরিবর্তন করতে হবে।

// src/main.jsx
 
import React from "react";
import ReactDOM from "react-dom/client";
// ১. react-router-dom থেকে BrowserRouter ইম্পোর্ট করুন
import { BrowserRouter } from "react-router-dom";
import App from "./App.jsx"; // আপনার মূল অ্যাপ কম্পোনেন্ট
import "./index.css";
 
ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    {/* ২. আপনার App কম্পোনেন্টকে <BrowserRouter> দিয়ে মুড়ে দিন */}
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

এখানে কী হলো?

আমরা শুধু দুটি ছোট কাজ করেছি: ১. react-router-dom থেকে <BrowserRouter> কম্পোনেন্টটি ইম্পোর্ট করেছি। ২. আমাদের মূল <App /> কম্পোনেন্টকে <BrowserRouter> দিয়ে র‍্যাপ করে দিয়েছি বা মুড়ে দিয়েছি।

এই একটি ছোট পরিবর্তনের ফলেই আপনার পুরো অ্যাপ্লিকেশনটি এখন ব্রাউজারের URL পরিবর্তনের সাথে তাল মিলিয়ে চলতে প্রস্তুত।

শেষ কথা

দারুণ! আপনার অ্যাপ্লিকেশন এখন রাউটিং এর জন্য সম্পূর্ণ প্রস্তুত। আপনি সফলভাবে React Router এর ডিক্লারেটিভ মোড সেটআপ করে ফেলেছেন।

আমাদের অ্যাপ্লিকেশন এখন রাস্তা চেনে, কিন্তু কোন রাস্তায় গেলে কী দেখা যাবে, তা এখনো জানে না। আমাদের পরবর্তী পোস্টে আমরা শিখব কিভাবে বিভিন্ন পেজের জন্য রুট (<Route>) তৈরি করতে হয় এবং <Link> ব্যবহার করে এক পেজ থেকে অন্য পেজে ন্যাভিগেট করতে হয়।