إنشاء تطبيق React

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

أطر عمل Full-stack

تدعم أطر العمل الموصى بها هذه جميع الميزات التي تحتاجها لنشر تطبيقك وتوسيع نطاقه في الإنتاج. لقد دمجت أحدث ميزات React وتستفيد من بنية React.

Next.js (App Router)

Next.js’s App Router هو إطار عمل React يستفيد بشكل كامل من بنية React لتمكين تطبيقات React full-stack.

يتم صيانة Next.js بواسطة Vercel. يمكنك نشر تطبيق Next.js على أي مزود استضافة يدعم Node.js أو حاويات Docker، أو على خادمك الخاص. يدعم Next.js أيضًا static export الذي لا يتطلب خادمًا.

React Router (v7)

React Router هي مكتبة التوجيه الأكثر شيوعًا لـ React ويمكن دمجها مع Vite لإنشاء إطار عمل React full-stack. إنها تركز على Web APIs القياسية ولديها العديد من القوالب الجاهزة للنشر لـ runtimes و platforms مختلفة من JavaScript.

لإنشاء مشروع إطار عمل React Router جديد، قم بتشغيل:

يتم صيانة React Router بواسطة Shopify.

Expo (للتطبيقات الأصلية)

Expo هو إطار عمل React يتيح لك إنشاء تطبيقات Android و iOS و web عالمية مع واجهات مستخدم أصلية حقًا. يوفر SDK لـ React Native مما يجعل الأجزاء الأصلية أسهل في الاستخدام. لإنشاء مشروع Expo جديد، قم بتشغيل:

إذا كنت جديدًا على Expo، تحقق من دليل Expo التعليمي.

يتم صيانة Expo بواسطة Expo (الشركة). بناء التطبيقات باستخدام Expo مجاني، ويمكنك تقديمها إلى متاجر Google و Apple بدون قيود. يوفر Expo أيضًا خدمات سحابية مدفوعة اختيارية.

أطر عمل أخرى

هناك أطر عمل أخرى ناشئة تعمل نحو رؤيتنا لـ full stack React:

• TanStack Start (Beta): TanStack Start هو إطار عمل React full-stack مدعوم بـ TanStack Router. يوفر full-document SSR و streaming و server functions و bundling والمزيد باستخدام أدوات مثل Nitro و Vite.
• RedwoodJS: Redwood هو إطار عمل React full stack مع العديد من الحزم والتكوينات المثبتة مسبقًا مما يجعل من السهل بناء تطبيقات ويب full-stack.

// 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} />;
}

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

ابدأ من الصفر

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

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

إذا كنت تريد بناء الحلول الخاصة بك، راجع دليلنا لبناء تطبيق React من الصفر للحصول على تعليمات حول كيفية إعداد مشروع React جديد بدءًا من أداة build مثل Vite أو Parcel أو RSbuild.

إذا كنت مؤلف إطار عمل مهتمًا بإدراجه في هذه الصفحة، يرجى إعلامنا.