Learn React by programming a complete website with the 2022 update [AR]

This lesson is sponsored by Hostinger, you can use the discount coupon or the link to get a special discount for the channel:
Copoun: NOURHOMSI
Aff-Link: www.hostinger.ae/nourhomsi
-------------------------------------
Lessons mentioned in the introduction:
how to learn programming in 2022-2023
• تحديث كيف تبدأ تعلم ال...
Websites and applications with React in one video
• تعلم تصميم واجهات المو...
All about the new javascript 2015
• #01 - كل شيء عن جافا س...
Learn HTML and CSS step by step Complete Course
• تعلم HTML و CSS خطوة ب...
All You Should Know About Domain and Hosting
• كيف ارفع ملفات الموقع ...
-------------------------------------
Course index:
00:00:00 Introduction to the course
00:02:45 Hostinger Course Sponsorship
00:07:30 What are we going to learn
00:09:00 Lesson Requirements
00:10:30 Preparing the environment
00:14:30 Browsing the files
00:19:20 Update to the new React 18
Basic concepts
00:26:55 Component concept and component creation
00:30:10 Inclue Bootstrap
00:34:00 Building the layout with components
00:41:00 What are Props in React
00:45:45 Building a component that contains information
Building the Header
00:48:30 Build the main menu
00:56:30 Adding a component to the main menu
01:00:00 Build the Hero section
01:06:30 CSS Variables
01:15:00 Google Fonts
01:18:30 Building the Container
01:21:00 Reorganizing the folders
Building sections of the site
01:28:00 Section: Most Popular
01:34:00 Styling in React
01:42:00 Create a separate component and format it completely
01:51:00 Using the React icon library
02:02:00 Rebuild the folders based on components
02:10:00 Managing data with array map
02:20:00 Reusing components in all sections
02:36:00 Building the footer
02:38:00 Designing the Button in React
Pages and Routing in React
02:45:00 Concept of pages in React
02:47:00 Rebuild the folders
02:54:00 Routing in React
Upload the site to the Internet
03:04:00 How hosting on Hostinger works
03:11:00 Npm run build
03:14:00 React basename
03:17:30 React tutorials on Hostinger
03:20:00 Final retouch and website acceleration
03:34:00 Final conclusion

[@FaridRoushdy]

بصراحة الشرح ممتاز الله يجازيك كل خير

[@ahmadanm7300]

ياخي والله من خلالك تعلمت كثيير كثيير وخليتني اتعمق أكثر بعالم الجافا سكربت ومكتباتها وبرضو الAPI ...بالله كثرلنا من هذي المشاريع ي أستاذ نوور ..وربي يجزيك كل الخير

[@christiangrantz1526]

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

[@lyaly000]

الله يعطيك العافية، بعد بحث في مقاطع ومصادر كثيرة هذا أفضل تطبيق react وجدته عالنت

[@chakerbraik]

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

[@amaralshbli3014]

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

[@mohammedelhoussni]

و الله ان شرحك اكثر من رائع تبسيط و شرح خرافي
جعله الله في ميزان حسناتك استاذنا الغالي

[@codex-gi7sb]

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

[@sofienefliss5241]

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

[@i_.]

اجمل شيئ التغيير ❤️

[@HamadAbdulla_7]

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

[@omarakki705]

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

[@chainehadhouda4130]

merci beaucoup 😊😊 bien claire

[@mustaphadarouiche1649]

السلام عليكم... الله يعافيك على هالمجهود الحلو

[@narjisamin2260]

بارك الله فيك من المغرب

[@user-dh3ib5mz9j]

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

[@smarte-marketing]

فيديو رووووعة ... اسلوب سهل الفهم متل شرب المياه ..

[@saidibrahim5931]

ما شاء الله بارك الله على جهدك

[@mohameddsabry]

الله ينور عليك متألق ومبدع دائما ❤️

[@batoolhamade4992]

يعطيك ألف عافية

[@mouradfadhel]

مشكور أستاذ نور ❤️❤️

[@mr.alss_id165]

انا دخلت رياكت بي سببك الحمد لله
انت إنسان اكثر من رائع

[@playgames-tg2gt]

جزاك الله خير

[@AlgerEvent]

الله يجازيك بسببك تغيرت حياتي و أصبحت أفكر بطريقة ذكية أكثر شكرااااااااااااااااااا متابعك من الجزائر

[@yssfjbr]

big up lik khoya mn l'maroc

[@Mr1988ezel]

أستاذ أنتَ مُبدع 👍 بالرغم أنا ليسَ لدي خبرة بعالم الأنترنيت والحاسوب ، ولكن اُشاهدُكَ فقط 🌺

[@ahmedalsagir]

الله عليك يا استاذ نور . وصل بوقته الفيديو
جزاك الله خير

[@obadaalrefai]

كل الإحترام لجهودك

[@M7D_7]

ماشاء الله عليك

[@anis213_40]

مبدع كالعادة !

[@abdelnebiaek1474]

الله يعطيك الف عافيه استاذي نور من 🇩🇿🇩🇿❤️

