الصفحة الرئيسية>المتعلقة بالبرمجة>مكونات الطرف الثالث
تنزيل

رد الفعل-Universal-App

react-universal-app هي مكتبة تتيح بناء تطبيق من صفحة واحدة مع مكونات React Universal وموجه React.

أهداف المشروع

أهداف react-universal-app بسيطة للغاية:

  • البساطة في بناء سبا مع مكونات رد الفعل العالمي
  • المرونة في بناء منتجع صحي مع مكونات React Univers

بساطة

يوفر react-universal-app مكونين React:

  1. بالنسبة للخادم ، فقط تمريره بعض البيانات والطرق الأولية ، وقدم الشيء
  2. بالنسبة للعميل ، ما عليك سوى تمرير البيانات التي قدمتها على الخدمة ونفس الطرق التي نقلتها إلى مكون الخادم ، وترطيب الشيء

كما يوفر واجهة برمجة تطبيقات واحدة لإيقاف البيانات. يتم تعريف واجهة برمجة التطبيقات التي تصنع البيانات هذه بجوار طرقك.

المرونة

react-universal-app لا يفعل الكثير.

يمنحك بعض المكونات React لتقديم طرقك ، ولا تجبرك على تقديم أو ترطيب تطبيقك بأي طريقة معينة. يمكنك تقديم كما تريد!

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

ابدء

للبدء بسرعة ، عرض تطبيقات المثال. تعطي هذه التطبيقات مثالاً على كيفية إنشاء تطبيق باستخدام react-universal-app .

بدلاً من ذلك ، اتبع الخطوات أدناه للبدء.

تثبيت 

npm install react-universal-app react

برنامج

يعطي ما يلي معلومات حول كيفية إعداد التوجيه وجلب البيانات في تطبيق React الرئيسي. بمجرد إعداد طرقك ، يمكنك تمريرها لتفاعل المكونات التي توفر react-universal-app لتقديم جانب الخادم والترطيب من جانب العميل.

التوجيه

يستخدم react-universal-app Router 4 ، وهو أساس رائع لخدمة الصفحات كمكونات وتوفير تكوين الطريق. لتحديد طرقك ، قم بإنشاء بعض تكوين المسار وتصديرها.

ملاحظة: لا يدعم react-universal-app حاليًا سوى مستوى واحد من أعلى مستوى من التوجيه. 

 // ./app/routes.js
import Home from './components/Home' ;

const routes = [
  {
    path : '/' ,
    exact : true ,
    component : Home ,
  } ,
] ;

export default routes ; 
 // ./app/components/Home.js

const Home = ( ) => (
  < div >
    < h1 > Home! </ h1 >
  </ div >
)

export default Home ;

جلب البيانات

يوفر react-universal-app getInitialData مألوفًا جدًا لجلب البيانات ، والذي يتم تعريفه في تكوين المسار.

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

هذا له فائدة ضمنية تتمثل في تقليل الحاجز أمام الدخول للتطوير لمطوري رد الفعل الجدد لأن تدفق البيانات في التطبيق واضح ومحدد.

await getInitialData(ctx): { data }

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

يتم تمرير كائن ctx إلى getInitialData ، والذي يتضمن:

  • match - React Router's Match Object

على الخادم ، تسمى getInitialData بشكل صريح من خلال loadInitialData (انظر أدناه) ، مع تمرير الاستجابة إلى مكون الخادم.

على العميل ، يطلق عليه داخليًا ويتم تمرير البيانات التي تم إرجاعها إلى المكون المحدد للمسار. على العميل ، يوجد في react-universal-app 3 حالات في دورة حياة getInitialData التي يتم تمريرها إلى مكون المسار:

  • loading ( boolean ) - سيكون loading true إذا لم يستجب getInitialData بعد ، ربما لأنه مشغول بالجلب من واجهة برمجة التطبيقات الخاصة بك. خلاف ذلك ، فهي false
  • data ( object )-بمجرد أن يكون لدى react-universal-app بياناتك ، سيتم تمريرها في دعامة data . خلاف ذلك ، فهي null
  • error ( Error ) - إذا كانت العملية للحصول على بياناتك الأولية تطرح خطأ ، فسيتم نقلها إلى المكون الخاص بك للتعامل معها. خلاف ذلك ، فهي null 
 // app/routes.js
import Home from './components/Home' ;

const routes = [
  {
    path : '/' ,
    exact : true ,
    component : Home ,
    getInitialData : await ( ctx ) => {
      return { title : 'Home!' } ; ;
    } ,
  } ,
] ;

