هل يبدو رد الفعل ساحقًا لك؟

إذا كان الأمر كذلك ، فأنت لست وحدك.

أسمع أشياء مثل هذه طوال الوقت:

• لا تستخدم React ؛ استخدم Vue بدلاً من ذلك.

• رد الفعل بشدة وعديمة الفائدة ؛ استخدم htmx أو vanilla js بدلاً من ذلك.

• إلخ.

ولكن كمهندس أقدم من الخبرة في 5 سنوات في Palantir ، يمكنني أن أقول بثقة: "كان React هو أسهل شيء كان علي أن أتعلمه. "

في هذا المنشور ، سأشرح لماذا لا يكون رد فعل معقدًا كما يجعل الناس - وكيفية مواجهة التحديات إذا كنت تكافح.

مستعد؟ دعنا نغطس.

؟ قم بتنزيل كتاب My Free 101 React Tips and Tricks Book لبداية الرأس.

7 أسباب تجعل React يشعر بجد (وكيفية إصلاحه)

السبب 1: أنت لا تعرف JavaScript جيدًا بما يكفي

يناضل الناس مع React 99 ٪ من الوقت لأن أساس JavaScript الخاص بهم ليس قويًا.

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

إليك الحد الأدنى الذي تحتاج إلى معرفته قبل رد الفعل:

• الفرق بين أنواع البيانات البدائية والكائنات

• كائنات تدمير

• نِطَاق

• إغلاق

• async

• إلخ.

؟ تحقق من هذا الدليل الرائع بقلم Kent C. Dodds على مفاهيم JavaScript التي تحتاج إلى معرفتها من أجل React.

بمجرد أن تتحسن مهارات JavaScript الخاصة بك ، ستشعر React أسهل بكثير.

؟ تحقق من مشاركتي حول كيفية رفع مستوى مهارات الواجهة الأمامية للحصول على موارد مفيدة لتعلم JavaScript.

السبب 2: أنت تستخدم الأدوات الخاطئة

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

• لا تستخدم لا تستخدم

  next.js

• بدلاً من ذلك ، ابدأ بـ Vite. إنه سريع وبسيط وصديق للمبتدئين. سوف تشكرني لاحقًا؟. السبب 3: أنت مربك تتفاعل مع الأطر

رد فعل ≠ next.js ≠ remix.

Next.js و Remix هي أطراف

مبنية على رأس React لإنشاء تطبيقات كاملة.

لا تحتاج إلى معرفة Next.js أو Remix لتعلم React. ولكن

تحتاج إلى معرفة رد الفعل

لاستخدام أي منها

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

السبب 4: أنت تحاول بناء كل شيء من الصفر

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

ومع ذلك ، ليس عليك مواجهته بمفردك.

The Beauty of React هو نظامها الإيكولوجي للمكتبات التي تجعل حياتك أسهل؟.

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

إليك بعض الأمثلة:

dnd-kit لوظيفة السحب والدروب

Shadcn/UI للتصميم

SWR للحصول على بيانات خفيفة الوزن يجلب
إلخ.
حفظ الوقت والجهد من خلال الاستفادة من هذه الأدوات.

• السبب 5: أنت تعاني من نقص في الموظفين ولكنك لا تستخدم الأطر

إذا كنت قصيرًا في الوقت أو الموارد (مثل فريق شخص واحد) ، يمكن أن تكون الأطر مثل Remix أو Next.js lifesavers.

متى تستخدمها:

أنت مصاب بالاعبين

تقوم بإنشاء تطبيق كامل

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

• السبب 6: أنت لا تفهم عملية تقديم React (وينتهي بها الأمر بمشكلات الأداء)

فهم عملية تقديم React أمر بالغ الأهمية لتجنب مشكلات الأداء:

التقديم:

رد فعل استدعاءات المكونات (أو طرق عرض مكون الفئة) لإنشاء DOM الظاهري

المصالحة:

React يقارن DOM الظاهري مع DOM الحقيقي لمعرفة ما الذي تم تغييره.

1. المرحلة الالتزام:
رد فعل تحديثات فقط عناصر DOM اللازمة.

2. الطلاء:
يعيد المتصفح الشاشة.
4. رد فعل عملية. الاعتمادات: https://x.com/_georgemoller Budap ،

   الأخطاء الشائعة التي يرتكبها الناس:

الكثير من العروض: إصلاح هذا عن طريق تقليل الحالة إلى الحد الأدنى ، والحفاظ على الحالة منخفضة في شجرة المكونات ، واستخدام المذكرة عند الحاجة (لا تحتاج إلى @ ME؟: يمكن أن تكون المذكرة تغيير الحياة). ؟ تحقق من هذا الدليل على React Reenders.

الإفراط في استخدام

useeffect

:

يمكن تجنب العديد من التأثيرات. انظر ، قد لا تحتاج إلى تأثير.

• لا يتبع الاتفاقيات:
  على سبيل المثال ، عند تقديم قوائم ، استخدم دائمًا مفاتيح فريدة لمنع الأخطاء.
  

• السبب 7: ينهار تطبيقك في الإنتاج

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

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

ستشكرك بنفسك في المستقبل!

إليك ما أوصي به:

اكتب المدقق:

استخدم TypeScript. إنه صديق للمبتدئين ، خاصة مع هذا الدليل. إذا كنت تستخدم Vite ، فإن الإعداد بسيط.

الاختبار:

استخدم Vitest مع مكتبة اختبار Vite أو رد الفعل لإعدادات أخرى.

الاختبارات والأنواع ستوفر لك ساعات من التصحيح - وتبقيك عاقلًا؟.

• ملخص

هل رد فعل صعب كما يبدو؟
• لا.

  React هو مجرد مكتبة JavaScript. معظم التعقيد يأتي من:

لا تعرف JavaScript جيدًا بما يكفي

تتفاعل مع الأطر

تحاول أن تفعل كل شيء بنفسك

يطل على أساسيات رد الفعل

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

• BONUS

  : قم بتنزيل كتاب ebook
مجاني ،

الغذاء للتفكير

// اكتشاف موضوع الظلام var iframe = document.getElementById ('Tweet-186240669344874439-370') ؛ if (document.body.classname.includes ('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/tweet.html؟id=186240669344487439&theme=dark" }

؟ اكتشف القضية

// اكتشاف موضوع الظلام var iframe = document.getElementById ('Tweet-1861017779249320435-683') ؛ if (document.body.classname.includes ('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/tweet.html؟id=1861017779249320435&theme=dark" }

اترك تعليقًا؟ لمشاركة التحدي الأكبر مع React أو ما الذي جعلها تنقر من أجلك.

ولا تنسى إسقاط "؟؟؟".

إذا كنت تتعلم رد الفعل ، فقم بتنزيل كتاب 101 Tips & Tricks Book لـ

مجانًا

. إذا كنت تحب مقالات مثل هذا ، انضم إلى النشرة الإخبارية ،

FrontendJoy

.

إذا كنت تريد نصائح يومية ، فابحث عن X/Twitter أو على Bluesky.