تعلم تصميم واجهات المواقع والتطبيقات بواسطة رياكت في فيديو واحد

جميع ملفات الدورة عبر الرابط الآتي:
1designer.org/...
يّقَدَّم لكم هذا الكورس برعاية هوستينجر لحجز الدومينات والاستضافة:
رابط الصفحة بالإنكليزية: www.hostg.xyz/...
رابط الصفحة بالعربية: www.hostg.xyz/...
كوبون الخصم: nourhomsi
--------- فهرس المحتويات ------------
03:00 لماذا رياكت
03:53 مثال واقعي عن فيسبوك
08:52 لماذا رياكت مكتبة هامة جدا
10:02 كم من الوقت أحتاج لتعلم رياكت
11:10 ماذا يجب أن تتعلم قبل رياكت
12:41 تحضير بيئة العمل
14:47 إنشاء الملفات
21:23 تحليل ودراسة الملفات
23:43 شرح ملف index.html
25:17 شرح ملف index.js
29:18 ترتيب، تجهيز وتنظيف بيئة العمل
32:28 كتابة المكوّّن الأول
35:56 شرح لكل ما سبق بالتفصيل
37:44 استيراد المكتبات
41:33 شرح كتابة JSX بالتفصيل
46:12 ما هي المكوّنات
50:43 تداخل المكوّنات
55:33 الستايل والتنسيقات
57:09 الستايل المباشر
01:01:24 الستايل الداخلي
01:02:44 الستايل الخارجي
01:05:48 استيراد Bootstrap
01:11:27 إعلان هوستينجر
01:11:41 الوظيفة الأولى - تصميم قائمة
01:12:22 حل الوظيفة وتطبيق
01:16:34 كتابة جافاسكريبت داخل JSX
01:24:17 النمذجة الحرفيّة Literal Template
01:28:27 الوظيفة الثانية - الستايل الشرطي
01:29:32 الخصائص Props - المفهوم النظري
01:31:37 كتابة مكون قابل لإعادة الاستخدام
01:34:47 تطبيق إعادة استخدام المكوّنات
01:36:09 تطبيق مفهوم الخصائص
01:39:29 تمرير الخصائص المتعددة
01:41:24 إضافة الصور عن طريق الخصائص
01:43:10 إعادة استخدام المكوّن
01:43:38 إضافة بعض التنسيق للمشروع
01:44:15 إصلاح بعض الأخطاء في المشروع
01:47:25 تدريب عملي لكل ما سبق
01:51:17 استحضار البيانات من JSON
01:55:45 الوظيفة الثالثة - بناء صفحة فريق العمل
01:57:29 حل الوظيفة
01:58:13 حل الوظيفة - إنشاء الملفات
02:03:43 حل الوظيفة - اضافة الستايل
02:08:29 حل الوظيفة - إدراج المعلومات
02:10:44 حل الوظيفة - ربط الصور
02:13:22 حل الوظيفة - الستايل الشرطي
02:16:28 وظيفة إضافية
02:17:18 حل الوظيفة - إضافة بعض الاحترافيات
02:25:56 إضافة تعديلات جافاسكريبت الجديدة
02:27:50 إعلان هوستينجر
02:28:01 تحضير بيئة العمل
02:30:27 الفرق بين Class و Function
02:33:17 تدريب عملي
02:34:50 استيراد المكوّنات
02:36:03 استيراد الملفات
02:37:42 المتغيرات والوظائف
02:40:31 تمرير المعلومات
02:43:15 المفهوم النظري
02:44:14 تحضير بيئة العمل
02:46:57 طريقة كتابة الحالات
02:48:44 تطبيق عملي
02:50:11 حل التطبيق العملي
02:53:37 الاستفادة من الحالات
02:55:31 الكتابة الاحترافية
03:02:24 المفهوم النظري
03:03:03 تحضير بيئة العمل
03:04:52 ما هي الأحداث
03:09:02 كتابة الأحداث
03:12:04 تعديل الحالات
03:17:27 مراجعة وتلخيص
03:20:26 الوظيفة النهائية
03:30:00 حل الوظيفة النهائية
03:30:38 تحضير بيئة العمل
03:32:38 إنشاء المصفوفة
03:58:04 عرض المصفوفة الفارغة
03:43:15 استقبال عناصر المصفوفة
03:51:00 مراجعة سريعة
03:56:19 خاتمة
------------------------------------------------------------------------
اشترك في مجموعة المصمم الأول لمناقشة الدروس:
groups/1designer
nourhomsi.com
drnourhomsi
nourhomsi1
drnourhomsi

