أسس Rock Solid React.js: دليل المبتدئين

لقد عملت مع React و React-Native خلال الشهرين الماضيين. لقد أصدرت بالفعل تطبيقين قيد الإنتاج ، Kiven Aa (React) و Pollen Chat (React Native). عندما بدأت في تعلم React ، كنت أبحث عن شيء (مدونة أو مقطع فيديو أو دورة تدريبية أو أي شيء) لم يعلِّمني فقط كيفية كتابة التطبيقات في React. أردت أيضًا أن يهيئني للمقابلات.

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

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

هيا بنا نتعمق ...

React.js هي مكتبة JavaScript لبناء واجهات المستخدم

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

كل شيء مكون

يتكون تطبيق React من مكونات ، كثير منها متداخلة في بعضها البعض. قد تسأل "ولكن ما هي المكونات؟"

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

لنلقِ نظرة على الآلة الحاسبة التالية التي تراها على Google عندما تحاول حساب شيء مثل 2 + 2 = 4 –1 = 3 (حسابات سريعة!)

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

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

فيما يلي إحدى الطرق التي يمكنك من خلالها كتابة الآلة الحاسبة ، الموضحة أعلاه ، في React:

نعم! يبدو مثل كود HTML ، لكنه ليس كذلك. سوف نستكشف المزيد عنها في الأقسام اللاحقة.

إنشاء ملعبنا

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

لقد قمت بالفعل بإعداد بيئة لك على codepen.io. ما عليك سوى اتباع الرابط وقراءة جميع التعليقات في علامتي التبويب HTML و JavaScript (JS).

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

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

أدخل "الدعائم"

يمكننا تمرير بيانات عشوائية إلى مكوننا باستخدام propsكائن. يحصل كل مكون في React على هذا propsالكائن.

قبل تعلم كيفية استخدام هذا propsالكائن ، دعنا نتعرف على المكونات الوظيفية.

أ) المكون الوظيفي

يستهلك المكون الوظيفي في React البيانات العشوائية التي تمررها إليه باستخدام propsالكائن. تقوم بإرجاع كائن يصف ما يجب أن تعرضه واجهة المستخدم. تُعرف المكونات الوظيفية أيضًا باسم المكونات عديمة الحالة.

دعنا نكتب المكون الوظيفي الأول لدينا:

بكل بساطة. لقد مررنا للتو propsكحجة لوظيفة JavaScript عادية وأعدنا ، حسنًا ، ما هذا؟ أن {props.name}ط الخامس> شيء! إنها JSX (JavaScript Extended). سنتعلم المزيد عنها في قسم لاحق.

ستعرض هذه الوظيفة أعلاه HTML التالي في المتصفح:

اقرأ القسم أدناه حول JSX ، حيث أوضحت كيف حصلنا على HTML من كود JSX الخاص بنا.

كيف يمكنك استخدام هذا المكون الوظيفي في تطبيق React الخاص بك؟ يسعدني أنك سألت! الأمر بسيط كالتالي:

nameتصبح السمة في الكود أعلاه props.nameداخل Hello مكوننا. ageتصبح السمة props.ageوهكذا.

تذكر! يمكنك دمج مكون React واحد داخل مكونات React الأخرى.

دعنا نستخدم هذا Helloالمكون في ملعبنا codeepen. استبدل الجزء divالداخلي بالمكون الخاص ReactDOM.render()بنا Hello، على النحو التالي ، وشاهد التغييرات في النافذة السفلية.

ولكن ماذا لو كان للمكون الخاص بك حالة داخلية؟ على سبيل المثال ، مثل مكون العداد التالي ، الذي يحتوي على متغير عدد داخلي ، والذي يتغير عند الضغط على المفتاحين + و -.

ب) المكون القائم على الفئة

يحتوي المكون المستند إلى الفئة على خاصية إضافية state، والتي يمكنك استخدامها للاحتفاظ بالبيانات الخاصة للمكون. يمكننا إعادة كتابة Helloالمكون الخاص بنا باستخدام رمز الفئة على النحو التالي. نظرًا لأن هذه المكونات لها حالة ، فإنها تُعرف أيضًا باسم المكونات ذات الحالة .

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

على render()طريقة يجب أن تكون موجودة في صفك كما تتفاعل النظرات لهذا الأسلوب من أجل معرفة ما ينبغي UI أنها تجعل على الشاشة.

لاستخدام هذا النوع من الحالة الداخلية ، يتعين علينا أولاً تهيئة stateالكائن في مُنشئ فئة المكون ، بالطريقة التالية.

وبالمثل ، propsيمكن الوصول إلى داخل المكون المستند إلى الفئة باستخدام this.propsالكائن.

تعيين حالة، يمكنك استخدام React.Componentالصورة setState(). سنرى مثالاً على ذلك ، في الجزء الأخير من هذا البرنامج التعليمي.

نصيحة: لا تستدعي الوظيفة setState()الداخلية أبدًا render()، حيث setState()يؤدي ذلك إلى إعادة تصيير المكون وسيؤدي ذلك إلى حلقة لا نهاية لها.

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

JSX

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

تضع تعابير JavaScript بالداخل {}. فيما يلي بعض الأمثلة الصالحة لـ JSX.

الطريقة التي تعمل بها هي كتابة JSX لوصف الشكل الذي يجب أن تبدو عليه واجهة المستخدم الخاصة بك. محول مثل Babelيحول هذا الرمز إلى مجموعة من React.createElement()المكالمات. تستخدم مكتبة React بعد ذلك هذه React.createElement()الاستدعاءات لبناء بنية شبيهة بالشجرة لعناصر DOM (في حالة React للويب) أو طرق عرض أصلية (في حالة React Native) وتحتفظ بها في الذاكرة.

يحسب React بعد ذلك كيف يمكنه محاكاة هذه الشجرة بشكل فعال في ذاكرة واجهة المستخدم المعروضة للمستخدم. تُعرف هذه العملية بالمصالحة. بعد إجراء هذا الحساب ، تُجري React التغييرات على واجهة المستخدم الفعلية على الشاشة.

يمكنك استخدام REPL من Babel عبر الإنترنت لمعرفة ما ينتج عن React بالفعل عند كتابة بعض JSX.

نظرًا لأن JSX هو مجرد سكر نحوي على React.createElement()المكالمات العادية ، يمكن استخدام React بدون JSX

الآن لدينا كل مفهوم في مكانه ، لذلك نحن في وضع جيد لكتابة counterمكون رأيناه سابقًا على أنه GIF.

الكود على النحو التالي وآمل أن تكون قد عرفت بالفعل كيفية تقديم ذلك في ملعبنا.

فيما يلي بعض النقاط البارزة حول الكود أعلاه.

  1. يستخدم JSX camelCasingوبالتالي فإن buttonالسمة onClickليست onclickكما نستخدمها في HTML.
  2. الربط ضروري thisللعمل على عمليات الاسترجاعات. انظر السطر رقم 8 و 9 في الكود أعلاه.

يقع الرمز التفاعلي النهائي هنا.

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

إذا كانت لديك أي استفسارات أو شكوك ، فاتصل بي على Twitter @ rajat1saxena أو راسلني على [email protected]

يرجى التوصية بهذا المنشور ، إذا أعجبك وشاركه مع شبكتك. تابعوني لمزيد من المنشورات المتعلقة بالتكنولوجيا وفكر في الاشتراك في قناتي Rayn Studios على YouTube. شكرا جزيلا.