React

In React, the most popular way to render an array of objects is to use the Array.map() method. This method calls a function once for each element in the array: The complete example below will give…

This article walks you through a list of the most popular and modern approaches to persist data locally in React. Some of them are easy to use and great for a small amount of simple data,…

This concise and straight-to-the-point article shows you the fastest and easiest way to detect if the user clicks somewhere outside a specific component in a React application. We’ll discuss the technique to get the job done…

This short and straight-to-the-point article shows you how to set a base path for a React app created with create-react-app and using React Router. The Prefatory Matter There might be situations where you want to run…

This concise and straight-to-the-point article shows you how to use radio buttons in React. We’ll have a look at the fundamentals and then walk through a complete example of applying that knowledge in practice. Note: We’ll…

This succinct and straight-to-the-point article shows you how to check whether the user’s system is in dark mode or light mode. Knowing that thing can help your React app automatically change its color scheme to suit…

If you’re using create-react-app then you can initialize a new project in the current directory with one of the following commands: Or: The point here is to use a dot (.) to set the path. There…

This comprehensive article shows you how to use Styled JSX in a React application created by create-react-app. Overview Before using styled JSX, you need to install the styled-jsx package: No extra configuration is required for the…

In this article, we’ll explore the fundaments of the <Navigate> component in React Router and then walk through a complete example of using it in practice. We’ll use the latest version of React Router (6.x) and…

This article shows you two different ways to open an external link in a new browser tab in React. The first approach uses <a> tag, which is simple and quick but has some limitations. The second…

Tailwind is a popular open-source CSS framework that can help you rapidly build user interfaces. It works very nicely with React and you can style your apps without leaving your Javascript (or TypeScript) code, thanks to…

This article is about the useParams and useSearchParams hooks that come with React Router. We’ll cover the fundamentals of these hooks and then walk through a complete example of using them in practice. Note: We’ll use…