[@NourHomsi]

هذا الدرس هو تجميع للدروس المنفصلة، اذا كنت ترغب بدراسة الدورة ضمن دروس متفرقة يرجى متابعة السلسلة التالية: bit.ly/2JqLuSM

[@younes6185]

@Wells Reginald ont opportun que tu es là mon

[@younes6185]

@Wells Reginald le plan prix pour le docteur de le plan du commerce 😬

[@younes6185]

@Wells Reginald le raisonnement est ce possible d'avoir le raisonnement et je ne peux donc vous demander un petit

[@AliAhmad-IT]

استاذ نور ممكن رابط برنامج ال "Hotkey" اذا سمحت؟ ما بعرف اذا سمعت اسمو صح, بس البرنامج الي عم تستخدمو لتثبت نافذة المتصفح فوق كل النوافذ

[@canarioiseauxchanteurs7287]

1:49:59

[@the.syrian.programmer]

افضل واقوى شرح للReact على مر التاريخ ❤ استاذ نور اندهشت بشكل رهيب من شرحك للمعلومات .. فعلا انت نابغة ❤❤

[@qalam924]

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

[@ibrahimsab6335]

هل أنت هندي ؟

[@portilloruchira760]

شاهد الفيديو اقرأ الوصف لتحصل على 50 جنيه.kzbin.info/www/bejne/iGq1i557l52DhNU

[@محمودحسن-م4م5س]

الله يفتح عليك يعني كنت مفتقد جدا اني الاقي المستوى الرائع دا من الشرح وتبسيط المعلومه الله يفتح عليك بالخير يارب

[@tt4m]

الكورس تناول كيفية تعامل مع الاستيراد والتصدير بين المشروع وكذلك شرح لfunction and class and state and setstate وتعامل مع الدوال داخل الكلاس مثل دوال event عندما اضغط على زر يحدث رد فعل. ومشروع نهائي * عبارة عن شاشة بها زر عندما تضغط عليه يظهر لك محتوى مصفوفة تحت الزر. المصفوفة بها عناصر كل عنصر يحتوي على صورة واسم ايميل وموقع وid خاص. الكورس جد رائع. أنصح به إستفدت منه كثير من لاشئ إلى معرفة قيمة حول هذه اللغة ❤أشكرك من كل أعماق قلبي.

[@mehdialjebaay24]

والله احسن من دكتور جامعة... انت جنتل بالتدريس وطريقتك رايقة تحية لحضرتك ويعطيك العافية

[@darcaftanmeriem9193]

kzbin.info/door/Z0QNbxBHKd0PWvl21LnCZg

[@abdulrahmanalhousni-xq1zf]

الله يرضى عليك .. الله يرضى عليك .. فشيت قلبي بهالشرح ...

[@tt4m]

هل كورس كامل! واذا كان لا هل هناك كورس متكامل في يوتيوب!

[@alaanor5344]

الحمد لله عم شوف الدرس بوقت انتهت الكورونا وصرت عايدته 5 مرات

[@youcefbenlarbi8207]

الف تحية ليك من الجزائر، مشكور استاذ على مجهوداتك القيمة 💕

[@NourHomsi]

شكرا لك

[@goldentechdz8525]

خويا فاش نقدرو نخدمو بالمجال فدزاير

[@anmarbahram567]

