رد فعل خمسة أصابع من الموت. أتقن هذه المفاهيم الخمسة ، ثم أتقن React.

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

ربما كنت في نفس الوضع الذي كنت فيه: كنت تسمع عن React يمينًا ويسارًا ، لكن الجلوس والتعلم في الواقع يبدو وكأنه عمل روتيني.

الخبر السار هو أنه يمكنك تلخيص كل ما تحتاج لمعرفته حول React إلى خمسة مفاهيم أساسية .

الآن لا تفهموني بشكل خاطئ ، هذا لا يعني أنه يمكنني تحويلك إلى خبير في React على الفور. لكن على الأقل ستفهم كل المفاهيم الرئيسية ، إذا قررت القفز إليها.

المفاهيم الخمسة الرئيسية هي:

  1. مكونات
  2. JSX
  3. الدعائم والدولة
  4. المكون API
  5. أنواع المكونات

قبل أن نبدأ ، لاحظ أنني تعلمت في الأصل React من خلال دورات Wes Bos ، وقمت بتضمين بعض الروابط التابعة لها. كلما كان ذلك ممكنًا ، قمت أيضًا بتضمين روابط لموارد مجانية.

أوه ، وصديقي شون؟ منذ ذلك الحين انتقل إلى أشياء أكثر حداثة. بعد كل شيء، رد فعل غير ذلك 2015.

المفهوم رقم 1: كيف تعمل مكونات React

أول شيء يجب أن تعرفه عن React هو أنها تدور حول المكونات . قاعدة كود React الخاصة بك هي أساسًا كومة واحدة كبيرة من المكونات الكبيرة التي تستدعي مكونات أصغر.

لكن ما هو المكون ، تسأل؟ المثال المثالي للمكون هو المشترك ct> HTML element. Not only does it come with its own visual output (the grey box, text label, and downward arrow that make up the element itself) — it also handles its own opening and closing logic.

Now imagine being able to build your own self-contained custom ct>, with its own style and behavior:

Well, that’s exactly what React lets you do. A React component is a single object that not only outputs HTML like a traditional template would, but also includes all the code needed to control that output.

