ধারণা থেকে লঞ্চ পর্যন্ত: React দিয়ে আধুনিক ওয়েব অ্যাপ তৈরি করা

2X2X2X2Xওয়েব অ্যাপ ডেভেলপমেন্ট লাইফসাইকেলXTAG41Dationব্যবহারকারীর গল্পগুলিপ্রয়োজনীয়তা✏️ওয়্যারফ্রেমUI মকআপগুলি TAG5 X9TAG580 প্রোটি ⚡উপাদানগুলি বিকাশ করুনAPIs & রাজ্য✅পরীক্ষাইউনিট / ইন্টিগ্রেশনE2E / ভিজ্যুয়ালX8XTAG8CI/CD পাইপলাইনভার্সেল / Docker📊 বা টাল XTAG01X টাল ওয়েবত্রুটি ট্র্যাকিংমূল সরঞ্জামগুলি প্রতিটি পর্যায়েফিগমা / এক্সক্যালিড্রাউফিগমা / গল্পের বই/ XTAG167 এটি সহ / নাট্যকারগিটহাব অ্যাকশনগুলিসেন্ট্রি / লাইটহাউসক্রমাগত প্রতিক্রিয়া লুপ — পর্যবেক্ষণ অন্তর্দৃষ্টি নতুন পুনরাবৃত্তিগুলি চালায়TAG128XTAG1 লাইনের একক কোড লেখার আগে পরিকল্পনায় আপনার অ্যাপ্লিকেশনের মূল বৈশিষ্ট্য, ব্যবহারকারী প্রবাহ, এবং ডেটা প্রয়োজনীয়তা সংজ্ঞায়িত করুন। Figma, Excalidraw বা এমনকি কলম-এবং-কাগজের স্কেচের মতো সরঞ্জামগুলি বাস্তবায়নের প্রতিশ্রুতি দেওয়ার আগে আপনাকে ব্যবহারকারীর ইন্টারফেসটি কল্পনা করতে সহায়তা করে।

মূল পরিকল্পনা ডেলিভারেবলগুলির মধ্যে রয়েছে:

• ব্যবহারকারীর গল্প- ব্যবহারকারীদের
• ওয়্যারফ্রেমগুলি-এর প্রতিটি স্ক্রীনের লো-আউট 141X ডেল-আউট-ফাইল আউট
• ডেটা মডেল- সত্তা, সম্পর্ক, এবং API এন্ডপয়েন্টগুলি সনাক্ত করুন
• প্রযুক্তিগত আর্কিটেকচার- আপনার স্ট্যাক, হোস্টিং এবং তৃতীয় পক্ষের পরিষেবাগুলি বেছে নিন
স্কোপ

2 সংস্করণে কোন জাহাজ পাঠানো হবে তা নির্ধারণ করুন৷ আপনার React ফ্রেমওয়ার্ক

81X8XTAG24 স্ট্যান্ড QueryAPI স্তরREST / GraphQLJSON প্রতিক্রিয়াপ্রমাণীকরণহার সীমা X9TAG19TAG19TAG198X হার সীমাAPI সংস্করণব্যাকএন্ডNode.js / এক্সপ্রেসবিজনেস লজিকমিডলওয়্যারTAG212XTAG2102Xলগিংক্যাশিংডাটাবেসMySQL / PostgreSQLসিক্যুয়ালাইজ ORM2

25X25X Mixration সংযোগ পুলইন্ডেক্সিংব্যাকআপগুলিক্লাউডAWS / VercelAWS AWS XPR240 XPRCDNSSL/TLSমনিটরিং25X7Xক্রস-কাটিং কনসার্নসTypeScriptESLint/Prettierটেস্টিং (জেস্ট) ট্র্যাকিংসিকিউরিটিপারফরম্যান্সডেটা ফ্লোব্যবহারকারীUI অনুরোধ 28XPR অনুরোধের সাথে ইন্টারঅ্যাক্ট করে(HTTP/WS)প্রক্রিয়াব্যবসায়িক যুক্তিকোয়েরি/মিউটেট ডেটা পরিবেশন & স্কেল