يا اخي انت فاهم و محبوب و اسلوبك لطيف و تعلمت منك كووومه كل بداياتي الحلوة بدأت وياك ربي يحفظك و يحفظ حبيبتي سوريا التي انجبتك 😘😘😘 الف رحمة على اهلك و الله يوفقك يا طيب يا ذهب يا ابن الذهب

[@ALKASHIF-]

بصراحه يا استاذ نور انت اسم على مسمى جميع محتوياتك مفهومه وشرح مفصل ومبسط وتستحق المتابعه من الجميع

[@StoriesFromShadow]

شكراً جدا استاذى اسأل الله ان يجازيك خيراً وينفع بك ❤

[@gemsy.net.reviews]

جمعت بين العلم و التعليم .ما شاء الله

[@bakrimohandess1007]

دورة وطويلة نسبيا ؟؟؟؟ يا رجل امتع دورة بحضرها للبرمجة من بدايتي فيها لحد الان ما حسيت بملل ابدا عندك ابداع بشكل كبير بتنظيم الدروس ولسة شو بدي احكي عن الوظائف يعني انت بتعرف عنجد ايمت لازم نكتب الوظيفة ماحسيت بصعوبة ابدا بالدورة وانا من ناحيتي بفضل درس واحد طويل عن دروس مقسمة لهيك عنجد شكرا كتير الك

[@aminanba8202]

yes me too i like long lessons

[@GMSN]

بحثت كثير عن شرح مثل هذا لم أجده الا عندك

[@imauser8447]

فعلاً شرح حضرتك فوق الممتاز وسهل الفهم ❤ كنت اتمني لو تعمل شرح تكميلي عن ربط الرياكت بالسيرفر API

[@darcaftanmeriem9193]

kzbin.info/door/Z0QNbxBHKd0PWvl21LnCZg

[@yasminsoso-cf4ij]

I hope that

[@vipmafia5810]

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

[@NourHomsi]

ألف تحية للعراق الجميل

[@adamishaq3513]

لك جزيل الشكر\\\\ نور الله دربك في الدنيا و الاخرة\\\\\ بجد كنت متابع اعدة محاضرات و شروحات من مصادر مختلفة و لكن انت محاضرات فريد من نوعة و سريع الفهم حتي لو مثلا زول ما عندو اي خلفيات\\\\ حفظك الله

[@gamenge7202]

يعطيك الف عافية يا استاذ نور وبفضلك تعلمت html وcss و javascript

[@NourHomsi]

شكرا لك

[@user-pe2qp3hu3l]

بفضل الله انتبه لا تشرك بالله

[@gamenge7202]

@@user-pe2qp3hu3l بفضل الله طبعا

[@abdelhade_gr9594]

قناته تعلمت منه اللغات هاذي وهل تعلمت react ولا لسا

[@play-good]

المنتاج تبعك حلو وشرحك مبسط و جميل مشكور أستاذ

[@zainakokeh5365]

شكرا كتير الك شرحك فوق الوصف عنجد ... ماكنت افهم الا للقيت شرحك يعطيك العافية يا رب

[@hossamhozain5594]

جزاك الله خيرا اسلوبك كتير سهل ومميز عن اغلب الدورات الاخري لرياكت

[@ecko1986]

الشهادة لله انت حببتنى فى تكملة تعلم لغة ال php وخصائصها واتمنى انك فى يوم تخصص كورس لعمل موقع كامل لادارة المحتوى

[@dumbtube1956]

والله كلمات الشكر لا توفيك حقك..شكرا شكرا شكرا على كل معلومة

[@abdallahalatrawnh]

شكرأ على جهودك استاذ نور حمصي . انا متابعك من الاردن وعمري 16عام وانا تابعت كل دوراتك على القناه واعمل بها .انا لا اعرف كيف اشكرك استاذي نور كل الحب والحترام ❤❤

[@NourHomsi]

بأنك تحقق ذاتك وتصبح أكبر مبرمج في العالم

[@muniralmeslaty9602]

شكرا جزيلاً لك بارك الله فيك وجزاك الله ألف خير اقديم محتوى احترافي حقيقي

[@diaakhasawneh6531]

