ما هو رد الفعل؟ ما هو تصميم النمل؟

React هو إطار عمل لتطوير جافا سكريبت أطلقه فيسبوك لبناء واجهات المستخدم، ويستخدم بشكل أساسي لبناء واجهات المستخدم، مما يجعل من السهل إنشاء واجهات مستخدم تفاعلية. Ant Design هو أحد مكونات واجهة المستخدم التي تم تطويرها بواسطة فريق Alibaba Ant Financial استنادًا إلى React، وهي تستخدم بشكل أساسي للأنظمة الوسطى والخلفية، وهي مبنية باستخدام TypeScript وتوفر ملف تعريف كامل للنوع.

بيئة تشغيل هذا البرنامج التعليمي: نظام Windows7، إصدار التفاعل 18، كمبيوتر Dell G3.

ما هو رد الفعل؟

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

React هي مكتبة JavaScript تعريفية وفعالة ومرنة لبناء واجهات المستخدم. باستخدام React، يمكنك دمج مقتطفات تعليمات برمجية قصيرة ومستقلة في واجهات واجهة مستخدم معقدة تسمى مقتطفات التعليمات البرمجية هذه "المكونات".

نظرًا لأن فكرة تصميم React فريدة للغاية، فهي ابتكار ثوري وأداء متميز ومنطق الكود بسيط للغاية. لذلك، بدأ المزيد والمزيد من الأشخاص في الاهتمام به واستخدامه، معتقدين أنه قد يكون الأداة الرئيسية لتطوير الويب في المستقبل.

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

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

سمات

التصميم التعريفي: تعتمد React نموذجًا تعريفيًا، مما يجعل من السهل وصف التطبيق.

الكفاءة: تعمل React على تقليل التفاعل مع DOM عن طريق محاكاة DOM.

مرنة: تعمل React بشكل جيد مع المكتبات أو أطر العمل المعروفة.

JSX: JSX هو امتداد لبناء جملة JavaScript. لا يستخدم تطوير React بالضرورة JSX، لكننا نوصي به.

المكونات: بناء المكونات من خلال React يجعل من السهل إعادة استخدام التعليمات البرمجية ويمكن تطبيقها بشكل جيد في تطوير المشاريع الكبيرة.

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

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

ما هو تصميم النمل؟

Ant Design هو أحد مكونات واجهة المستخدم التي تم تطويرها بواسطة فريق Alibaba Ant Financial استنادًا إلى React، وهي تستخدم بشكل أساسي لاستخدام الأنظمة المتوسطة والخلفية.

الموقع الرسمي: https://ant.design/index-cn

مميزة:

اللغة التفاعلية والأسلوب المرئي المستخرج من المنتجات المتوسطة والخلفية على مستوى المؤسسة.

مكونات React عالية الجودة جاهزة للاستخدام بمجرد إخراجها من الصندوق.

تم إنشاؤه باستخدام TypeScript، مما يوفر ملفات تعريف كاملة للنوع.

نظام تطوير وتصميم أدوات الارتباط الكامل.

ابدأ

إدخال تصميم النمل

Ant Design هو نظام تصميم يخدم المنتجات على مستوى المؤسسة، ويتم نشر مكتبة المكونات الخاصة به كحزمة npm لتثبيتها واستخدامها.

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

تثبيت $ npm antd --حفظ $ غزل إضافة antd

في umi، يمكنك فتح المكون الإضافي antd عن طريق تكوين antd في مجموعة المكونات الإضافية umi-plugin-react. سيساعدك المكون الإضافي antd على تقديم antd وتنفيذ التجميع عند الطلب.

التكوين في ملف config.js:

Export default { plugins: [['umi-plugin-react', { dva: true, // تمكين وظيفة dva antd: true // تمكين وظيفة تصميم Ant}] ]};

اختبر مهاراتك

بعد ذلك، نبدأ باستخدام مكونات antd، مع أخذ مكون علامات التبويب كمثال، العنوان: https://ant.design/components/tabs-cn/ التأثير:

ارجع إلى المثال الرسمي واستخدمه وأنشئ ملف MyTabs.js:

استيراد React من 'react'import {Tabs} من 'antd'const TabPane = Tabs.TabPane;const callback = (key) => { console.log(key);} class MyTabs يمتد React.Component { render() { return ( <Tabs defaultActiveKey="1" onChange={callback}> <TabPane tab="Tab 1" key="1">محتوى جزء علامة التبويب 1</TabPane> <TabPane tab="Tab 2" key="2" >محتوى جزء علامة التبويب 2</TabPane> <TabPane tab="Tab 3" key="3">محتوى جزء علامة التبويب 3</TabPane> </Tabs> ) }}تصدير MyTabs الافتراضية؛

تأثير:

في هذه المرحلة، أتقننا الاستخدام الأساسي لمكونات antd.