Found 198 Articles for React JS

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 More

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 More

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 More

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 More

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 More

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

In ReactJS, refs are used to referring any node of the document. Generally, we can pass the props to children elements to interact with children from the parent’s state. Still, sometimes the child component is out of the typical dataflow of components. For example, we have four components, and dataflow is second is a child of the first, third is a child of the second, and fourth is a child of the third component. To interact with the fourth component from the first component, passing props from every component is not good practice. So, we can use refs to interact ... Read More

We can use the progress bar to track how many percentage of a particular task is completed. Maybe you have seen the progress bar on many websites while uploading a file, and it is one of the best use cases of the progress bar to show the uploaded percentage of uploading the file. Another best use case of the progress bar is showing the download completion percentage. We can use different CSS styles for the progress bar to animate and improve user experience. In this tutorial, we will learn to create a progress bar using libraries and from scratch ... Read More

We can assume that you have used mobile devices to call someone and seen the contact list. Generally, when you open the phone book on most mobile devices, it will show you three sections. The first is a keypad to dial a custom number, the second is recent calls, and the third is saved contacts in the device. The recent contact section shows recent calls with names, numbers, and call duration. The normal contact list section shows your contact name with your contact number. Here, we will design a contact list in ReactJS using the basic functionalities of ReactJS. ... Read More

Image slider is crucial in any web application to show multiple images with good UX. Whenever we go on any prestigious site like amazon.com or cardekho.com, they show images in the slider, and these websites need to show multiple images for every product. Now, what if they show every single image without a slider, users can’t see the image properly, and it looks worst. So, in this tutorial, we will learn various approaches to creating an image slider in ReactJS. Use the react-simple-image-slider Npm package The react-simple-image-slider allows us to create an image slider in ReactJS. Users ... Read More