تفاعل على أفضل الممارسات لرفع مستوى لعبتك في عام 2022

نشرت: 2022-12-09

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

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

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

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

هيا بنا نبدأ!

التحديات التي يواجهها مطورو React

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

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

سنبدأ بالمشكلة الأساسية التي تؤثر على المبتدئين.

المتطلبات الأساسية للرد

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

قبل تعلم React ، يلزمك معرفة أمرين. نظرًا لأن React تستخدم JSX ، فإن معرفة HTML و JavaScript أمر لا بد منه. بالطبع ، يجب أن تعرف أيضًا CSS أو إطار عمل CSS الحديث لتصميم تطبيقات الويب الخاصة بك.

على وجه الخصوص ، هناك مفاهيم ووظائف JavaScript أساسية يجب أن تعرفها قبل الغوص في React. بعض منها ، والتي تقع في الغالب تحت ES6 ، تشمل:

دالات السهم
عامل الراحة
عامل الانتشار
الوحدات
التدمير
طرق المصفوفة
حرفية القالب
وعود
متغيرات let و const

ستساعدك موضوعات JavaScript المذكورة أعلاه على فهم كيفية عمل React كمبتدئ.

ستتعرف أيضًا على مفاهيم جديدة في React ، مثل:

عناصر
JSX
إدارة الدولة
الدعائم
تقديم العناصر
التعامل مع الحدث
العرض الشرطي
القوائم والمفاتيح
النماذج والتحقق من صحة النموذج
خطاف
التصميم

سيساعدك امتلاك فهم قوي لمفاهيم React والمتطلبات الأساسية لاستخدام المكتبة على الاستفادة من ميزاتها بكفاءة.

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

إدارة الدولة

يعمل تحديث حالة / قيمة المتغيرات الخاصة بك في React بشكل مختلف عن كيفية القيام بذلك باستخدام Vanilla JavaScript.

في JavaScript ، يعد تحديث متغير أمرًا بسيطًا مثل تعيين قيمة جديدة له باستخدام عامل التشغيل يساوي ( = ). هذا مثال:

 var x = 300; function updateX(){ x = 100; } updateX(); console.log(x); // 100

في الكود أعلاه ، أنشأنا متغيرًا يسمى x بقيمة أولية 300 .

باستخدام عامل التشغيل يساوي ، قمنا بتعيين قيمة جديدة لها 100 . تمت كتابة هذا داخل دالة updateX .

في React ، يعمل تحديث حالة / قيمة المتغيرات بشكل مختلف. إليك الطريقة:

 import { useState } from 'react'; function App() { const [x, setX] = useState(300) let updateX =()=>{ setX(100); } return ( <div className="App"> <h1>{x}</h1> <button onClick={updateX}>Update X</button> </div> ); } export default App;

عند تحديث حالة المتغير في React ، يمكنك استخدام الخطاف useState . هناك ثلاثة أشياء يجب ملاحظتها عند استخدام هذا الخطاف:

اسم المتغير
وظيفة لتحديث المتغير
القيمة / الحالة الأولية للمتغير

في مثالنا ، x هو اسم المتغير ، و setX هي وظيفة لتحديث قيمة x ، بينما القيمة الأولية ( 300 ) لـ x يتم تمريرها كمعامل إلى دالة useState :

 const [x, setX] = useState(300)

لتحديث حالة x ، استخدمنا وظيفة setX :

 import { useState } from 'react'; let updateX =()=>{ setX(100); }

لذا فإن وظيفة updateX تستدعي الدالة setX ، والتي تقوم بعد ذلك بتعيين قيمة x إلى 100 .

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

هناك مشكلة أخرى في استخدام State Hook وهي أن هذه المتغيرات التي تم إنشاؤها لا يتم مشاركتها عبر المكونات المختلفة التي يتكون منها تطبيقك. لا يزال يتعين عليك استخدام Props لتمرير البيانات من متغير إلى آخر.

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

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

قابلية الصيانة وقابلية التوسع

مع استمرار تغير متطلبات المستخدم للمنتج ، هناك دائمًا حاجة لإدخال تغييرات على الكود الذي يتكون منه المنتج.

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

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

أفضل ممارسات رد الفعل

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

1. الحفاظ على بنية مجلد واضحة

تساعدك هياكل المجلدات والمطورين الآخرين على فهم ترتيب الملفات والأصول المستخدمة في المشروع.

بفضل بنية المجلد الجيدة ، يسهل التنقل بسهولة ، مما يوفر الوقت ويساعد في تجنب الالتباس. تختلف هياكل المجلدات باختلاف تفضيلات كل فريق ، ولكن إليك بعض هياكل المجلدات الشائعة الاستخدام في React.

