Private Routes in React Router (also called Protected Routes ) require a user being authorized to visit a route (read: page). So if a user is not authorized for a specific page, they cannot access it. The most common example is authentication in a React application where a user can only access the protected pages when they are authorized (which…
A React Router tutorial which teaches you how to use React Router 7 . The code for this React Router v7 tutorial can be found over here . In order to get you started, create a new React project (e.g. Vite ). Afterward, install React Router : The first implementation detail will be telling our React application that we want to use React Router…
React Function Components, also known as React Functional Components , are the status quo for writing modern React applications. In the past, there have been various React Component Types , but with the introduction of React Hooks it's possible to write your entire application with just functions as React components. This in-depth guide shows you…
In a server-driven React world with Server Components and Server Actions, the frontend is seamlessly and type-safely connected to the backend. Since providing server-side feedback is inevitable, whether for authorization, authentication, or other business logic, it makes sense to extend this approach to form validation too. That's why my approach…
There are always new technologies coming out in the React ecosystem. In this article, we will explore one (!) popular React tech stack for full-stack applications in 2025 which will allow you to create your own product (i.e. SaaS) or at least the MVP of it. Why would I write this guide in the first place? I have been working on many projects for…
When building React applications, fetching data is a common task. In this article, we'll explore different data fetching patterns for React components across client and server. It's important to note that this article is not about the different ways to fetch data in React applications , but rather about the patterns for fetching data in React…
React is becoming a full-stack framework with React Server Components and Server Actions. While React Server Components (RSC) allow us to read data in the UI from the database, Server Actions enable us to write data back to the database. Certainly UI and database will be close and simple in a small application, but in a larger application, there…
When submitting a form in React with a form action, you may be confronted with the question of how to handle the FormData when submitting it to the server with an action. Let's start with a straight forward example where a user can create a invoice by using a form. When a user submits the form, the data is sent to the server with a form action…
Against the common opinion that one should charge for value as a freelance developer, over the last years I've made the experience that I like to charge for time. Here comes why I charge my rate based on time and not on value as a freelance React developer ... Scope Creep All of my past clients -- who hired me as a React freelance developer -- were…
When submitting a form in React with a Server Action, you may be confronted with the question of how to (not) reset the form after the server action has been executed. Depending on the framework that you are using on top of React, the form may either reset automatically or you have to reset it manually. The default behavior of a form in React is…
