A beginner-friendly React tutorial that walks you through creating a dropdown component by example. In this guide, you'll learn step by step how to build a dropdown in React. While HTML offers a built-in select element for similar functionality, React doesn't have such native primitives for dropdown components. First, we need a HTML button element…
Since React's release in 2013, various component types have emerged. Some are still essential to modern React applications, while others are mostly found in older projects (deprecated). This guide provides beginners with an overview of modern components and patterns, explaining which are still relevant and why some are no longer used. By the end…
There are multiple ways to fetch data in React from a remote API. Here we want to explore all the options available for data fetching in React that were introduced over the years and are still in use today. While some of them are newer and recommended, others are less recommended and should be avoided in most cases. Let's jump right in. We will…
React, with its addition of Server Components and Server Actions, is evolving into a full-stack framework. Once the most popular frontend framework, it has now successfully bridged the gap between frontend and backend to reign over both sides of the chasm. I'm writing this article because the following illustration has been on my mind. When the…
Here you will learn how to use a form button in React to trigger a server action in a Server Component without any form fields or form data. This can be useful if you want to trigger a server action with a button click, but don't want to use a Client Component to assign a click event handler. React Button in a Client Component We will start with a…
In this short tutorial, you will learn how to pass extra arguments to server actions in React forms. We will start with the following React form component that updates a post: In the above code snippet, the updatePost function is called when the form is submitted. The form action receives the raw form data as an argument and can extra the data…
In this short tutorial, you will learn about multiple ways to show a loading spinner in React forms when using actions with a pending state. You can use the loading state to indicate that the form is submitting and prevent users from submitting the form multiple times. We will start with the following React form component that sends a message: In…
The year 2024 got me excited about React's ecosystem again. Despite the various challenges and dramas (the biggest one of them moving React to the server with React Server Components) we had last year, there are emerging React trends that everyone should have on their watchlist. Here is my list of exciting React trends for 2024. Astro (with React…
In this article, you will find a step by step guide on how to install React on MacOS. It follows the philosophy of having one IDE to manage most of your web development tasks. That's how you can focus on your task at hand as a developer. However, if you like to compose your development environment with lightweight tools rather than with an full…
In this article, you will find a step by step guide on how to install React on Windows. There are plenty of articles out there on how to setup your web development environment on MacOS, but very few on how to setup it on Windows. Especially when people want to enter the world of React.js in Windows, there is a missing starting point. I wanted to…
