الابتداء مع React.js

React.js هو مرنة وقائمة على المكونات مكتبة جافا سكريبت ل بناء واجهات المستخدم التفاعلية. كان تم إنشاؤها ومفتوحة المصدر بواسطة Facebook ويستخدمها العديد من شركات التكنولوجيا الرائدة مثل Dropbox و AirBnB و PayPal و Netflix. React يسمح للمطورين ل إنشاء تطبيقات ثقيلة للبيانات التي يمكن تحديثها دون ألم من قبل إعادة تقديم المكونات الضرورية فقط.

الرد هو عرض طبقة من MVC نمط تصميم البرمجيات, وذلك أساسا يركز على التلاعب DOM. بينما يتحدث الجميع هذه الأيام عن React ، في هذا المنشور نلقي نظرة على كيف يمكنك ذلك البدء في ذلك.

تثبيت رد الفعل

يمكنك تثبيت React أما مع مدير حزمة npm او بواسطة إضافة المكتبات اللازمة يدويًا إلى صفحة HTML الخاصة بك. ينصح به باستخدام التفاعل مع بابل هذا يسمح لك استخدم بناء الجملة ECMAScript6 و JSX في رمز رد الفعل الخاص بك.

أذا أردت تثبيت الرد يدويا, مستندات الرسمية يوصي ل استخدم ملف HTML هذا. يمكنك تنزيل الصفحة عن طريق النقر فوق ملف> حفظ الصفحة باسم ... القائمة في المتصفح الخاص بك. سيتم أيضًا تنزيل البرامج النصية التي ستحتاج إليها (React، React DOM، Babel) في الرد-example_files / مجلد. ثم ، أضف علامات البرنامج النصي التالية إلى مقطع من مستند HTML الخاص بك:

بدلاً من تنزيلها ، يمكنك إضافة البرامج النصية React من CDN كذلك.

يمكنك أيضا استخدام إصدارات مصغرة من ملفات JavaScript أعلاه:

إذا كنت تفضل ذلك تثبيت React مع npm, أفضل طريقة هي استخدام إنشاء تطبيق React Github repo التي أنشأتها Facebook Incubator - وهذا هو الحل الذي تنصح به مستندات React. بصرف النظر عن React ، فإنه أيضا يحتوي على Webpack و Babel و Autoprefixer و ESLint وأدوات مطورة أخرى. للبدء ، استخدم أوامر CLI التالية:

 npm install -g create-react-app create-react-app my-app cd my-app start npm 

عندما تكون جاهزًا ، يمكنك ذلك الوصول إلى تطبيق React الجديد الخاص بك على ال مضيف محلي: 3000 URL:

إذا كنت ترغب في قراءة المزيد على كيفية تثبيت رد الفعل, تفحص ال دليل التثبيت من المستندات.

تتفاعل و JSX

على الرغم من أنها ليست إلزامية ، يمكنك ذلك استخدم بناء جملة JSX في تطبيقات React الخاصة بك. JSX لتقف على جافا سكريبت XML, و يتحول إلى جافا سكريبت العادية. ميزة كبيرة من JSX هو أنه يتيح لك تضمين HTML في ملفات JavaScript الخاصة بك, لذلك يجعل تعريف عناصر التفاعل أسهل.

فيما يلي أهم الأشياء التي يجب معرفتها عن JSX:

1. علامات ذلك تبدأ صغيرة (حالة الجمل السفلي) يتم تقديمها كعناصر HTML العادية.
2. علامات ذلك ابدأ بالحرف الكبير (العلوية الجمل) يتم تقديم كما تتفاعل المكونات.
3. أي رمز مكتوب داخل الأقواس المتعرجة ... يتم تفسيرها كما جافا سكريبت الحرفية.

إذا كنت تريد معرفة المزيد عنها كيفية استخدام JSX مع React تحقق من هذه الصفحة من المستندات ، وللحصول على وثائق JSX الافتراضية يمكنك إلقاء نظرة على JSX wiki.

