React.JS للمبتدئين ، باستخدام المكتبة عند كتابة روبوتات التداول

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

مكتبة جافا سكريبت – رد فعل: ما هذا

React.JS هي مكتبة
للغة برمجة JavaScript الشهيرة ، تم تشكيلها بواسطة شبكة التواصل الاجتماعي Facebook لتحسين وتبسيط عملية تطوير الغلاف الخارجي للمواقع والتطبيقات – الواجهة التي يتفاعل معها المستخدم. السمة الرئيسية للمكتبة هي المكونات والحالات. المكون هو جزء من مجموعة رقمية مسؤولة عن ظهور جزء معين من النظام الجاري تصميمه.

ملحوظة! يمكن أن تتداخل هذه الأجزاء المكونة.

الحالة عبارة عن مجموعة من جميع البيانات المتعلقة بتفاصيل الواجهة ، بما في ذلك عرضها التمثيلي. باستخدام الأمثلة ، سنكتشف بمزيد من التفصيل وما هو واضح. تُظهر الصورة أدناه بعض المكونات الكبيرة – النشر على شبكة اجتماعية عبر الإنترنت ، وقسم يحتوي على معلومات عامة وعرض الصور. يتضمن كل جزء مكونات أصغر ، وهي المكونات. على سبيل المثال ، يحتوي المنشور على نصوص وصور فوتوغرافية واسم المستخدم الذي ينشر المعلومات وما إلى ذلك. يتضمن قسم الصور صورًا فردية ويحتوي قسم المعلومات العامة على معلومات موجزة.
كل من هذه المكونات (المكونات) لها حالة. أي أن القسم الذي يحتوي على معلومات عامة سيبدو مختلفًا على الأجهزة المختلفة ، ويتغير لون عنصر “الإعجاب” عند الضغط عليه والرقم المسؤول عن العدد الإجمالي للإعجابات ؛ قد يؤدي المنشور بدوره إلى تقصير النص أو نقله بالكامل.

وبالتالي ، يتم التعبير عن مرونة React.JS – تتم كتابة مكون الواجهة مرة واحدة ، وبعد ذلك يتم إعطاؤه جميع الحالات الممكنة.

لماذا تحتاج مكتبة React؟

يعد React.JS أحد الخيارات الممكنة لكتابة كود JS أو HTML بتنسيق مناسب ، وإنشاء نسخ منه وجعله مرئيًا. تمت كتابة المكونات هنا بلغة نظام خاصة – JSX ، والتي تتضمن عناصر من لغة برمجة JavaScript ولغة ترميز HTML القياسية.
الشفرة المكتوبة بلغة JSX محددة تمامًا. من المهم أيضًا ألا يحتاج متصفح الويب إلى فهم لغة النظام هذه – يتم نقل رمز React.JS إلى JS ، وهو ما يراه أي متصفح دون مشاكل. للقيام بذلك ، يتم تمرير ما تم إنشاؤه في المكتبة من خلال المجمعين المتخصصين (أحد أكثر البرامج شيوعًا اليوم هو Babel js) ، والذي يحول الأكواد في لغات البرمجة الأقل شهرة إلى تمثيلات JavaScript.
في البداية قد يبدو أن نظام الاستخدام غير منطقي للغاية ، ولكن بعد فترة تعتاد عليه وتدرك سبب تصميم الآلية بهذه الطريقة. تتمتع مكتبة JavaScript بعدد من المزايا القوية:

• يسهل التعرف على لغة برمجة النظام مقارنةً بلغة JavaScript المعروفة ، وبالتالي ، سيستغرق الأمر عدة مرات وقتًا أقل لدعم الكود وإزالة الأخطاء فيه (ستزداد سرعة كتابة الأكواد والبرامج الجديدة وفقًا لذلك) ؛
• تم بناء نظام مناسب وعملي للعناصر المكونة هنا – أجزاء متكررة من الكود يتم استخدامها في مراحل مختلفة من الكتابة وفي برامج مختلفة ، وكذلك تتغير وفقًا للسياق ؛
• كل عنصر مكون يكون خاضعًا لحالته فقط ، وبالتالي يكون من الأسهل تصحيح أوجه القصور في الكود إذا تم اكتشاف خطأ فجأة في عمله في الممارسة ؛ تطفو اللحظات غير الصحيحة على السطح: العنصر الذي يعمل بشكل صحيح سيستمر في العمل بثبات في هذا الوضع ، ما لم يتم ، بالطبع ، استخدام الحالة الخاطئة فيما يتعلق به.

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

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

