Learn React by programming a complete website with the 2022 update [AR]
ฝัง
- เผยแพร่เมื่อ 4 มิ.ย. 2024
- 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
ياخي والله من خلالك تعلمت كثيير كثيير وخليتني اتعمق أكثر بعالم الجافا سكربت ومكتباتها وبرضو الAPI ...بالله كثرلنا من هذي المشاريع ي أستاذ نوور ..وربي يجزيك كل الخير
الله يعطيك العافية، بعد بحث في مقاطع ومصادر كثيرة هذا أفضل تطبيق react وجدته عالنت
بارك الله فيك و في اهلك و مالك ووقتك ... وجعله الله في ميزان حسناتك .... تحية طيبة من الجزائر
كنت وما زالت افضل وارقى معلم على الاطلاااق، الله يزيدك علم ومعرفة وتواضع استاذ نور.
بارك الله فيك علي هذا المجهود الكبير واصل واستمر
و الله ان شرحك اكثر من رائع تبسيط و شرح خرافي
جعله الله في ميزان حسناتك استاذنا الغالي
الله عليك يا استاذ نور . وصل بوقته الفيديو
جزاك الله خير
بصراحة الشرح ممتاز الله يجازيك كل خير
الله يعطيك الف عافيه استاذي نور من 🇩🇿🇩🇿❤️
السلام عليكم... الله يعافيك على هالمجهود الحلو
السلام عليكم اخي بارك الله فيك طريقتك في الشرح ممتازة جدا
لكن لو في مجال للتطرق لكيفية الربط مع api و كيفية التصرّف في البيانات
انا دخلت رياكت بي سببك الحمد لله
انت إنسان اكثر من رائع
الله ينور عليك متألق ومبدع دائما ❤️
الله يحزيك الخير ويجعلها في ميزان حسناتك
جزاك الله خير ❤
بارك الله فيك من المغرب
الله يجازيك بسببك تغيرت حياتي و أصبحت أفكر بطريقة ذكية أكثر شكرااااااااااااااااااا متابعك من الجزائر
big up lik khoya mn l'maroc
الله يجزيك خير أستاذ
ما شاء الله بارك الله على جهدك
مبدع كالعادة !
السلام عليكم... الله يعافيك و الله مبدع و ممتع
جزاك الله كل خير
فيديو رووووعة ... اسلوب سهل الفهم متل شرب المياه ..
اجمل شيئ التغيير ❤️
رحلة رائعة وممتعة جزاك الله اخي
جزاك الله خير
مشكور أستاذ نور ❤️❤️
يسعدك ربي يا نور حمصي
أستاذ أنتَ مُبدع 👍 بالرغم أنا ليسَ لدي خبرة بعالم الأنترنيت والحاسوب ، ولكن اُشاهدُكَ فقط 🌺
merci beaucoup 😊😊 bien claire
مشكوووووووووووووووووووووووووور يأستاذ نور الله يجازيك انشاء الله
كل الإحترام لجهودك
يعطيك ألف عافية
ماشاء الله عليك
أفضل مشرح مشكور أخي تستحق دعم أكثر
شكراً لمرورك والتعليق. أتمنى تكون استفدت
الله يجزيك الخير 💙💙💙💙💙💙
Great course, thank you for your time.
جميل
بوقتو! ❤️❤️✨
الله يجزيك الخير
اكيد موجود كورسات react على النت ... بس بحب تدريسك بفهم كتير عليك 😁👍👍
تسلم اخوي ، ربي يجزاك الخير ، ولو كمان تكمل كمان API implementations و كمان لو تشرحنا جزئية state management أو Redux
تسلم علي طريقه الشرح المبدعه
شكراً لمرورك والتعليق. أتمنى تكون استفدت
عنجد شكراااااا من القلب
شكرا لك ❤️
شكرا الله يوفقك
رائع بشمهندس نور ❤️
بوركة ي استاذا الفاضل
شكرا
جزاك الله خيرا
نأمل ان يكون الفيديو القادم عن ال React يتحدث عن بناء تطبيق ( كادارة مخازن او حسابات عملاء مثلا) ويكون التركيز فيه عن التعامل مع البيانات وكيفية طباعتها.
شكرااا❤
شكرا
حبيبنا والله
يعطيك العافيه دكتور نور
انا درست الكورس الكامل react الموجود على قناتك...وتعلمت كتير منو مشكور...لكن وقت رحت ع شركة مشان الشغل قالولي هدول المعلومات اللي دارسها غير كافيه....الكورس مختصر
ارجو ان تكمل الكورس بشكل كامل ...بدي اشتغل بشركة مشان الله 😅😄
Great, thank you
شكرا من القلب
شكراً لمرورك والتعليق. أتمنى تكون استفدت
@@NourHomsi فاصل امتحانات ونعود انشاء الله، استاذي الكريم لقد درست لغة البرمجة س ا لغة جافا لمدة تلاث سنوات لذلك اعلم جيدا ما مدى قدرتك على تبسيط المبادئ من اجل تمكين الجميع من تحصيل كل هاته المفاهم (اتحدث عن محتوى القناة عموما) لذلك مسألة الإستفادة لا تناقش فشكرا جزيلا استاذي🙏
استاذ نور ياريت تشرحلنا ال Angular
شكرا جدا انا حاليا كنت تعبان وانا بدور على كورس لريأكت
inta maktaba machaallah wa laysa React
الله يعطيك العااافية ابدعت كالعادة والدرس بالنسبة الي اجا بوقته الصح بانتظار الفيديوهات والابداع الجديد من حضرتك جزاك الله كل خير .... بعد تجربة اسلوبك واسلوب الشرح من خلال المشاريع او التطبيق العملي افضل واسرع طريقة للتعلم ❤❤❤❤
شكرا كتير الك استاذ نور على جهودك المبذولة معنا وانا كنت بأمس الحاجة لمثل هذه الدورة ولكن كنت اتمنى لو انك تحدثت عن طريقة العمل ب react عن طريق تضمين روابط المكتبة الموجودة على الموقع الرسمي
ممتاز
واخيراا الدرس المنتظر من زماان! هلأ باقي رياكت نيتف مع تايب سكريبت وبتكون الامور بالسليم! يعطيك العافية استاذ نور.
السلام عليكم... الله يعافيك على هالمجهود الحلو
اذا تكرمت نحتاج تحميل كود المصدر لهذا الدرس .. شكرا لك
thanks
جميل
ماشاء الله مبدع استمر 🌷
thank you VERY VERY VERY VERY VERY VERY MUCH
رائع اخي نور..
جميل جدا
مشكور كتييير عل شرح استاز نور بس نحنا عم نتعلم رياكت ياريت لشرح بدون لبوستراب لان انت عم تجبرنا نتعلم بوتستراب ومو كل ل اشخاص بتفضل لبوتستراب بظن
و الله مبدع و ممتع خلص فيك الكلام بصراحة أنا معك أصبحت محترف في الرياكت
أنا صدقتك سوف الباقي
الله يعطيك العافية
شكراً لمرورك والتعليق
المفروض تكون الاول عالميا في التعليم عن بعد
ربي يحفظك
أكثر من مشاريع هيك و تعمق
من فضلك بدنا درس رياكت ناتيف مع مثال عن تصميم تطبيق هاتف
انا أيضا اريد هذا الكورس
انا أيضاً 😍
بانتظار هذا الكورس
فى الانتظار
@@aymensalah301 il il il ya t77tttt767ff77t77
هل تفرق تعلم رياكت نيتف عن js
وهل لو اناظر الدرس بااستفيد من رياكت نيتف
ممكن تشرح إضافة جاهزة من متجر انفاتو
مثل إضافة arena products store word press plugin
متى مشروع vue.js من شرحك الرائع ❤️⚘️
يعطيك الف عافية بس لو ممكن ترفع الكود , ال css يحتاج الكثر من الوقت
can you do video for css flex box
سويلنه شرح عن vue 3 ومع laravel 8 بليز
Yesss ❤️
يعطيك العافية استاذ نور عندي مشكل انا عم حاول اعمل display flex للصور ولكن ما عم يتغيير شي عم بضل الصور block
كل عام و انت بخير
يا ريت دورة mui
هاي نور
ممكن ترشحلي افضل program لتصميم الكرتون
عاش
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
Thanks for this generous knowledge sharing
فيما يتعلق ب Navbar كيف يتم إضافة تأثير css على active button الخاص بكل صفحة؟
ياريت تعمل لنا سلسلة عن angular
السلام عليكم
عندي adobe premiere نسخة gratuities هل من كورس يجعلني ابدأ اتعلم؟
هل ممكن شرح ReactNative
ما رأيك في أل Angular مع Typescript
Typscript is very important, you don't need Angular React is enough
بالنسبة للاستضافة الدفع بكون كامل عن 4 سنين ولا شهريا بنسحب
من الكرت
ممكن مثال على رياكت معى دجانغو داتابيس
❤❤
يعطيك العافية وين رابط المشروع طيب نحمله عالغيت هاب ؟؟ مشكور ❤❤
السلام عليكم سؤال بعد إنشاء موقع عبر الريأكت و عمل دومين و شراء هوستينغ كيف يمكن لنا وضعه داخل محركات البحث و إظهاره بالمراكز الاولى .أعلم أن هذا سؤال يتعلق ب الاون لاين ماركت
شكرا لك على هذا التطبيق العملي وبنتظار تطبيقات ودروس في React. في بعض الأوقات شعرت بالضياع من كثرت الملفات والإنتقالك بينها لكني أعتقد أن فهم وتحليل أقسام الموقع سوف يسهل هذا الموضوع.
ممكن رابط الجيت هب مشان ناخد الصور
شكرا لحوعلى الجهود، ولكن لم استطع اكمال المشروع حتى الاخير بسبب كثرة الملفات والتعديل عليها بشكل عشوائي ، ومسح واضافة اكواد
غند الإنتهاء من المشروع ماهي الملفات التي يتم تسليمها للعميل ؟