export default routes ; 
 // app/components/Home.js

const Home = ( { loading , error , data } ) => {
  if ( loading ) return 'Loading...'
  if ( error ) return 'Oh no, something went wrong!'
  if ( data ) {
    return (
      < div >
        < h1 > { data . title } </ h1 >
      </ div >
    )
  }
} ;

export default Home ;

التوجيه المعلمة

react-universal-app يدعم التوجيه المعلمة من react-router . عندما يتم تعريف جلب البيانات على المسار ، يكون التوجيه المعلمات نسيمًا ، ويمكن التعامل معه بشكل نظيف للغاية. 

 // ./app/routes.js
import Home from './components/Home' ;

const routes = [
  {
    path : '/:id' ,
    exact : true ,
    component : Home ,
    getInitialProps : await ( { match } ) => {
      const { id } = match . params ;
      const response = await fetch ( `/someApi/ ${ id } ` ) ;
      const apiResponse = await response . json ( ) ;

      return { title : 'Home!' , apiResponse } ; ;
    } ,
  } ,
] ;

export default routes ; 
 // ./app/components/Home.js

const Home = ( { loading , error , data } ) => {
  if ( loading ) return 'Loading...'
  if ( error ) return 'Oh no, something went wrong!'
  if ( data ) {
    const { title , apiResponse } = data ;
    return (
      < div >
        < h1 > { title } </ h1 >
        {
          apiResponse . map ( ( { title , description } ) => (
            < div >
              < h2 > { title } </ h2 >
              < p > { description } </ p >
            </ div >
          ) )
        }
      </ div >
    )
  }
} ;

export default Home ;

الخادم

لتقديم التطبيق الخاص بك على الخادم ، يوفر لك react-universal-app مكون React ( ServerApp ) و API لإحداث البيانات ( loadInitialData ). يمكن لـ react-universal-app أن يجلب البيانات الأولية داخليًا لك إذا كان أكثر رأيًا. ومع ذلك ، فإن react-universal-app لا يضع أي افتراضات حول كيفية أو المكان الذي ستقدم فيه تطبيق React الخاص بك على الخادم ، لذلك لا يمكن! اقرأ العميل للحصول على مثال واضح على لماذا لا.

بعد ذلك ، ألقِ نظرة على طرق ReactDOMServers لتقديم تطبيق React على خادم!

انتظر loadInitialData (url ، الطرق): {data}

loadInitialData هي وظيفة غير متزامنة اختيارية تتطابق مع المسار بناءً على عنوان URL الذي تم تمريره ، والاتصال getInitialData ، ويعيد الاستجابة. إذا كان المسار لا يحتوي على getInitialData ، فسيتم إرجاع كائن فارغ. يأخذ الحجج التالية:

  • url ( string ) - كائن يشبه URL node.js http
  • routes ( array ) - طرق توجيه رد الفعل

مكون رد الفعل الذي يجعل طريقًا مع بعض البيانات الأولية. يمكن أن تأخذ الدعائم التالية:

  • routes ( array ) - طرق توجيه رد الفعل
  • data ( object ) - بيانات أولية اختيارية من loadInitialData التي يتم تمريرها إلى مكون المسار
  • جميع الدعائم staticrouter من Router Router - location هو مفتاح ، يمكنك تمرير كائن يشبه URL Node.js

عميل

لترطيب تطبيق React الخاص بك على عميل ، يوفر react-universal-app مكون React يسمى ClientApp . يجب عليك بعد ذلك استدعاء طريقة hydrate react-dom .

يحتاج التطبيق من جانب العميل إلى الوصول إلى البيانات التي تم استخدامها لتقديم التطبيق على الخادم ، وبالتالي يجب حقنها في مستند HTML الذي لف الخادم تطبيق React المقدم في العميل. يمكن أن تكون هذه البيانات داخل علامة script ، والتي تضخ البيانات على كائن window العالمية ، مثل ذلك: 

 < script >
  window.__APP_DATA__ = data;
</ script >

ثم ، ألقِ نظرة على طرق ReactDOM لترطيب تطبيق React على عميل!

مكون رد الفعل الذي يجعل طرقك وتطبيقك على العميل. يأخذ الدعائم التالية:

  • routes ( array ) - طرق توجيه رد الفعل
  • data ( object ) - بيانات أولية اختيارية من loadInitialData التي يتم تمريرها إلى مكون المسار
  • جميع الدعائم المربحة في Router Router
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل