React from Scratch

Discover why learning React is a smart choice—explore its benefits and how it empowers you to build dynamic, modern web applications with ease!

Start 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!

Learn how to render React’s "Hello World" in the browser using Babel for JSX conversion—get started quickly without a complex build step!

Understand JSX in minutes by exploring how it compiles to React.createElement calls, revealing its clear, familiar syntax for building React components.

Avoid common JSX pitfalls with this friendly guide for React newcomers—learn classic gotchas to write cleaner, error-free React code from the start!

Set up a proper build step by adding the Vite React plugin, enabling your dev server to efficiently handle JSX files for smoother React development.

Explore React styling techniques from classic CSS to CSS-in-JS, then set up Tailwind CSS v4 to build stylish, modern React apps with ease!

Get ready to build with essential housekeeping tips that smooth your React workflow and prevent headaches—setting you up for success in upcoming lessons!

Start building the Dev Pups app by breaking a static HTML UI into manageable React components, making your code cleaner and easier to maintain!

Complete your static UI migration by converting HTML to JSX and breaking it into React components like Shortlist, PuppiesList, and NewPuppyForm for better structure.

Discover how to iterate over data in React using JSX loops, keeping your code DRY and efficient while rendering dynamic lists like a pro.

Learn how to share data across React components by passing props, making your app more dynamic and enabling multiple components to access the same information.

Discover how TypeScript can boost your React development with less frustration. Learn why embracing it makes your code safer and easier to maintain.

Dive into React state and component re-rendering to unlock interactivity in your apps. Master this key concept to build dynamic, responsive user interfaces.

Learn how to share state across React components by lifting state and managing prop drilling, boosting flexibility and composability in your app’s UI.

Explore 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!

Learn how React’s Context API solves prop drilling, create a custom hook, and improve your app’s structure with clear, practical examples and tips!

Master controlled vs uncontrolled inputs in React by building a search feature with shared state and learn how to manage input values effectively!

Discover how to handle uncontrolled inputs and form submissions in React, plus simplify your workflow with React Form Actions for smoother updates!

Learn how to handle pending states in your app by showing users real-time feedback with useFormStatus, improving responsiveness and user experience.

Learn how to fetch data in React using useEffect, explore core concepts, and prepare to enhance your apps with tools and meta frameworks!

Explore React’s use() function, Suspense, and Error Boundaries to simplify data fetching and improve your app’s user experience with cleaner code!

See how TypeScript shines during refactoring by guiding API updates in React. Perfect for skeptics ready to boost code quality and confidence!

Learn how to handle remote data mutations in React, keep your UI synced with API changes, and tackle stale state with practical, hands-on solutions!

Refine your React toggle implementation by re-deriving API data after mutations—cleaner code, better practices, and peace of mind for your app’s state!

Learn to persist new puppies with API POST requests in React, including basic error handling and validation for a smooth, reliable form experience!

Discover why React is a library, not a framework, explore React tools, and see how Laravel with Inertia boosts your app’s data fetching and async state!