هناك بالفعل الكثير من المقالات حول ReactJS. ولكن من أجل البدء في دراسة مبرمج مبتدئ ، تحتاج إلى العثور على البداية التي توجد فيها أسس إنشائها. أردت أن أوضح أنه لا يوجد شيء معقد في فهم مبادئ تطوير الواجهة في هذا الإطار.
سمحت لي إحدى طرق الدراسة بفهم بنية العديد من أنظمة البرمجيات المعقدة ، ويعود السبب في ذلك إلى أنك بحاجة إلى إعادة كتابة المشروع قيد الدراسة بحيث تحصل على نوع من الوحش غير المعروف الذي يتحرك قليلاً على الأقل ويشبه إلى حد ما النموذج الأولي الخاص به.
أحتاج إلى الاعتراف بأنني خلفية وأنا لا أعرف حتى ما الذي دفعني إلى كتابة عمل مصغر في JavaScript. لكن بصراحة ، هذه رغبة في تعلم JS.
في الواقع ، هناك دافع جيد لإنشاء مشاريع في شكل وحدات / مكونات. من وجهة نظر المبرمجين الخلفيين ، تبدو البيانات في أحسن الأحوال ككائنات JSON ، ويجب تكوينها في الهيكل المرغوب وإرسالها عند الضرورة ، ثم القيام بكل ما تريده معهم. في النهاية الأمامية ، في الإصدار الأكثر بدائية ، يجب عليك تحديد عناصر HTML الضرورية بواسطة المعرف وتحديث سماتها ، وكذلك تغيير العقد النصية. اجعل الحياة أسهل لأطر JavaScript.
بمجرد أن كتبت إطار PHP-Slim الخاص بي ، وهو بعيد عن الأصل ، ولكنه يساعدني حقًا في مشاريع PHP. اليوم أريد أن أتحدث عن كيف قدمت أصول تطوير ReactJS. لقد كتبت ملفًا واحدًا في 135 سطرًا من التعليمات البرمجية يطلق عليه bots.js ، وإذا قمت بتوصيله وكتابة مكون مثل React ، فيمكنك حتى مشاهدة شيء ما في المتصفح. اتصلت به ReactKids.
تتمثل الفكرة في تقسيم المشروع إلى مكونات ، وإضافة مكونات باستخدام جافا سكريبت ، والتأكد من عدم وجود تبعيات بين المكونات.
بنية HTML القياسية:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>HelloReactKids</title> <link href="style.css" rel="stylesheet"> </head> <body> <div id="root"></div> <script src="js/bots.js"></script> <script src="js/pict.js"></script> <script src="js/navbar.js"></script> <script src="js/label.js"></script> <script src="js/button.js"></script> <script src="js/app.js"></script> </body> </html>
بالنسبة للتطبيق ، حدد id = root وقم بتوصيل bots.js ، ثم قم بتوصيل المكونات (أو اكتبها بنفسك) وقم بتشغيلها في app.js.
يبدو المكون في ReactKids كما يلي:
function Button(attr) {
المكون في حالتنا لا يمكن أن يكون سوى وظيفة تسمى params attr.
هنا يجب الانتباه إلى سبب هذا attr قد يكون مفيدا. حسنًا ، أولاً وقبل كل شيء ، يعرف من هم على دراية برد الفعل أنه من الممكن "خفض" البيانات إلى مكونات ابنتهم. بمعنى ، يقوم أحد المكونات بإرجاع مكون يقوم بإرجاع مكون ، وهكذا إلى أن لا يحتوي المكون على أطفال. ومع ذلك ، يتم استخدامها أيضًا كحزم للبيانات الواردة من الخادم. يتم إرسال طلبات الواجهة الخلفية للجزء الأكبر من الوظائف التي تتعامل مع الأحداث المتعلقة بالتفاعل مع واجهة المستخدم.
عندما يرسل الخادم JSON مرة أخرى (عادةً في النص) ، يجب تحويله إلى كائن JS ويتم في مكان ما. هذا هو ما يعنيه في رد الفعل و attr في تنفيذ الطفل لدينا هي ل.
في attr ، يمكنك حشر كائن JSON بالكامل الذي تم استلامه من الخادم ، أو يمكنك فقط الحصول على
أفضل البيانات التي تحتاجها ، وربما تستكمل مع البيانات الضرورية الأخرى.
بعد ذلك ، نتبع منطق React للبالغين - في بداية الوظيفة ، نقوم بمعالجة كائن attr وننفذ شؤون تجارية أخرى. فأنت بحاجة إلى إرجاع نتيجة استدعاء دالة elem () ، والتي يتم تنفيذها في bots.js. يتم نقل المعلمات التالية إلى معلمات الاتصال:
- اسم العلامة.
- كائن ذو أنماط (بتنسيق JS)
- سمات للعلامة.
- يتم تمرير نص أو علامة أو مكون آخر (تابع) أو لا شيء.
ألق نظرة على app.js:
var attr = { labelContent: "Hello React Kids", labelButton: "This button", } rend(document.getElementById("root"), App(attr)) function App(attr) { return elem( "div", { fontFamily: "segoe ui", color: "gray", textAlign: "center", }, { id: "app", }, [ Navbar(attr), Pict(attr), Label(attr), Button(attr), ] ) }
لا شيء غير عادي هنا أيضا. هنا هو نفسه أكثر تعقيدا:
function App(attr) { var cpic1 = CirclePict({id: "img1", src: "./img/img1.jpg", height: "200px"}) var cpic2 = CirclePict({id: "img1", src: "./img/img2.jpg", height: "200px"}) var cpic3 = CirclePict({id: "img1", src: "./img/img3.jpg", height: "200px"}) var txt1 = " . ."; var txt2 = " , ."; return elem( "div", { fontFamily: "segoe ui", color: "gray", }, { id: "app", }, [ Pict({id: "logo", src: "./img/logo.png", height: "90%"}), Text({id: "info", text: "you number", direction: "right"}), Label(attr), Outer({id: "outer1", content: [cpic1, cpic2, cpic3]}), Text({id: "txt1", text: txt1, width: "450px"}), Button(attr), Label({id: "lbl2", labelContent: " "}), Text({id: "txt2", text: txt2, width: "650px", direction: "center"}), RoundPict({id: "well", src: "./img/well.jpg", height: "280px", width: "550"}) ] ) }
كما ترون ، قمنا بدمج مكون CirclePict في المكون 3 الخارجي.
الأطفال ، بالطبع ، لاحظوا عدم وجود JSX. في الواقع ، تم اختراعه من قبل المبرمجين كسول وببساطة يسهل ما نكتبه. نتيجة لذلك ، لا تزال علامات JSX تتحول إلى JavaScript.
أنت الآن بحاجة لمعرفة كيف يتم تطبيق هذا الآن في bots.js. يتكون الإطار من 3 وظائف كاملة ، في الواقع elem () و setAttr () ، أول من ينشئ ، والثاني لتحديث حالة المكون وإعادة () للعرض في app.js.
function elem(elt, style, attr, item) { if(elt) {
تعالج الدالة المعلمات التي تم تمريرها إليها بنفس التسلسل:
- إنشاء مكون في شجرة الوثيقة.
- إضافة أنماط إليها.
- الصفات.
- إضافة عنصر فرعي كنص أو عنصر آخر.
عند معالجة السمات ، نتحقق أيضًا من نوعها ، إذا تم تلقي دالة كقيمة ، فمن المفترض أن هذا حدث ونعلق التنصت عليه. لذلك ، يبقى فقط الإعلان عن وتنفيذ الوظيفة المشار إليها كحدث.
في وظيفة معالجة الحدث هذه نسميها setAttr () ، لتمرير الكائن نفسه مع attr المحدث إليه. هناك شيء واحد ولكن - لكل عنصر تم إنشاؤه في attr ، يجب عليك تحديد id وإلا فلن يتم تحديثه عبر setAttr. هي بواسطة id تجدها في DOM.
بالنسبة إلى setAttr () ، كل شيء أسوأ من React ، على الرغم من أنه يكفي لفهم المبادئ (جيدًا أو كافٍ تقريبًا).
function setAttr(update, slow) { if(slow) { var replace = document.getElementById(update.id) var opamax = 0.99 var opaint = 0.01 var outslow = setInterval(function() { opamax = opamax - opaint if(opamax <= 0) { clearInterval(outslow) update.style.opacity = opamax replace.parentNode.replaceChild(update, replace) var inslow = setInterval(function() { opamax = opamax + opaint update.style.opacity = opamax if(opamax >= 1) { clearInterval(inslow) } }, slow) } replace.style.opacity = opamax }, slow) } else { var replace = document.getElementById(update.id) replace.parentNode.replaceChild(update, replace) } }
كما ترون هنا ، فقط التلاعب بشجرة الوثيقة وتأثير الخبو الآخر ، بحيث يبدو على الأقل والرمز يشبه وظيفة ، وليس helloworld.
أروع شيء في إطار أطفالنا هو وظيفة التقديم:
function rend(root, elem) { root.appendChild(elem) }
لقد لاحظت أنه من الصعب على المبرمجين المبتدئين البدء في تعلم أشياء مثل React نفسياً بحتة. بعد أن شاهدت مئات الميجابايت من المكتبات وملايين الأسطر من التعليمات البرمجية ، يجب عليك الاكتئاب والبحث عن شيء آخر. على وجه الخصوص ، إنهم يتحولون إلى Vue. بالطبع ، هذا إطار جيد أيضًا ، لكن من الأفضل فهم كلا النهجين لتطوير الواجهة الأمامية.
اتضح أن بيئات البرامج المعقدة تنشأ عن حلول صغيرة ولكنها فعالة. لذلك ، أتمنى حظًا سعيدًا لجميع الذين يسعون إلى معرفة رد الفعل. قد يجبر معنا!