الله يعطيك العافية وشكرا على التلخيص الي باخر الفيديو

[@edd9353]

كنت انتظر هذا الكورس. جزاك الله خيرا وجعله في ميزان حسناتك.

[@samms7922]

من المهم أن نعرف كيف تعمل الكهرباء، لأننا سنستطيع أن نتعلم من تجارب غيرنا و بذلك سنستطيع اختراع طاقة جديدة

[@mfarhate1394]

uljkuuoiuuuowuuuypuyhmiynkjouyuuoroutitiooiitoiuiehoiiiouyiegyoupiwuyrruyrtiuiiyuyyeuyuottiuuooieuhoyuioeyeuoworyiyetuypyyytuuwyyrrwyyerrtr

[@mfarhate1394]

uljkuuoiuuuowuuuypuyhmiynkjouyuuoroutitiooiitoiuiehoiiiouyiegyoupiwuyrruyrtiuiiyuyyeuyuottiuuooieuhoyuioeyeuoworyiyetuypyyytuuwyyrrwyyerrtrl

[@Waleed-yj1jq]

شرح ممتاز و اسلوب سهل و بسيط جزاك الله خير 👏👏👏

[@roukiajamou3517]

فعلا انتهت كورونا والحمد لله

[@NourHomsi]

👏

[@suhaibkhater1724]

الله يعطيك العافية ويرزقك ويوفقك

[@PROGAMER-ns7jb]

ناطرين سلسلة الورد بريس ❤😢

[@FatimeezzahraBoutaghzout]

تحية من المغرب شكرا كتيرا كتتتيرا

[@AbdelmonimAitbaali]

how old are you

[@naoufel2011]

مبدع كالعادة أستاذ نور ربي يجازيك خير وصحة على كل مجهوداتك

[@bv7vd]

اخي تنصحني اتعلمه يعني كامل الفيديو شارح كل اللغة؟

[@MrGeomTech]

درس ممتاز، وايضا طريقة العرض، و شرح المبادئ، هذا هوا الفرق بين المهندس و التقني، اقترح، لو تقدم درس تربط بين Django and react و كيفية إرسال الى production server، فتكون قد وفيت و استكفيت، معمر من الجزائر

[@قناهلؤي]

تبارك الله عليك اخويا شرح مفهم ماشاءالله عليك بي توفيق انشاءالله

[@gamersyriapubgmobile]

جزاك الله خيرا و شكرا على هذا المجهود الرائع زادك الله علمًا ورفعك قدرًا و جعل هذا العلم النافع فى ميزان حسناتك💗

[@bilalelemrani]

hey friend you are soo good, I was always seeing you in the js course from elezero, and now when I have came here i find you another time

[@palestinemylife7166]

أحسن شرح يازعيم

[@زكرياالراوي-ل1ص]

بارك الله فيك وآلله رح اظل ادعيلك بالخير

[@ahmad.dragon1701]

شو بفرح وبنبسط وقت ارجع من شغل لاقي مشترك جديد في قناتك 🥺🥺

[@رشيدالرشد]

تحياتي وتقديري لحضرتك دكتور نور من اليمن طبعا الكورسات تبعك اكثر من تعينني لدراستي بالجامعه ♥

[@mohammed.a7554]

سلام عليكم اخوي قدرت تطبق كل الدوره هذي و ضبط معاك امر create react app

[@NourHomsi]

شكرا لك رشيد

[@MHhc-du4ei]

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

[@ismaeilmohamad9570]

اشكرك جزيل الشكر استاذ نور

[@عزوزفتحيياسين]

اخي نور ممكن تعملنا مشروع كبير يبقا طول العمر يشهدلك كبرمجة موقع شات وتجاري معا برياكت ومنصة فايربيز لأنو لا يوجد عربي عاملها

[@aliomer9049]

جزاك الله كل خير يا استاذ

[@NourHomsi]

شكرا لك

[@justlight2660]

شرحك رائع شكرا جزيلا جزاك الله خيرا

