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
React JS Articles
Found 165 articles
How to create bar chart in react using material UI and Devexpress?
Material UI is a popular React UI library that provides pre-styled components for building modern applications. DevExpress offers the 'dx-react-chart-material-ui' package that seamlessly integrates Material UI styling with powerful charting capabilities. This tutorial demonstrates how to create various types of bar charts using DevExpress charts with Material UI styling in React applications. Prerequisites Install the required packages using these commands: npm install @mui/material @emotion/react @emotion/styled npm install @devexpress/dx-react-chart @devexpress/dx-react-chart-material-ui Basic Syntax The basic structure for creating a DevExpress bar chart with Material UI: ...
Read MoreHow to create a Switch in ReactJS?
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 dark mode and light mode themes in web applications. 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 Node.js and npm ...
Read MoreHow to create Tabs in ReactJS ?
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, ...
Read MoreHow to Declare Constants in React Class?
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 ...
Read MoreHow to update an object with setState in ReactJS?
In React, state objects store component data that can change over time. This tutorial covers how to update state objects using both class components with setState() and functional components with hooks. Using setState() in Class Components The setState() method is used to update state in class components. When updating nested objects, use the spread operator to preserve other properties. Syntax this.setState({ student: { ...this.state.student, fees: new_value, }, }); Example: Updating Simple State Object This example shows how to update a ...
Read MoreHow to Trim White Spaces from input in ReactJS?
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 ...
Read MoreHow to validate a Date in ReactJS?
Sometimes, we require to take the date from the users in string format. Users can make mistakes while entering the date value into the input field, so we need to validate the date string in our application code. Below, we will learn various solutions to validate dates in ReactJS. Using the Validator NPM Package The Validator is an NPM package that contains various methods to validate strings. It includes the isDate() method to validate date strings with any delimiter. It also contains methods to validate emails and phone numbers. Use the below command to install the ...
Read MoreHow to Validate an Email in ReactJS?
Email validation is an important feature we need to add to authentication forms. 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 themselves. Also, we need to validate the email while getting the user's email via contact forms. The user may enter the wrong email format due to some mistake. To correct users' mistakes, we can alert them by showing an error message. Below, we will learn two approaches to validate email addresses in ReactJS using different methods. Using the validator ...
Read MoreConditional Properties Using React with TypeScript
In React with TypeScript, conditional properties allow you to pass props to components only when certain conditions are met. This technique is essential for creating dynamic, interactive user interfaces that respond to state changes and user interactions. TypeScript enhances this pattern by providing type safety, ensuring that your conditional props are correctly typed and helping catch potential runtime errors during development. Understanding Conditional Properties Conditional properties are props that are only set on a component under specific conditions. In React with TypeScript, you can implement this using: Ternary operator - Returns one value if condition ...
Read MoreWorking with forms in React.js
In simple HTML forms, form elements maintain their values internally and submit when the form submission button is clicked. React provides a more controlled approach to handling forms through controlled components. HTML Form Example Form Example User Name: ...
Read More