الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

الطريق إلى JavaScript الحديثة ورد

الغرض من هذا الدليل هو توفير قائمة بالعديد من عمليات الاستعداد المجانية (المقالات والكتب ومقاطع الفيديو؟) والتي ستساعدك على تعلم JavaScript الحديثة ومكتبة React.

️ لا يُقصد من هذا الدليل سرد كل ما يجب أن تعرفه عن JavaScript أو الرد. لقد حاولت سرد ما يمكن أن يكون مفيدًا إذا كنت جديدًا تمامًا في هذا العالم بناءً على تجربتي والأشخاص الذين قابلتهم. إذا لم يتم سرد الشيء المفضل لديك هناك ، فهذا لا يعني أنني لا أحب ذلك أو أرفضه. على سبيل المثال ، تعد TypeScript أو GraphQL رائعة ، لكنني لا أعتقد أنه من الضروري أن نتعلم ذلك أولاً كمبتدئ .

1) جافا سكريبت الحديثة؟

البرامج التعليمية التي تغطي كل شيء:

  • تعلم تطوير الويب سوف يعلمك أيضًا HTML و CSS.
  • JavaScript البليغة مثالية لتعلم JS ومفاهيم البرمجة العامة.
  • البرنامج التعليمي JavaScript الحديث كيف يتم ذلك الآن. من الأساسيات إلى مواضيع متقدمة مع تفسيرات بسيطة ، ولكن مفصلة.
  • تعلم ES6 (Ecmascript 2015)؟ إذا اعتدت أن تكتب JavaScript منذ فترة وتريد اللحاق بالتجديدات الحديثة.

المقالات ومقاطع الفيديو التي أعجبتني:

  • أوضحت JavaScript الحديثة للديناصورات أنك ستتعلم أساسيات حول NPM و Babel و WebPack وما إلى ذلك. والتاريخ وراءه.
  • فهم الرفع في JavaScript إذا أتيت من لغة برمجة أخرى ، فقد تشعر بعدم الارتياح لكيفية إعلان المتغيرات في JS. سيساعدك هذه المقالة على الشعور بتحسن!
  • تصحيح جافا سكريبت؟ تحتوي Firefox أو Edge أيضًا على DevTools الخاصة بها ، لكنني شخصياً أفضل استخدام تلك الكروم عند الترميز.
  • البرمجة الوظيفية في جافا سكريبت؟ يتم تصنيع مقاطع الفيديو هذه من قبل مطور Spotify JS السابق. سوف يعلمك مفاهيم أساسية مثل الوعود أو الإغلاق أو وظائف الترتيب الأعلى. هذه الأشياء هي الأساسية في رد الفعل.
  • تكوين على الميراث؟ في المدرسة ، كان عليّ القيام بالكثير من البرمجة الموجهة نحو الكائن. ساعدني هذا الفيديو على فهم سبب عدم وجوده دائمًا.

الوثائق

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

2) رد فعل ⚛

  • ما هو رد الفعل: مقدمة مرئية للمبتدئين
  • JavaScript لمعرفة React
  • المستند الرسمي هو أفضل مكان لتعلم رد الفعل.
  • دليل المبتدئين للرد؟
  • نصائح رد الفعل التدريجي لجعل موقع رد الفعل الخاص بك أداء. Web.Dev لديه أيضا الكثير من المقالات من هذا القبيل.
  • أنماط التعلم أنماط لبناء تطبيقات ويب قوية مع الفانيليا جافا سكريبت ورد.

السنانير؟ مكونات الفصل

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

  • قارن مخطط تدفق الخطاف مع مخطط أساليب دورة حياة مكون الفئة
  • مكونات ترتيب أعلى: نمط تصميم تطبيق React
  • تقديم الدعائم

إدارة الدولة وغيرها من مكتبات

