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 More

The React hook useEffect helps in adding componentDidUpdate and componentDidMount combined lifecycle in React’s functional component.So far we know we can add lifecycle methods in stateful component only.To use it, we will need to import it from react −import React, { useEffect } from ‘react’; const tutorials=(props)=>{    useEffect( ()=>{       console.log(‘hello’);       setTimeout( ()=>{ alert(‘hello’); }, 2000);    }); }If we run it, we will see the console log and alert on every render cycle. Here we can call http requests also inside useEffect. Now this is similar to componentDidUpdate lifecycle of stateful component.We can ... Read More

useContext hook allows passing data to children elements without using redux.useContext is a named export in react so we can importin functional components like below −import {useContext} from ‘react’;It’s an easy alternative to Redux if we just need to pass the data to the children elements.Simple example creating a contextimport React, { createContext } from ‘react’; import ReactDOM from ‘react-dom’; const MessageContext = createContext(); myApp=()=>{    return (                                                ); }In child component Test we can ... Read More

Use of proptypes ensures the type safety of receiving props on the components and also helps in making correct calculation.Example − If we are receiving name as string and age as number then it should be received with the same type. If we receive age in string then it can result into incorrect calculation.To use proptypes we have to install below package.npm install –save prop-typesThis package is provided by React Team. To use it on component, we will import it firstimport PropType from ‘prop-types’;we can use it on any type of component (Stateful or stateless).At the end of component before exporting ... Read More

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 More

Styling in React.js can be done in below two wayscss style sheetsinline styleLet’s see CSS style sheets firstWe have App.js file as shown below −import React, {Component} from 'react'; import './App.css'; class App extends Component {    render(){       return (                       Styling React Components                   );    } } export default App;In App.js file we have imported an App.css file which contains css class myColoredTextPlease noteWe used name of css class in double quotes with attribute classNameJSX uses ... Read More

Lets first start with writing a simple HTML code and see how we can use ReactBasic React example  − Create a simple div like below −    Steve    My hobby: Cricket Add some styling elements.player{    border:1px solid #eee;    width:200px;    box-shadow:0 2px 2px #ccc;    padding: 22px;    display:inline-block;    margin:10px; }This is just like normal html data in web app. Now, we may have multiple same players and we then have to replicate the same div like below    David    My hobby: Cricket These div are same in structure but having different data inside. Here, ... Read More

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 More

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 More

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