Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Front End Technology Articles
Page 627 of 652
How to validate Octal number in ReactJS?
There are various types of number representation available such as decimal, hexadecimal, binary, octal, etc. The octal number is a number value by taking the base-8, and it accepts only numbers between 0 to 8. Here, we will learn to validate the octal number. We need to check that all characters of the octal number string should be numeric and between 1 to 8. Use the regular expression to validate octal number in ReactJS The best approach to validate the octal number is using the regular expression. We can use the test() method with the regular expression to ensure ...
Read MoreHow to validate a credit card number in ReactJS?
When a bank issue any credit or debit card number, they don’t generate the random numbers for the card. They follow some rules to issue a new card number. They first validate the card number using the Luhn algorithm and check if it starts with a particular number. Here, we will learn different approaches to validating credit card numbers. Use the React Creditcard Validator NPM Package The react creditcard validator is an NPM package, allowing us to validate the card number. Whenever a user enters the credit card number, It checks which type of card it is. For ...
Read MoreHow to use TextField Component in Material UI?
The Material UI library provides various react components, and TextField is one of them. We can use the TextField component to take user input and use it inside the form. Whatever operation we can perform with the HTML input field, we can also perform with the TextField component. For example, we can use events and attributes with the TextField component, which we can use with the normal input field component. The main benefit of using the TextField component is its well-designed design. Users can execute the below command in the project directory to install the Material UI library. npm ...
Read MoreHow to use Slider Component in Material UI?
The slider is an important feature for any application to improve the UX of the application. For example, if you want to allow users to choose any value between 1 to 100, it would be better to use the slider than the custom number input field. The Material UI provides the pre-designed Slider component. Also, it contains the different variants of the Slider component. We can pass the props to the Slider component to custom it Execute the below command in the project directory to install the Material UI in the React application. npm i @mui/material @emotion/react @emotion/style ...
Read MoreHow to use Radio Component in Material UI?
The radio button is used to allow users to choose any one value among a group of values. For example, the best use case of the radio button is allowing users to choose a gender in the form. The material UI provides the pre-designed Radio component, which we can use to create a group of radio buttons. Users can use the below command in the terminal to install the Material UI library in the React project. npm install @mui/material @emotion/react @emotion/styled Syntax Users can follow the syntax below to use the Radio component of the ...
Read MoreHow to sorting an array without using loops in Node.js?
In Node.js, a built-in sort() method is available to sort an array without a headache. However, as a beginner to learn how the sort() method works internally, users should learn various sorting algorithms. In this tutorial, we will learn a different algorithm to sort an array without using loops in NodeJS. Use the setInterval() method The setInterval() method allows us to invoke any particular function after each interval. Also, we can store the id of the setInterval() method in any variable and use it later to clear the interval. So, we can call a callback function in the ...
Read MoreHow to create a dynamic search box in ReactJS?
Search is one of the most important functionalities of the website. It allows users to filter products and search for specific things on the website, reducing the time users find particular things on the website. For example, you can see a search bar at the top of this page. Whenever we enter any search input, it shows us a search result by filtering the courses and tutorials based on the search result. This tutorial will teach us to implement dynamic search from scratch in ReactJS. Use the AutoComplete Component of Material UI The Material UI library contains various ...
Read MoreHow to create Accordion in ReactJS?
A UI element called an accordion enables user to expand and compress content portions. A great method to add interactivity to your online application and make it simpler for visitors to explore and find the information they need is to create an accordion in ReactJS. This article will walk you through the steps required to create an accordion in ReactJS and provide sample code to get you started. Step 1: Setting up the React Project To get started, you must have a React project set up. The create-react-app command can create a new project if you don't currently ...
Read MoreHow to create a simple counter Using ReactJS?
Your online application can benefit greatly from adding interactivity by utilizing ReactJS to create a straightforward counter. In this tutorial, we will outline the procedures needed to build a straightforward counter using ReactJS and offer some sample code to get you started. Step 1: Setting up the React Project To get started, you will need to have a React project set up. If you don't already have one, you can use the create-react-app command to set up a new react project. npx create-react-app counter-app cd counter-app npm start This will set up a new project in a ...
Read MoreHow to Create a Responsive Like Button in ReactJS?
Creating a responsive like button in ReactJS is a fantastic method to increase the interactivity of your web application. The steps required to create a responsive like button in ReactJS will be discussed in this blog post, along with some sample code, to get you started. Let's first examine a React component's basic structure. A React component is a JavaScript function that generates a React element. A React element is a straightforward JavaScript object that describes a DOM node. A button element that a user can click to express their approval of a piece of material would be a ...
Read More