React.js: تدفّق البيانات داخل التطبيق

مرحبًا، اسمي توني وسنتحدث في هذه الدروس عن تدفق البيانات داخل بنية مجلد التطبيق والخطافات المخصصة أو Hooks مع واجهة برمجة تطبيقات السياق. سنتحدث في هذا الدرس عن مكونات متعددة، والتوجيه والتنقل. دعنا نلقي نظرة على التطبيق. يمكنك إضافة المهام هنا واحدة تلو الأخرى. قم بإلغاء علامة التحديد منها وحذفها. ويوجد عداد بالأسفل يقوم بالعد لنا. حتى الآن تم تقديم كل شيء. لنا بمكون واحد وذلك. المكون كان موجود في التطبيق. والآن يبدو تطبيقنا مختلفًا بعض الشيء. ونحن نرى الآن أن هذا متاح لنا في Slashnda وإذا ذهبنا إلى هنا، فسنحصل على هذه الصفحة الصغيرة لتوضيح هذه النقطة فقط تقول مرحبًا بك في تطبيقي. إذن كيف نفعل ذلك، هو أننا. نستخدم مكون React المقدم لنا عن طريق جهاز التوجيه دوم التابع ل React يسمى جهاز توجيه المتصفح أو جهاز التوجيه. هذه هي التسمية لذلك. جهاز التوجيه هو العنصر العلوي للغاية. الطرق أو المسارات Routes تحته مباشرة. الآن هنا مرة أخرى نقوم بتصدير الموجه الخاص بالمتصفح. أعتقد أننا يمكن أن نفعل هذا لإزالة الارتباك. وهذا يعطينا نفس الشيء بشكل فعال. لذا فإن جهاز توجيه المتصفح هو المكون الأعلى. الطرق مباشرة تحت والطرق الفردية. هنا هي مكون مسار واحد. إذن ما الذي يحدث داخل هذا المكون الفردي الذي يشير إلى كل مسار. فردي إلى نوع ما من المكون. الذي يخدم هذا الطريق. لذا فإن المسار هو الأول. لذلك بالنسبة لجدول أعمال Slash، عند هذا المسار. بالضبط، العنصر الذي نستخدمه. لإخراج هذا الطريق هو هذا. عنصر جدول الأعمال هنا Agenda. دعنا نلقي نظرة على ذلك. هذا هو في الأساس ما كان لدينا في. مكون التطبيق قبل نقله. ليكون مكونًا خاصًا به. هذه تأتي كخاصيات. لذلك نقوم بتمريرها من مكون التطبيق. والبقية تكون مثل. ما كانت عليه من قبل. لذلك لا توجد تغييرات على هذا الجزء. نحن نفعل نفس الشيء هنا. نحن فقط لا نمرر أي خاصيات. هنا على الإطلاق لأن هذا مكون بسيط جدًا. إنه يقول بشكل أساسي مرحبًا بك في تطبيقي في منتصف الشاشة. ولكن لدينا أيضا القدرة على فعل شيئًا أنيقًا جدًا هنا. لذا، حتى الآن كنا نستخدم المسارات نفسها ولكن لدينا أيضًا. القدرة على استخدام أحرف البدل Wildcards. على سبيل المثال، إذا أردنا كل. إعادة توجيه أي طلب مهام بأي شيء إلى جدول الأعمال، وهذه هي الطريقة التي سنتبعها في هذا الأمر. سوف نستخدم مكون المسار، وستكون المسارات عبارة عن مهام Star. إذن النجم هو بالطبع حرف بدل. لأي شيء يتبع مسار مهام Slash. أو جزء من المسار بالأحرى. وسوف نستخدم Navigate وهو عنصر خاص لدينا. يتم النقل أيضًا من جهاز التوجيه React Dom وسوف نستخدم هذا التنقل للانتقال إلى جدول أعمال Slash. دعنا نرى كيف يعمل ذلك. لذا، إذا أردنا أن نذهب إلى. وأي شيء حرفيًا هنا، سيتم إعادة توجيهنا إلى جدول الأعمال. الآن، بالطبع، في المنظمات المهنية، سيتم توسيع نطاق هذا الأمر كثيرًا. لكن في الأساس ما ستفعله. انظر سيكون نوعا ما. من الاختلاف عما نظرنا إليه للتو، ولكن تم رفع حجمها مرة أخرى. إلى المستوى المهني في بيئة العالم الحقيقي. في درسنا القادم، سنقوم. بإلقاء نظرة على بنية مجلد التطبيق المناسبة. شكرا لمشاهدتك. إلى اللقاء.