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…
Every year I want to give you a brief overview of how to start a new React project. I want to reflect on advantages and disadvantages, on the skill-level needed as a developer, and on what features each starter project has to offer for you as a React developer. At the end you will know about 3 solutions for different requirements. Note: The…
React has been around for a while. Since then, a well-rounded yet overwhelming ecosystem of libraries evolved around the component driven library. Developers coming from other programming languages or libraries/frameworks often have a hard time figuring out all the libraries for creating web applications with React. At its core, React enables one…
The JavaScript and web development community evolves quickly and new frameworks come and go. There are many people learning React, Angular, Vue or Svelte nowadays. They are not only computer science graduates, like it used to be in the past, but also self-taught programmers coming from bootcamps and other backgrounds. I find it amazing that the…
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…
A brief walkthrough on how to upgrade Vite from JavaScript to TypeScript. The tutorial assumes that you have already created a React project with Vite in JavaScript. To use TypeScript in React (with Vite), install TypeScript and its dependencies into your application using the command line: Add two TypeScript configuration files; one for the…
How to learn React is high on the agenda for plenty of JavaScript developers this year. The recent State of JS survey has shown that many developers choose React for creating modern web applications. Due to its popularity and job demand, many JavaScript developers want to learn React. Here I want to give beginners a comprehensive overview of how…
