A quick React Router 7 example which should get you up and running. The code for this React Router v7 tutorial can be found over here . The example features the matching between Routes and Links, a so-called Layout Route for encapsulating components within the same layout (see Layout component), a so-called Index Route loaded with the Home…
A React Router tutorial which teaches you how to perform a Redirect in React Router 7 . The code for this React Router v7 tutorial can be found over here . We will start off with a minimal React project that uses React Router to navigate a user from one page to another page: In this function component we have matching Link and Route components…
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…