تجميع المجلدات حسب الميزات أو المسارات

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

إليك مثال لإثبات أن:

 dashboard/ index.js dashboard.css dashboard.test.js home/ index.js Home.css HomeAPI.js Home.test.js blog/ index.js Blog.css Blog.test.js

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

تجميع الملفات المتشابهة

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

 hooks/ useFetchData.js usePostData.js components/ Dashboard.js Dashboard.css Home.js Home.css Blog.js Blog.css

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

2. إنشاء أمر استيراد منظم

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

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

ألق نظرة على المثال التالي:

 import { Routes, Route } from "react-router-dom"; import { createSlice } from "@reduxjs/toolkit"; import { Menu } from "@headlessui/react"; import Home from "./Home"; import logo from "./logo.svg"; import "./App.css";

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

ثم قمنا باستيراد الملفات التي أنشأناها محليًا مثل أوراق الأنماط والصور والمكونات.

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

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

هذا مثال:

 import Home from "./Home"; import About from "./About" import Contact from "./Contact" import logo from "./logo.svg"; import closeBtn from "./close-btn.svg" import "./App.css"; import "Home.css"

3. الالتزام باتفاقيات التسمية

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

لا تقدم وثائق React أي نمط رسمي لتسمية المكونات الخاصة بك. اصطلاحات التسمية الأكثر استخدامًا هي camelCase و PascalCase.

يستخدم PascalCase في الغالب لأسماء المكونات:

 import React from 'react' function StudentList() { return ( <div>StudentList</div> ) } export default StudentList

المكون أعلاه يسمى StudentList ، وهو أكثر قابلية للقراءة من Studentlist أو studentlist .

من ناحية أخرى ، يتم استخدام اصطلاح تسمية حالة الجمل في الغالب لتسمية المتغيرات والخطافات والوظائف والمصفوفات وما إلى ذلك:

 & const [firstName, setFirstName] = useState("Ihechikara"); const studentList = []; const studentObject = {}; const getStudent = () => {} const [firstName, setFirstName] = useState("Ihechikara"); const studentList = []; const studentObject = {}; const getStudent = () => {}

4. استخدم لينتر

تساعد أداة linter على تحسين جودة الكود. يعد ESlint أحد أكثر أدوات linter شيوعًا في JavaScript و React. ولكن كيف يساعد هذا بالضبط في تحسين جودة الكود؟

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

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

نظرًا لأن كل مطور لديه أسلوبه الخاص في الترميز ، يمكن أن تساعد أدوات linter في توحيد الكود.

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

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

5. توظيف مكتبات المقتطفات

الشيء الرائع في استخدام إطار عمل مع مجتمع نشط هو توفر الأدوات التي يتم إنشاؤها لتسهيل التطوير.

يمكن لمكتبات المقتطفات تسريع عملية التطوير من خلال توفير تعليمات برمجية مسبقة الإنشاء يستخدمها المطورون كثيرًا.

وخير مثال على ذلك هو امتداد ES7 + React / Redux / React-Native snippets ، والذي يحتوي على الكثير من الأوامر المفيدة لإنشاء كود تم إنشاؤه مسبقًا. على سبيل المثال ، إذا كنت ترغب في إنشاء مكون وظيفي لـ React دون كتابة كل التعليمات البرمجية ، فكل ما عليك فعله باستخدام الامتداد هو كتابة rfce والضغط على Enter .

سيستمر الأمر أعلاه لإنشاء مكون وظيفي باسم يتوافق مع اسم الملف. أنشأنا الكود أدناه باستخدام امتداد ES7 + React / Redux / React-Native snippets:

 import React from 'react' function StudentList() { return ( <div>StudentList</div> ) } export default StudentList

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

6. اجمع بين CSS و JavaScript

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

حل هذه المشكلة هو الجمع بين كود CSS و JSX. يمكنك استخدام أطر عمل / مكتبات مثل Tailwind CSS و Emotion لهذا الغرض.

إليك ما يبدو عليه التصميم باستخدام Tailwind CSS:

 <p className="font-bold mr-8">resource edge</p>

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

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

 <h1 css={css` color: black; font-size: 30px; `} > Hello World! </h1>

7. الحد من إنشاء المكونات

إحدى الميزات الأساسية لـ React هي قابلية إعادة استخدام الكود. يمكنك إنشاء مكون وإعادة استخدام منطقه عدة مرات قدر الإمكان دون إعادة كتابة هذا المنطق.

هل تعاني من مشاكل التوقف و WordPress؟ Kinsta هو حل الاستضافة المصمم لتوفير الوقت! تحقق من ميزاتنا

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

