Gatsby is an open-source framework based on React that helps build websites and apps. It allows you to build your website and apps using React and then generates HTML, CSS, and JS when you build for production. One of the many advantages of using Gatsby is that it allows accessing data through a query language called GraphQL. GraphQL is a query…

It's a common task in React to update an item in a list. Here I want to show you briefly how this works. Every time you want to modify something in React, for example a list where you want to change an item, you have to use React's state management . We will be using React's useState Hook here, for the sake of keeping the first example simple…

It's a common task in React to add an item to a list. Here I want to show you briefly how this works. Every time you want to modify something in React, for example a list where you want to add an item, you have to use React's state management . We will be using React's useState Hook, to keep this first example simple, however, you can also use…

It's a common task in React to remove an item from a list. Here I want to show you briefly how this works. Every time you want to modify something in React, for example a list where you want to remove an item, you have to use React's state management . We will be using React's useState Hook here, for the sake of keeping the first example simple…

In modern React, there are many ways to style a React application with CSS. Whenever I do a React workshop with aspiring React developers, I show only one of these ways due to the limited time I have for the complete React workshop. But often this one way of styling isn't enough to cover the full scope of this important topic. There are many…

Using React ref and really understanding it are two different pair of shoes. To be honest, I am not sure if I understand everything correctly to this date, because it's not as often used as state or side-effects in React and because its API did change quite often in React's past. In this React Ref tutorial, I want to give you a step by step…

Micro Frontends are the equivalent for Microservices: Whereas microservices are an architecture to split up monolithic backend applications into smaller services, micro frontends can be used to achieve the same on the frontend. But they are not as popular as microservices yet. For my last client, I made a experimental spike for a Micro Frontend…

The Road to React teaches the fundamentals of React. You will build a real-world application in plain React without complicated tooling. Everything from project setup to deployment on a server will be explained for you. The book comes with additional referenced reading material and exercises with each chapter. After reading the book, you will be…

Just recently I had to use Docker for my React web application development. Here I want to give you a brief walkthrough on how to achieve it. First of all, we need a React application. Either create a React app yourself, or follow this minimal React with Webpack setup guide . The React + Webpack application can be found on GitHub too. Note: If…