React.js مثال تمهيدي البرنامج التعليمي: 5 طرق لإنشاء Hello World

1. مقدمة في ReactJS

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

عنوان الموقع الرسمي ReactJS: http://facebook.github.io/rect/

عنوان github: https://github.com/facebook/react

العنوان الصيني ReactJS:

ما هو رد فعل؟

React هي مكتبة JS التي تم تطويرها من قبل المبرمجين المتميزين الذين يعملون على Facebook لتطوير واجهات تفاعل المستخدم. يتم الحفاظ على رمز المصدر من قبل مبرمجين ممتازين من Facebook والمجتمع ، لذلك لديه فريق فني قوي للغاية وراءه لتوفير الدعم الفني. يجلب React الكثير من الأشياء الجديدة ، مثل تنظيم المكونات ، JSX ، DOM Virtual ، إلخ. DOM الظاهري الذي يوفره يجعل مكونات العرض لدينا سريعة للغاية ، مما يحررنا من العمل الثقيل لتشغيل DOM بشكل متكرر. يعرف أي شخص يعرف React أنه يركز أكثر على طبقة V في MVC. جنبا إلى جنب مع أشياء أخرى مثل التدفق ، يمكنك بسهولة بناء تطبيقات قوية.

2. ReactJS ميزات

1

من خلال خوارزمية DOM Diff ، سيتم تحديث الأجزاء المتمايزة فقط دون تقديم الصفحة بأكملها ، وبالتالي تحسين الكفاءة

2. مكون

قسّم الصفحة إلى عدة مكونات ، بما في ذلك الهياكل والأنماط المنطقية

تحتوي المكونات فقط على منطقها الخاص ، والتي يمكن التنبؤ بها عند تحديث المكونات ، والتي تفضي إلى الصيانة.

تقوم الصفحة بتقسيم مكونات متعددة ، ويمكن إعادة استخدامها

3. تدفق البيانات أحادي الاتجاه

يتم تمرير البيانات من مكونات المستوى الأعلى إلى المكونات الفرعية

يمكن التحكم في البيانات

3. البدء مع رد الفعل. اكتب مرحبا ، العالم. أولاً ، دعونا نفهم ماهية JSX.

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

 var child1 = react.createElement ('li' ، null ، "محتوى النص الأول ') ؛ var child2 = React.CreateElement (' li '، null ،" محتوى النص الثاني ") ؛ var root2 = react.createElement (' ul '، {classname:' list '} ، child1 ، child2) ؛ react.render (<viv> {root2} </div> ، document.getElementById ('Container5')) ؛

باستخدام هذه الآلية ، يمكننا استخدام JavaScript لإنشاء شجرة DOM كاملة واجهة ، مثلما يمكننا استخدام JavaScript لإنشاء DOMs حقيقية. ومع ذلك ، فإن مثل هذا الرمز غير قابل للقراءة بشكل جيد ، لذلك اخترع React JSX واستخدم بناء جملة HTML المألوف لدينا لإنشاء DOM افتراضي:

 var root = (<ul className = "my-list"> <li> محتوى النص الأول </li> <li> محتوى النص الثاني </li> </ul>) ؛ React.Render (<viv> {root} </viv> ، document.getElementById ('Container6') ؛

4. 5 طرق للبدء مع Hello in React

الطريقة 1

 <div id = "example1"> </viv> <script type = "text/jsx"> react.render (// direct html <h1 className = "classn1"> 1 Hellow Direct HTML World </h1> ، document.getElementById ('example1')) ؛ </script>

الطريقة 2

 <div id = "exame2"> </viv> <script type = "text/jsx"> react.render (// إنشاء عنصر React.CreateElement مباشرة ('h1' ، {className: 'classn2'} ، '2 hello ، element element world world!') ، document.getElementByid ('example2')

الطريقة 3

 <div id = "exame3"> </viv> <script type = "text/jsx"> var createel = react.createClass ({render: function () {// return <h1> hellow coverent creation html world </h1> // return with in or brackets (<h1 classname = 'classn3' </h1>) ؛}}) ؛ React.Render (// إنشاء عنصر <createel/> ، // أو قوسين مزدوج <Streeel> </reateel> مستند.

الطريقة 4

 <div id = "exame4"> </viv> <script type = "text/jsx"> var jsxcreateel = react.createClass ({// إنشاء عرض في وضع JSX مباشرة: function () {return (React.CreateElement ('h1' ، {classname: عنصر في طريقة المكون React.CreateElement (JSXCreateel ، NULL) ، document.getElementByID ('example4')) ؛ </script>

الطريقة 5

 <div id = "exame5"> </viv> <script type = "text/jsx"> var hello = React.createClass ({// template hello render: function () {return (<span> {this.props.data} </span>)}}}} غرز </span>)}}) ؛ React.Render (// إنشاء عناصر في مكونات القالب 2 <h1 className = "classn5"

5. صورة النتيجة أعلاه

الرمز المرفق:

 <! doctype html> <html> <head> <meta charset = "utf-8"> <title> مستند Unted </title> <meta name = "viewport" content = "inial-scale = 1.0 ، scalable = no ، maximum-scale = 1 ، width = width"/>/head> padding: 0 ؛} body {background:#333 ؛}#box {background: url (loveimg/qioa-fxehfqi8208393.jpg) top center no-repeat ؛ العرض: 550 بكسل ؛ الحدود: 8px الصلبة #FFFF ؛ -بكيت-بوكس-حجم: صندوق الحدود ؛ الهامش: 50px Auto ؛}#example1 ،#example2 ،#example3 ،#example4 ،#example5 {margin: 20px auto ؛ العرض: 100 ٪ ؛ الخلفية: RGBA (255،255،255 ، .3) ؛ الحشو: 5px 10px ؛ حجم الخط: 13px ؛ اللون:#f1f1f1 ؛ -webkit-box-size: border-box ؛ } </style> <div id = "box"> <div id = "example1"> </viv> <script type = "text/jsx"> react.render (// direct html <h1 className = "classn1"> 1 hellow direct html world </h1> ، document.getelementbyid ('example1) ؛ type = "text/jsx"> react.render (// إنشاء العنصر بشكل مباشر react.createElement ('h1' ، {className: 'classn2'} ، '2 hello ، إنشاء element world مباشرة!') ، document.getElementById ('example2')) createel = react.createClass ({render: function () {// return <h1> Hellow Component ينشئ HTML World </h1> // العودة مع أو بدون قوسين (<h1 className = 'classn3'> 3 Hellow Componn <SearchEl> </streetel> document.getElementById ('example3')) ؛ </script> <div id = "example4"> </viv> <script type = "text/jsx"> var jsxcreateel = react.createClass ({// إنشاء عرض في jsx مباشرة: function () مرحبًا ، قم بإنشاء عالم في JSX مباشرة! عرض: function () {return (<span> {this.props.data} </span>)}}) ؛ var world = react.createClass ({// template world render: function () {return (<span> و World Template Stitching </span>)}}) ؛ data = '5 hello'/> <world/> </h1> ، document.getElementById ('example5')) ؛ </script> </viv> <script src = "build/react.js

إليك بعض المعرفة الإضافية لك:

مصطلحات رد فعل

رد فعل عناصر

كائن JavaScript الذي يمثل عناصر HTML. يتم تجميع كائنات JavaScript هذه أخيرًا في عناصر HTML المقابلة.

عناصر

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

JSX

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

دوم الافتراضي

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