من المفهوم إلى الإطلاق: بناء تطبيقات الويب الحديثة باستخدام React

يوفر النظام البيئي React العديد من نقاط البداية الممتازة، كل منها يناسب متطلبات المشروع المختلفة.

إنشاء تطبيق React (CRA) كان

CRA هو أداة التمهيد الأصلية. يوفر إعدادًا بدون تكوين مع Webpack أسفل الغطاء. ومع ذلك، لم تعد تتم صيانته بشكل نشط ولا يوصى به للمشاريع الجديدة.

Vite أصبح

Vite الخيار المفضل لتطبيقات الصفحة الواحدة. إنه يوفر استبدالًا سريعًا للوحدة الساخنة (HMR) وعملية إنشاء بسيطة مدعومة بواسطة Rollup.

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

اختر Vite للمنتجعات الصحية النقية ولوحات المعلومات المقدمة من قبل العميل. اختر Next.js عندما تحتاج إلى SEO أو SSR أو إطار عمل متكامل.

3. بنية المكونات وتركيبها

المكونات جيدة التنظيم هي أساس تطبيق React القابل للصيانة. اتبع هذه المبادئ:

• المسؤولية الفردية- يجب أن يقوم كل مكون بشيء واحد جيدًا
• التركيب على الميراث- إنشاء واجهات مستخدم معقدة من خلال الجمع بين المكونات البسيطة
• تقسيم الحاوية/العرض التقديمي- فصل منطق جلب البيانات عن العرض
• 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 Deep Dive

خطافات

هي العمود الفقري لتطوير 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>
  );
}

useEffect وuseLayoutEffect

استخدم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 تعمل مجموعة أدوات

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. التوجيه باستخدام جهاز التوجيه 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. تكامل API مع استعلام React

استعلام 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 Hook Form خفيف الوزن وعالي الأداء:

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. سير عمل GitHub Actions النموذجي لتطبيق React:

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

لمزيد من التحكم، قم بالنشر إلى AWS باستخدام خدمات مثل S3 + CloudFront لـ SPAs الثابتة، أو ECS/Fargate للتطبيقات المقدمة من الخادم. يقدم 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. مراقبة الأداء

بمجرد أن يصبح تطبيقك قيد الإنتاج، راقب أدائه لاكتشاف الانحدارات مبكرًا.

• Core Web Vitals- تتبع LCP وFID وCLS باستخدام أدوات مثل Google Lighthouse أو مكتبةweb-vitals
• تتبع الأخطاء- استخدم Sentry أو Bugsnag لالتقاط أخطاء وقت التشغيل وتشخيصها
• Analytics- تنفيذ تتبع الأحداث لفهم سلوك المستخدم
• تحليل الحزمة- تشغيلnpx webpack-bundle-analyzerأوnpx vite-bundle-visualizerلتحديد التبعيات الكبيرة

React يساعد DevTools Profiler في تحديد عمليات إعادة العرض غير الضرورية أثناء التطوير. استخدمReact.memoوuseMemoوuseCallbackبشكل استراتيجي لتحسين المسارات الساخنة.

الاستنتاج

يعد إنشاء تطبيق React للإنتاج بمثابة رحلة عبر التخطيط والهندسة المعمارية والتنفيذ والاختبار والنشر. وكل مرحلة تعتمد على المرحلة السابقة. ابدأ بخطة قوية، واختر الأدوات المناسبة لمتطلباتك، واكتب مكونات نظيفة وقابلة للتركيب، واختبرها بدقة، وقم بتشغيل خط أنابيبك تلقائيًا، وراقب الإنتاج. يعد النظام البيئي React ناضجًا ومدعومًا جيدًا - استفد من نقاط قوته وستشحن تطبيقات ويب موثوقة وفعالة بثقة.