React از صفر
React from Scratch
React from Scratch is a hands-on, beginner-friendly video series that takes you from an empty folder to a fully interactive React app — no prior React knowledge required. You'll learn about JSX, components, state management, controlled inputs, data fetching, and even TypeScript!
I hope you'll come to appreciate React for what it truly is: a flexible, powerful UI library — not a full-blown framework. I'll teach you where its boundaries lie, and how to scale beyond them.
قسمتهای دوره
Fundamentals (7)
شروع از صفر مطلق
3m 1sStart your React journey from scratch by setting up a fast dev server with Vite—perfect for beginners ready to build modern web apps with ease!
پیشنمایش "سلام دنیا" در React
6m 24sLearn how to render React’s "Hello World" in the browser using Babel for JSX conversion—get started quickly without a complex build step!
JSX - ۵ دقیقه به آن فرصت دهید
5m 9sUnderstand JSX in minutes by exploring how it compiles to React.createElement calls, revealing its clear, familiar syntax for building React components.
دامهای JSX برای تازهواردان
4m 46sAvoid common JSX pitfalls with this friendly guide for React newcomers—learn classic gotchas to write cleaner, error-free React code from the start!
مرحله ساخت مناسب با Vite
7mSet up a proper build step by adding the Vite React plugin, enabling your dev server to efficiently handle JSX files for smoother React development.
تکنیکهای استایلدهی در React
8m 46sExplore React styling techniques from classic CSS to CSS-in-JS, then set up Tailwind CSS v4 to build stylish, modern React apps with ease!
مرتبسازی سریع
3m 44sGet ready to build with essential housekeeping tips that smooth your React workflow and prevent headaches—setting you up for success in upcoming lessons!
Components & Templating (5)
تجزیه کامپوننتها
14m 42sStart building the Dev Pups app by breaking a static HTML UI into manageable React components, making your code cleaner and easier to maintain!
تکمیل مهاجرت رابط کاربری ایستا
5m 10sComplete your static UI migration by converting HTML to JSX and breaking it into React components like Shortlist, PuppiesList, and NewPuppyForm for better structure.
پیمایش دادهها
10m 36sDiscover how to iterate over data in React using JSX loops, keeping your code DRY and efficient while rendering dynamic lists like a pro.
انتقال داده به کامپوننتها
4m 55sLearn how to share data across React components by passing props, making your app more dynamic and enabling multiple components to access the same information.
TypeScript دوست شماست. واقعاً!
11m 31sDiscover how TypeScript can boost your React development with less frustration. Learn why embracing it makes your code safer and easier to maintain.
State & Reactivity (5)
اولین طعم تعامل
14m 12sDive into React state and component re-rendering to unlock interactivity in your apps. Master this key concept to build dynamic, responsive user interfaces.
به اشتراک گذاری State در بین کامپوننتها
13m 49sLearn how to share state across React components by lifting state and managing prop drilling, boosting flexibility and composability in your app’s UI.
State، Props و چرخههای رندر مجدد
13m 57sExplore React's state, props, and re-render cycles with React Scan—a handy tool to boost your app’s performance and sharpen your React skills!
حفاری Props و Context API
12m 30sLearn how React’s Context API solves prop drilling, create a custom hook, and improve your app’s structure with clear, practical examples and tips!
ورودیهای کنترلشده در مقابل کنترلنشده
14m 15sMaster controlled vs uncontrolled inputs in React by building a search feature with shared state and learn how to manage input values effectively!
Forms (2)
اکشنهای فرم
13m 7sDiscover how to handle uncontrolled inputs and form submissions in React, plus simplify your workflow with React Form Actions for smoother updates!
وضعیت در انتظار
12m 8sLearn how to handle pending states in your app by showing users real-time feedback with useFormStatus, improving responsiveness and user experience.
Data Fetching & Remote State (6)
دریافت داده با useEffect
11m 8sLearn how to fetch data in React using useEffect, explore core concepts, and prepare to enhance your apps with tools and meta frameworks!
Suspense، مرزهای خطا و تابع use()
9m 5sExplore React’s use() function, Suspense, and Error Boundaries to simplify data fetching and improve your app’s user experience with cleaner code!
بازنویسی مبتنی بر TypeScript
9m 4sSee how TypeScript shines during refactoring by guiding API updates in React. Perfect for skeptics ready to boost code quality and confidence!
تغییرات داده از راه دور
14m 1sLearn how to handle remote data mutations in React, keep your UI synced with API changes, and tackle stale state with practical, hands-on solutions!
بازبینی پیادهسازی toggle
3m 52sRefine your React toggle implementation by re-deriving API data after mutations—cleaner code, better practices, and peace of mind for your app’s state!
ذخیره تولهسگهای جدید از طریق API
13m 17sLearn to persist new puppies with API POST requests in React, including basic error handling and validation for a smooth, reliable form experience!