[@سليمالكعباشيالقذافي]

حقسقة روعة يا أخي نور جعلها الله في ميزان حسناتكم ALSB

[@MustaphaElazzaouy]

جزاك الله خير الجزاء في الدنيا والاخره

[@aminanba8202]

Your new method is just great interactive we can learn a lot with you ; god bless you Mr NOUR . you such an amazing teacher . thank you so soooooo much . we need to learn how to deploy the react app please

[@darcaftanmeriem9193]

kzbin.info/door/Z0QNbxBHKd0PWvl21LnCZg

[@metam.devad.neimte9212]

بنك علينا بلاغ وعلي شركاتناكلها ارجو ارفادالمال تشيك

[@abdoufcb6472]

شاهدت كورس رياكت للكوتش الأجنبي mosh و أشهد أن هذا أفضل منه من ناحية كمية المعلومات و ال tricks عدا أن الجودة هو يتخدم جرافيكس و ألوان جميلة للفيديو يجعله أفضل و هذا لا يعني أن فيديوهاتك سيئة الجودة إنما هي جيدة جدا بالنسبة للمحتوى العربي و لكن يفضل أنك لما تكون تشرح نظريا تخرج شوي من ال editor و تشرح بألوان و جرافيكس جميل ثم تعود للتطبيق على الeditor ولا تبقى طول الفسديو في الeditor

[@bv7vd]

اخي تنصحني بالفيديو يعني شارح اللغة كاملة؟

[@mahmoudnabih1185]

الله يوفقك استاذ نور ماقصرت ابدا

[@NourHomsi]

شكراً لمرورك والتعليق

[@koora-kq7gp]

شكراا على الشرح الجميل

[@mustafaaljasim7226]

عاشت ايدك عالشرح الحلو

[@thamrisadamhocin6366]

شكرا لكل ما تقدمه

[@abbeed1]

الله يجزيك الخير

[@fatima_Ezahra]

جزاك الله خيراا على مجهوداتك

[@customvid9693]

ادمنت على شروحاتك

[@nobio9591]

الله يعطيك العافية ويوفقك

[@ahmedrashed5567]

شكرا جزيلا - جزاك الله خيرا

[@moonsoon9136]

راااااااىع جدا حدا ممتااااااز شرح ممتع

[@tt4m]

‏‪2:30:30‬‏ function Vs class

[@belinabougie2601]

طبعا لايك أستاذنا جيت أعملك لايك و رايحة... لأني مشغولة بس برجع من بعد إذا راد الله

[@NourHomsi]

شكرا لك، هل عدت للدراسة؟

[@belinabougie2601]

ايه عندي دراسة.. و هلا فضيت... هل ممكن تنصحني بمجموعة معينة من بين فيديوهاتك بالنسبة لواحدة حابة تتعلم الانيمايشن... بايش ابدا

[@ラフィ-f1y]

مبدع

[@fadihajji5266]

يرحم والديك على هذا الفيديو

[@Barca4Ayman]

اشكرك انا خلصت الفيديو كاملا فهمت لكن فهم ناقص مش مهم رح ارجع احضر فيديو Es6 و ارجع اعيد الفيديو بالكامل لان التكرار مفيد جدا

[@imadabab]

Best React Course I have ever watched. Thanks a lot. Appreciated. I have subscribed.

[@NourHomsi]

Thanks and welcome

[@christiangrantz1526]

اسلوب ورقي وجودة وامانة كاملة بالاعطاء، ربي يجزيك الخير على كل شي عم تعمله، ياريت تنزلنا شرح عن npm و npx وعن طريقة استخدام تعليمات ال terminal. اسلوبك بخلي الواحد يتعلق بالعلم ويطلب المزيد.

[@darcaftanmeriem9193]

kzbin.info/door/Z0QNbxBHKd0PWvl21LnCZg

[@playbrxdan1]

Ich habe wirklich noch nie so einen guten Lehrer gesehen!! Danke dir!!

[@NourHomsi]

Danke schon

[@زكرياالراوي-ل1ص]