سنستخدم مثالًا سهلًا للغاية لتوضيح ذلك:

 function UserInfo() { return ( <div> <h1>My name is Ihechikara.</h1> </div> ); } export default UserInfo

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

لجعل مكوننا قابلاً لإعادة الاستخدام ، يمكننا الاستفادة من Props. إليك الطريقة:

 function UserInfo({userName}) { return ( <div> <h1>My name is {userName}.</h1> </div> ); } export default UserInfo

بعد ذلك ، يمكننا بعد ذلك استيراد هذا المكون واستخدامه عدة مرات كما نريد:

 import UserInfo from "./UserInfo"; function App() { return ( <div className="App"> <UserInfo userName={"Ihechikara"} /> <UserInfo userName={"John"} /> <UserInfo userName={"Jane"} /> </div> ); } export default App;

الآن لدينا ثلاث مثيلات مختلفة لمكون UserInfo تأتي من المنطق الذي تم إنشاؤه في ملف واحد بدلاً من وجود ثلاثة ملفات منفصلة لكل مستخدم.

8. تنفيذ التحميل الكسول

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

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

بشكل افتراضي ، تحزم React وتنشر التطبيق بالكامل. لكن يمكننا تغيير هذا السلوك باستخدام التحميل البطيء ، والمعروف باسم تقسيم الكود.

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

9. استخدام خطافات قابلة لإعادة الاستخدام

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

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

في المثال أدناه ، سننشئ خطافًا لجلب البيانات من واجهات برمجة التطبيقات الخارجية:

 import { useState, useEffect } from "react"; function useFetchData(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url) .then((res) => res.json()) .then((data) => setData(data)) .catch((err) => console.log(`Error: ${err}`)); }, [url]); return { data }; } export default useFetchData;

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

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

10. تسجيل وإدارة الأخطاء

توجد طرق مختلفة للتعامل مع الأخطاء في React مثل استخدام حدود الخطأ ، ومحاولة التقاط الكتل أو استخدام مكتبات خارجية مثل react-error-boundary .

كانت حدود الخطأ المضمنة التي تم تقديمها في React 16 وظيفة لمكونات الصنف ، لذا لن نناقشها لأنه يُنصح باستخدام مكونات وظيفية بدلاً من مكونات الصنف.

من ناحية أخرى ، فإن استخدام كتلة try and catch يعمل فقط مع الكود الضروري ، ولكن ليس الكود التعريفي. هذا يعني أنه ليس خيارًا جيدًا عند العمل مع JSX.

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

11. مراقبة واختبار التعليمات البرمجية الخاصة بك

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

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

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

يمكنك استخدام أدوات مثل Jest أو React Testing Library لاختبار التعليمات البرمجية الخاصة بك. هناك الكثير من أدوات الاختبار التي يمكنك الاختيار من بينها - كل ذلك يعود إلى الأداة التي تناسبك بشكل أفضل.

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

12. الاستفادة من المكونات الوظيفية

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

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

تستخدم معظم الموارد المحدّثة التي تجدها في React المكونات الوظيفية ، مما يجعل من السهل فهم واتباع الأدلة والموارد المفيدة التي أنشأها المجتمع عندما تواجه مشاكل.

13. ابق على اطلاع دائم بتغييرات إصدار React

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

يمكنك أيضًا الانضمام إلى مجتمعات React على وسائل التواصل الاجتماعي للحصول على معلومات حول التغييرات عند حدوثها.

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

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

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

14. استخدم موفر استضافة سريع وآمن

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

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

هناك مجموعة متنوعة من الأنظمة الأساسية التي توفر خدمات استضافة مجانية للمطورين مثل Firebase و Vercel و Netlify و GitHub Pages أو الخدمات المدفوعة مثل Azure و AWS و GoDaddy و Bluehost وما إلى ذلك.

يمكنك أيضًا استخدام منصة استضافة التطبيقات الخاصة بـ Kinsta. كل ما عليك فعله هو توصيل مستودع GitHub ، والاختيار من بين 25 مركز بيانات عالميًا من Kinsta ، والانطلاق. ستحصل على إمكانية الوصول إلى إعداد سريع ، ودعم على مدار الساعة طوال أيام الأسبوع ، وأعلى مستوى من الأمان ، ومجالات مخصصة ، وأدوات متقدمة لإعداد التقارير والمراقبة ، والمزيد.

ملخص

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

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

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

ما أفضل ممارسات React الأخرى التي تعرفها والتي لم يتم ذكرها في هذه المقالة؟ انشرهم في التعليق التالي. ترميز سعيد!