جميع ملفات الدورة عبر الرابط الآتي: https://1designer.org/uploads/learn-react-files.zip يّقَدَّم لكم هذا الكورس برعاية هوستينجر لحجز الدومينات والاستضافة: رابط الصفحة بالإنكليزية: https://www.hostg.xyz/SH4KR رابط الصفحة بالعربية: https://www.hostg.xyz/SH455 كوبون الخصم: 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 خاتمة ------------------------------------------------------------------------ اشترك في مجموعة المصمم الأول لمناقشة الدروس: fb.com/groups/1designer nourhomsi.com instagram.com/drnourhomsi twitter.com/nourhomsi1 fb.me/drnourhomsi

في هذا الفديو كورس شامل لتعلم أساسيات React JS مدة الكورس ساعة وسنكمل باذن الله هذه السلسة لتعلم React JS سنتعلم في الفديوهات القادمة بمشية الله Hooks & LifeCycleHooks دمتم علي خير #react #reactjs nextjs #react_بالعربي رابط حسابي علي GitHub https://github.com/Kareem2002Shimes TABLE OF CONTENT Intro 00:00 What & Why React 00:43 Installing packages 04:40 Browse React Files 06:50 What is JSX 16:33 Components & Props 19:54 Styling 32:40 What is State 37:54 Functional component vs Class component 49:59 Class component 53:03 The End & the Next 01:04:44

In this React tutorial and React full course, build websites and projects with React. React Premium Course: https://courses.supersimple.dev/courses/react Frontend Bundle (React, JS, HTML CSS): https://courses.supersimple.dev/bundles/frontend-bundle Membership: https://youtube.com/@SuperSimpleDev/join or https://member.supersimple.dev (10% OFF the USD price) Links in this course: https://github.com/SuperSimpleDev/react-course/blob/main/1-links.md Exercise solutions: https://github.com/SuperSimpleDev/react-course/tree/main/1-exercise-solutions Copy of the code: https://github.com/SuperSimpleDev/react-course/tree/main/2-copy-of-code Troubleshooting: https://github.com/SuperSimpleDev/react-course/blob/main/2-troubleshooting.md 🎓 Premium Courses (get a certificate, better learning experience, support SuperSimpleDev ❤️) Frontend Bundle (React, JS, HTML CSS): https://courses.supersimple.dev/bundles/frontend-bundle React Premium Course: https://courses.supersimple.dev/courses/react JavaScript Premium Course: https://courses.supersimple.dev/courses/javascript HTML CSS Premium Course: https://courses.supersimple.dev/courses/html-css Sections: 0:00 Intro 1:20 1. React Basics, JSX 40:16 2. Components, Props, Start the Chatbot Project 1:36:49 3. State, Event Handlers, Chatbot Project Features 2:42:41 4. CSS with React, Hooks, Finish Chatbot Project 3:48:49 5. Proper React Setup with Vite 4:59:29 6. React Router, Git, Start the Ecommerce Project 6:09:59 7. React with Backend, Data Fetching, Load Ecommerce Project Data 8:00:58 8. Data Mutation, Update Ecommerce Project Data 8:50:10 9. Automated Tests in React with Vitest 9:50:31 10. Deploy React to the Internet, Intro to AWS 10:41:06 11. React 19 Updates 10:50:13 TypeScript with React 11:24:12 AI with React 11:31:09 Conclusion and Next Steps Additional information: This React tutorial and React full course is a project based series of React tutorials for software engineers. Each React tutorial builds on a project and provides some React exercises to practice what we learned. By the end, we'll learn how to create complex websites and projects with React, JavaScript, HTML, and CSS, which will help you become a web developer and software engineer. #react #supersimpledev #reactcourse #reacttutorial #reactjs #javascript #html #css #webdevelopment #webdeveloper #softwaredeveloper #softwaredevelopment #coding #codingtutorial #softwareengineer #softwareengineering #learntocode

