- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 198 Articles for React JS
![Rushi Javiya](https://www.tutorialspoint.com/assets/profiles/576280/profile/60_2555583-1672217268.jpg)
4K+ Views
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
![Rushi Javiya](https://www.tutorialspoint.com/assets/profiles/576280/profile/60_2555583-1672217268.jpg)
2K+ Views
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
![Rushi Javiya](https://www.tutorialspoint.com/assets/profiles/576280/profile/60_2555583-1672217268.jpg)
4K+ Views
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
![Rushi Javiya](https://www.tutorialspoint.com/assets/profiles/576280/profile/60_2555583-1672217268.jpg)
2K+ Views
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
![Rohan Singh](https://www.tutorialspoint.com/assets/profiles/638564/profile/60_146647-1681360804.jpg)
2K+ Views
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
![Rohan Singh](https://www.tutorialspoint.com/assets/profiles/638564/profile/60_146647-1681360804.jpg)
1K+ Views
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
![Rohan Singh](https://www.tutorialspoint.com/assets/profiles/638564/profile/60_146647-1681360804.jpg)
1K+ Views
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
![Rushi Javiya](https://www.tutorialspoint.com/assets/profiles/576280/profile/60_2555583-1672217268.jpg)
4K+ Views
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
![Rushi Javiya](https://www.tutorialspoint.com/assets/profiles/576280/profile/60_2555583-1672217268.jpg)
794 Views
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
![Shubham Vora](https://www.tutorialspoint.com/assets/profiles/485898/profile/60_1456867-1657516792.jpeg)
606 Views
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