React ইকোসিস্টেমটি বেশ কয়েকটি চমৎকার সূচনা পয়েন্ট অফার করে, প্রতিটি বিভিন্ন প্রকল্পের প্রয়োজনীয়তার জন্য উপযুক্ত।

React অ্যাপ তৈরি করুন (CRA)

CRA ছিল আসল বুটস্ট্র্যাপিং টুল। এটি হুডের নীচে ওয়েবপ্যাকের সাথে একটি শূন্য-কনফিগারেশন সেটআপ সরবরাহ করে। যাইহোক, এটি আর সক্রিয়ভাবে রক্ষণাবেক্ষণ করা হয় না এবং নতুন প্রকল্পের জন্য সুপারিশ করা হয় না।

Vite

Vite একক-পৃষ্ঠার অ্যাপ্লিকেশনগুলির জন্য পছন্দের পছন্দ হয়ে উঠেছে৷ এটি জ্বলন্ত-দ্রুত হট মডিউল প্রতিস্থাপন (HMR) এবং রোলআপ দ্বারা চালিত একটি চর্বিহীন বিল্ড প্রক্রিয়া অফার করে।

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Next.js

যে অ্যাপ্লিকেশনগুলির জন্য সার্ভার-সাইড রেন্ডারিং (SSR), স্ট্যাটিক সাইট জেনারেশন (SSG), বা API রুটের প্রয়োজন, Next.js হল শিল্পের মান৷ এটি ফাইল-ভিত্তিক রাউটিং, বিল্ট-ইন ইমেজ অপ্টিমাইজেশান এবং বাক্সের বাইরে চমৎকার পারফরম্যান্স প্রদান করে।

npx create-next-app@latest my-app
cd my-app
npm run dev

বিশুদ্ধ SPA এবং ক্লায়েন্ট-রেন্ডার করা ড্যাশবোর্ডের জন্য Vite বেছে নিন। যখন আপনার এসইও, এসএসআর বা একটি ফুল-স্ট্যাক ফ্রেমওয়ার্কের প্রয়োজন হবে তখন Next.js বেছে নিন।

3. কম্পোনেন্ট আর্কিটেকচার এবং কম্পোজিশন

ভাল-গঠিত উপাদানগুলি একটি রক্ষণাবেক্ষণযোগ্য React অ্যাপ্লিকেশনের ভিত্তি। এই নীতিগুলি অনুসরণ করুন:

• একক দায়িত্ব- প্রতিটি উপাদানের একটি জিনিস ভালভাবে করা উচিত
• উত্তরাধিকার-

99 এর সমন্বয়ে জটিল UI তৈরি করুনকনটেইনার/প্রেজেন্টেশনাল স্প্লিট-

কোলোকেশনরেন্ডারিং থেকে আলাদা ডেটা-ফেচিং লজিক - সম্পর্কিত ফাইলগুলি (কম্পোনেন্ট, শৈলী, পরীক্ষা, প্রকারগুলি) একসাথে রাখুন

স্ট্রাকচারের মতো সাজেস্ট করা হয়েছে:

src/
  components/
    Button/
      Button.jsx
      Button.test.jsx
      Button.module.css
      index.js
    Header/
      Header.jsx
      Header.test.jsx
  features/
    auth/
      LoginForm.jsx
      useAuth.js
      authSlice.js
    dashboard/
      Dashboard.jsx
      DashboardCard.jsx
  hooks/
    useLocalStorage.js
    useDebounce.js
  utils/
    formatDate.js
    api.js

4. React হুকস ডিপ ডাইভ

হুক হল আধুনিক React বিকাশের মেরুদণ্ড৷ শক্তিশালী অ্যাপ্লিকেশন তৈরির জন্য তাদের গভীরভাবে বোঝা অপরিহার্য।

