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
ReactJS Articles
Page 8 of 11
How to set cookies in ReactJS?
In this chapter, we are going to see how to set, remove and retrieve cookies in a React application.Cookies are the data stored in the form of key-value pairs that are used to store information about the user on their computer by the websites that the users browse and use it to verify them.To set or remove the cookies, we are going to use a third-party dependency of react-cookie.Installing the modulenpm install react-cookieOr, yarn add react-cookieNpm is the node package manager which manages our React package but yarn is the more secure, faster and lightweight package manager.Setting up cookiesIn this ...
Read MoreDestructuring of Props in ReactJS
ReactJS is a popular JavaScript library that has gained immense popularity in the last few years. It provides an efficient way to build complex user interfaces with reusable components. One of the essential features that make ReactJS a powerful tool is the way it handles props. Props are properties that are passed down to components, allowing for customization and dynamic rendering of data. Destructuring of Props is a feature in ReactJS that makes it easier to handle props in components. In this tutorial, we'll explore the concept of destructuring in JavaScript and how it can be used in ReactJS to ...
Read MoreDifference Between AngularJS and ReactJS
Two well-liked JavaScript-based front-end web development frameworks used to create contemporary online apps are AngularJS and ReactJS. Although though both frameworks can handle data-driven applications, for example, they differ greatly in terms of their design, programming paradigms, and development strategies. Developers must be aware of the differences between AngularJS and ReactJS in order to choose the best framework for their individual project requirements. We will compare and contrast AngularJS and ReactJS in this lesson, outlining their advantages and disadvantages to assist developers in selecting the ideal framework for their web development projects. What is AngularJS? An open-source front-end web ...
Read MoreHow to Hot-Reload in ReactJS Docker?
Hot-Reloading is adding dynamic functionality to the react application on the web browser. This means if we change something in the code of the application it immediately reflects this change on the web application front. But before “reloading” anything we must know “loading”, that is to make some ReactJs project on the Node Docker container. Creation and Containerization of React App Step 1: React app Use the prebuild commands to create a basic react application. Example $npx create-react-app reactapp Output npx: installed 67 in 19.076s Creating a new React app in /home/hemant/project/reactapp. Installing packages. This might take ...
Read MoreValidate URL in ReactJS
In this article, we are going to see how to validate a URL (Uniform Resource Locator) in a React application.To validate a URL, we are going to install a third-party package of ‘validator’ which is used to validate the URL. Example of a valid and an invalid URL are as follows −Valid URL − https://www.tutorialspoint.com/Invalid URL − https://www.tutorialspointInstalling the modulenpm install validatorORyarn add validatorNpm is the node package manager which manages our React package but yarn is the more secure, faster and lightweight package manager.ExampleIn this example, we will build a React application which takes a URL input from the ...
Read MoreUsing onKeyPress event in ReactJS
In this article, we are going to see how to access the keycode which the user has pressed in a React applicationTo detect the keycode or the key which the user has pressed from his keyboard then React has a predefined onKeyPress event for this. Although it is not fired for all keys like ALT, CTRL, SHIFT, ESC but it can detect other keys properly.The order of event firing is −onKeyDown − Fired when the user is pressing the keyonKeyPress − Fired when the user has pressed the keyonKeyUp − Fired when the user releases the keyExampleIn this example, we will ...
Read MoreSuspense in ReactJS
In this article, we will learn how to show a loader while the component is being lazily loaded.When the components are lazily loaded, it requires a fallback to be shown to indicate that the component is being loaded in the DOM.SyntaxExampleIn this example, we will build a Routing application that lazily loads the component and displays a loader while the component is being loaded lazily.App.jsximport React, { Suspense, lazy } from 'react'; import { BrowserRouter as Router, Route } from 'react-router-dom'; import Loader from './Loader.js'; const Contact = lazy(() => import('./Contact')); const App = () => ( ...
Read MoreStrict Mode in ReactJS
In this article, we are going to see how to highlight potential problems that we might have in a React Application.React.StrictMode is a helper functionality provided by React which allows us to write better React codes. It provides visual feedback in the form of warnings if we don’t follow the React guidelines, but it works only in the development mode.Note: They are unsafe to use while using async await.Use-cases of Strict Mode −Identifying components with unsafe lifecyclesWarning about legacy string ref API usageWarning about deprecated findDOMNode usageDetecting unexpected side effectsDetecting legacy context APIWe can also bind React.StrictMode to work only ...
Read MoreReactJS – useRef hook
In this article, we are going to see how to create a reference to any DOM element in a functional component.This hook is used to access any DOM element in a component and it returns a mutable ref object which will be persisted as long as the component is placed in the DOM.If we pass a ref object to any DOM element, then the .current property to the corresponding DOM node elements will be added whenever the node changes.Syntaxconst refContainer = useRef(initialValue);ExampleIn this example, we will build a React application that passes the ref object to two input fields.When clicked ...
Read MoreReactJS – useLayoutEffect hook
In this article, we are going to see how to set up side-effects or HTTP requests in a functional component.This hook has the similar functioning like that of useEffect hooks but rather than being called out asynchronously, it has a synchronous effect. This hook is used to load the data in the DOM synchronously and also works in the same phase like that of useEffect hook.Note: Use useLayoutEffect hook only if useEffect hooks don't give the expected output.SyntaxuseLayoutEffect()ExampleIn this example, we will build a React application that displays and updates the name synchronously.App.jsximport React, { useLayoutEffect, useState } from 'react'; ...
Read More