In practice, the most common way to write React components is as an ES6 class containing a render method that returns HTML. (There’s also a super-secret functional way, but you’ll have to wait until concept #4 to learn about it):

class MyComponent extends React.Component {
 render() { return 

Hello World!

; }

}

المفهوم رقم 2: كيف تعمل JSX

كما ترى ، يعني نهج المكون أن كلاً من كود HTML و JavaScript يعيشان في نفس الملف. سلاح React السري لتحقيق هذا التحالف غير المقدس هو لغة JSX (حيث يرمز الحرف "X" إلى "XML").

قد يبدو JSX محرجًا في البداية ، لكنك تعتاد عليه بسرعة كبيرة.

نعم اعرف. لقد تعلمنا جميعًا كيفية الحفاظ على فصل قوي بين HTML و JavaScript. ولكن اتضح أن تخفيف هذه القواعد قليلاً يمكن أن يفعل المعجزات في الواقع لإنتاجية الواجهة الأمامية.

على سبيل المثال ، نظرًا لأن لديك الآن القوة الكاملة لـ JavaScript تحت تصرفك ، فإليك كيفية عرض التاريخ الحالي عن طريق إدراج مقتطف من JavaScript في HTML الخاص بك باستخدام {...}:

class MyComponent extends React.Component {
 render() { return 

Today is: {new Date()}

; }
}

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

class MyComponent extends React.Component {
 render() { return 

Hello {this.props.someVar ? 'World' : 'Kitty'}

; }
}

وبالمناسبة ، إذا كنت بحاجة إلى التعرف على أحدث نقاط بناء جملة JavaScript ، فإنني أوصي بـ ES6 للجميع بواسطة Wes Bos (إذا كنت تحب مقاطع الفيديو) أو Practice ES6 لـ Nicolas Bevacqua (إذا كنت تفضل القراءة).

المفهوم رقم 3: كيف تعمل الدعائم والحالة

ربما كنت تتساءل من أين يأتي this.props.someVarالمتغير أعلاه.

إذا سبق لك كتابة سطر HTML ، فمن المحتمل أن تكون على دراية بسمات HTML مثل <؛ a> tag’s href. في React ، السمات هي kno wn كدعامات (اختصار لـ "Properties"). الدعائم هي كيف تتحدث المكونات مع بعضها البعض.

class ParentComponent extends React.Component {
 render() { return ; }
}
class ChildComponent extends React.Component {
 render() { return 

And then I said, “{this.props.message}”

; }
}

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

في بعض الأحيان ، يحتاج المكون إلى التفاعل مع البيانات التي لا تأتي من مكون رئيسي (مثل إدخال المستخدم على سبيل المثال). وهنا يأتي دور الدولة .

الاستعارة الجيدة لفهم الاختلاف بين الدعائم والحالة ستكون Etch-A-Sketch. على عكس أشياء مثل لون الجسم وموضع الاتصال للكمبيوتر اللوحي Etch-A-Sketch ( الدعائم ) ، فإن الرسم نفسه ( الحالة ) ليس خاصية متأصلة في Etch-A-Sketch. إنها مجرد نتيجة مؤقتة لإدخال المستخدم.

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

داخل المكوِّن ، تتم إدارة الحالة باستخدام setStateالوظيفة ، والتي تُسمى غالبًا داخل معالج الأحداث:

class MyComponent extends React.Component {
 handleClick = (e) => { this.setState({clicked: true}); }
 render() { return Click me; }
}

من الناحية العملية ، ستكون الغالبية العظمى من البيانات في تطبيق React دعامة . فقط عندما تحتاج إلى قبول إدخال المستخدم ، ستستخدم الحالة للتعامل مع التغيير.

لاحظ أننا نستخدم سهمًا سمينًا هنا للاعتناء بربط handleClickالمعالج. يمكنك معرفة المزيد عن هذه التقنية هنا.

المفهوم رقم 4: كيف يعمل المكون API

لقد سبق ذكرها renderو setState، وكلاهما جزء من مجموعة صغيرة من أساليب API المكون. واحد مفيد آخر هو constructor، والذي يمكنك استخدامه لتهيئة حالتك وربط الطرق.

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

إذا بدا هذا القسم قصيرًا ، فذلك لأن تعلم React يتعلق في الواقع بإتقان البرمجة والمفاهيم المعمارية بدلاً من تعلم مجموعة من طرق API المملة. هذا ما يجعلها منعشة للغاية!

المفهوم رقم 5: كيف تعمل أنواع المكونات

لقد رأينا كيفية استخدام الفئات لتحديد المكون:

class MyComponent extends React.Component {
 render() { return 

Hello World!

; }

}

وتحدثنا أيضًا عن طرق المكونات التي تدعمها هذه الفئات. الآن انسى كل شيء عنهم! يكتب الناس أكثر فأكثر مكونات React كمكونات وظيفية .

المكون الوظيفي هو وظيفة تأخذ propsالكائن كوسيطة ، وتعيد مجموعة من HTML. تقريبًا مثل القالب التقليدي ، مع الاختلاف الرئيسي أنه لا يزال بإمكانك استخدام أي كود JavaScript تحتاجه داخل هذه الوظيفة:

const myComponent = props => {
 return 

Hello {props.name}! Today is {new Date()}.

}

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

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

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

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

var Greeting = React.createClass({ render: function() { return 

Hello, {this.props.name}

; }
});

المفهوم رقم 6: كيف تعمل أدوار المكونات

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

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

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

هذا أدى إلى التمييز بين الحاوية و العرس المكونات (كما تعرف أحيانا باسم " ذكية " "و البكم مكونات"). يجب أن تتعامل مكونات الحاوية مع بياناتك ، ولكن - وهذا هو الجزء المهم - ليس واجهة المستخدم الخاصة بك. مكونات العرض هي عكس ذلك تمامًا.

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

هذا مشابه جدًا لنمط العرض / وحدة التحكم الذي قد تكون معتادًا عليه من أيام مطور الواجهة الخلفية. ( عضو Django؟ )

تم تعميم التمييز بين الحاوية / العرض التقديمي في منشور المدونة هذا بواسطة Dan Abramov (مبتكر Redux) ، وأنا أوصي بمراجعته إذا كنت تريد التعمق أكثر.

المكونات ذات الترتيب الأعلى

قبل أن نختتم الأمور ، يجب أن نتحدث قليلاً عن نوع من مكونات الحاوية المعروفة باسم المكونات ذات الترتيب الأعلى (غالبًا ما يتم اختصارها باسم HoCs).

يعد HoC مكونًا يمكنك لفه حول مكون آخر لتمريره الدعائم الخاصة ، ويتم إنشاؤه عادةً باستخدام وظيفة مصنع مكون ذات ترتيب أعلى . لاحظ أن الأشخاص يشيرون عادةً إلى الوظيفة نفسها على أنها "HoC" ، والتي قد لا تكون صحيحة بنسبة 100٪ من الناحية الفنية ، ولكنها ليست مشكلة كبيرة في الممارسة العملية.

على سبيل المثال ، استدعاء withRouterوظيفة المصنع الخاصة بـ React Router قيد التشغيل nt>will wrap it in a new ponent)/> component that passes the Router prop to the afor e-mentioned &lt;MyComponent>.

You can think of a HoC function as a golf caddie that follows their golfer around and hands them the club they need it. By themselves, the caddie can’t actually do anything with the golf clubs. They’re just there to give the golfer access to more tools.

HoCs are a very powerful concept. For example, the Recompose library even lets you handle state changes through HoCs. In other words, you can now manage state without having to involve any ES6 class-based components.

With HoC composition becoming so common, it seems like React might be moving away from the ES6 class syntax and more towards a purely functional approach. Interesting times!

Recap

So let’s recap what we’ve just learned:

  • A React codebase is made up of components.
  • These components are written using JSX.
  • Data flows from parent to children, except when it comes to state, which originates inside a component.
  • Components possess a small set of lifecycle and utility methods.
  • Components can also be written as pure functions.
  • You should keep data logic and UI logic in separate components.
  • Higher-order components are a common pattern for giving a component access to new tools.

Believe it or not, we’ve just covered 90% of the knowledge used by a React developer on a daily basis. No matter how abstract or obscure the pattern, everything in React can always be boiled down to functions and props.

Once you truly understand this, React will stop being scary. You’ll be able to see patterns in the code, understand new codebases at a glance, and only then will you be able to proudly proclaim:

“Pfff! React is so 2015!”

Going Further

If I’ve managed to convince you that React isn’t so bad, you might want to take a stab at learning it properly. If so, I can’t recommend the React for Beginners video course enough. It’s how I learned React myself, and it’s actually just been updated to cover all the cool new stuff like functional stateless components:

If you don’t want your hard-earned dollars to finance the nefarious React lobby (I heard Dan Abramov is onto his third yacht), you can also learn for free by checking out this huge list of React resources.

And if you need to put all this newly-acquired knowledge in practice by contributing to a cool React open-source project, check out Telescope Nova. It’s the easiest way to quickly create a full-stack React + GraphQL app, complete with user accounts, forms, and data loading out of the box. And did I mention we’re looking for contributors?

Finally, if you’ve enjoyed this article, please share it and recommend it (that little green heart just below). And please let me know on Twitter what you’d like me to write about next!