في مرحلة ما ، قد تعتقد أنه سيكون من الجيد الوصول إلى نوع من الحالة العالمية في أي مكون React من أجل تجنب نقل الدعائم مرارًا وتكرارًا ... قد يطلب منك الناس استخدام Redux أو Mobx أو Apollo أو Xstate أو [إدراج اسم المكتبة الشهير] لتحقيق ذلك ولكن قد يكون مبالغًا فيه! أوصي بقراءة مقالة مكتبات إدارة الولاية وكيفية اختيار الحصول على نظرة عامة لطيفة. تفاعل المكتبات لعام 2023 سوف تعالج هذا الموضوع وغيرها الكثير!

3) ما هو التالي!؟ ؟

  • ابق على اطلاع دائم واكتشف أشياء جديدة مع النشرة الإخبارية React و Bytes ؛
  • تتفاعل الممارسة مع إنشاء Create-React أو مباشرة في متصفحك على codesandbox
  • إنشاء تطبيقات جاهزة للإنتاج مع: Vite ، Next.js ، Gatsby ، React Native عبر Expo ؛

ماذا عن التصميم؟ ؟

بعض الأساسيات

  • تعلم CSS دورة CSS دائمة الخضرة والرجوع إلى رفع مستوى خبرة تصميم الويب الخاصة بك.
  • شرح CSS الحديثة للديناصورات
  • CSS-in-JS أو CSS و JS
  • التصميم و CSS الرسمي DOC

مكتبات Somne يمكنك استخدامها لإدارة أسلوبك:

  • Wind
  • وحدات CSS
  • الفانيليا-الاستكشاف
  • العاطفة
  • المكونات المصممة ، أعتقد أنها الأفضل بين الاختيار لأولئك الذين يستخدمون لكتابة CSS "الكلاسيكية" ويريدون الاستفادة من خلطه مع JavaScript.

أنظمة التصميم

ربما تريد فقط إنشاء تطبيق وتجنب قضاء الكثير من الوقت في كتابة CSS و HTML. أقترح عليك استخدام مكتبات مثل Material-UI أو تصميم النمل أو Polaris. إذا كنت ترغب في إنشاء نظام التصميم الخاص بك ، فأنا أقترح عليك قراءة التصميم الذري.

ماذا عن الاختبار؟ ؟

  • ولكن حقا ، ما هو اختبار جافا سكريبت؟
  • كيفية استخدام برنامج React Testing Library Tutorial فهم Jest وتعلم كيفية كتابة الاختبارات الآلية عبر مكتبة اختبار React (هناك آخرون لمكتبات اختبار ، لكن RTL هي واحدة رائعة أوصى بها المستند الرسمي).
  • إن فهم السخرية من الدائريين هو تقنية لعزل موضوعات الاختبار عن طريق استبدال التبعيات بالكائنات التي يمكنك التحكم فيها وفحصها.
  • لماذا السرو؟ ؟ مكتبة لكتابة اختبارات من طرف إلى طرف وأكثر من ذلك ؛

أدوات أخرى تقف لها

  • محرر الرمز: VS Code ؛
  • تنسيق رمز السيارات: أجمل ؛
  • Linter: Eslint ؛
  • إدارة GIT عبر واجهة المستخدم بدلاً من الأوامر: Sourcetree أو VS Code ؛
  • بناء ونشر تطبيقك: NetLify ؛
  • التكامل المستمر: Travis CI ؛
  • شراء اسم المجال: مجالات Google ؛

مكتبات أخرى تقف لها

  • التوجيه: رد الفعل ؛
  • التدويل: Linguijs ؛
  • قم بتطوير مكوناتك في عزلة وشاركها في فريقك عبر كتاب القصص. نشر كتاب القصص الخاص بك وتشغيل اختبارات لقطات الشاشة على كل قصة عبر Chromatic ؛
  • API السخرية عند الاختبار: عامل خدمة وهمية ؛

دورات مدفوعة الأجر؟

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

  • دورات ويس بوس؟ JavaScript ، React ، CSS والمزيد ؛ بعضها مجاني !
  • دورات Kent C. Dodds؟ رد فعل ، اختبار ؛
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل