الترقية باستخدام أفضل أدوات تطوير ويب React

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







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



إذا كنت ، على سبيل المثال ، تعرف كيف في ReactJS ، فسيتيح لك ذلك أن تصبح متخصصًا أكثر طلبًا. إذا كنت مطور ويب مبتدئًا وتعرف بالفعل JavaScript و HTML ، فإن ReactJS هي الخطوة التالية.



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

ما هو React ولماذا يستحق التعلم؟

React هي مكتبة js لتطوير واجهة المستخدم التي طرحها Facebook في مايو 2013 (ولا يزال يدعمها). يسمح لك بإنشاء واجهات مستخدم ديناميكية في JavaScript.



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



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

1. npm

من الواضح أن هذه الأداة لن تكون وحيًا لأحد. أنا فقط لم أستطع الالتفاف حوله.



للعمل مع JavaScript (بما في ذلك مكتبة React) ، تحتاج إلى تثبيت مدير حزمة Node ( npm ). مثل مدير الحزم الذي يأتي مع توزيع Linux الخاص بك (أو Chocolatey لنظام التشغيل Windows أو Homebrew لنظام التشغيل macOS) ، يوفر npm أوامر للاستعلام عن مستودع البرامج وتثبيت الحزم المطلوبة ، بما في ذلك مكونات ReactJS.



يمكنك تثبيت Node.js (و npm معها) من مستودع توزيع Linux الخاص بك.

في Fedora أو Red Hat Enterprise Linux ، قم بما يلي:

$ sudo dnf install nodejs

على Ubuntu أو Debian ، يختلف قليلاً:

$ sudo apt install nodejs npm

إذا كان مستودع التوزيع الخاص بك لا يتضمن npm ، فقم بزيارة Nodejs.org لمعرفة كيفية تثبيت Node.js و npm في هذه الحالة.

2. بداية سريعة

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



يتم توزيع Create React App مفتوح المصدر بموجب ترخيص MIT. كود المصدر الخاص به موجود في مستودع جيثب.



التركيب:

npm start
npm init react-app my-app

إذا كنت لا ترغب في استخدام تطبيق Create React ، فيمكنك البحث عن React Boilerplate و React Slingshot . كلاهما مفتوح المصدر بموجب ترخيص MIT.

3. رد فعل البصر

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



تم إصدار React Sight بموجب ترخيص MIT ، ويمكنك الوصول إلى كود المصدر الخاص به في مستودع GitHub. يمكنك استخدام متجر Chrome الإلكتروني لتثبيته .

4. رد فعل حسناء

React Belle هي مكتبة React مخصصة تحتوي على مكونات قابلة لإعادة الاستخدام: Toggle و Rating و DatePicker و Button و Card و Select والمزيد. إنه مصمم لتوفير تجربة مستخدم مريحة. تم تحسين المكونات لتعمل على الأجهزة المحمولة وأجهزة الكمبيوتر المكتبية. إنها قابلة للتخصيص بدرجة كبيرة وتدعم معايير الوصول للأشخاص ذوي الإعاقة ( WAI-ARIA ). تدعم المكتبة موضوعات مختلفة مثل Belle و Bootstrap.



تم إصدار Belle بموجب ترخيص MIT ، ويمكنك الوصول إلى الكود المصدري الخاص به في مستودع GitHub.



التركيب:

npm install belle

5. دائم الخضرة

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



تم إصدار Evergreen بموجب ترخيص MIT ، ويمكنك الوصول إلى الكود المصدري الخاص به في مستودع GitHub.



التركيب:

npm install --save evergreen-ui

6. بت

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



لذا بت:

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

تم إصدار Bit بموجب ترخيص Apache 2.0 ، ويمكنك الوصول إلى كود المصدر الخاص به في مستودع GitHub.



التركيب:

$ npm install bit-bin --global

7. القصص المصورة

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



علاوة على ذلك ، تقدم Storybook API العديد من الميزات وتجعل التخصيص سهلاً. تستخدم شركات مثل Coursera و Squarespace و Lonely Planet هذه الأداة.



تم إصدار Storybook بموجب ترخيص MIT ، ويمكنك الوصول إلى كود المصدر الخاص به في مستودع GitHub.



قم أولاً بتثبيت Storybook باستخدام الأوامر التالية:

$ cd my-react-app
$ npx -p @storybook/cli sb init

بعد ذلك ، قم بتشغيل أمر التشغيل:

$ npm run storybook

8. فورميك

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



تم إصدار Formik بموجب ترخيص MIT ، ويمكنك الوصول إلى الكود المصدري الخاص به في مستودع GitHub.



التركيب:

$ npm install formik --save

9. إمير

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



بعض الميزات الرئيسية لـ Immer هي:

• يُكتب Immer بقوة: يكون هذا مفيدًا عندما يكون كائن الحالة من نوع.
• Immer shrinks boilerplate: تتطلب معظم أدوات إدارة الحالة منك كتابة الكثير من التعليمات البرمجية المعيارية. يسمح لك Immer بكتابة كود أقل.
• يتيح لك Immer استخدام هياكل بيانات JS: يمكنك إنشاء حالات غير قابلة للتغيير في Immer باستخدام هياكل بيانات JS الأساسية.

تم إصدار Immer بموجب ترخيص MIT ، ويمكنك الوصول إلى كود المصدر الخاص به في مستودع GitHub.



التركيب:

$ npm install immer

10. رد فعل بروتو

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



تم إصدار React Proto بموجب ترخيص MIT ، ويمكنك الوصول إلى كود المصدر الخاص به في مستودع GitHub.



لتثبيته ، قم أولاً بتقسيم المستودع . ثم قم بتثبيت التبعيات باستخدام:

$ npm install

ثم اركض:

$ npm start
$ npm run dev

خطوة جديدة في حياتك المهنية

في الأساس ، يمكنك العثور على الكثير من مواد JavaScript و React بنفسك. ولكن لمعرفة المزيد حول الأدوات التي ذكرتها في هذه المقالة (والعديد من الأدوات الأخرى) ، تحقق من مستودع Awesome React GitHub.



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

---

إعلان

هل تحتاج إلى خادم لتطبيق ReactJS الخاص بك أو لأي غرض آخر؟ ستعمل خوادمنا الملحمية المزودة بمعالجات AMD القوية والحديثة على ما يرام. مجموعة كبيرة من التكوينات مع الدفع اليومي.