Tag: react
All the articles with the tag "react".
Tech Watch Posts
Google OAuth in React: A Beginner’s Guide to Authentication
Published: at 02:21 PMHow to use Google Identity Services as the authentication provider in a React application, a step-by-step tutorial.
The magic of keeping one level of abstraction per function
Published: at 03:33 PMThis article explains the importance of maintaining a single abstraction level within functions, a technique that enhances readability and simplifies debugging. By keeping each function focused on a single level of detail, developers can create cleaner, more maintainable code. The post provides examples to illustrate this concept, highlighting its role in writing effective, understandable functions.
The styling dilemma in React
Published: at 03:18 PMThis article discusses various styling methods available in React, such as CSS modules, styled-components, and Tailwind CSS, each offering unique advantages and challenges. It guides developers through key considerations when selecting a styling approach, focusing on factors like scalability, performance, and maintainability to help make informed decisions.
TIL: inline event handlers still fire when passed to React's dangerouslySetInnerHTML
Published: at 03:10 PMThis article explores best practices for handling dangerouslySetInnerHTML in React, a method used to insert HTML directly into components. While it's powerful, improper use can lead to security vulnerabilities like XSS attacks. The post highlights ways to improve security when using this feature, ensuring safer HTML handling in React applications.
Guide to Error & Exception Handling in React
Published: at 01:04 PMThis guide provides best practices for handling errors and exceptions in React applications. It covers techniques for error boundaries, logging, and monitoring to improve debugging and deliver a smoother user experience.
Handling Form Validation Errors and Resets with useActionState
Published: at 03:21 PMThis article covers using React 19's useActionState hook for form handling, including validation and error management. It shows how to manage form submissions, server-side validation, and state updates while maintaining form data on errors. The post also highlights how to handle form resets and the advantages of progressive enhancement, allowing the form to work even without JavaScript. Alternatives like Reach Hook Form are also mentioned for managing form state.
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.