This article walks you through an end-to-end example of implementing a simple side drawer navigation in React by using the Ant Design library. The Example Preview The web app we are going to build has a…

Ant Design Pro is described as an out-of-box UI solution for enterprise applications, but it is open-source and totally free (its name has the word “Pro”, which can confuse many of us). Ant Design Pro is…

Ant Design is one of the most popular open-source UI libraries for React with a lot of enterprise-level components. This article walks you through 4 examples of using Ant Design buttons in a React application. Installation…

Ant Design provides a set of free, high-quality icons for web applications. you can use this set of icons separately without having to use other Ant Design stuff. This article shows you how to use Ant…

This article shows you how to validate email addresses while the user is typing in React (live validation). Summary Here’re the points: The Steps 1. Create a new React app by running: 2. Remove all the…

Problem When starting a Docker container with a React app inside by performing the following command: Your React app may exit immediately with the output like this: This error is not on your side but caused…

Terms of service (aka TOS) are the legal agreements between a website or an app and a person who wants to use that service. Usually, before a user registers an account, there will be a checkbox…

An easy solution to determine whether your React app is rendering on a mobile device or a computer is to use a library called react-device-detect. A Complete Example Installation: The code: Check it out with the…

The example below shows you how to create a modal dialog from scratch in ReactJS without any third-party libraries. Preview The sample app we’re going to build contains has a green button. When this button gets…

The simple example below shows you how to get the value from an input field in React. App preview The sample app we are going to build has a text input. When the user types something…

Introduction The React Context API is useful for passing data (including numbers, objects, and functions… ) deeply throughout a React app. It makes your life much easier than using multi-level props. The useContext hook is available…

There are various libraries out there to help you create a beautiful pie chart (aka circle chart, pie graph, etc.) in React without any pain. This article will walk you through the most outstanding ones among…