تصور سے لانچ تک: React کے ساتھ جدید ویب ایپس بنانا

React کے ساتھ ایک جدید ویب ایپلیکیشن بنانے میں تحریری اجزاء سے کہیں زیادہ شامل ہے۔ پیداوار کی تعیناتی کے ذریعے ابتدائی تصور سے، ہر مرحلہ محتاط منصوبہ بندی اور صحیح ٹولنگ کا مطالبہ کرتا ہے۔ یہ گائیڈ آپ کو React ایپلیکیشن کے پورے لائف سائیکل میں لے جاتا ہے، ہر مرحلے پر عملی مشورہ اور کوڈ کی مثالیں فراہم کرتا ہے۔

1. پروجیکٹ کی منصوبہ بندی اور وائر فریمنگ

React ایکو سسٹم کئی بہترین ابتدائی نکات پیش کرتا ہے، ہر ایک مختلف پروجیکٹ کی ضروریات کے لیے موزوں ہے۔

React ایپ بنائیں (CRA)

CRA بوٹسٹریپنگ کا اصل ٹول تھا۔ یہ ہڈ کے نیچے Webpack کے ساتھ صفر کنفیگریشن سیٹ اپ فراہم کرتا ہے۔ تاہم، اب اسے فعال طور پر برقرار نہیں رکھا جاتا ہے اور نئے منصوبوں کے لیے اس کی سفارش نہیں کی جاتی ہے۔

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

خالص SPAs اور کلائنٹ کے فراہم کردہ ڈیش بورڈز کے لیے Vite کا انتخاب کریں۔ جب آپ کو SEO، SSR، یا مکمل اسٹیک فریم ورک کی ضرورت ہو تو Next.js کا انتخاب کریں۔

3. اجزاء کا فن تعمیر اور ساخت

اچھی ساخت والے اجزاء ایک برقرار رکھنے کے قابل React ایپلی کیشن کی بنیاد ہیں۔ ان اصولوں پر عمل کریں:

• سنگل ذمہ داری- ہر جزو کو ایک کام اچھی طرح کرنا چاہیے
• وراثت پر کمپوزیشن- 99 کو ملا کر پیچیدہ UIs بنائیںکنٹینر/پریزنٹیشنل اسپلٹ-
• Colocationرینڈرنگ سے ڈیٹا لانے والی منطق کو الگ کریں - متعلقہ فائلوں (جزو، طرز، ٹیسٹ، اقسام) کو ایک ساتھ رکھیں

  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 and 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>
    );
  }

  استعمال کریں اثر اور استعمال کریںLayoutEffect

  useEffectڈیٹا کی بازیافت، سبسکرپشنز، اور DOM تغیرات جیسے ضمنی اثرات کے لیے استعمال کریں۔useLayoutEffectکا استعمال صرف اس وقت کریں جب آپ کو براؤزر پینٹ کرنے سے پہلے DOM کی پیمائش یا تبدیلی کی ضرورت ہو۔

  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 Toolkit ڈرامائی طور پر 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. React راؤٹر

  کے ساتھ روٹنگ SPAs کے لیے، 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 Query (سابقہ ​​React Query) سرور اسٹیٹ مینجمنٹ کا معیار ہے۔ یہ کیشنگ، بیک گراؤنڈ ری فیچنگ، صفحہ بندی، اور پرامید اپڈیٹس کو ہینڈل کرتا ہے:

  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. Jest اور 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 ایپلیکیشنز کے لیے سب سے آسان آپشن ہے۔ اپنے گٹ ریپوزٹری کو جوڑیں، اور ورسل خود بخود تعمیرات، پیش نظارہ اور پروڈکشن کی تعیناتیوں کو ہینڈل کرتا ہے۔ ہر پل کی درخواست کو پیش نظارہ URL ملتا ہے۔

  AWS

  مزید کنٹرول کے لیے، جامد SPAs کے لیے S3 + CloudFront، یا سرور کے ذریعے فراہم کردہ ایپلیکیشنز کے لیے 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۔ پرفارمنس مانیٹرنگ

  ایک بار جب آپ کی ایپلی کیشن پروڈکشن میں ہو جائے تو اس کی ابتدائی کارکردگی کی نگرانی کریں۔

  • کور ویب وائٹلز- گوگل لائٹ ہاؤس یاweb-vitalsلائبریری جیسے ٹولز کا استعمال کرتے ہوئے LCP، FID، اور CLS کو ٹریک کریں
  • خرابی سے باخبر رہنے کے لیےیا کیپچر کرنے کے لیے سنسنی خیز وقت کا استعمال کریں۔ خرابیاں
  • Analytics- صارف کے رویے کو سمجھنے کے لیے ایونٹ ٹریکنگ لاگو کریں
  • بنڈل تجزیہ- بڑے انحصار کی شناخت کے لیےnpx webpack-bundle-analyzerیاnpx vite-bundle-visualizerچلائیں پروفائلر ترقی کے دوران غیر ضروری دوبارہ رینڈرز کی شناخت میں مدد کرتا ہے۔ گرم راستوں کو بہتر بنانے کے لیے حکمت عملی کے ساتھReact.memo,useMemoاورuseCallbackکا استعمال کریں۔

    نتیجہ

    پروڈکشن React ایپلیکیشن بنانا منصوبہ بندی، فن تعمیر، عمل درآمد، جانچ، اور تعیناتی کے ذریعے ایک سفر ہے۔ ہر مرحلہ پچھلے ایک پر بنتا ہے۔ ایک ٹھوس منصوبہ بندی کے ساتھ شروع کریں، اپنی ضروریات کے لیے صحیح ٹولز کا انتخاب کریں، صاف اور کمپوز ایبل اجزاء لکھیں، اچھی طرح جانچیں، اپنی پائپ لائن کو خودکار بنائیں، اور پیداوار کی نگرانی کریں۔ React ایکو سسٹم پختہ اور اچھی طرح سے تعاون یافتہ ہے - اس کی طاقتوں سے فائدہ اٹھائیں اور آپ اعتماد کے ساتھ قابل اعتماد، پرفارمنٹ ویب ایپلیکیشن بھیجیں گے۔