Tag: react
All the articles with the tag "react".
My posts
Responsive Images: a quick example with react
Published: at 03:00 PMOptimizing web performance is a priority for any developer. One key aspect to consider is how images are handled across different devices. In this article, we will explore how to create responsive images with React. The goal is to display different images based on the screen size.
Example of Using useSyncExternalStore with LocalStorage
Published: at 06:26 PMLearn how to efficiently synchronize application state with external data sources like LocalStorage using React's useSyncExternalStore hook, with a practical example and detailed explanation.
Tech Watch Posts
How to control a React component with the URL
Published: at 01:45 PMThe article on Build UI explains how to sync React components with URL query parameters, focusing on keeping the state consistent between UI elements and the URL. It demonstrates practical steps for using hooks like useSearchParams and useRouter to manage the search input in a React app. By hoisting state into the URL, developers can enable features like back-and-forth navigation, refreshing, and shareable URLs without introducing bugs caused by duplicated states.
Next.js SaaS Starter
Published: at 10:43 AMThe Next.js SaaS Starter offers a comprehensive template for building SaaS applications using Next.js, Postgres, Stripe, and shadcn/ui. It includes features like authentication, subscription management, and CRUD operations for user management. With built-in support for Stripe payments, role-based access control, and a customizable dashboard, the starter is optimized for quick deployment and scalability. It's designed to simplify common tasks such as database integration and form management, making it ideal for developers looking to launch a SaaS product.
Introducing TanStack Router
Published: at 10:34 AMTanStack Router is a powerful and flexible router designed for frameworks like React, Solid, and Vue. It emphasizes performance, modularity, and ease of use, enabling developers to handle complex routing scenarios with minimal boilerplate. The router supports features like route matching, async data loading, and nested layouts, while being framework-agnostic. It’s built to integrate seamlessly with TanStack Query, providing an efficient way to manage both routing and data fetching in modern web applications.
How to Create a Chrome Extension with React, TypeScript, TailwindCSS, and Vite
Published: at 08:53 AMWant to build a Chrome extension using the latest tech stack? This guide walks you through creating a Chrome extension with React, TypeScript, TailwindCSS, and Vite.
You Might Not Need an Effect
Published: at 03:24 PMThe article from the React documentation explains when it is unnecessary to use the useEffect hook. It provides common scenarios where developers mistakenly rely on effects and offers alternative ways to handle logic that don't involve useEffect, such as computing derived state or managing non-reactive values. The article emphasizes cleaner code and avoiding performance issues by using simpler React features instead of overcomplicating state management with effects.
Why You Should Start Using Zod
Published: at 08:01 AMThe article explains why Zod is a valuable tool for developers, especially when working with TypeScript. Zod simplifies validation, improves type safety, and reduces boilerplate code. It allows developers to define schemas and infer TypeScript types from them, making code easier to maintain and more reliable. The article also shows how Zod enhances developer productivity in scenarios like form validation and contract sharing between frontend and backend.
Replacing React code with CSS :has selector
Published: at 07:25 AMThe article explores how the new CSS :has selector can simplify React code by eliminating the need for complex JavaScript logic. It allows for targeting parent elements and handling UI interactions like focus states, form element conditions, and dynamic styling without relying on React's state or re-renders. The post provides examples where using :has improves accessibility, reduces unnecessary React components, and enhances performance.
What’s new in React 19
Published: at 07:17 AMThe article highlights new features in React 19, such as improved server components, better support for streaming, and enhancements to the transitions API. It also discusses changes aimed at simplifying state management and improving performance, like the new useEvent hook. Additionally, React 19 introduces experimental features like the useCache hook for handling asynchronous data more effectively. These updates focus on enhancing the developer experience while pushing performance optimizations for modern web applications.
React and FormData
Published: at 07:12 AMThe article explores how React developers can use FormData, a JavaScript standard, to handle form data in both controlled and uncontrolled components. It covers how to avoid using refs and directly extract form values, while discussing challenges with TypeScript compatibility. The piece also introduces tools like Zod for schema validation and highlights how modern React APIs, especially in version 19, integrate with FormData, with examples from frameworks like Remix.
A beginners guide to using Vite with React
Published: at 01:45 PMA beginner's guide to using Vite with React. Covers setting up a new project, explaining Vite's benefits like fast server start and hot module replacement, project structure overview, working with assets, and basic troubleshooting. Highlights Vite as a modern, efficient alternative to traditional bundlers for React development.