[@ahmedslamadrag]

تسلم علي طريقه الشرح المبدعه

[@NourHomsi]

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

[@taibaouimohamed9508]

مشكوووووووووووووووووووووووووور يأستاذ نور الله يجازيك انشاء الله

[@Mohammad-sd3yy]

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

[@karimkrimou399]

رحلة رائعة وممتعة جزاك الله اخي

[@chouaibiala1187]

شكراً ❤

[@abbeed1]

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

[@mohbk8522]

أفضل مشرح مشكور أخي تستحق دعم أكثر

[@NourHomsi]

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

[@samdaphnie1625]

السلام عليكم... الله يعافيك و الله مبدع و ممتع

[@user_ahfvjjfb]

Great course, thank you for your time.

[@maherkarot9129]

عنجد شكراااااا من القلب

[@ammaralhomyqani9079]

يسعدك ربي يا نور حمصي

[@Ya_abo_sayf]

شكرا لك ❤️

[@rabi3ismail909]

جميل
بوقتو! ❤️❤️✨

[@user-sb3qq7fy6p]

بوركة ي استاذا الفاضل

[@mohamedmeheni3248]

شكرا

[@mohameddsabry]

رائع بشمهندس نور ❤️

[@rafik_sailaa]

شكرااا❤

[@mhamadmdall8360]

يعطيك العافيه دكتور نور
انا درست الكورس الكامل react الموجود على قناتك...وتعلمت كتير منو مشكور...لكن وقت رحت ع شركة مشان الشغل قالولي هدول المعلومات اللي دارسها غير كافيه....الكورس مختصر
ارجو ان تكمل الكورس بشكل كامل ...بدي اشتغل بشركة مشان الله 😅😄

[@thewolfacademy3166]

ممتاز

[@ahmedzakii4534]

تسلم اخوي ، ربي يجزاك الخير ، ولو كمان تكمل كمان API implementations و كمان لو تشرحنا جزئية state management أو Redux

[@samirbatoum180]

شكرا من القلب

[@NourHomsi]

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

[@samirbatoum180]

@@NourHomsi فاصل امتحانات ونعود انشاء الله، استاذي الكريم لقد درست لغة البرمجة س ا لغة جافا لمدة تلاث سنوات لذلك اعلم جيدا ما مدى قدرتك على تبسيط المبادئ من اجل تمكين الجميع من تحصيل كل هاته المفاهم (اتحدث عن محتوى القناة عموما) لذلك مسألة الإستفادة لا تناقش فشكرا جزيلا استاذي🙏

[@hadeelfarash9084]

Great, thank you

[@abdulhamidlaba8205]

حبيبنا والله

[@mhamadmdall8360]

اكيد موجود كورسات react على النت ... بس بحب تدريسك بفهم كتير عليك 😁👍👍

[@wolfox8973]

inta maktaba machaallah wa laysa React

[@ahmedrashed5567]

شكرا
جزاك الله خيرا
نأمل ان يكون الفيديو القادم عن ال React يتحدث عن بناء تطبيق ( كادارة مخازن او حسابات عملاء مثلا) ويكون التركيز فيه عن التعامل مع البيانات وكيفية طباعتها.

[@khalidking3394]

thank you VERY VERY VERY VERY VERY VERY MUCH

[@mojahidsabbah8521]

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

[@ji-tips9773]

شكرا جدا انا حاليا كنت تعبان وانا بدور على كورس لريأكت

[@hamzahamza711]

thanks

[@TheFuture_25]

استاذ نور ياريت تشرحلنا ال Angular

[@MNTVMN]

جميل جدا

[@abdalkarim1678]

شكرا كتير الك استاذ نور على جهودك المبذولة معنا وانا كنت بأمس الحاجة لمثل هذه الدورة ولكن كنت اتمنى لو انك تحدثت عن طريقة العمل ب react عن طريق تضمين روابط المكتبة الموجودة على الموقع الرسمي

[@onaamin5856]

جميل

[@hamzabadii3575]

أكثر من مشاريع هيك و تعمق

[@abmankef4170]

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

[@naimakhichane6828]

المفروض تكون الاول عالميا في التعليم عن بعد
ربي يحفظك

[@mydesign7824]

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

[@KLead963]

واخيراا الدرس المنتظر من زماان! هلأ باقي رياكت نيتف مع تايب سكريبت وبتكون الامور بالسليم! يعطيك العافية استاذ نور.

[@rafatkohder2610]

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

[@NourHomsi]

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

[@amnapro3598]

سويلنه شرح عن vue 3 ومع laravel 8 بليز

[@ajidevelopper]

و الله مبدع و ممتع خلص فيك الكلام بصراحة أنا معك أصبحت محترف في الرياكت

[@bricolageb9398]

أنا صدقتك سوف الباقي

[@basimkarhabi]

السلام عليكم سؤال بعد إنشاء موقع عبر الريأكت و عمل دومين و شراء هوستينغ كيف يمكن لنا وضعه داخل محركات البحث و إظهاره بالمراكز الاولى .أعلم أن هذا سؤال يتعلق ب الاون لاين ماركت