This is the ReactJS Full Course | Learn Everything from Scratch to Advanced, your complete guide to mastering React in one video. We’ll start with the basics like components, JSX, props, and state, then move to advanced topics like hooks, context API, routing, and real project setups. By the end, you’ll understand how React really works and how to build production-ready apps confidently. 📘 What’s Inside: - React fundamentals (JSX, Props, State) - Hooks and Context API - Routing and API Integration - Folder structure and best practices - Real-world project demo 💻 Source Code: Access the complete source code of this video here → https://github.com/saarthack/react-yt If you learned something new, like, comment, and subscribe for more frontend content. Let’s make coding fun and creative 🚀 Instructor in this video: Sarthak Sharma Don't forget to LIKE 👍 this video, SUBSCRIBE 🔔 for more Web Development tutorials, and COMMENT below if you have any questions or suggestions! 🚀 Visit Our Website - https://sheryians.com/ Chapters - 00:00:00 - Introduction 00:01:10 - React Overview 00:17:48 - Import & Export 00:28:47 - Real DOM vs Virtual DOM 00:36:42 - Setting Up React with Vite 01:06:28 - Components Explained 01:26:02 - Understanding Props 01:47:37 - Mini Projects using Props 02:50:43 - Styling with CSS 03:06:48 - Intro to Tailwind CSS 03:18:23 - UI Design Project 04:30:51 - Working with Functions 04:56:23 - Understanding Hooks 05:12:10 - Advanced State Management 05:55:58 - Form Handling in React 06:03:20 - Two-Way Data Binding 06:15:46 - Notes App Project 07:21:25 - Using LocalStorage 07:33:35 - API Calls in React 07:54:37 - useEffect Hook Explained 08:17:01 - Gallery Project 09:15:20 - React Router DOM Basics 09:42:16 - Advanced Routing 10:26:36 - Bonus Concepts 10:36:43 - Context API Introduction 10:44:18 - Children as Props 10:57:11 - Context API in Action 11:15:13 - Outro Socials: 📷 Instagram: https://www.instagram.com/sheryians_coding_school/ 📘 Facebook: https://www.facebook.com/sheryians.community 💌 Telegram: https://t.me/sheryiansCommunity 💼 LinkedIn: https://in.linkedin.com/company/the-sheryians-coding-school 🎮 Discord: https://discord.gg/Au3TquBarQ Peace out ✌ #sheryianscodingschool #sheryians #code #coding #jobs #reactjs #mernstack #mern #web #reactjscourse #tutorial #creativewebdevelopment #webdevelopment #functionalwebdevelopment #thebasics #mernstack #jslogic #javascriptlogics

An LLM is an incredibly powerful brain that knows everything about humanity and nothing about you or the software you run. This video walks through the four buzzwords that turn that raw brain into a system you can trust: agent harness, loop engineering, LLM Ops, and eval. No jargon, step by step, technical or not. You can build anything. You can learn anything. 💪 Timeline 0:00 Intro: the 4 AI agent buzzwords 0:42 What an AI agent run actually is 1:52 The memory system: procedural, semantic, episodic 3:37 What "harness" really means (the horse) 5:07 Storing and updating memory (databases, skills, summarizer agent) 8:28 Retrieval: RAG, SQL vs semantic search 10:00 Tool calling and why agents loop 10:52 Loop engineering and end-loop guardrails 13:21 A Claude Code hooks example 14:18 Eval and LLM Ops: why you need them 15:55 Tracing every run (Langfuse, LangSmith) 16:43 Evaluation: LLM as a judge 17:20 Diagnosing what broke 18:16 The gate: ship the fix or fix the bug 18:57 Zoom out: the full system 19:53 Wrap up Launch Full-Stack App Template: https://github.com/ShenSeanChen/launch-mvp-stripe-nextjs-supabase My AI Agent Startup AutoManus.io is an AI sales lead manager for made-to-order product sales. We embed directly where conversations happen (WhatsApp, email, web chat) to capture inbound, automate follow‑ups, and kill CRM busywork; live with 4 pilots and 2 contracts in motion, pre‑seed backed by Character VC. Focused on US/UK/Germany, raising to expand engineering and scale deployments. ☕️ Buy me a coffee: https://buy.stripe.com/5kA176bA895ggog4gh - X: https://x.com/ShenSeanChen - Sean's Discord: https://discord.gg/tvECErKcFr - AutoManus Discord: https://discord.gg/5HhcNjCR - LinkedIn: https://linkedin.com/in/shen-sean-chen - Github Link: https://github.com/ShenSeanChen - Instagram: https://www.instagram.com/sean_ai_stories Sub Count when launched: 13,050 Top Github Repos - LaunchMVP NextJS,Supabase,Stripe (1015 stars): https://github.com/ShenSeanChen/launch-mvp-stripe-nextjs-supabase - ReactNextJSTips (114 stars): https://github.com/ShenSeanChen/yt-react-nextjs-tips - DeepResearchAgentBackend (70 stars): https://github.com/ShenSeanChen/yt-DeepResearch-Backend - SupabaseTipsKanban (64 stars): https://github.com/ShenSeanChen/yt-supabase-tips-kanban - RAGVectorDB (56 stars): https://github.com/ShenSeanChen/yt-rag - KimiK2Claude (37 stars): https://github.com/ShenSeanChen/yt-kimi-k2-claude - DeepResearchAgentFrontend (33 stars): https://github.com/ShenSeanChen/yt-DeepResearch-Frontend - AgenticRAG (13 stars): https://github.com/ShenSeanChen/yt-agentic-rag You Can Build Anything Playlist (Full-Stack Dev Without CS Degrees) - Core7: 95% React/NextJS Use Cases https://www.youtube.com/watch?v=vZzFlAjz4rA&list=PLE9hy4A7ZTmpGq7GHf5tgGFWh2277AeDR&index=16 - Core6: 95% Supabase Use Cases https://www.youtube.com/watch?v=Pnoq2tIif3s&list=PLE9hy4A7ZTmpGq7GHf5tgGFWh2277AeDR&index=15 - Core5: StripeNextJSSupabase https://www.youtube.com/watch?v=ad1BxZufer8&list=PLE9hy4A7ZTmpGq7GHf5tgGFWh2277AeDR&index=8 - Core4: AuthSupabaseGoogle https://www.youtube.com/watch?v=AZAU3ClAWWE&list=PLE9hy4A7ZTmpGq7GHf5tgGFWh2277AeDR&index=6 - Core3: FastapiGCPPro https://www.youtube.com/watch?v=u3sfqpzzo-U&list=PLE9hy4A7ZTmpGq7GHf5tgGFWh2277AeDR&index=5 - Core2: SupabaseHero https://www.youtube.com/watch?v=V0kmgkyPsVQ&list=PLE9hy4A7ZTmpGq7GHf5tgGFWh2277AeDR&index=4 - Core1: LaunchAnApp https://www.youtube.com/watch?v=iQ2izvGG4tQ&list=PLE9hy4A7ZTmpGq7GHf5tgGFWh2277AeDR&index=3 - Launch WhereToMeet w/ GoogleMaps, Calendar, Supabase, Cursor: https://www.youtube.com/watch?v=5xMjX1QxGUY&list=PLE9hy4A7ZTmpGq7GHf5tgGFWh2277AeDR&index=2 - Launch EncourageMe w/ Cursor, Supabase, Vercel https://www.youtube.com/watch?v=hnvL4xa2DHA&list=PLE9hy4A7ZTmpGq7GHf5tgGFWh2277AeDR

