| title | إنشاء تطبيق React من الصفر |
|---|
إذا كانت متطلبات تطبيقك لا تُلبَّى جيدًا بواسطة الأطر الجاهزة، أو تفضّل بناء إطار عمل خاص بك، أو تريد فقط تعلم أساسيات تطبيق React، فيمكنك بناء تطبيق React من الصفر.
البدء من الصفر طريقة جيدة للبدء مع React، لكن من المهم أن تعلم أن هذا المسار يشبه غالبًا بناء إطار عمل مخصّص بنفسك. مع تطور المتطلبات، قد تحتاج إلى حل مشكلات على مستوى الإطار والتي تمتلك الأُطر الموصى بها لدينا حلولًا ناضجة ومدعومة لها.
على سبيل المثال، إذا احتاج تطبيقك في المستقبل إلى دعم التصيير على الخادم (SSR)، أو توليد الموقع الثابت (SSG)، و/أو مكونات الخادم في React (RSC)، فسيتعيّن عليك تنفيذ هذه الميزات بنفسك. وبالمثل، فإن ميزات React المستقبلية التي تتطلب تكاملاً على مستوى الإطار ستحتاج إلى تنفيذ يدوي إذا رغبت في استخدامها.
الأُطر الموصى بها تساعدك أيضًا في بناء تطبيقات ذات أداء أفضل. على سبيل المثال، تقليل أو إزالة "الشلالات" في طلبات الشبكة يُحسّن من تجربة المستخدم. قد لا تكون هذه أولوية عند بناء مشروع تجريبي، لكن إذا اكتسب تطبيقك مستخدمين فقد ترغب في تحسين أدائه.
كما أن اختيار المسار هذا يجعل الحصول على الدعم أصعب، لأن طريقة تطوير التوجيه، وجلب البيانات، والميزات الأخرى ستكون فريدة وفقًا لظروفك. يجب اختيار هذا الخيار فقط إذا كنت مستعدًا للتعامل مع هذه المشكلات بنفسك أو متأكدًا أنك لن تحتاج لهذه الميزات.
لقائمة بالأُطر الموصى بها، راجع Creating a React App.
الخطوة الأولى هي تثبيت أداة بناء مثل vite أو parcel أو rsbuild. توفر هذه الأدوات ميزات لتجميع وتشغيل الشيفرة المصدرية، وتوفر خادم تطوير محليًا، وأمرًا لبناء التطبيق لنشره على خادم الإنتاج.
Vite هي أداة بناء تهدف إلى توفير تجربة تطوير أسرع وأكثر خفة للمشاريع الحديثة.
{`npm create vite@latest my-app -- --template react-ts`}تأتي Vite بإعدادات افتراضية مدروسة. تمتلك Vite نظامًا غنيًا من الإضافات لدعم إعادة التشغيل السريعة (fast refresh)، وJSX، وBabel/SWC، وميزات شائعة أخرى. اطلع على إضافة React في Vite أو إضافة React SWC ومشروع المثال الخاص بـ React SSR للبدء.
تُستخدم Vite بالفعل كأداة بناء في أحد الأُطر الموصى بها: React Router.
Parcel يجمع بين تجربة تطوير رائعة وإعداد قابل للتوسع يمكن أن ينقل مشروعك من مرحلة البداية إلى تطبيقات إنتاجية كبيرة.
{`npm install --save-dev parcel`}يدعم Parcel إعادة التشغيل السريعة وJSX وTypeScript وFlow وأنظمة التنسيق مباشرةً. راجع دليل Parcel لـ React للبدء.
Rsbuild هي أداة بناء مبنية على Rspack توفر تجربة تطوير سلسة لتطبيقات React. تأتي مع إعدادات افتراضية مضبوطة وتحسينات أداء جاهزة للاستخدام.
{`npx create-rsbuild --template react`}يتضمن Rsbuild دعمًا مدمجًا لميزات React مثل إعادة التشغيل السريعة وJSX وTypeScript وأنظمة التنسيق. اطلع على دليل Rsbuild لـ React للبدء.
إذا كنت تبدأ من الصفر مع React Native فستحتاج إلى استخدام Metro، مُجمِّع JavaScript الخاص بـ React Native. يدعم Metro تجميع المنصات مثل iOS وAndroid، لكنه يفتقر إلى العديد من الميزات مقارنة بالأدوات المذكورة أعلاه. نوصي بالبدء بـ Vite أو Parcel أو Rsbuild إلا إذا تطلّب مشروعك دعم React Native.
تبدأ أدوات البناء المذكورة أعلاه بتطبيق من جهة العميل فقط (SPA)، لكنها لا تتضمن حلولًا إضافية لوظائف شائعة مثل التوجيه، أو جلب البيانات، أو إدارة الأنماط.
يتضمن نظام React البيئي العديد من الأدوات لهذه المشكلات. أدرجنا بعض الأدوات الشائعة كنقطة انطلاق، لكن يمكنك اختيار أدوات أخرى إذا كانت تعمل بشكل أفضل لمشروعك.
التوجيه يحدد المحتوى أو الصفحات التي يتم عرضها عندما يزور المستخدم عنوان URL محددًا. تحتاج إلى إعداد موجه لربط عناوين URL بأجزاء مختلفة من تطبيقك. ستحتاج أيضًا إلى التعامل مع المسارات المتداخلة، ومعاملات المسارات، ومعاملات الاستعلام. يمكن تكوين الموجهات داخل الشيفرة أو تعريفها بناءً على بنية المجلدات والملفات الخاصة بالمكونات.
الموجهات جزء أساسي من التطبيقات الحديثة، وعادةً ما تُدمج مع جلب البيانات (بما في ذلك الجلب المسبق لصفحة كاملة لتحسين سرعة التحميل)، وتقسيم الشيفرة (لتقليل حجم حزم العميل)، وطرق تصيير الصفحات (لتحديد كيفية توليد كل صفحة).
نقترح استخدام:
جلب البيانات من خادم أو مصدر بيانات آخر جزء أساسي من معظم التطبيقات. يتطلب القيام بذلك بشكل صحيح التعامل مع حالات التحميل، وحالات الخطأ، وتخزين البيانات مؤقتًا (caching)، وهو أمر قد يكون معقّدًا.
تقوم مكتبات جلب البيانات المتخصصة بأداء الجزء الصعب من جلب وتخزين البيانات مؤقتًا نيابةً عنك، مما يتيح لك التركيز على البيانات التي يحتاجها تطبيقك وكيفية عرضها. تُستخدم هذه المكتبات عادةً داخل مكوناتك، ولكن يمكن أيضًا دمجها في محملات الموجه (router loaders) للجلب المسبق وتحسين الأداء، وكذلك في التصيير على الخادم.
لاحظ أن الجلب المباشر للبيانات داخل المكونات قد يؤدي إلى بطء في أوقات التحميل بسبب شلالات طلبات الشبكة، لذلك نوصي بالجلب المسبق في محملات الموجه أو على الخادم قدر الإمكان! هذا يسمح بجلب بيانات الصفحة دفعة واحدة أثناء عرضها.
إذا كنت تجلب البيانات من واجهات برمجة تطبيقات تقليدية (REST)، فنوصي باستخدام:
إذا كنت تجلب البيانات من واجهة GraphQL، فنوصي باستخدام:
تقسيم الشيفرة هو عملية تقسيم تطبيقك إلى حزم أصغر يمكن تحميلها عند الطلب. يزداد حجم الشيفرة مع كل ميزة وإضافة، وقد تصبح التطبيقات بطيئة في التحميل إذا ما اضطر المستخدم لتحميل كل الشيفرة دفعة واحدة. يمكن أن تساعد التخزين المؤقت، وتقليل الميزات/التبعيات، ونقل بعض الشيفرة لتعمل على الخادم في تخفيف بطء التحميل لكن كلها حلول غير كاملة وقد تضحي بالوظائف إذا أُسيء استخدامها.
بالمثل، إذا اعتمدت على التطبيقات التي تستخدم إطارك لتقسيم الشيفرة فقد تواجه مواقف يصبح فيها التحميل أبطأ مما لو لم يكن هناك تقسيم على الإطلاق. على سبيل المثال، التحميل الكسول لمخطط بياني يؤخر إرسال الشيفرة اللازمة لعرض المخطط، فيتم فصل شيفرة المخطط عن بقية التطبيق. Parcel يدعم تقسيم الشيفرة مع React.lazy. ومع ذلك، إذا حمل المخطط بياناته بعد عرضه الأولي فأنت الآن تنتظر مرتين. هذه الحالة تُسمى شلال (waterfall): بدلاً من جلب بيانات المخطط وإرسال الشيفرة اللازمة لتصييره في آنٍ واحد، يجب الانتظار لكل خطوة على حدة.
تقسيم الشيفرة حسب المسار، عند دمجه مع التجميع وجلب البيانات، يمكن أن يقلل من وقت التحميل الأولي للتطبيق والوقت اللازم لعرض أكبر محتوى مرئي (Largest Contentful Paint).
للحصول على تعليمات تقسيم الشيفرة، راجع وثائق أداة البناء التي اخترتها:
بما أن أداة البناء التي تختارها تدعم بشكل أساسي تطبيقات الصفحة الواحدة (SPA)، فستحتاج إلى تنفيذ أنماط تصيير أخرى مثل التصيير على الخادم (SSR)، وتوليد الموقع الثابت (SSG)، و/أو مكونات خادم React (RSC). حتى لو لم تكن بحاجة لهذه الميزات في البداية، فقد تستفيد بعض المسارات لاحقًا من SSR أو SSG أو RSC.
-
تطبيقات الصفحة الواحدة (SPA) تحمل صفحة HTML واحدة وتحدّث الصفحة ديناميكيًا أثناء تفاعل المستخدم. SPAs أسهل للبدء، لكنها قد تكون أبطأ في التحميل الأولي. SPAs هي البنية الافتراضية لمعظم أدوات البناء.
-
التصيير على الخادم المتدفق (Streaming SSR) يصيّر الصفحة على الخادم ويُرسل الصفحة المصيّرة بالكامل إلى العميل. يمكن أن يحسّن SSR الأداء، لكنه قد يكون أكثر تعقيدًا لإعداده وصيانته مقارنة بتطبيق صفحة واحدة. مع إضافة البث، يمكن أن يصبح SSR معقدًا جدًا في التكوين والصيانة. راجع دليل SSR في Vite.
-
توليد الموقع الثابت (SSG) يولّد ملفات HTML ثابتة لتطبيقك أثناء وقت البناء. يمكن أن يحسّن SSG الأداء، لكنه قد يكون أكثر تعقيدًا لإعداده وصيانته مقارنة بالتصيير على الخادم. راجع دليل SSG في Vite.
-
مكونات خادم React (RSC) تتيح لك مزج المكونات التي تعمل أثناء وقت البناء، والمكونات الخاصة بالخادم، والمكونات التفاعلية ضمن شجرة React واحدة. يمكن أن تحسّن RSC الأداء، لكنها تتطلب خبرة عميقة لإعدادها وصيانتها حاليًا. راجع أمثلة RSC لـ Parcel.
تحتاج استراتيجيات التصيير إلى التكامل مع الموجّه بحيث تتيح للتطبيقات اختيار استراتيجية التصيير المناسبة لكل مسار. سيُمكّن ذلك استخدام استراتيجيات تصيير مختلفة بدون إعادة كتابة التطبيق بأكمله. على سبيل المثال، قد يكون من الأفضل توليد الصفحة الرئيسية بشكل ثابت (SSG)، بينما قد تكون بعض الصفحات ذات الخلاصة المحتوى أفضل مع التصيير على الخادم.
استخدام استراتيجية التصيير المناسبة لكل مسار يمكن أن يقلل الوقت اللازم لتحميل البايت الأول من المحتوى (Time to First Byte)، والوقت لعرض أول قطعة من المحتوى (First Contentful Paint)، والوقت لعرض أكبر محتوى مرئي (Largest Contentful Paint).
هذه مجرد أمثلة قليلة على الميزات التي سيتعين على التطبيق الجديد أخذها بعين الاعتبار عند البناء من الصفر. العديد من القيود التي ستواجهها قد يكون من الصعب حلها لأن كل مشكلة مترابطة بالأخرى وقد تتطلب خبرة عميقة في مجالات قد لا تكون على دراية بها.
إذا لم ترغب في حل هذه المشكلات بنفسك، يمكنك البدء مع إطار عمل الذي يوفر هذه الميزات جاهزة.