useState এবং useReducer

সাধারণ, স্বাধীন রাষ্ট্রের মানগুলির জন্যuseStateব্যবহার করুন।useReducerএ স্যুইচ করুন যখন স্টেট লজিক জটিল হয়ে যায় বা যখন পরবর্তী অবস্থা আগেরটির উপর নির্ভর করে।

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error('Unknown action');
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

ইফেক্ট ব্যবহার করুন এবং লেআউট ইফেক্ট ব্যবহার করুন

ডেটা আনা, সদস্যতা এবং DOM মিউটেশনের মতো পার্শ্ব প্রতিক্রিয়াগুলির জন্যuseEffectব্যবহার করুন। ব্রাউজার পেইন্ট করার আগে যখন আপনাকে DOM পরিমাপ বা পরিবর্তন করতে হবে শুধুমাত্র তখনইuseLayoutEffectব্যবহার করুন৷

useMemo এবং useCallback

এই হুকগুলি যথাক্রমে মান এবং ফাংশনগুলিকে মেমোাইজ করে। অপ্টিমাইজড চাইল্ড কম্পোনেন্টে কলব্যাক পাস করার সময় বা দামী প্রাপ্ত মান গণনা করার সময় এগুলি ব্যবহার করুন। তাদের অত্যধিক ব্যবহার করবেন না - অকাল অপ্টিমাইজেশান পরিমাপযোগ্য সুবিধা ছাড়াই জটিলতা যোগ করে।

কাস্টম হুক

কাস্টম হুকগুলিতে পুনরায় ব্যবহারযোগ্য যুক্তি বের করুন৷ এটি React এর সবচেয়ে শক্তিশালী প্যাটার্নগুলির মধ্যে একটি:

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

5. স্টেট ম্যানেজমেন্ট

সঠিক স্টেট ম্যানেজমেন্ট পদ্ধতি বেছে নেওয়া আপনার অ্যাপ্লিকেশনের জটিলতার উপর নির্ভর করে।

React প্রসঙ্গ

প্রসঙ্গ React-এ তৈরি করা হয়েছে এবং থিম, প্রমাণীকরণ অবস্থা এবং লোকেল সেটিংসের মতো কম-ফ্রিকোয়েন্সি আপডেটগুলির জন্য ভাল কাজ করে৷ ঘন ঘন ডেটা পরিবর্তন করার জন্য এটি ব্যবহার করা এড়িয়ে চলুন, কারণ প্রতিটি ভোক্তা প্রতিটি প্রসঙ্গ মান পরিবর্তনের জন্য পুনরায় রেন্ডার করে।

Redux Toolkit

Redux টুলকিট নাটকীয়ভাবে Reduxকে সরল করে। জটিল, আন্তঃসংযুক্ত অবস্থা সহ বড় অ্যাপ্লিকেশনগুলির জন্য এটি সর্বোত্তম পছন্দ:

import { createSlice, configureStore } from '@reduxjs/toolkit';

const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push({ id: Date.now(), text: action.payload, done: false });
    },
    toggleTodo: (state, action) => {
      const todo = state.find(t => t.id === action.payload);
      if (todo) todo.done = !todo.done;
    },
  },
});

export const store = configureStore({
  reducer: { todos: todosSlice.reducer },
});

Zustand

জুস্ট্যান্ড ন্যূনতম বয়লারপ্লেট সহ একটি হালকা ওজনের, হুক-ভিত্তিক স্টোর সরবরাহ করে৷ এটি মাঝারি আকারের অ্যাপ্লিকেশনগুলির জন্য চমৎকার:

import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
  decrement: () => set((s) => ({ count: s.count - 1 })),
}));

6. React রাউটার