[@anisabbad487]

من فضلك بدنا درس رياكت ناتيف مع مثال عن تصميم تطبيق هاتف

[@aymensalah301]

انا أيضا اريد هذا الكورس

[@call2God]

انا أيضاً 😍

[@P78cd_]

بانتظار هذا الكورس

[@thclouds6528]

فى الانتظار

[@MoJi-gs9wi]

@@aymensalah301 il il il ya t77tttt767ff77t77

[@mouhammadabbasi9548]

كل عام و انت بخير
يا ريت دورة mui

[@kingrar1000]

هل تفرق تعلم رياكت نيتف عن js
وهل لو اناظر الدرس بااستفيد من رياكت نيتف

[@mohamedsedahmad585]

يعطيك الف عافية بس لو ممكن ترفع الكود , ال css يحتاج الكثر من الوقت

[@MalikBaAbbad]

شكرا الله يوفقك

[@ahmedomar_1765]

عاش

[@Hasoon-ry8pu]

متى مشروع vue.js من شرحك الرائع ❤️⚘️

[@NKardan]

فيما يتعلق ب Navbar كيف يتم إضافة تأثير css على active button الخاص بكل صفحة؟

[@fadikariss9626]

ياريت تعمل لنا سلسلة عن angular

[@samisamy5508]

ممكن تشرح إضافة جاهزة من متجر انفاتو
مثل إضافة arena products store word press plugin

[@saadowain3511]

رائع اخي نور..

[@georgesnahra1318]

thank u so much, i appreciate all ur efforts, but when adding import 'bootstrap/dist/css/bootstrap.min.css'; and import bootstrap/dist/js/bootstrap.bundle'; background body and nav are white and in inspect: background-color: var(--bs-body-bg); why i have --bs- ?
thank u again

[@nahdig8yth233]

can you do video for css flex box

[@hamdounedaoud9268]

Yesss ❤️

[@karimaljamal1444]

يعطيك العافية استاذ نور عندي مشكل انا عم حاول اعمل display flex للصور ولكن ما عم يتغيير شي عم بضل الصور block

[@haretrighi7274]

السلام عليكم
عندي adobe premiere نسخة gratuities هل من كورس يجعلني ابدأ اتعلم؟

[@gokuvegeta3615]

هل ممكن شرح ReactNative

[@rdsaad4417]

ما رأيك في أل Angular مع Typescript

[@saidibrahim5931]

Typscript is very important, you don't need Angular React is enough

[@wedadmohamed1245]

هاي نور
ممكن ترشحلي افضل program لتصميم الكرتون

[@balqesaldoulat2938]

Thanks for this generous knowledge sharing

[@alanbarznji6608]

ممكن مثال على رياكت معى دجانغو داتابيس

[@NKardan]

شكرا لك على هذا التطبيق العملي وبنتظار تطبيقات ودروس في React. في بعض الأوقات شعرت بالضياع من كثرت الملفات والإنتقالك بينها لكني أعتقد أن فهم وتحليل أقسام الموقع سوف يسهل هذا الموضوع.

[@ebd3shaml]

ماشاء الله مبدع استمر 🌷

[@alaaaldeen1230]

يعطيك العافية وين رابط المشروع طيب نحمله عالغيت هاب ؟؟ مشكور ❤❤

[@xvax]

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

[@KLead963]

الدرس كتييير عظيم الف شكر استاذ نور بس ياريت لو كان في استخدام react hooks يااريت بدرس آخر منفصل لان كتيير مهمين. وعم استنا درس react native مع typescript كتييير ضروري كمان.
ما عم بعرف ليه react routes ما عم يشتغل عندي مع انو نسخة الرياكت عندي محدثة. لما عم حاوط المشروع بال routes عم تختفي محتويات المشروع!! مع العلم اني نزلت نسخة الرياكت للنسخة القديمة اللي هيي 18.0.0 واستخدمت switch وبينت محتويات المشروع بس والرابط عم يتغير بالمتصفح فوق لما اضغط على home و profile بس الصفحة ما عم تروح على profile!!!! رح يجنني!! ارجو المساعدة يا جماعة. شكرا.

[@KLead963]

واخييييرا مشي الحااااال
رجعت نسخة رياكت الجديدة وحاوطت المشروع يـroutes مرة تانية بنفس الطريقة اللي بالفيديو وعملت npm install وهلأ مشي الحال كللو باين والـclick والتنقل بين الصفحات شغاال 😍

[@Omar-Elhalwany]

@@KLead963 حليت المشكلة ازاي ؟

[@mouhammadabbasi9548]

لا تستخدم اخر نسخة رياكت استخدم ١٢ و لا تستخدم اخر نسخة راوتر ال استخدم بدل منها ال ٥

[@ahmedzakii4534]

عندي سؤال بعد اذنك إذا بشتغل scss ازاي اقدر أطبق دا ؟

[@mustafahaydar9512]

ممكن رابط الجيت هب مشان ناخد الصور