لماذا أتعمق في React وNext.js: بداية جديدة

لقد بدأت مؤخرًا رحلة تعليمية جديدة باستخدام React وNext.js، ولهذا السبب أنا متحمس لهذه الأدوات:

رد: لماذا

السحر القائم على المكونات

لقد غيرت بنية React المبنية على المكونات قواعد اللعبة بالنسبة لي. بدلًا من إدارة التعليمات البرمجية المتشابكة، أقوم الآن بإنشاء مكونات قابلة لإعادة الاستخدام ومكتفية ذاتيًا. على سبيل المثال، يبدو مكون الزر البسيط كما يلي:

// Button.js
import React from 'react';

const Button = ({ onClick, children }) => (
  {children}
);

export default Button;

لا يعمل هذا النهج المعياري على تبسيط التطوير فحسب، بل يحافظ أيضًا على تنظيم مشاريعي.

تصريحية وواضحة

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

// Counter.js
import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increment
    
  );
};

export default Counter;

النظام البيئي رهيبة

نظام React البيئي غني بالأدوات والمكتبات. للتوجيه، يعمل React Router على تبسيط عملية التنقل:

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => (
  
);

export default App;

تعزيز الأداء

يقوم DOM الافتراضي الخاص بـ React بتحديث واجهة المستخدم بكفاءة. إليك مكونًا بسيطًا يعرض تحسينات أداء React:

// UserProfile.js
import React from 'react';

const UserProfile = ({ user }) => (
  

    
{user.name}
    
{user.email}
  
);

export default UserProfile;

Next.js: المكافأة

الميزات المضمنة

يعمل Next.js على توسيع React بميزات مدمجة مثل العرض من جانب الخادم وإنشاء موقع ثابت. إليك الإعداد الأساسي للصفحة:

// pages/index.js
import React from 'react';

const HomePage = () => (
  

    
Welcome to Next.js!
  
);

export default HomePage;

التوجيه القائم على الملف

يستخدم Next.js نظام توجيه قائم على الملفات، حيث تحدد بنية دليل الصفحات المسارات. على سبيل المثال:

pages/index.js يتم تعيينه إلى /
تحدد الصفحات/about.js إلى /about
بالنسبة للمسارات الديناميكية، قم بإنشاء ملفات ذات أقواس مربعة. على سبيل المثال، الصفحات/المستخدمين/[id].js تتعامل مع عناوين URL مثل /users/123:

// pages/users/[id].js
import { useRouter } from 'next/router';

const UserProfile = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    

      
User Profile for User ID: {id}
    
  );
};

export default UserProfile;

الأداء الأمثل

يتضمن Next.js تحسينات في الأداء مثل تقسيم التعليمات البرمجية التلقائي وتحميل الصور المحسن. إليك كيفية استخدام مكون الصورة/التالي:

// pages/index.js
import Image from 'next/image';

const HomePage = () => (
  

    
Next.js Image Optimization
    
);

export default HomePage;

شيء صغير

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