All React posts
Create an Interactive Table of Contents for a Next.js Blog with Remark
Updated on · 9 min read|A well-organized and easily navigable TOC significantly enhances the user experience, simplifying the process for readers to find the information they need. In this post, we'll go through the necessary steps to create an interactive TOC for a Next.js blog using Remark, a powerful Markdown processor.
Optimize Redux Development: Simplify Boilerplate Creation with Code Generators and Plop.js
Updated on · 6 min read|Many developers seek ways to simplify their Redux development workflow and improve efficiency. In this article, we'll explore how to speed up your Redux development by automating the process of scaffolding boilerplate code with Plop.js code generators. We'll cover the best practices for using Plop.js in your Redux projects, how it can help you reduce boilerplate, and streamline your development process.
Speed Up Your React Developer Workflow with Plop.js Code Generators
Updated on · 8 min read|As React developers, we often find ourselves setting up new components, connecting them with the existing infrastructure, or scaffolding applications. That's a lot of repetitive manual work, which even though doesn't happen that often, can be quite tedious and frankly, boring. Fortunately, there is a solution that can help us to automate this process and save time: JavaScript code generators.
Add a Dynamic Sitemap to Next.js Website Using Pages or App Directory
Updated on · 6 min read|In this post, we will explore how to add a dynamic sitemap to a Next.js website using the app directory. A sitemap is a file that lists all the pages of a website and helps search engines understand the structure of the site. By the end of this post, you will have a fully functional dynamic sitemap for your Next.js website.
Build a Tic-Tac-Toe Game with TypeScript, React and Minimax
Updated on · 12 min read|In this tutorial we will build a Tic-Tac-Toe game with TypeScript, React, React Hooks, and style it using Styled Components library. Additionally, we'll use the Minimax algorithm to power the AI moves. The final code is available on both GitHub and CodeSandbox.
Display Warning for Unsaved Form Data on Page Exit
Updated on · 4 min read|Few things are more frustrating than losing all the unsaved work when accidentally leaving the page with a form. Therefore, adding a confirmation dialog asking a user to confirm a redirect when they have unsaved form changes is a good UX practice. By displaying this prompt, the user is made aware that they have unsaved changes and allowed to save their work or discard it before proceeding with the redirect.
Advanced Multistep Forms with React Hook Form
Updated on · 6 min read|Previously we have built a simple registration multistep form with React and React Hook Form. This post builds up on that and brings some improvements to the form, namely enabling data saving on step navigation and highlighting the state of each step.
Build a Multistep Form With React Hook Form
Updated on · 7 min read|Multistep forms a.k.a. wizard or funnel forms have a wide range of uses. They are most common when collecting different types of information into one data structure but are also useful to break down very large forms into the less user-intimidating multistep process. In this post, we'll build a basic multistep registration form, which collects the user's info and then presents it in a confirmation view, which can be reviewed and edited before the submission.
Improving React Testing Library Tests
Updated on · 7 min read|Properly written tests can not only help to prevent regressions or buggy code but in the case of RTL also improve the accessibility of components and the user experience in general. In this post, we'll see how to get the most out of RTL tests. I'll provide a collection of what I consider to be good practices when testing, in no particular order of importance.
TypeScript: Typing Form Events In React
Updated on · 7 min read|Handling events in React is very close to how the events on DOM elements are handled. The biggest difference is, however, that React wraps the native DOM events into SyntheticEvent, making them behave slightly differently than the native events. Consequently, typing form events in React is not the same as native events. In this post, we'll see how to type form events in React on the example of a simple component as well as discuss the most common pitfalls.
TypeScript: Typing React UseRef Hook
Updated on · 3 min read|Typing useRef hook in TypeScript seems to be straightforward from the first glance, however there are a few issue that can make it a bit cumbersome. In this article we'll take a look at how to properly type the hook for a few most common use cases.
Simplifying Connected Props with Redux and TypeScript
Updated on · 3 min read|When using Redux-connected components there can multiple sources of props. This means a lot of manual typing and maintaining the types in the future. Luckily Redux has a solution for that.
Testing React Hook Form With React Testing Library
Updated on · 5 min read|In the previous post we added a basic recipe form using React Hook Form. It would be a good idea to add some unit tests for it, to make sure that the form works properly and to catch any future regressions.
Managing Forms with React Hook Form
Updated on · 6 min read|Working with forms in React is notoriously difficult, particularly when there are dynamic fields involved. There exist a number of libraries that make the whole process easier. One of such libraries is React Hook Form.
Building Component Library with Docz and Lerna
Updated on · 8 min read|Component libraries are all the rage these days, with many companies rolling out their own solutions or sticking to a bunch of open source alternatives. Leveraging a component library for UI development, particularly in large teams, has a lot of cool benefits. It allows to take full advantage of modular and reusable UI components, which brings increased speed of development and unifies styles across multiple teams and apps.
Removing Duplicates with Map In JavaScript
Updated on · 3 min read|It is quite common to use Set to remove duplicate items from an array. A bit less-known fact is that Map data structure can also be used to filter out duplicates because it maintains key uniqueness, meaning that there can be no more than one key-value pair with the same key.
Simplifying Code with Maps In JavaScript
Updated on · 4 min read|Map data structure is a relatively less known addition of ES6 to the language. It has a few advantages over objects when it comes to storing collections of key-value pairs. One of the interesting use cases is simplifications of React components that render different JSX based on state variables that are often changing.
The Most Common Mistakes When Using React
Updated on · 5 min read|Answering React-related questions on Stack Overflow, I've noticed that there are a few main categories of issues people have with the library. I've decided to write about the most common ones and show how to handle them in hopes that it'll be helpful to those new to React or anyone in general, who's struggling with its basic concepts.