Anil Singh | Code-sample.com

How come React became so popular, and remains the hottest framework to work with? Each and every technology seems to have the same goal – easier, faster, and ultimately, better. Let’s see. 1.       Performance 2.       Speed & User Experience 3.       Backward Compatibility 4.       Development Speed 5.       Popularity 6.       Effective Testing 7.       Modularity Let see the below image for Popularity – React vs Angular – a Quick Comparison

Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag! React doesn’t like siblings. More specifically, it doesn’t allow siblings in a return function while rendering. We should put your component between enclosing tags, Wrong ways! import   React   from   'react' ; class   MyComponents   extends   React . Component  {      render () {          return  (              < MyComponent1 />              < MyComponent2 />              < MyComponent3 />         );     } } export   default   MyComponents ; Correct Ways! import   React   from   'react'...

The getDerivedStateFromProps Method  - The  getDerivedStateFromProps()  method is called before rendering the elements in the DOM. The  getDerivedStateFromProps()  method is called right before the render method and after the constructor method. We can set the state object based on the initial props and it takes state as an argument, and returns an object with changes to the state. Explore to Understand   -  React Lifecycle Components We can update the constructor state in the  getDerivedStateFromProps()  method. As an Example , public   class   Header   extends   React . Component  {    constructor ( props ) {      super ( props );      this . state  = { msg:   "welcome!" };   }    static   getDerivedStateFromProps ( props ,  state ) {      return ...

The Constructor Method  - The  constructor()  method is called when the component is initiated (before anything else). Here we can set up the initial state and other initial values. The  constructor()  method is called with the props, as arguments and we should always start by calling the  super(props)  before initiated anything else. Explore to Understand   -  React Lifecycle Components As an Example, import   React   from   'react' ; class   Header   extends   React . Component  {    constructor ( props ) {      super ( props );      this . state  = { msg:   "welcome!" };   }    render () {      return  (       < h2 >{ this . state . msg } you anil</ h2 >     );   } } ...