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
Articles on Trending Technologies
Technical articles with clear explanations and examples
Express.js – app.enable() Method
The app.enable() function sets the Boolean setting ‘name’ to ‘true’, where name defines one of the properties from the app settings table. Using the app.set('foo', true) for a Boolean property is same as calling the app.enable('foo') function.Syntaxapp.enable(name)Example 1Create a file with the name "appEnable.js" and copy the following code snippet. After creating the file, use the command "node appEnable.js" to run this code.// app.enable() Method Demo Example // Importing the express module const express = require('express'); // Initializing the express and port number var app = express(); // Initializing the router from express var router = express.Router(); ...
Read MoreExpress.js – app.disable() Method
The app.disable() method disables the setting name passed in the function. This method sets the setting name to False. We can perform the same function by using the app.set() method too, by passing its value as False.Syntaxapp.disable(name)Example 1Create a file with the name "appDisable.js" and copy the following code snippet. After creating the file, use the command "node appDisable.js" to run this code.// app.disable() Method Demo Example // Importing the express module const express = require('express'); // Initializing the express and port number var app = express(); // Initializing the router from express var router = express.Router(); ...
Read MoreExpress.js – app.delete() Method
The app.delete() method routes all the HTTP DELETE requests to the specified path with the specified callback functions.Syntaxapp.delete(path, callback, [callback])Parameterspath − This is the path for which the middleware function is invoked. A path can be a string, path pattern, a regular expression, or an array of all these.callback − These are the middleware functions or a series of middleware functions that act like a middleware except that these callbacks can invoke next (route).Example 1Create a file "appDelete.js" and copy the following code snippet. After creating the file, use the command "node appDelete.js" to run this code.// app.delete() Method Demo ...
Read MoreExpress.js – app.all() Method
The app.all() method can be used for all types of routings of a HTTP request, i.e., for POST, GET, PUT, DELETE, etc., requests that are made to any specific route. It can map app types of requests with the only condition that the route should match.Syntaxapp.path(path, callback, [callback])Parameterspath − This is the path for which the middleware function is invoked. A path can be a string, path pattern, a regular expression or an array of all these.callback − These are the middleware functions or a series of middleware functions that act like a middleware except that these callbacks can invoke ...
Read MoreAdding an animated loader and splash screen in a React Native app
In this article, we will see how to implement a Lottie animation in a React Native app. Lottie is an open source animation file format that’s tiny, high quality, interactive, and can be manipulated at runtime. Lottie animations are mainly used for loader screen or as a start screen.So, let's add a Lottie animation to our React Native mobile app.ExampleGo to the official Lottie animation website and download Lottie JSON.Link to animation that I am going to use −https://lottiefiles.com/74546-character-02# /Name the JSON file "myloader.json" and keep it at the same level as App.js.Now install the lottie-react-native packagenpm i --save lottie-react-nativeLottie ...
Read MoreCreating a QR Code of a link in React JS
In this article, we will see how to create a QR code of a link in React JS. A QR code is a two-dimensional barcode that is readable on smartphones. You must have seen QR codes on websites that you can scan which redirects you to a page. For example, to access WhatsApp from your laptop, you can go to "web.whatsapp.com" and then open WhatsApp on your phone and scan the given QR code.ExampleFirst create a React project −npx create-react-app tutorialpurposeGo to the project directory −cd tutorialpurposeInstall the qrcode.react package −npm i --save qrcode.reactThis library is going to help us ...
Read MoreCreating a Sky shader in React using React-Three-Fiber
In this article, we will see how to create a Sky shader in React JS using React-Three-Fiber. It will appear to look like original sky and it is really a great effect. Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGLExampleFirst install the following packages −npm i --save @react-three/fiber npm i --save @react-three/dreireact-three/fiber will be used as an intermediate between threejs and React.js and drei will be used to implement premade optimizable sky effect in it.Now, insert the following piece of code in App.js ...
Read MoreSVG morphing in React JS
SVG morphing is quite useful where you can morph SVG images with a beautiful animation which will look really great. It is a technique to give a transition between two SVG images when one SVG changes to another SVG.First create a React project −npx create-react-app tutorialpurposeGo to the project directory −cd tutorialpurposeExampleDownload and install the react-svg-morph package −npm install react-svg-morph --saveThis package will allow us to implement premade morphing animation to our SVGs.Add the following lines of code in App.js −import React from "react"; import ReactDOM from "react-dom"; import { MorphReplace } from "react-svg-morph"; class Checked extends React.Component { ...
Read MoreSVG drawing in React JS frontend
In this article, we will see how to create an interface on which a user can create drawings, write names, and pretty much any artistic work. You can use this feature to allow users to sign on a page. Here we will use the "react-hooks-svgdrawing" package.First create a React project −npx create-react-app tutorialpurposeGo to the project directory −cd tutorialpurposeExampleInstall the react-hooks-svgdrawing package −npm i --save react-hooks-svgdrawingThis library will be used to implement the container which will allow us to make a drawing or anything in the form of SVG using mouse or touchpad.Add the following lines of code in App.js ...
Read MoreSVG zoom-in and zoom-out in React JS
In this article, we will see how to zoom SVG images in React JS. It is really useful in some cases. We will use the react-svg-pan-zoom package to create a feature that will zoom-in or rotate our SVG image.First create a React project −npx create-react-app tutorialpurposeGo to the project directory −cd tutorialpurposeExampleInstall the react-svg-pan-zoom package −npm i --save react-svg-pan-zoomThis package will allow us to implement an area over which we can zoom-in and zoom-out and even rotate an image.Add the following lines of code in App.js −import React, { useRef, useEffect } from "react"; import { UncontrolledReactSVGPanZoom } from "react-svg-panzoom"; ...
Read More