30 Days Of React
1.0.0
تعلم مع Asabeneh من خلال الانضمام إلى معسكر الترميز القادم
المؤلف: Asabeneh Yetayeh
أكتوبر 2020
اليوم 1 >>
| # يوم | موضوعات |
|---|---|
| 00 | مقدمة كيفية استخدام الريبو متطلبات يثبت |
| 01 | جافا سكريبت تنشيط |
| 02 | الشروع في رد الفعل |
| 03 | إنشاء |
| 04 | عناصر |
| 05 | الدعائم |
| 06 | قائمة وخريطة ومفاتيح |
| 07 | مكونات الفصل |
| 08 | الدول |
| 09 | عرض مشروط |
| 10 | React Project Project structure |
| 11 | الأحداث |
| 12 | الأشكال |
| 13 | المكون الخاضع للرقابة وغير المنضبط |
| 14 | دورات حياة المكون |
| 15 | حزم الطرف الثالث |
| 16 | مكونات ترتيب أعلى |
| 17 | رد فعل جهاز التوجيه |
| 18 | جلب مقابل axios |
| 19 | المشاريع |
| 20 | المشاريع |
| 21 | السنانير |
| 22 | النماذج باستخدام الخطاف |
| 23 | جلب البيانات باستخدام السنانير |
| 24 | مشروع باستخدام السنانير |
| 25 | السنانير المخصصة |
| 26 | سياق |
| 27 | المرجع |
| 28 | مشروع |
| 29 | يستكشف |
| 30 | الاستنتاجات |
؟؟؟ ترميز سعيد ؟؟؟
تهانينا على اتخاذ قرار بالمشاركة في 30 يومًا من تحدي برمجة رد الفعل. في هذا التحدي ، سوف تتعلم كل ما تحتاج إلى استخدامه لتطوير تطبيق React. في نهاية التحدي ، ستحصل على شهادة إكمال تحدي البرمجة لمدة 30 يومًا. في حال كنت بحاجة إلى مساعدة أو إذا كنت ترغب في مساعدة الآخرين ، فيمكنك الانضمام إلى مجموعة Telegram.
يمثل تحدي 30 يومًا من المبتدئين دليلًا لكل من المبتدئين ومطوري JavaScript و React. مرحبًا بك في 30 يومًا من الرد. React هي مكتبة JavaScript. أنا أستمتع بالاستخدام والتدريس رد فعل وآمل أن تفعل ذلك أيضًا. في هذا التحدي خطوة بخطوة 30 يومًا ، ستتعلم React التي تعد واحدة من أكثر مكتبات JavaScript واجهة المستخدم. يمكن أن يفعل React كل ما يمكن أن يفعله JavaScript. يمكن استخدام React لإضافة التفاعل إلى مواقع الويب ، لتطوير تطبيقات الأجهزة المحمولة ، وتطبيقات سطح المكتب ، والألعاب . أعتقد أنك ستتعلم الكثير في الثلاثين يومًا القادمة ، وسيتم تحسين مهارات البرمجة وحل المشكلات بشكل كبير.
سأستخدم اللغة الإنجليزية للمحادثة وأقل المصطلحات لكتابة هذا التحدي. سيتم تحديث المحتوى بشكل مستمر. إذا وجدت أخطاء مطبعية أو أخطاء قواعد ، فلا تفاجأ لأنني لا أقرأ أي دليل قبل أن أنشره. أوصيك بالتركيز على الرسالة الرئيسية للتحدي بدلاً من اللغة الإنجليزية وبعض الأخطاء البسيطة. إنني أقدر حقًا إذا أرسلت لي طلبات سحب للتحسين وتذكر أن تسحب أولاً من Master قبل إرسال طلبات السحب. جاءت معظم الصور التي استخدمتها في هذا التحدي من تحدي 30DaysofJavaScript ، وبالتالي قد تحتاج إلى إعادة تسمية أسماء الملفات والمجلدات 30 يوم. إذا كنت جيدًا في المصفوفات والحلقات والوظائف والكائنات والبرمجة الوظيفية والتدمير والانتشار والطبقة ، فستتمكن من اتباع التحدي بشكل صحيح. خلاف ذلك ، أوصيك بشدة بالتحقق من 30 يومًا.
قبل الغوص في هذه الدورة ، يمكنك التحقق من مراجعة 30 يومًا من الرد.
هذا التحدي سهل القراءة ، مكتوبة باللغة الإنجليزية للمحادثة ، الانخراط ، المحفز ، وفي الوقت نفسه ، يكون الأمر صعباً للغاية. تحتاج إلى تخصيص الكثير من الوقت لإنهاء هذا التحدي. إذا كنت متعلمًا بصريًا ، فيمكنك الحصول على درس الفيديو على قناة Washera YouTube. اشترك في القناة والتعليق وطرح أسئلة على Vides YouTube وتكون استباقية ، سوف يلاحظك المؤلف في النهاية.
يحب المؤلف أن يسمع رأيك حول التحدي ، ومشاركة أفكارك حول تحدي 30DaysofjavaScript. يمكنك ترك شهادتك على هذا الرابط
تعلم مع Asabeneh من خلال الانضمام إلى معسكر الترميز القادم
للتعاون مع التحدي الذي تحتاجه للحصول على ما يلي:
star this repo لدعم هذا العمل وشوك الريبو لإنشاء نسختك الخاصة للعمل منها.
يجب أن تعمل دائمًا مباشرة من نسختك المتشعب.
# note that an `ssh` link is used here, but an `https` link will work the same
git clone [email protected]:username/30-Days-Of-React.git
cd 30-Days-Of-Reactلإكمال التمارين اليومية ، فإن اقتراحي هو إنشاء فرع منفصل لإيواء مجلد التمرين أو أي تغييرات أخرى تقوم بها. سيؤدي ذلك إلى الحفاظ على نظافة فرعك الرئيسي في جميع الأوقات ، مما يعني أن سيدك سيكون دائمًا مشابهًا للسيد الأصلي.
git checkout -b exercise-solutions # `-b` creates the branch if it does not existفي فرعك الجديد ، يمكنك استخدام الملفات/المجلدات لتنظيم حلولك للتمارين اليومية
mkdir -p solutions/day-01 # `-p` helps create nested directories
touch solutions/day-01/level1.js # touch creates a fileارتكب حلولك لشوكة
git add solutions/day-01/level1.js
git commit -m " chore: exercise level1 complete "
git push origin exercise-solutions # branch `exercise-solutions` was created earlierسيتم تحديث هذا الريبو يوميًا طوال الشهر. عندما يصبح محتوى يوم جديد متاحًا ، يمكنك تحديث نسختك المتشددة بالخطوات أدناه.
# 1. switch to master branch
git checkout master
# 2. check if your local copy has a link to original `...Asabeneh/30-Days-Of-React.git`
git remote -v
# 3. if not, add a link to original, you can choose any name for the link or use `upstream`
git remote add upstream [email protected]:Asabeneh/30-Days-Of-React.git
# 4. check again to confirm link added
git remote -v
# 5. now you can fetch updates from original repo, assuming you named this `upstream`
git fetch upstream
# 6. merge the updates to your local master branch
git merge upstream/master master
# 7. push the merged updates to your Forked copy on GitHub
git push origin masterلاحظ أن التحديثات يتم تطبيقها فقط على الفرع الرئيسي. إذا كنت ترغب في تحديث أي فرع آخر ، كرر الخطوات 6-7 مع اسم الفرع. انظر المقتطف أدناه لفرع
exercise-solutions
git merge upstream/master exercise-solutions
git push origin exercise-solutionsأعتقد أن لديك الدافع والرغبة القوية في أن تكون مطورًا وجهاز كمبيوتر وإنترنت. بالإضافة إلى ذلك الأساسي إلى المستوى المتوسط HTML ، CSS و JS. إذا كان لديك هذه ، فسيكون لديك كل شيء للبدء.
قد لا تحتاج إلى node.js في الوقت الحالي ولكن قد تحتاجها في وقت لاحق. تثبيت node.js.
بعد تنزيل نقر مزدوج وتثبيت
يمكننا التحقق مما إذا كانت العقدة مثبتة على جهازنا المحلي عن طريق فتح محطة أجهزتنا أو موجه الأوامر.
asabeneh $ node -v
v12.14.0عند إجراء هذا البرنامج التعليمي ، كنت أستخدم الإصدار 12.14.0 ، ولكن الآن الإصدار الموصى به من Node.js للتنزيل هو 12.17.0.
هناك العديد من المتصفحات هناك. ومع ذلك ، أوصي بشدة Google Chrome.
قم بتثبيت Google Chrome إذا لم يكن لديك واحدة بعد. يمكننا كتابة رمز JavaScript الصغير على وحدة التحكم في المتصفح ، لكننا لا نستخدم وحدة التحكم في المتصفح لتطوير التطبيقات.
يمكنك فتح Google Chrome Console إما عن طريق النقر على ثلاث نقاط في الزاوية اليمنى العليا من المتصفح ، أو تحديد المزيد من الأدوات -> أدوات المطورين أو استخدام اختصار لوحة المفاتيح. أنا أفضل استخدام الاختصارات.
لفتح وحدة التحكم Chrome باستخدام اختصار لوحة المفاتيح. من الجيد معرفة الاختصار أيضًا كمطور JavaScript وردك ، ستقضي الكثير من الوقت على وحدة التحكم في المتصفح ولا تكون كسولًا لفتحه أثناء التطوير.
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
بعد فتح وحدة التحكم في Google Chrome ، حاول استكشاف الأزرار المحددة. سنقضي معظم الوقت على وحدة التحكم. وحدة التحكم هي المكان الذي يذهب فيه رمز JavaScript الخاص بك. يغير محرك Google Console V8 رمز JavaScript الخاص بك إلى رمز الجهاز. دعنا نكتب رمز JavaScript على وحدة التحكم في Google Chrome:
يمكننا كتابة أي رمز JavaScript على وحدة التحكم في Google أو أي وحدة تحكم متصفح. ومع ذلك ، لهذا التحدي ، نركز فقط على وحدة التحكم في Google Chrome. افتح وحدة التحكم باستخدام:
Mac
Command+Option+I
Windows:
Ctl+Shift+Iلكتابة رمز JavaScript الأول ، استخدمنا وحدة Console.log () . مررنا وسيطة كبيانات إدخال ، وتعرض الوظيفة الإخراج. مررنا "مرحبًا ، العالم" كبيانات إدخال أو وسيطة في وظيفة console.log ().
console . log ( 'Hello, World!' ) يمكن أن تأخذ وظيفة console.log () معلمات متعددة مفصولة بواسطة الفاصلة. يبدو أن بناء الجملة كما يلي: console.log (param1 ، param2 ، param3)
console . log ( 'Hello' , 'World' , '!' )
console . log ( 'HAPPY' , 'NEW' , 'YEAR' , 2020 )
console . log ( 'Welcome' , 'to' , 30 , 'Days' , 'Of' , 'JavaScript' )كما ترون من رمز المقتطف أعلاه ، يمكن أن تأخذ Console.log () وسيطات متعددة. يوصى باستخدام العديد من مطبوعات Console.log () للتحقق من ما يحدث في الكود الخاص بك ولكن لا تحتفظ بجميع اختبارات Console.log () على الكود الخاص بك إلى الأبد. اجعل حياتك سهلة عن طريق الحفاظ على وحدة التحكم في المتصفح مفتوحة.
نضيف تعليقات إلى الكود لدينا. التعليقات مهمة جدًا لجعل الكود أكثر قابلية للقراءة وترك الملاحظات في الكود لدينا. لا يقوم JavaScript بتنفيذ جزء التعليق من الكود الخاص بنا. في javaScript ، أي سطر نص يبدأ بـ // في JavaScript هو تعليق ، وأي شيء محاط مثل هذا / * / هو أيضًا تعليق.
مثال: تعليق سطر واحد
// هذا هو التعليق الأول
// هذا هو التعليق الثاني
// أنا تعليق سطر واحد
مثال: تعليق متعدد الأسلحة
/* هذا تعليق متعدد الأمن
يمكن أن تأخذ التعليقات المتعددة الخطوط متعددة
JavaScript هي لغة الويب
*/
لغات البرمجة تشبه اللغات البشرية. تستخدم اللغة الإنجليزية أو العديد من اللغة الكلمات والعبارات والجمل والجمل المركبة وغيرها من غيرها لنقل رسالة ذات معنى. المعنى الإنجليزي لبناء الجملة هو ترتيب الكلمات والعبارات لإنشاء جمل جيدة الشكل بلغة ما . التعريف الفني للجملة هو بنية العبارات في لغة الكمبيوتر. لغات البرمجة لها بناء جملة. JavaScript هي لغة برمجة ومثل لغات البرمجة الأخرى التي لديها بناء جملة خاص بها. إذا لم نكتب بناء جملة يفهمه JavaScript ، فسوف يرفع أنواعًا مختلفة من الأخطاء. سوف نستكشف أنواعًا مختلفة من أخطاء JavaScript لاحقًا. في الوقت الحالي ، دعونا نرى أخطاء بناء الجملة.
لقد ارتكبت خطأ متعمد. نتيجة لذلك ، ترفع وحدة التحكم أخطاء بناء الجملة. في الواقع ، بناء الجملة مفيدة للغاية. إنه يعلم نوع الخطأ الذي ارتكب. من خلال قراءة إرشادات ملاحظات الخطأ ، يمكننا تصحيح بناء الجملة وإصلاح المشكلة. تسمى عملية تحديد وإزالة الأخطاء من البرنامج تصحيح الأخطاء. دعونا نصلح الأخطاء:
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' )حتى الآن ، رأينا كيفية عرض النص باستخدام console.log () . إذا قمنا بطباعة النص أو السلسلة باستخدام console.log () ، فيجب أن يكون النص داخل عروض الأسعار المفردة ، أو عروض الأسعار المزدوجة ، أو عروض الأسعار الخلفية. مثال:
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' )
console . log ( `Hello, World!` ) الآن ، دعنا نمارس المزيد من كتابة رموز JavaScript باستخدام Console.log () على وحدة التحكم في Google Chrome لأنواع بيانات الأرقام. بالإضافة إلى النص ، يمكننا أيضًا إجراء حسابات رياضية باستخدام JavaScript. دعنا نفعل الحسابات البسيطة التالية. يمكن أن تأخذ وحدة التحكم مباشرة الحجج بدون وظيفة console.log () . ومع ذلك ، يتم تضمينه في هذه المقدمة لأن معظم هذا التحدي سيحدث في محرر نصوص حيث يكون استخدام الوظيفة إلزاميًا. يمكنك اللعب مباشرة مع التعليمات على وحدة التحكم.
console . log ( 2 + 3 ) // Addition
console . log ( 3 - 2 ) // Subtraction
console . log ( 2 * 3 ) // Multiplication
console . log ( 3 / 2 ) // Division
console . log ( 3 % 2 ) // Modulus - finding remainder
console . log ( 3 ** 2 ) // Exponentiation 3 ** 2 == 3 * 3يمكننا كتابة رموزنا على وحدة التحكم في المتصفح ، لكنها لن تفعل للمشاريع الأكبر. في بيئة عمل حقيقية ، يستخدم المطورون محرري الكود المختلفين لكتابة رموزهم. في هذا التحدي لمدة 30 يومًا ، سنستخدم رمز Visual Studio.
Visual Studio Code هو محرر نصوص مفتوح المصدر شائع جدًا. أوصي بتنزيل رمز Visual Studio ، ولكن إذا كنت تؤيد المحررين الآخرين ، فلا تتردد في متابعة ما لديك.
إذا قمت بتثبيت رمز Visual Studio ، دعنا نبدأ في استخدامه.
افتح رمز Visual Studio بالنقر المزدوج على أيقونة. عندما تفتحه ، ستحصل على هذا النوع من الواجهة. حاول التفاعل مع الرموز المسمى.
مبروك! لقد أكملت الإعداد الذي تحتاجه للبدء في React ، ولكن قبل أن نغوص في React ، دعنا نفعل تنشيط JavaScript. إذا كنت مرتاحًا جدًا مع JavaScript ، فيمكنك تخطي اليوم 1 JavaScript Refresher. قسم تنشيط JavaScript واسع وقد يستغرق أكثر من يوم واحد. من تجربتي ، عادة ما يتعثر الناس في رد الفعل لأن معرفتهم JavaScript ضحلة للغاية ، وبالتالي فإن ملء هذه الفجوة في جميع ميزات JavaScript اللازمة التي يمكن استخدامها في React مغطاة في قسم Refresher JavaScript. هناك العديد من التمارين ولكن لا يُطلب منك حلها. انقر هنا إذا كنت تريد تخطي JavaScript والقفز مباشرة إلى React.
؟ مبروك! ؟
اليوم 1 >>