এর সাথে রাউটিং এসপিএগুলির জন্য, React রাউটার ঘোষণামূলক রাউটিং প্রদান করে৷ সংস্করণ 6 নেস্টেড রুট এবং আপেক্ষিক লিঙ্ক সহ একটি সরলীকৃত API প্রবর্তন করেছে:

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />}>
          <Route path="analytics" element={<Analytics />} />
          <Route path="settings" element={<Settings />} />
        </Route>
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

Next.js প্রকল্পগুলির জন্য, রাউটিং ফাইল-সিস্টেম ভিত্তিক এবং আপনার React রাউটারের প্রয়োজন নেই৷

7. React কোয়েরির সাথে API ইন্টিগ্রেশন

TanStack কোয়েরি (পূর্বে React কোয়েরি) হল সার্ভার স্টেট ম্যানেজমেন্টের জন্য স্ট্যান্ডার্ড। এটি ক্যাশিং, ব্যাকগ্রাউন্ড রিফেচিং, পেজিনেশন এবং আশাবাদী আপডেটগুলি পরিচালনা করে:

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

function useTodos() {
  return useQuery({
    queryKey: ['todos'],
    queryFn: () => fetch('/api/todos').then(res => res.json()),
    staleTime: 5 * 60 * 1000,
  });
}

function useAddTodo() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: (newTodo) =>
      fetch('/api/todos', {
        method: 'POST',
        body: JSON.stringify(newTodo),
      }),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
  });
}

8. ফর্ম হ্যান্ডলিং

সাধারণ ইনপুটগুলির বাইরে ফর্মগুলির জন্য, একটি ফর্ম লাইব্রেরি ব্যবহার করুন৷ React হুক ফর্ম লাইটওয়েট এবং কার্যকরী:

import { useForm } from 'react-hook-form';

function SignupForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email', { required: 'Email is required' })} />
      {errors.email && <span>{errors.email.message}</span>}
      <input type="password" {...register('password', { minLength: 8 })} />
      <button type="submit">Sign Up</button>
    </form>
  );
}

9. জেস্ট এবং React টেস্টিং লাইব্রেরি

টেস্টিং এর মাধ্যমে পরীক্ষা করা নিশ্চিত করে যে আপনার অ্যাপ্লিকেশন সঠিকভাবে কাজ করছে এবং আপনি পরিবর্তন করার সাথে সাথে কাজ করতে থাকবে৷ React টেস্টিং লাইব্রেরি পরীক্ষার উপাদানগুলিকে উৎসাহিত করে যেভাবে ব্যবহারকারীরা তাদের সাথে ইন্টারঅ্যাক্ট করেন:

import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('increments counter on button click', () => {
  render(<Counter />);
  const button = screen.getByRole('button', { name: /increment/i });
  fireEvent.click(button);
  expect(screen.getByText(/count: 1/i)).toBeInTheDocument();
});

ব্যবহারকারীর আচরণের উপর আপনার পরীক্ষাগুলি গঠন করুন, বাস্তবায়নের বিবরণ নয়। ব্যবহারকারী কী দেখেন এবং কী করেন তা পরীক্ষা করুন, অভ্যন্তরীণ উপাদানের অবস্থা নয়।

10. CI/CD পাইপলাইন

একটি CI/CD পাইপলাইন দিয়ে আপনার নির্মাণ, পরীক্ষা এবং স্থাপনার প্রক্রিয়া স্বয়ংক্রিয় করুন৷ একটি React অ্যাপের জন্য একটি সাধারণ GitHub অ্যাকশন ওয়ার্কফ্লো:

name: CI/CD
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build-and-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - run: npm ci
      - run: npm run lint
      - run: npm test -- --coverage
      - run: npm run build

11. ডিপ্লয়মেন্ট

যেখানে আপনি স্থাপন করবেন তা আপনার ফ্রেমওয়ার্ক পছন্দ এবং অবকাঠামোর প্রয়োজনীয়তার উপর নির্ভর করে৷

Vercel

