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
Articles on Trending Technologies
Technical articles with clear explanations and examples
How to check if an URL is valid or not using Java?
The URL class of the java.net package represents a Uniform Resource Locator which is used to point a resource(file or, directory or a reference) in the worldwide web.This class provides various constructors one of them accepts a String parameter and constructs an object of the URL class. While passing URL to this method if you used an unknown protocol or haven’t specified any protocol this method throws a MalformedURLException.Similarly, the toURI() method of this class returns an URI object of the current URL. If the current URL is not properly formatted or, syntactically incorrect according to RFC 2396 this method throws ...
Read MoreRestrictions while declaring a generic (type) in Java
Generics is a concept in Java where you can enable a class, interface and, method, accept all (reference) types as parameters. In other words it is the concept which enables the users to choose the reference type that a method, constructor of a class accepts, dynamically. By defining a class as generic you are making it type-safe i.e. it can act up on any datatype.Restrictions on genericsYou cannot use generics in certain ways and in certain scenarios as listed below −You cannot use primitive datatypes with generics.class Student{ T age; Student(T age){ this.age = age; ...
Read MoreFragment in React.js
Most of the times we need to return multiple elements from a component. React Fragment helps in returning multiple elements. The other alternative is to use a html element like div to wrap them. But using extra html node can cause some semantic issues.Example of React.Fragmentrender() { return ( ); } The short syntax is : render() { return ( ...
Read MoreReact.js stateless vs stateful
Understand the difference in stateless and stateful react componentsIn state management post, we learned how we can handle state in react if something is changed.Stateless components are simple functional component without having a local state but remember there is a hook in react to add state behavior in functional component as well.Stateful component can contains the state object and event handling function, user actions as well.Stateless component are pure in nature which does a very specific task.import React from 'react'; const player = (props) => { return ( I'm a Player: ...
Read MoreContext api in React.js
The React context api is safe to use in production with the version 16.3 or latest. The reason for adding context api is to avoid the passing of props if there is a chain of children components.Without the use of context api, we have to pass the props through all the intermediate components. The other alternative solution is to use third party library such as Redux for maintaining a central store.Understanding the passing of props problemApp.js → props for books → BookList.js → passing the books as props again → Book.jsWith the increase in number of children components, the chain ...
Read MoreWhy need build workflow in React.js
BUILDING A WORK-FLOW HELPS IN DOING BELOW THINGSIt optimizes codeUsing next-gen JavaScript (ES6)Its a standard way for single/multiple page appsProductive approachEasy integration of dependencies with NPM or YarnUse of bundler like web-pack for easier modular code and shipping codePre compiler like BabelWe can use a local development server to test appBuilding workflow looks complex but React community has made it simple for us with a single commandcreate-react-app.To use create-react-app, we will need to have node js install on our machine.You can check if node is installed using below command on terminal −node –versionIf not installed already, please install the latest ...
Read MoreUsing useState hook in React.js
Hooks allows the functional component in react to get the features available in class based component in make them more powerful.useState we will import from react. Import {useState} from ‘react’; This helps us in creating local state variables for functional component and provides method to update that variable.State in class is an object, but with useState we can create simple primitive data types and object if we want.const test=()=>{ const [age, setAge] = useState(25); return ( Age: {age} setAge(age+1)}>Increase Age ); ...
Read MorePromises Callbacks And Async/Await
First we have to understand two main conceptsSynchronous programmingAsynchronous programmingSYNCHRONOUS PROGRAMMINGIt waits for each statement to complete its execution before going to next statement.This approach can slow down application process if statements are not dependent on each other but still they are waiting for execution as they are in queue.ASYNCHRONOUS PROGRAMMINGIt does not wait for current statement to complete its execution before moving to next statement. e.g. calling a web service and executing file copy in JavaScript.The call to web service can take some time to return a result meanwhile we can complete some other actions.Once server provides the result, ...
Read MoreReturning adjacent element in React.js and HOC
Generally the return statement in React’s render method returns a single div element enclosing all the child jsx like below −render(){ return ( Header Test ); }Here we cannot simply return multiple elements, we need to have a parent container similar to div as shown above.If no parent container element, then we can even return an array like below −While returning an array we will require an unique key to be given to each element of an arrayrender(){ return ( ...
Read MoreReact.js routing
Before React Router v4, the routing in react was static but after v4 update its dynamic. In single page applications, we have only one page index.html and different components which gets displayed based on routes.In non spa web applications, server returns a page on request. To start with routing , first install the routing package −npm install –save react-router-domOnce we create the create the project with create-react-app, we will see there is only one html file and that is index.html and a single component named as AppNow, we will create two more components AboutUs.jsx and ContactUs.jsxAboutUs.jsximport React from 'react' class ...
Read More