⭐▬▬▬▬ DOWNLOAD DEVOPS NOTES FOR FREE 👋 ▬▬▬▬⭐ https://acedevhub.com/projects/devops-full-course-notes ⭐▬▬▬▬▬ DOWNLOAD SOURCE CODE FOR FREE 👋 ▬▬▬▬▬⭐ https://acedevhub.com/projects/devops-full-course-source-code ⭐▬▬▬▬▬ SUBSCRIBE TO Tech Monk - Kapil👋 ▬▬▬▬▬⭐ https://www.youtube.com/@UC8tHFvrU1GhAeosHa-fFI6g ⭐▬▬▬▬▬▬ TIMESTAMPS 👋 ▬▬▬▬▬▬⭐ 00:00 Introduction 07:03 What is DevOps 14:20 DevOps Lifecycle 22:52 Linux in DevOps 38:58 Shell scripting 50:38 Project overview 57:50 Git & Github 01:58:32 Environment management 02:14:57 Docker 02:54:15 Docker Compose 03:07:05 Continuous Integration (CI) 03:21:12 Github actions, ESlint and Prettier 03:46:25 AWS EC2 Deployment 04:20:25 Continuous Deployment (CD) 04:39:00 Kubernetes Welcome to Part 1 of the DevOps Full Course 2025 🚀.In this video, we’re starting from the very basics and slowly building our way up to real-world DevOps practices. 📝 What You’ll Learn in Part 1 : What is DevOps? Why DevOps is needed in modern software development Linux basics for DevOps engineers Shell scripting for automation Git & GitHub fundamentals: install, init, add/commit, branching, push/pull Environment management (dev, staging, production explained) Docker basics: images, containers, Dockerfile (Node + React example) Docker Compose to run full MERN stack (frontend, backend, database) CI with GitHub Actions (linting & build pipeline) AWS deployment overview Intro to Kubernetes (pods, deployments, services, Minikube setup) 👋▬▬▬▬▬▬ BUY ME A COFFEE :) ▬▬▬▬▬▬👋 https://www.buymeacoffee.com/sangammukh6 🔔▬▬▬▬▬▬ Subscribe for more! ▬▬▬▬▬▬🔔 https://www.youtube.com/channel/UCuWZvXIeoDzZKCzpTuC5krQ 👋 ▬▬▬▬▬▬ CONNECT WITH ME ▬▬▬▬▬▬👋 Linkedin : https://www.linkedin.com/in/sangam-mukherjee-400488134/ Instagram: https://www.instagram.com/sangam_mukherjee/

