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
Web Development Articles
Page 792 of 801
Difference Between WordPress.com and WordPress.org
In this post, we will understand the difference between wordpress.com and wordpress.org −Wordpress.orgIt is also known as the real WordPress.It is open source, and can be used by anyone.A domain name and a web hosting service is required to use this.It is also referred to as self-hosted WordPress.User has full control of the website.WordPress plugins that are free, or paid can be added to the website.The website and all of its data is owned by the user.Google analytics can be used to perform customized analytics.Advertisements can be run and revenue can be generated.User has to keep several backups of the ...
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 MoreReactJS – useCallback hook
In this article, we are going to see how to optimize a React application by passing a memoized function.This hook is used to optimize a React application by returning a memoized function which helps to prevent unnecessary re-rendering of a function. This hook stores the cached value of the function and only updates the function if the passed dependencies changes.Syntaxconst memoizedCallback = useCallback(() => {doSomething(a, b); }, [a, b], );Here, doSomething() function will only be called again on the next re-render if the values of a or b changes; otherwise only the cached version of the function is passed.Note: useCallback(fn, ...
Read MoreReactJS – shouldComponentUpdate() method
In this article, we are going to see how to increase the performance of React application by rerendering the component only when the props passed to it changes or on when certain conditions are met.This method is majorly used to take an exit from the complex React lifecycle, but using it extensively may lead to bugs in the application.SyntaxshouldComponentUpdate(nextProps, nextState)By default, the return value of this method is true; but if it returns false, then the render(), componentWillUpdate() and componentDidUpdate() methods are not called.Example 1In this example, we will build a React application with components only getting re-rendered if the ...
Read MoreReactJS – getDerivedStateFromProps() Method
In this article, we are going to see how to execute a function before the component is rendered.This method is called before the rendering or before any updation of the component. This method is majorly used to update the state, before the rendering of the component, which depends upon the props received by the component. This method is called on every rerendering of the component.Syntaxstatic getDerivedStateFromProps(props, state)Parametersprops − Props passed to componentstate − Previous state of componentExampleIn this example, we will build a React application which will fetch the list of users and on clicking the 'fetch user' button, the ...
Read More