إنشاء عناصر التفاعل

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

أدناه ، يمكنك أن ترى مثال بسيط لعنصر React يضيف زر Click me إلى صفحة HTML. في HTML ، نضيف

حاوية مع "myDiv" معرف سيكون بالسكان مع عنصر رد الفعل. نخلق لدينا عنصر رد فعل داخل

نقدم عنصر رد فعلنا مع ReactDOM.render () طريقة التي يأخذ اثنين من المعلمات المطلوبة, ال تتفاعل العنصر (انقر فوق لي) و حاوية لها (document.getElementById ( 'myDiv')). يمكنك قراءة المزيد عن كيف تتفاعل العناصر في ال “عناصر التقديم” قسم من المستندات.

إنشاء مكونات

تتفاعل المكونات هي قابلة لإعادة الاستخدام ، وحدات واجهة المستخدم المستقلة حيث يمكنك بسهولة تحديث البيانات. يمكن أن يتكون المكون من عنصر أو أكثر من عناصر التفاعل. الدعائم هي المدخلات التعسفية يمكنك استخدامها لتمرير البيانات إلى مكون. يعمل مكون React على نحو مماثل لوظائف JavaScript - في كل مرة يتم فيها الاحتجاج به ، يعمل يولد نوعا من الإخراج.

يمكنك استخدام إما بناء جملة الوظيفة الكلاسيكية أو الجديد بناء جملة فئة ES6 إلى تحديد عنصر رد الفعل. في هذه المقالة ، سوف أستخدم هذا الأخير ، لأن بابل يسمح لنا باستخدام ECMAScript 6. إذا كنت مهتمًا بكيفية إنشاء مكون بدون ES6 ، فقم بإلقاء نظرة على صفحة المكونات والدعائم في مستندات.

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

كل مكون React هو فئة JavaScript يمتد React.Component الطبقة الأساسية. سيتم استدعاء مكون لدينا احصائيات لأنه يوفر للمستخدم إحصائية أساسية. اولا نحن إنشاء احصائيات صف دراسي مع ال إحصائيات الفصل يمتد React.Component ... بناء الجملة ، ثم نحن جعله على الشاشة عن طريق الاتصال على ReactDOM.render () الطريقة (لقد استخدمنا هذا الأخير بالفعل في القسم السابق).

 إحصائيات الفصل تمدد React.Component render () return ( 
 مرحبًا this.props.name ، لديك this.props.notifications إعلامات جديدة و this.props.messages رسائل جديدة. 
 )؛  ReactDOM.render ( , document.getElementById ("myStats")) ؛ 

الحجة الأولى لل ReactDOM.render () طريقة تتكون من اسم مكون رد الفعل لدينا () ، و الدعائم لها (اسم, إخطارات, و رسائل) مع قيمهم. عندما نعلن عن قيم الدعائم ، تكون السلاسل محاط بعلامات اقتباس (مثل "فلان الفلاني") والقيم الرقمية داخل بين قوسين مجعد (مثل 3).

لاحظ أنه بسبب جافا سكريبت ، نحن مستخدم اسم_الفئة بدلا من صف دراسي من أجل تمرير سمة فئة إلى علامة HTML (اسم_الفئة = "موجز").

صفحة HTML المطابقة هي التالية:

في مستندات React ، هناك العديد من الأمثلة الرائعة الأخرى كيفية بناء وإدارة مكونات React, و ماذا تعرف عن الدعائم.

قراءة متعمقة

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

• فيسبوك بلوق وظيفة على لماذا بنوا رد فعل.
• أندرو راي بلوق وظيفة رائعة على الخير والشر من رد الفعل.
• Codementor على كيف تتفاعل و AngularJS مقارنة.
• التفكير قطعة FreeCodeCamp على ما إذا كان MVC ميت على الواجهة الأمامية.
• المادة هاكر نون على كيفية تحسين الأداء المتعلقة رد الفعل.