संकल्पना से लॉन्च तक: React के साथ आधुनिक वेब ऐप्स का निर्माण

React पारिस्थितिकी तंत्र कई उत्कृष्ट शुरुआती बिंदु प्रदान करता है, जिनमें से प्रत्येक विभिन्न परियोजना आवश्यकताओं के अनुकूल है।

React ऐप बनाएं (CRA)

CRA मूल बूटस्ट्रैपिंग टूल था। यह हुड के नीचे वेबपैक के साथ एक शून्य-कॉन्फ़िगरेशन सेटअप प्रदान करता है। हालाँकि, अब इसे सक्रिय रूप से बनाए नहीं रखा जाता है और नई परियोजनाओं के लिए इसकी अनुशंसा नहीं की जाती है।

Vite

Vite सिंगल-पेज एप्लिकेशन के लिए पसंदीदा विकल्प बन गया है। यह बहुत तेज़ हॉट मॉड्यूल रिप्लेसमेंट (एचएमआर) और रोलअप द्वारा संचालित एक लीन बिल्ड प्रक्रिया प्रदान करता है।

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

यह फ़ाइल-आधारित रूटिंग, अंतर्निहित छवि अनुकूलन और बॉक्स से बाहर उत्कृष्ट प्रदर्शन प्रदान करता है।

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

शुद्ध एसपीए और क्लाइंट-रेंडर किए गए डैशबोर्ड के लिए वाइट चुनें। जब आपको SEO, SSR, या फुल-स्टैक फ्रेमवर्क की आवश्यकता हो तो Next.js चुनें।

3. घटक वास्तुकला और संरचना

अच्छी तरह से संरचित घटक एक रखरखाव योग्य React एप्लिकेशन की नींव हैं। इन सिद्धांतों का पालन करें:

• एकल जिम्मेदारी- प्रत्येक घटक को एक काम अच्छी तरह से करना चाहिए
• वंशानुक्रम पर संरचना- सरल घटकों को मिलाकर जटिल यूआई बनाएं
• कंटेनर/प्रेजेंटेशनल स्प्लिट- डेटा-फ़ेचिंग लॉजिक को
• कोलोकेशनको रेंडर करने से अलग करें - संबंधित फ़ाइलों (घटक, शैलियों, परीक्षण, प्रकार) को एक साथ रखें

एक अनुशंसित प्रोजेक्ट संरचना इस तरह दिखती है:

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पर स्विच करें।

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का उपयोग करें।useLayoutEffectका उपयोग केवल तभी करें जब आपको ब्राउज़र के पेंट होने से पहले DOM को मापने या म्यूटेट करने की आवश्यकता हो।

यूज़मेमो और यूज़कॉलबैक

ये हुक क्रमशः मूल्यों और कार्यों को याद करते हैं। अनुकूलित चाइल्ड घटकों पर कॉलबैक पास करते समय या महंगे व्युत्पन्न मानों की गणना करते समय उनका उपयोग करें। उनका अति प्रयोग न करें - समयपूर्व अनुकूलन मापने योग्य लाभ के बिना जटिलता जोड़ता है।

कस्टम हुक

कस्टम हुक में पुन: प्रयोज्य तर्क निकालें। यह 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 टूलकिट

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

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. SPA के लिए 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 क्वेरी

टैनस्टैक क्वेरी (पूर्व में React क्वेरी) के साथ API एकीकरण सर्वर स्थिति प्रबंधन के लिए मानक है। यह कैशिंग, बैकग्राउंड रीफ़ेचिंग, पेजिनेशन और आशावादी अपडेट को संभालता है:

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 अनुप्रयोगों के लिए सबसे आसान विकल्प है। अपने Git रिपॉजिटरी को कनेक्ट करें, और Vercel स्वचालित रूप से बिल्ड, पूर्वावलोकन और उत्पादन परिनियोजन को संभालता है। प्रत्येक पुल अनुरोध को एक पूर्वावलोकन URL मिलता है।

AWS Amplify वर्सेल के समान प्रबंधित होस्टिंग अनुभव प्रदान करता है।

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. प्रदर्शन मॉनिटरिंग

एक बार जब आपका एप्लिकेशन उत्पादन में हो, तो रिग्रेशन को जल्दी पकड़ने के लिए इसके प्रदर्शन की निगरानी करें।