Get best of the week

ReactJS: بداية سريعة

دورة المطور React.js على وشك البدء ، لذلك تم عقد درس مفتوح آخر داخل أسوار OTUS. تم النظر في القضايا التالية في ذلك:

  • ما تم تضمينه في مجموعة ميزات React.js القياسية ؛
  • هل من الممكن بناء تطبيق معقد مع هذا ؛
  • تكوين ضد الميراث.
  • البرمجة الوظيفية - هل هي سهلة أم صعبة؟
  • ما هو Redux ولماذا هو مطلوب.



في نهاية الدرس ، قمنا بتطوير تطبيق ويب ReactJS صغير. وقد استضاف الندوة عبر الإنترنت نيكيتا أوفشينيكوف ، مهندس برمجيات يتمتع بخبرة تزيد عن 8 سنوات في مجال التطوير التجاري.

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


سترى إجابة هذا السؤال من خلال فتح الموقع الرسمي ، حيث كُتب أن React هي مكتبة JavaScript لبناء واجهات المستخدم.



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

لماذا ردة الفعل شعبية جدا؟


على سبيل المثال ، تشير الإحصائيات للأشهر الستة الأخيرة ، دون احتساب الهبوط المميز خلال عطلات الشتاء ، إلى شعبية رد الفعل : تظهر الإحصائيات التالية



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







  • إنه موثق بشكل جيد للغاية :
    - هنا برنامج تعليمي ؛
    - هنا دليل للمبتدئين .
    ومع ذلك ، اليوم لن يصبح الإطار شائعًا إذا تم توثيقه بشكل سيئ ؛
  • React . , . ;
  • , — . JSX, , ;
  • . - , , , , , , , ;
  • . . , , , . React Angular;
  • (react-developer-tools, redux-dev-tools);
  • React , , .

React?


لذا ، تعرف - الضعف رقم 1: رد الفعل ليس من السهل تعلمه . وإليك السبب:

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

"في Facebook ، نستخدم React في آلاف المكونات ، ولم نجد أي حالات استخدام نوصي فيها بإنشاء تسلسلات وراثية للمكونات " .

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

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

3. الصعوبة الثالثة للتعلم - لإتقان رد الفعل بنجاح ، يحتاج المطور إلى مستوى عالٍ. لا ، رد الفعل بسيط وسهل الكتابة. ولكن من أجل القيام بشيء أكثر تعقيدًا عليه ، فأنت بحاجة إلى مهارات برمجة جيدة. إذا كانت هناك فجوات في المعرفة الأساسية لـ JS و TS ، فسيكون ذلك صعبًا بالنسبة لك ، ولن تفهم كل شيء.

مشكلة الاختيار


الآن دعونا نتحدث عن الضعف رقم 2 - مشكلة الاختيار . إنها مجموعة متنوعة من السهل أن تضيع فيها. حقا هناك الكثير من الأشياء. ظهرت الخطافات مؤخرًا - لقد بدأت محادثة حول حقيقة أن الفصول لم تعد هناك حاجة لها ، وبدأت معارك React Hooks React Class ... سارع الجميع إلى استخدام الخطافات ، ثم قالوا إن كل شيء غير واضح وعاد إلى استخدام الفصول الدراسية ، وما إلى ذلك ، إلخ. ع ... في

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

سؤال آخر يطرح نفسه: "كيفية التحقق من أنواع"؟ انظر لدينا:


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

مرة أخرى، هناك خلق رد فعل التطبيقات ، Webpack.js و بابل ، وذلك بمجرد أن تبدأ، سيكون لديك السؤال هنا، ما للاستخدام؟

يرتبط عذاب الاختيار التالي بالدولة . هناك Redux وهناك MobX ، وداخل Redux هناك أيضًا redux-saga و redux-thunk . ومن الصعب ، دون محاولة ، إدراك ما هو الأفضل للاستخدام في حالة معينة.

إلى جانب:

1. جهاز التوجيه . هناك حوالي خمسة ، هنا الأكثر شعبية:


2. CSS-IN-JS . في إطار هذا النهج الجيد للغاية ، بالمناسبة ، هناك أيضًا خيار:


للتلخيص ، يمكنك سرد سلبيات رد الفعل التالية :

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

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

ما هي القوة في أخي؟


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



الميزة التالية هي الكثير من المكتبات والحلول الجاهزة. يشار إلى ذلك من خلال نفس لقطة الشاشة من GitHub (هناك أكثر من مليون مستودعات):



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

إلى جانب:

  1. التنوع مشكلة للمبتدئين ، ولكن بالنسبة للمحترفين فهو زائد!
  2. رد الفعل يحتوي على كمية كبيرة من الحلول الجيدة.
  3. يمكنك تطوير تطبيقات بأي تعقيد.
  4. يمكنك الكتابة بأي أسلوب.

دعم الطباعة النصية


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

بشكل عام ، تأكد من العمل مع Typescript ، لأن هذه تقنية ضرورية للغاية:

- https://www.typescriptlang.org/docs/handbook/react-&- webpack.html.



بضع نصائح


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

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



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

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

النقطة الثانية التي أود الحديث عنها هي الهندسة المعمارية. هندستنا هي كل شيء ! هناك نموذج معماري جيد جدًا يسمى البط. هذا حول كيفية بناء تطبيقات React و Redux. هذه الهندسة المعمارية تستحق التوصية للاستخدام العملي.

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



مجموع


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

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

More articles:


All Articles