React • Frontend • SPA

React – Modern Frontend Library
TechZ Edu Style ⚛️

এই পেজে থাকছেঃ React project create (Vite), existing folder–এ সেটআপ, Tailwind add করার command, আর React Router install ও basic setup — সবকিছু সংক্ষিপ্তভাবে বাংলায়।

Vite Tailwind React Router JSX

Project Create থেকে শুরু করুন Tailwind Setup দেখুন

RReact Summary

React হল component-based frontend library। SPA, dashboard, SaaS, admin panel – সবকিছুর জন্য React এক নম্বর choice।

JSX + Component based structure
Hooks (useState, useEffect, ইত্যাদি)
React Router দিয়ে multi-page feel
Tailwind/Bootstrap দিয়ে দ্রুত UI

Beginner → Frontend Dev Job Market Friendly

1React Project Create (Vite + Existing Folder)

Step 1 – React Project Create করবেন যেভাবে

React শুরু করার সবচেয়ে সহজ উপায় হচ্ছে Vite ব্যবহার করা। নিচে নতুন project তৈরি ও existing folder–এ setup – দুইটাই দেখানো হল।

1.1 – একদম নতুন React project (Vite)

প্রথমে terminal এ গিয়ে যেই folder–এ project রাখতে চান সেখানে যান (উদাহরণঃ D:\projects):

# Terminal এ project directory তে যান
cd D:\projects

# নতুন React project তৈরি করুন
npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev
                    

এখানে my-react-app হচ্ছে project এর নাম। চাইলে আপনার ইচ্ছামতো নাম দিতে পারেন, যেমনঃ techz-react।

1.2 – Existing Folder–এ React project সেটআপ

আপনার আগে থেকেই একটা empty / basic folder থাকলে, সেখানে direct Vite React project বানাতে পারেন।

Step 1: Folder এ যান:

cd D:\projects\my-existing-folder

Step 2: Current folder–এ Vite React initialize করুন:

npm create vite@latest . --template react
npm install
npm run dev
                    

এখানে . মানে current folder–এই সব React file create হবে, আলাদা folder বানাবে না।

Best practice: এই existing folder ফাঁকা থাকাই ভালো। পুরনো random file থাকলে আগে backup নিয়ে পরিষ্কার করে নিন।

2Tailwind CSS Setup (with extra commands)

Step 2 – React project–এ Tailwind Add

নিচে basic setup + তুমি যেই extra command চেয়েছো (version check, v3 install, init) সব দেওয়া হলো।

2.1 – Basic Tailwind Install (Vite React)

Project folder–এর ভিতরে থেকে এই command গুলো run করো:

# Tailwind এবং এর dependencies install করুন
npm install -D tailwindcss postcss autoprefixer

# Tailwind config file তৈরি করুন
npx tailwindcss init -p
                    

এরপর tailwind.config.js ফাইলে content অংশটা এভাবে set করো:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
                    

আর src/index.css ফাইলে সব মুছে দিয়ে শুধু এগুলো রাখো:

@tailwind base;
@tailwind components;
@tailwind utilities;
                    

এখন component–এ Tailwind class use করতে পারবেঃ <h1 className="text-3xl font-bold text-blue-500">Hello</h1>

2.2 – Extra Tailwind Command

যদি check করতে চাও Tailwind ইনস্টল আছে কিনা, বা v3 enforce করতে চাও, তাহলে এই command গুলো useful:

1️⃣ Tailwind ইনস্টল আছে কিনা check:

npm ls tailwindcss --depth=0

2️⃣ Tailwind v3 দিয়ে config init (package থেকে):

npx --package tailwindcss@3 tailwindcss init -p

3️⃣ Tailwind v3 + PostCSS + Autoprefixer dev dependency হিসেবে install:

npm install -D tailwindcss@3 postcss autoprefixer

Summary: – npm ls → check – npx --package tailwindcss@3 → v3 config init – npm install -D tailwindcss@3 ... → প্রকল্পে v3 devDependency হিসেবে save।

3React Router Install & Basic Setup

Step 3 – React Router দিয়ে multi-page feel

এক পেজে সবকিছু না রেখে, আলাদা path (যেমন /, /about) ব্যবহার করতে React Router লাগে। নিচে install + ছোট example দেয়া হলো।

3.1 – Router install command

Project folder–এর ভিতরে থেকে React Router DOM install করুন:

# React Router DOM install করুন
npm install react-router-dom
                    

এই package দিয়েই route, link, navigate ইত্যাদি সবকিছু manage করা হবে।

3.2 – ছোট example (Home & About route)

Vite + React project–এ সাধারণত src/main.jsx ফাইলে router wrap করা হয়।

main.jsx উদাহরণঃ

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);
                    

App.jsx উদাহরণঃ

import { Routes, Route, Link } from "react-router-dom";

function App() {
  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 p-4">
      <nav className="flex gap-4 mb-6">
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>

      <Routes>
        <Route path="/" element={<h1>This is Home Page</h1>} />
        <Route path="/about" element={<h1>This is About Page</h1>} />
      </Routes>
    </div>
  );
}

export default App;
                    

এখন npm run dev দিলে – / এ Home – /about এ About page দেখাবে, without full page reload।

React – Modern Frontend Library TechZ Edu Style ⚛️