Vercel হল Next.js অ্যাপ্লিকেশনের জন্য সবচেয়ে সহজ বিকল্প৷ আপনার গিট রিপোজিটরি সংযুক্ত করুন এবং Vercel স্বয়ংক্রিয়ভাবে বিল্ড, প্রিভিউ এবং প্রোডাকশন ডিপ্লয়মেন্ট পরিচালনা করে। প্রতিটি পুল অনুরোধ একটি পূর্বরূপ URL পায়।

AWS

আরও নিয়ন্ত্রণের জন্য, স্ট্যাটিক এসপিএগুলির জন্য S3 + ক্লাউডফ্রন্ট বা সার্ভার-রেন্ডার করা অ্যাপ্লিকেশনগুলির জন্য ECS/Fargate-এর মতো পরিষেবাগুলি ব্যবহার করে AWS এ স্থাপন করুন৷ AWS Amplify Vercel এর মতো একটি পরিচালিত হোস্টিং অভিজ্ঞতা প্রদান করে।

Docker

পরিবেশ জুড়ে সামঞ্জস্যপূর্ণ স্থাপনার জন্য আপনার অ্যাপ্লিকেশনকে কন্টেইনারাইজ করুন:

FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./
EXPOSE 3000
CMD ["npm", "start"]

12. পারফরম্যান্স মনিটরিং

একবার আপনার অ্যাপ্লিকেশানটি প্রোডাকশনে চলে গেলে, এটির কর্মক্ষমতাকে প্রারম্ভিক বিড়াল করতে পুনরায় নিরীক্ষণ করুন৷

• কোর ওয়েব ভাইটাল- Google Lighthouse বাweb-vitalsলাইব্রেরির মতো টুল ব্যবহার করে LCP, FID এবং CLS ট্র্যাক করুন
• ত্রুটি ট্র্যাকিংচালাতে বা ক্যাপচার করার জন্য চালান বা ব্যাগ টাইম ব্যবহার করুন ত্রুটিগুলি
• Analytics- ব্যবহারকারীর আচরণ বোঝার জন্য ইভেন্ট ট্র্যাকিং প্রয়োগ করুন
• বান্ডেল বিশ্লেষণ-npx webpack-bundle-analyzerবাnpx vite-bundle-visualizerচালান বড় নির্ভরতা PR XTAG46TX XTAG46TX শনাক্ত করতে প্রোফাইলার বিকাশের সময় অপ্রয়োজনীয় পুনরায় রেন্ডার সনাক্ত করতে সহায়তা করে। হট পাথ অপ্টিমাইজ করতে কৌশলগতভাবেReact.memo,useMemo, এবংuseCallbackব্যবহার করুন৷

  উপসংহার

  উৎপাদন React অ্যাপ্লিকেশন তৈরি করা হল পরিকল্পনা, স্থাপত্য, বাস্তবায়ন, পরীক্ষা এবং স্থাপনার মাধ্যমে একটি যাত্রা। প্রতিটি পর্যায় পূর্ববর্তী এক উপর তৈরি. একটি কঠিন পরিকল্পনা দিয়ে শুরু করুন, আপনার প্রয়োজনীয়তার জন্য সঠিক সরঞ্জামগুলি চয়ন করুন, পরিষ্কার এবং সংমিশ্রণযোগ্য উপাদানগুলি লিখুন, পুঙ্খানুপুঙ্খভাবে পরীক্ষা করুন, আপনার পাইপলাইন স্বয়ংক্রিয় করুন এবং উত্পাদনে মনিটর করুন৷ React ইকোসিস্টেমটি পরিপক্ক এবং ভালভাবে সমর্থিত - এর শক্তিগুলিকে কাজে লাগান এবং আপনি আত্মবিশ্বাসের সাথে নির্ভরযোগ্য, কার্যকরী ওয়েব অ্যাপ্লিকেশন পাঠাবেন৷