In this tutorial, you'll build a simple AI chat app using React.js on Next.js and the OpenAI API. You'll learn how to set up an API route to send prompts to OpenAI and build a frontend that displays the conversation in real time. By the end, you'll have a working full-stack AI application that you can expand upon. In addition, we will also learn…
Every year I discuss the most important trends in the world of React. In this article, we will explore the React trends in 2025 that you should be aware of. Whether you are a beginner or an experienced developer, these trends will help you stay up-to-date with the latest developments in the React ecosystem. React Server Components We've come a long…
In this tutorial we want to explore how to show toast notifications for Server Actions in React when using React's useActionState Hook in combination with useEffect. Feel free to check out the whole implementation in the GitHub repository . Return Toast Response from Server Action In preparation for displaying toast notifications, we need to…
In this tutorial we want to explore how to show toast notifications for Server Actions in React when using React's useActionState Hook. Note: This tutorial has been created following an insightful discussion with Sebastien on X. He suggested an improved solution to my original approach , which we'll explore together. A big thanks to Sebastien…
User feedback is an essential part of a great user experience. In this tutorial, we'll explore how to implement toast notifications when calling Server Actions in React. Therefore we'll create a React Server Component that fetches user data and then allow users to upvote, downvote, and delete entries from a Client Component. Each React Server…
Learning React in 2025 isn't as easy as it used to be. While React enjoyed a period of stability following the release of Hooks in 2019, the landscape is shifting once again—this time, potentially more drastically. In this article, I'll compare two approaches to learning React in 2025: the library-first approach and the framework-first approach. To…
React has been around for quite some time, and over the years, an extensive—yet sometimes overwhelming—ecosystem of libraries has grown around it. Developers transitioning from other languages or frameworks often struggle to navigate all the libraries needed to build web applications with React. At its core, React allows developers to build…
Every year, I want to give you a brief overview of how to start a new React project. I'll reflect on the advantages and disadvantages, the skill level needed as a developer, and the features each starter project offers to you as a React developer. By the end, you'll know about three solutions for different requirements. React with Vite Vite is…
This is a comprehensive tutorial on Monorepos in JavaScript and TypeScript -- which is using state of the art tools for monorepo architectures in projects. You will learn about the following topics from this tutorial. I've become passionate about monorepos, as they've transformed how I approach my work as a freelance developer and contributor 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 three TypeScript configuration files; one for the…
