بدء مشروع React جديد

يمكنك بالتأكيد استخدام React بدون إطار عمل — هكذا يمكنك استخدام React لجزء من صفحتك. ومع ذلك، إذا كنت تبني تطبيقًا جديدًا أو موقعًا بالكامل باستخدام React، فنوصي باستخدام إطار عمل.

إليك السبب:

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

هذه المشاكل ليست خاصة بـ React. لهذا السبب، يحتوي Svelte على SvelteKit، وVue على Nuxt، وهكذا. لحل هذه المشاكل بنفسك، ستحتاج إلى دمج أداة البناء الخاصة بك مع router الخاص بك ومع مكتبة جلب البيانات. ليس من الصعب الحصول على إعداد أولي يعمل، ولكن هناك الكثير من التفاصيل المتضمنة في جعل التطبيق يتحمل تحميلًا سريعًا حتى مع نموه بمرور الوقت. ستريد إرسال الحد الأدنى من كود التطبيق ولكن في جولة واحدة بين العميل والخادم، بالتوازي مع أي بيانات مطلوبة للصفحة. من المحتمل أن ترغب في أن تكون الصفحة تفاعلية قبل تشغيل كود JavaScript الخاص بك، لدعم التحسين التدريجي. قد ترغب في توليد مجلد من ملفات HTML ثابتة بالكامل لصفحات التسويق الخاصة بك التي يمكن استضافتها في أي مكان وتعمل حتى مع تعطيل JavaScript. بناء هذه القدرات بنفسك يتطلب عملًا حقيقيًا.

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

إذا كان لتطبيقك قيود غير عادية لا تلبيها هذه الأطر بشكل جيد، أو إذا كنت تفضل حل هذه المشاكل بنفسك، يمكنك إعداد مخصص باستخدام React. احصل على react و react-dom من npm، واضبط عملية البناء المخصصة الخاصة بك باستخدام أداة بناء مثل Vite أو Parcel, وأضف أدوات أخرى حسب الحاجة للتوجيه أو التوليد الثابت أو التقديم من جانب الخادم، وأكثر.

يطبق مجمع App Router في Next.js بالكامل مواصفات مكونات خادم React الرسمية. يتيح لك ذلك مزج المكونات الخاصة بالوقت البني، والمكونات الخاصة بالخادم فقط، والمكونات التفاعلية في شجرة React واحدة.

على سبيل المثال، يمكنك كتابة مكوّن React خاص بالخادم فقط كدالة async تقوم بقراءة البيانات من قاعدة بيانات أو من ملف. ثم يمكنك تمرير البيانات منه إلى مكوناتك التفاعلية:

// This component runs *only* on the server (or during the build).
async function Talks({ confId }) {
  // 1. You're on the server, so you can talk to your data layer. API endpoint not required.
  const talks = await db.Talks.findAll({ confId });

  // 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger.
  const videos = talks.map(talk => talk.video);

  // 3. Pass the data down to the components that will run in the browser.
  return <SearchableVideoList videos={videos} />;
}

مجمع App Router في Next.js يدمج أيضًا جلب البيانات مع Suspense.. يتيح لك ذلك تحديد حالة تحميل (مثل عنصر تحجيم مبدئي) لأجزاء مختلفة من واجهة المستخدم الخاصة بك مباشرة في شجرة React الخاصة بك:

<Suspense fallback={<TalksLoading />}>
  <Talks confId={conf.id} />
</Suspense>

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