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
Пікірлер: 204
كنت وما زالت افضل وارقى معلم على الاطلاااق، الله يزيدك علم ومعرفة وتواضع استاذ نور.
الله يعطيك العافية، بعد بحث في مقاطع ومصادر كثيرة هذا أفضل تطبيق react وجدته عالنت
السلام عليكم اخي بارك الله فيك طريقتك في الشرح ممتازة جدا لكن لو في مجال للتطرق لكيفية الربط مع api و كيفية التصرّف في البيانات
بارك الله فيك و في اهلك و مالك ووقتك ... وجعله الله في ميزان حسناتك .... تحية طيبة من الجزائر
و الله ان شرحك اكثر من رائع تبسيط و شرح خرافي جعله الله في ميزان حسناتك استاذنا الغالي
بصراحة الشرح ممتاز الله يجازيك كل خير
بارك الله فيك علي هذا المجهود الكبير واصل واستمر
الله عليك يا استاذ نور . وصل بوقته الفيديو جزاك الله خير
الله ينور عليك متألق ومبدع دائما ❤️
الله يحزيك الخير ويجعلها في ميزان حسناتك
الله يجازيك بسببك تغيرت حياتي و أصبحت أفكر بطريقة ذكية أكثر شكرااااااااااااااااااا متابعك من الجزائر
@yssfjbr
7 ай бұрын
big up lik khoya mn l'maroc
السلام عليكم... الله يعافيك على هالمجهود الحلو
بارك الله فيك من المغرب
ممتاز
جزاك الله خير ❤
الله يعطيك الف عافيه استاذي نور من 🇩🇿🇩🇿❤️
يسعدك ربي يا نور حمصي
السلام عليكم... الله يعافيك و الله مبدع و ممتع
أستاذ أنتَ مُبدع 👍 بالرغم أنا ليسَ لدي خبرة بعالم الأنترنيت والحاسوب ، ولكن اُشاهدُكَ فقط 🌺
merci beaucoup 😊😊 bien claire
ما شاء الله بارك الله على جهدك
انا دخلت رياكت بي سببك الحمد لله انت إنسان اكثر من رائع
الله يجزيك خير أستاذ
Great course, thank you for your time.
جزاك الله كل خير
مشكوووووووووووووووووووووووووور يأستاذ نور الله يجازيك انشاء الله
يعطيك ألف عافية
مبدع كالعادة !
جزاك الله خير
استاذ نور ياريت تشرحلنا ال Angular
تسلم اخوي ، ربي يجزاك الخير ، ولو كمان تكمل كمان API implementations و كمان لو تشرحنا جزئية state management أو Redux
مشكور أستاذ نور ❤️❤️
ماشاء الله عليك
الله يجزيك الخير 💙💙💙💙💙💙
فيديو رووووعة ... اسلوب سهل الفهم متل شرب المياه ..
اجمل شيئ التغيير ❤️
كل الإحترام لجهودك
أفضل مشرح مشكور أخي تستحق دعم أكثر
@NourHomsi
Жыл бұрын
شكراً لمرورك والتعليق. أتمنى تكون استفدت
شكرا جزاك الله خيرا نأمل ان يكون الفيديو القادم عن ال React يتحدث عن بناء تطبيق ( كادارة مخازن او حسابات عملاء مثلا) ويكون التركيز فيه عن التعامل مع البيانات وكيفية طباعتها.
رائع بشمهندس نور ❤️
الله يجزيك الخير
جميل بوقتو! ❤️❤️✨
عنجد شكراااااا من القلب
يعطيك العافيه دكتور نور انا درست الكورس الكامل react الموجود على قناتك...وتعلمت كتير منو مشكور...لكن وقت رحت ع شركة مشان الشغل قالولي هدول المعلومات اللي دارسها غير كافيه....الكورس مختصر ارجو ان تكمل الكورس بشكل كامل ...بدي اشتغل بشركة مشان الله 😅😄
بوركة ي استاذا الفاضل
تسلم علي طريقه الشرح المبدعه
@NourHomsi
Жыл бұрын
شكراً لمرورك والتعليق. أتمنى تكون استفدت
اكيد موجود كورسات react على النت ... بس بحب تدريسك بفهم كتير عليك 😁👍👍
شكرا لك ❤️
inta maktaba machaallah wa laysa React
شكرا كتير الك استاذ نور على جهودك المبذولة معنا وانا كنت بأمس الحاجة لمثل هذه الدورة ولكن كنت اتمنى لو انك تحدثت عن طريقة العمل ب react عن طريق تضمين روابط المكتبة الموجودة على الموقع الرسمي
حبيبنا والله
Great, thank you
شكرااا❤
السلام عليكم... الله يعافيك على هالمجهود الحلو اذا تكرمت نحتاج تحميل كود المصدر لهذا الدرس .. شكرا لك
شكرا
شكرا من القلب
@NourHomsi
Жыл бұрын
شكراً لمرورك والتعليق. أتمنى تكون استفدت
@samirbatoum180
Жыл бұрын
@@NourHomsi فاصل امتحانات ونعود انشاء الله، استاذي الكريم لقد درست لغة البرمجة س ا لغة جافا لمدة تلاث سنوات لذلك اعلم جيدا ما مدى قدرتك على تبسيط المبادئ من اجل تمكين الجميع من تحصيل كل هاته المفاهم (اتحدث عن محتوى القناة عموما) لذلك مسألة الإستفادة لا تناقش فشكرا جزيلا استاذي🙏
هل تفرق تعلم رياكت نيتف عن js وهل لو اناظر الدرس بااستفيد من رياكت نيتف
شكرا جدا انا حاليا كنت تعبان وانا بدور على كورس لريأكت
مشكور كتييير عل شرح استاز نور بس نحنا عم نتعلم رياكت ياريت لشرح بدون لبوستراب لان انت عم تجبرنا نتعلم بوتستراب ومو كل ل اشخاص بتفضل لبوتستراب بظن
thanks
can you do video for css flex box
ممكن تشرح إضافة جاهزة من متجر انفاتو مثل إضافة arena products store word press plugin
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
وين المشروع موجود ؟
كل عام و انت بخير يا ريت دورة mui
جميل
الله يعطيك العافية
@NourHomsi
Жыл бұрын
شكراً لمرورك والتعليق
هاي نور ممكن ترشحلي افضل program لتصميم الكرتون
المفروض تكون الاول عالميا في التعليم عن بعد ربي يحفظك
لو سمحت الفيديو الاول وين موجود كأنه محذوف من عندك من القناة
thank you VERY VERY VERY VERY VERY VERY MUCH
السلام عليكم عندي adobe premiere نسخة gratuities هل من كورس يجعلني ابدأ اتعلم؟
بالنسبة للاستضافة الدفع بكون كامل عن 4 سنين ولا شهريا بنسحب من الكرت
جميل جدا
يعطيك الف عافية بس لو ممكن ترفع الكود , ال css يحتاج الكثر من الوقت
هل ممكن شرح ReactNative
واخيراا الدرس المنتظر من زماان! هلأ باقي رياكت نيتف مع تايب سكريبت وبتكون الامور بالسليم! يعطيك العافية استاذ نور.
و الله مبدع و ممتع خلص فيك الكلام بصراحة أنا معك أصبحت محترف في الرياكت
@bricolageb9398
Жыл бұрын
أنا صدقتك سوف الباقي
الله يعطيك العااافية ابدعت كالعادة والدرس بالنسبة الي اجا بوقته الصح بانتظار الفيديوهات والابداع الجديد من حضرتك جزاك الله كل خير .... بعد تجربة اسلوبك واسلوب الشرح من خلال المشاريع او التطبيق العملي افضل واسرع طريقة للتعلم ❤❤❤❤
فيما يتعلق ب Navbar كيف يتم إضافة تأثير css على active button الخاص بكل صفحة؟
أكثر من مشاريع هيك و تعمق
السلام عليكم سؤال بعد إنشاء موقع عبر الريأكت و عمل دومين و شراء هوستينغ كيف يمكن لنا وضعه داخل محركات البحث و إظهاره بالمراكز الاولى .أعلم أن هذا سؤال يتعلق ب الاون لاين ماركت
سويلنه شرح عن vue 3 ومع laravel 8 بليز
يعطيك العافية وين رابط المشروع طيب نحمله عالغيت هاب ؟؟ مشكور ❤❤
ياريت تعمل لنا سلسلة عن angular
ماشاء الله مبدع استمر 🌷
ممكن رابط الجيت هب مشان ناخد الصور
❤❤
الراوتنق سبب لي الارق لحد الان افكر كيف بربط مفهمومها في راسي
شكرا لحوعلى الجهود، ولكن لم استطع اكمال المشروع حتى الاخير بسبب كثرة الملفات والتعديل عليها بشكل عشوائي ، ومسح واضافة اكواد
Thanks for this generous knowledge sharing
ما رأيك في أل Angular مع Typescript
@saidibrahim5931
Жыл бұрын
Typscript is very important, you don't need Angular React is enough
رائع اخي نور..
متى مشروع vue.js من شرحك الرائع ❤️⚘️
ممكن مثال على رياكت معى دجانغو داتابيس
عاش
Yesss ❤️
@karimaljamal1444
Жыл бұрын
يعطيك العافية استاذ نور عندي مشكل انا عم حاول اعمل display flex للصور ولكن ما عم يتغيير شي عم بضل الصور block
يعطيك العافيه استاذ نور لو سمحت ازاي احمي موقعي من انه حد ينشر مقالات علي موقعي كيف احمي موقعي وورد بريس هوستنجر
ممكن تنزل الكود يا بشمهندس بحيث نتابع الفيديو بالكود ونوفر وقت الكتابة وناخد الفكره
عند إدارة البيانات عن طريق المصفوفة تم عرض 8 بوكسات كيف يتم عرض 4 بوكسات فقط؟