Found 198 Articles for React JS

Email validation is an important feature we need to add to the authentication form. Nowadays, most applications use email and a one-time password for authentication. If the user enters the wrong email, they should not be able to authenticate their selves. Also, we need to validate the email while getting the user's email via the contact form. The user may enter the wrong email format due to some mistake. So, to correct users' mistakes, we can alert them by showing the error that you have entered the wrong email. Below, we will learn two approaches to validate the email address ... Read More

Sometimes, we require to take the date from the users' string format. So, users can make mistakes while entering the date value into the input field. So, we need to validate the date string at our end in the application code. Below, we will learn various solutions to validate the date in ReactJs. Use the Validator NPM Package The Validator is an NPM package that contains various methods to validate strings. For example, it contains the isDate() method, and we can validate the date string with any delimiter separated. Also, it contains the methods to validate the email and phone ... Read More

We will learn to trim white spaces from the input in ReactJS. Sometimes, users add unnecessary space at the start or end of the input by mistake. So, as a developer, we need to check if the input string contains the white space at the start or end. If we find white spaces in the input, we should trim it; Otherwise, it can cause issues. For example, we need to store the email in the database, and while registering the email, the user has also added the white spaces by mistake, and we stored the email in the database with ... Read More

ReactJS allows us to define a state object for every component. In the state object, we can add the different variables as a property of the state object. After that, we can use the state variables inside the component to render or perform other operations in the component. This tutorial will teach us to create a state object for the component and update it with various values. Use the setState to update the object in ReactJS The state object is used with the class components in ReactJS. Using the setState() method, we can update the state object. Syntax ... Read More

When developing applications with React, it's necessary to declare constants to store values that remain unchanged throughout the lifecycle of a component or application. Constants can help improve code readability, provide a central location for managing shared values, and enhance maintainability. In this article, we'll explore how to declare constants in a React class component. Importing React To begin, let's assume you have set up your React environment and have a class component ready for use. Before declaring constants, make sure you have imported the necessary libraries. This includes importing React, which is the core library for building user interfaces ... Read More

ReactJS is a popular JavaScript library for building user interfaces. It provides a component−based approach to web development, making it easier to create interactive and dynamic UI elements. Tabs are a common UI pattern used to organize and present content in a user−friendly manner. In this article, we will explore how to create a tab component in ReactJS. Prerequisites Before reading this article, you should have a basic understanding of ReactJS and its core concepts. Make sure you have Node.js and npm (Node Package Manager) installed on your machine. Setting up a new React project First, let's set up a ... Read More

ReactJS is a popular JavaScript library for building user interfaces, and it provides an effective approach to developing interactive components. Toggle switches are frequently used to allow users to switch between a dark mode and a light mode theme in a web application. Toggle switches can also be used to show or hide specific content or sections of a page. In this article, we will explore how to create a toggle switch using ReactJS. Prerequisites Before proceeding with this tutorial, it is assumed that you have a basic understanding of ReactJS and have a development environment set up with ... Read More

In some web applications, we require the user to take a date input. For example, we need to take the user's birth date or any other particular date as input. In such cases, it is a good idea to show the calendar to users and ask them to select the date rather than taking the date input as a string, as users can make mistakes in entering the string. In this tutorial, we will learn to add the calendar component using the built-in react js libraries or create a calendar component from scratch. Using the React-calendar Library to Create ... Read More

The material UI is a popular CSS library that we can use to style the React application. It contains various pre-styled React components that we can use directly in the application by importing them into the code. The 'dx-react-chart-material-ui’ is an NPM package of Devexpress that can connect the material-ui and ‘dx-react-chart’ library of dev express. The ‘dx-react-chart’ is used to create a chart, and material UI is used to style the chart. Users can execute the below command to install the material UI in the React application. npm install @mui/material @emotion/react @emotion/styled Also, execute the below command to ... Read More

Nowadays, OTT platforms are becoming more popular, and people are buying subscriptions to various OTT platforms to watch movies, TV shows, or services. Maybe, you can also start any OTT application. In this tutorial, we will learn to create a movie web application using React JS. However, We will learn to write only the basic code of movie applications. If users want, they can start with the below code and make improvements to create an advanced version of the movie web application. Users should follow the steps below to start with the movie web application. Step 1 − In ... Read More