In this full stack development course, you will learn how to create an application using MongoDb for the database, Java and Spring Boot for the backend, and React for the frontend. You will learn to develop a movie review application that will feature a separation of concerns between the client code and the server code. By implementing this loosely coupled architecture, these two parts (implemented using different technologies) can evolve in parallel and independently from one another. ✏️ Farhan Hasin Chowdhury teaches the backend section. ✏️ Gavin Lon teaches the frontend section. @GavinLon 💻 Backend Code: https://github.com/fhsinchy/movieist 💻 Frontend Code: https://github.com/GavinLonDigital/movie-gold-v1 🔗 Spring Initializr - https://start.spring.io/ 🔗 JDK Download Page: https://www.oracle.com/java/technologies/downloads/ 🔗 IntelliJ IDEA Download Page: https://www.jetbrains.com/idea/download/ 🔗 Postman Download Page: https://www.postman.com/downloads/ 🏗 MongoDB provided a grant to make this course possible. ❤️ Try interactive Full Stack courses we love, right in your browser: https://scrimba.com/freeCodeCamp-Fullstack (Made possible by a grant from our friends at Scrimba) ⭐️ Contents ⭐️ ⌨️ (0:00:00) Course Introduction ⌨️ (0:01:48) JDK and IntelliJ IDEA Installation ⌨️ (0:06:13) MongoDB Atlas ⌨️ (0:20:35) Project Initialization ⌨️ (0:27:03) Project Structure ⌨️ (0:29:13) Running The Project ⌨️ (0:32:41) Writing The First Endpoint ⌨️ (0:35:33) Database Configuration ⌨️ (0:38:49) Installing Additional Dependencies ⌨️ (0:44:48) Setting Up Environment Variables ⌨️ (0:47:20) Movies and Reviews Endpoints ⌨️ (1:31:46) Testing ⌨️ (1:35:42) Backend Conclusion ⌨️ (1:36:45) Frontend Introduction ⌨️ (1:38:32) Create the React Project ⌨️ (1:43:49) Applying Bootstrap to our React application ⌨️ (1:52:47) Implementing the Use State and Use Effect Hooks ⌨️ (1:58:04) Create Home and Hero Component ⌨️ (2:06:56) Style the Carousel ⌨️ (2:15:21) Create Header Component (Navigation) ⌨️ (2:21:55) Create Trailer Component with react-player ⌨️ (2:28:46) Create Movie Reviews Functionality ⌨️ (2:34:43) Add and Get Reviews with HTTP Requests ⌨️ (2:40:33) Course Wrap Up 🎉 Thanks to our Champion and Sponsor supporters: 👾 Nattira Maneerat 👾 Heather Wcislo 👾 Serhiy Kalinets 👾 Erdeniz Unvan 👾 Justin Hual 👾 Agustín Kussrow 👾 Otis Morgan -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news

Dive straight into React—from basic JSX to advanced hooks—and build a real, modern app in this hands-on crash course! Hostinger: https://jsm.dev/react25-hostinger Appwrite: https://jsm.dev/react25-appwrite WebStorm: https://jsm.dev/react25-webstorm 🎁 Video Kit (Codebase, and more): https://jsm.dev/react25-kit 📘 ReactJS Course Waitlist: https://jsm.dev/react25-waitlist ⭐ Join JS Mastery Pro: https://jsm.dev/react25-jsmpro 💎 Become a Top 1% Next.js Developer: https://jsm.dev/react25-nextjs https://discord.com/invite/n6EdbFJ https://twitter.com/jsmasterypro https://instagram.com/javascriptmastery https://linkedin.com/company/javascriptmastery Business Inquiries: contact@jsmastery.pro Time Stamps 00:00:00 — Intro 00:01:41 — Crash Course 00:05:08 — React Setup 00:07:33 — Create React.js Project 00:15:12 — Components 00:17:55 — Props 00:20:03 — Styles 00:26:15 — States and Hooks 00:35:18 — UseEffect Hook 00:42:40 — React Snippets 00:43:27 — About the Project 00:46:28 — Tailwind CSS setup 00:49:55 — Assets & styles 00:51:00 — Develop header 01:02:56 — The Movie DB API 01:22:58 — Develop movie card component 01:30:12 — Implement search 01:33:38 — Optimize search 01:39:07 — Trending Movies Feature 01:54:01 — Show Trending Movies 02:03:58 — Deployment