بارك الله فيك

[@AbdoAbdo-tw4mn]

استاذ نور انت كل شي شرحته إلا node.Js اتمنى منك شرحها لاني ما افهم الا منك ومتعود على طريقة شرحك وشكرا.

[@zahratchark1328]

درس مفيد جدا بشكرك

[@emadmohamed5787]

تسلم ايديك وجزاك الله خيرا 😍

[@NourHomsi]

شكراً لمرورك والتعليق. أتمنى تكون استفدت

[@katiais8757]

Thank you so much .. I just finished this course (y)

[@osamasy5802]

قبل ماشوف الفيديو احلى لايك 😊تحية من برلين 🤗

[@NourHomsi]

تحياتي أسامة

[@salahalsamarraaee650]

جزاك الله كل خير

[@darknessman4811]

♡ .. قلب للمحتوى الرائع .... ♡ وقلب لـBreaking Bad

[@ssikarim]

شكرا جزيلا نور

[@NourHomsi]

شكرا لمرورك

[@yathrebamarneh3857]

جزاك الله خيرا على هذا الشرح

[@NourHomsi]

شكرا لك

[@abouishakA]

جزاك الله خيرا

[@ryeasv]

شكرا

[@duaamelhem1371]

thank a lot your explanation is amazing

[@SiuvimoGuru]

after npx create-react-app learn-react i got error

[@Ayoub-ot3rv]

ربي يحفظك خويا لعزيز 🖤✌

[@NourHomsi]

شكرا لك

[@محمدمعروف-ش1ر]

شكرا شرح جميل

[@karimhammad636]

جعلها الله في ميزان حسناتك

[@sortiesortie4955]

انا احب اشكرك انك عملتني حاجات كتير. بالله عليك يا هندسه اعمل كورسangular et laravel و ربنا يجازيك خير عن مجهودك معانا ❤️

[@darcaftanmeriem9193]

kzbin.info/door/Z0QNbxBHKd0PWvl21LnCZg

[@ooss748]

هي {} وتُسمى “curly braces” أو “braces”.

[@forchildren1006]

استاذ نور حضرتك خليتني اسيب الشرح واروح ادور على مسلسل breaking bad 😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂

[@English_with_raw]

ما خفت نموت من الضحك

[@master-cz3tc]

​@@English_with_raw😂

[@mohammadMakarati]

❤❤ عشت استاذنا وحبيبنا

[@metam.devad.neimte9212]

السلام عليكم ازيكم يا ابوالشباب

[@bahaaaldeen9611]

انسان رائع

[@gamersyriapubgmobile]

تسلم ايدك جزاك الله خير يا استاذ نور ❤️

[@RustAlderson]

أنتا حرفيا وين أروح ألقا تعليقك 😅 , الزيرو js , الزيرو css html , وحتا هنا 😅 ربي يوفقك

[@saleemdigital]

علم انت اخي تسلم واشكرك جدا

[@NourHomsi]

شكرا لك

[@MoonsoapCosmetic]

جميل جدا بالتوفيق سيد نور

[@gangplank6271]

شكرا شرح مفصل ورائع

[@NourHomsi]

شكرا لك

[@maisam.alatrach]

لايمكن لكلمة شكرا أن تفي حقك ❤❤❤

[@webworld9]

thanks nour

[@kaladrashid]

لوسمحت مش راضي يتفعل معايا رياكت بيعطني error

[@MrYousefms]

شكرا كتير استاذ نور استغربت بهالدرس ما سمعت الموسيقى المشهورة اللي بتستخدمها كمقدمة هههه صار عندي ادمان على سماعها تحياتي الك وشكرا كتير على كل شي عم تقدمه

[@wadaniofficial]

Awwwaár1q

[@nahdig8yth233]

danke bro for every thing

[@myriam5662]

اسلوب ولا اروع! ما شاء الله عنك! ممكن شرح كمان عن Hook ؟ الله يخليك لان شغلي الجديد هيك بيتطلب وما عندي فكرة عنهم.