بناء تطبيق React من الصفر

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

الخطوة 1: تثبيت أداة بناء

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

Vite

Viteهي أداة بناء تهدف إلى توفير تجربة تطوير أسرع وأكثر خفة للمشاريع الويب الحديثة.

npm create vite@latest my-app -- --template react-ts

Vite لديها آراء محددة وتأتي بإعدادات افتراضية معقولة جاهزة للاستخدام. لدى Vite نظام بيئي غني من الإضافات لدعم التحديث السريع، و JSX، و Babel/SWC، وميزات شائعة أخرى. انظر إلىإضافة React الخاصة بـ Viteأوإضافة React SWC الخاصة بـ Vite و مشروع مثال React SSRللبدء.

يتم بالفعل استخدام Vite كأداة بناء في أحدالأطر الموصى بها لدينا:React Router.

Parcel

Parcelيجمع بين تجربة تطوير رائعة جاهزة للاستخدام مع بنية قابلة للتوسع يمكنها نقل مشروعك من مجرد البدء إلى تطبيقات إنتاج ضخمة.

npm install --save-dev parcel

يدعم Parcel التحديث السريع و JSX و TypeScript و Flow والتنسيق مباشرةً. راجعوصفة Parcel لـ Reactللبدء.

Rsbuild

Rsbuildهو أداة بناء مدعومة بـ Rspack توفر تجربة تطوير سلسة لتطبيقات React. يأتي مع إعدادات افتراضية مدروسة بعناية وتحسينات أداء جاهزة للاستخدام.

npx create-rsbuild --template react

يتضمن Rsbuild دعمًا مدمجًا لميزات React مثل التحديث السريع و JSX و TypeScript والتنسيق. راجعدليل Rsbuild لـ Reactللبدء.

الخطوة 2: بناء أنماط التطبيق الشائعة

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

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

التوجيه

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

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

نقترح استخدام:

• React Router
• Tanstack Router

جلب البيانات

يعد جلب البيانات من خادم أو مصدر بيانات آخر جزءًا أساسيًا من معظم التطبيقات. يتطلب القيام بذلك بشكل صحيح التعامل مع حالات التحميل وحالات الخطأ وتخزين البيانات التي تم جلبها مؤقتًا، وهو ما يمكن أن يكون معقدًا.

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

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

إذا كنت تجلب البيانات من معظم الخلفيات أو واجهات برمجة التطبيقات ذات النمط REST، فإننا نقترح استخدام:

• TanStack Query
• SWR
• RTK Query

إذا كنت تجلب البيانات من واجهة برمجة تطبيقات GraphQL، فإننا نقترح استخدام:

• Apollo
• Relay

تقسيم الكود

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

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

يمكن أن يؤدي تقسيم الكود حسب المسار، عند دمجه مع التجميع وجلب البيانات، إلى تقليل وقت التحميل الأولي لتطبيقك والوقت الذي تستغرقه أكبر محتوى مرئي في التطبيق للتصيير (أكبر طلاء للمحتوى).

للحصول على تعليمات تقسيم الكود، راجع وثائق أداة البناء الخاصة بك:

• تحسينات بناء Vite
• تقسيم الكود في Parcel
• تقسيم الكود في Rsbuild

تحسين أداء التطبيق

نظرًا لأن أداة البناء التي تختارها تدعم فقط تطبيقات الصفحة الواحدة (SPAs)، فستحتاج إلى تنفيذأنماط التصيير الأخرىمثل التصيير من جانب الخادم (SSR)، وتوليد الموقع الثابت (SSG)، و/أو مكونات خادم React (RSC). حتى إذا لم تكن بحاجة إلى هذه الميزات في البداية، فقد تكون هناك بعض المسارات في المستقبل التي ستستفيد من SSR أو SSG أو RSC.

• تطبيقات الصفحة الواحدة (SPA)تحمّل صفحة HTML واحدة وتحدث الصفحة ديناميكيًا أثناء تفاعل المستخدم مع التطبيق. تطبيقات الصفحة الواحدة أسهل في البدء بها، ولكن قد يكون وقت التحميل الأولي أبطأ. تطبيقات الصفحة الواحدة هي البنية الافتراضية لمعظم أدوات البناء.
• التصيير من جانب الخادم مع البث (Streaming SSR)يصيّر الصفحة على الخادم ويرسل الصفحة المصيّرة بالكامل إلى العميل. يمكن أن يحسن التصيير من جانب الخادم الأداء، ولكنه قد يكون أكثر تعقيدًا في الإعداد والصيانة من تطبيق الصفحة الواحدة. مع إضافة البث، يمكن أن يكون التصيير من جانب الخادم معقدًا جدًا في الإعداد والصيانة. انظردليل Vite للتصيير من جانب الخادم.
• توليد المواقع الثابتة (SSG)يولد ملفات HTML ثابتة لتطبيقك في وقت البناء. يمكن أن يحسن توليد المواقع الثابتة الأداء، ولكنه قد يكون أكثر تعقيدًا في الإعداد والصيانة من التصيير من جانب الخادم. انظردليل Vite لتوليد المواقع الثابتة.
• مكونات خادم React (RSC)تتيح لك مزج المكونات التي تُبنى في وقت البناء، والمكونات التي تعمل على الخادم فقط، والمكونات التفاعلية في شجرة React واحدة. يمكن أن تحسن مكونات خادم React الأداء، ولكنها تتطلب حاليًا خبرة عميقة للإعداد والصيانة. انظرأمثلة Parcel لمكونات خادم React.

يجب أن تندمج استراتيجيات التصيير الخاصة بك مع الموجه (router) الخاص بك حتى تتمكن التطبيقات المبنية باستخدام إطار العمل الخاص بك من اختيار استراتيجية التصيير على مستوى كل مسار. وهذا سيمكن من استخدام استراتيجيات تصيير مختلفة دون الحاجة إلى إعادة كتابة تطبيقك بالكامل. على سبيل المثال، قد تستفيد صفحة الهبوط لتطبيقك من التوليد الثابت (SSG)، بينما قد يؤدي أداء صفحة تحتوي على موجز محتوى أفضل مع التصيير من جانب الخادم.

يمكن أن يؤدي استخدام استراتيجية التصيير الصحيحة للمسارات الصحيحة إلى تقليل الوقت الذي يستغرقه تحميل أول بايت من المحتوى (الوقت حتى أول بايت)، وأول جزء من المحتوى ليتم تصييره (أول رسم للمحتوى)، وأكبر محتوى مرئي في التطبيق ليتم تصييره (أكبر رسم للمحتوى).

والمزيد…

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

إذا كنت لا تريد حل هذه المشكلات بنفسك، يمكنكالبدء بإطار عمليوفر هذه الميزات جاهزة للاستخدام.