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
Page 15 of 17
Fragment 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 MoreReact.js component lifecycle error handling phase
There are two main methods in error handling. These method are used in the error boundary mechanism in React. We wrap the component ( from where there is a possibility of error occurrences ) in a class which handles the below methods.Static method getDerivedStateFromError(error)componentDidCatch(error, info)Static getDerivedStateFromError(error): As name of the method suggest, we can update state object here based on error received from descended component.componentDidCatch(error, info): we can log the errors using api call. This is helpful in displaying useful error message on screen instead of technical errors.A class can be termed as an error boundary if it implements at ...
Read MoreReact.js Component Lifecycle - Updating phase
The update lifecycle can be triggered by two events −Update of props by parent componentChange in local stateUpdate of props by parent componentcomponentWillReceiveProps(nextProps) −This is the first method which gets called on prop change. It contains one argument nextProps means the newly changed props.Here, we can synchronize local state with props if requiredIf state is not needed to synchronize with props then probably no need to implement this method.Causing side effects should be avoided here. Because if side effects used here, it may results into re-render or performance issues.Now, componentWillReceiveProps is deprecated and replaced by static method getDerivedStateFromProps(props, state). As ...
Read More