دورة React JS الأساسية من الألف إلى الياء: https://youtu.be/GNrdg3PzpJQ

التعارف للمبتدئين: المفاهيم الأساسية

مرحبا بالعالم!

عند الوصول إلى الصفحة الأولى من المكتبة ، سيرى المستخدم عنوان ترحيب كمثال صغير – “Hello world!”.

أساسيات لغة نظام JSX

JSX هي لغة برمجة نظام ، امتداد لجافا سكريبت المعروفة. يتضمن مزيجًا من لغتين – برمجة JA ولغة ترميز HTML القياسية. يستخدمه المطورون لضبط المفهوم لإظهار React بالضبط كيف يجب أن تبدو واجهة المستخدم. يقوم JSX بإنشاء “أجزاء” المكتبة.

ما هو JSX؟

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

تشكيل التعبيرات في لغة النظام

يتيح لك JSX استخدام أي تعبيرات JavaScript مكتوبة جيدًا داخل الأقواس المتعرجة في العملية.

JSX هو أيضًا تعبير بمجرد تشفير شفرة المصدر بالبايت ، يتحول أي تعبير JSX إلى استدعاء دالة JS قياسي يستهدف فئة JavaScript. من هذا يمكن فهم أن امتداد نظام لغة البرمجة الرسمية يمكن استخدامه داخل دليل if ولفترات.

JSX is Objects تسمى الكائنات التي يمثلها الامتداد عناصر React. يوضحون النتيجة التي يريد المطور رؤيتها على الشاشة. تتعرف المكتبة على هذه الكائنات وتستخدمها في عملية إنشاء نموذج كائن المستند وصيانته.

عرض التفاصيل

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

المكونات والدعائم

تجعل المكونات من الممكن تقسيم واجهة المستخدم إلى أجزاء مستقلة ، والتي يسهل العمل عليها بشكل منفصل. يمكن دمجها واستخدامها عدة مرات. بالنسبة للجزء الأكبر ، تشبه وظائف المكونات وظائف لغة برمجة JavaScript نفسها. يأخذون معلومات الإدخال ، والتي تسمى props ، ويعيدون عناصر React التي تشير إلى نموذج التطوير الذي يريد المطور رؤيته على الشاشة.

مجموعة متنوعة من المكونات: وظيفية وفئة

من الأسهل الإشارة إلى مكون مكتبة كوظيفة.
يمكن أيضًا تمثيل المكونات بتنسيق فئة ES6.

مثير للإعجاب! تحدد مكتبة React هذين النوعين من المكونات على أنهما متشابهان.

الدعائم

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

الدولة ودورة الحياة

أولاً ، دعنا نتعرف على كيفية تطبيق الحالة بشكل صحيح في العمل. هناك ثلاثة أشياء مهمة يجب معرفتها حول حالة المكون:

1. لا تغير الحالة مباشرة ، استخدم طريقة setState. تذكر أن المنطقة الوحيدة التي يمكنك فيها تغيير الحالة مباشرة هي المُنشئ.
2. قد لا تكون تحديثات الحالة متزامنة.
3. تدفق المعلومات له اتجاه واحد. في بناء المكون ، لا يعرف أي منهم ما إذا كانت الحالة مخصصة لمكون آخر. لا يهم كيف تم تشكيل هذا العنصر الوظيفي المستقل أو ذاك – باستخدام أداة وظيفية أو أداة تصنيف. وهذا ما يسمى تدفق البيانات “المصب”. يتم تعريف الحالة دائمًا لبعض العناصر ، ويمكن أن تؤثر الارتباطات الهيكلية لهذه الحالة فقط على الأجزاء الموجودة “الأدنى” في الترتيب الهرمي.

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

تحليل الحدث

تشبه عملية تحليل الأحداث في مكونات React معالجة الأحداث في عناصر نموذج كائن المستند. ومع ذلك ، هناك العديد من الميزات التي تميزهم عن بعضهم البعض:

1. تتم تسمية الأحداث في مكتبة JavaScript بأسلوب مختلف عن النمط القياسي.
2. باستخدام لغة البرمجة الموسعة للنظام ، يمرر المطور روتينًا فرعيًا كمعالج أحداث بدلاً من سلسلة.

العرض الشرطي للعناصر

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

تغيير المكونات

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

القوائم والمفاتيح

يتضمن هذا القسم عدة مكونات:

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

مفاتيح

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

نماذج

في مكتبة JS ، تعمل عناصر لغة الترميز القياسية بشكل مختلف قليلاً عن مكونات نموذج كائن المستند ، لأن عناصر النموذج لها حالة مخفية في البداية.

العناصر المُدارة

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

صعود الدولة

رفع الحالة هو نموذج قياسي يجب أن يكون كل مطور على دراية به ويكون قادرًا على تطبيقه في عملية العمل. سيؤدي استخدامه إلى القضاء على أنماط إدارة الدولة المعقدة وغير المجدية في العادة.

لماذا من الضروري السيطرة على صعود الدولة؟

إن رفع الحالة إلى مستوى المكونات السابقة لتلك الأجزاء التي تتطلبها ضروري حتى تتمكن جميع العناصر من المشاركة في الدولة. سيجعل المستوى المستقر للحالة من السهل توزيعها بين جميع المكونات التي تعتمد عليها.

التكوين مقابل الميراث

يشتمل React.js على نموذج تكوين قوي ، لذلك يوصى باستخدام عملية بناء كل من الأجزاء بدلاً من التوريث لإعادة استخدام التعليمات البرمجية المكتوبة مسبقًا بين العناصر. وبالتالي ، فإن الدعائم والقدرة على إنشاء تركيبة واحدة كاملة من الأجزاء المكونة ، توفر للمطور المرونة اللازمة لإنشاء غلاف وسلوك العنصر بطريقة محددة وآمنة.

تذكير! يمكن أن تأخذ أجزاء المكون دعامات غير مرتبطة ، بما في ذلك الأجزاء الأولية التي تشكل مكتبات أو وظائف.

في حالة احتياجك إلى استخدام وظيفة خالية من المظهر للعمل مع المكونات للمرة الثانية أو الثالثة ، اسحبها إلى وحدة JS منفصلة. انقله إلى مكون واستخدم الوظيفة التي تم إنشاؤها دون مزيد من التوسع. React أو Vue أو Angular ، ماذا تختار: https://youtu.be/Nm8GpLCAgwk

مبادئ React.js

يتم إخفاء فلسفة مكتبة JavaScript بأكملها في دليل React. يبدو أن هذا طويل وليس ذا أهمية كبيرة ، ومع ذلك ، يزعم العديد من المستخدمين أنه بعد قراءة كل شيء وقع في مكانه. الوثائق قديمة جدًا ، لكنها لا تزال ذات قيمة ومناسبة –
https://ru.reactjs.org/docs/thinking-in-react.html . برنامج React js التعليمي https://ru.reactjs.org/tutorial/tutorial.html

وظائف مكتبة React.js

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

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

الاستخدام العملي

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

تطبيق عملي لـ React عند كتابة روبوتات التداول في JavaScript

من المهم أن ندرك أن المطور لا يقوم ببرمجة JS ، لكنه يكتب نصوصًا (نصوصًا). لذلك ، باستخدام المكتبة ، يمكن للمطور كتابة رمز لروبوت تداول لاحق يستخدم لأغراض تجارية ، وكذلك الاستمرار في تصميم مظهره بناءً على هذه المنصة. في الواقع ، روبوت التداول هو أيضًا تطبيق ، يتم تطوير عدد كبير منه باستخدام React.js. ومع ذلك ، لا يزال يتعين القيام ببعض الوظائف والجزء الداخلي من الروبوت على المواقع الأخرى التي توفر أدوات مناسبة لذلك.

جيثب و React.js

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

المرجعي! فقط هؤلاء المستخدمون الذين حصلوا على الرابط المناسب بإذن لهم حق الوصول إلى تحرير الملفات وتنزيلها.

توثيق

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

ملحوظة! لا تنس قراءة الكتيبات. ألقِ نظرة على الأقل – بالفعل سيقع معظم ما يبدو غير مفهوم في مكانه.

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