10 Things About React

1. Components :- Components are like function of JavaScripts and it accept arbitrary inputs and return react elements which is describing what will appear on the screen. The way to define components in ES6 are given below :

class hello extends React.Component{
   render(){
     return <h1>Hello, World {this.props.name}</h1>;
   }
}

2. React Props :- props is the short form of properties. props are arguments which passed into react components. For example : -

React Props –

class x extends React.Component {
    render(){
     return <h1> Hello {this.props.brand}!</h1>
    }
}

3. React state :- state is a kind of object which is inside react components. state is a object where you can store property values which belongs to the component. For example :

React state –

class x extends React.Component { 
   constructor(props) {
      super(props);
      this.state = {brand: "hello"};
 }
 render() {
   return (
     <div>
        <h1>x is</h1>
     </div>
   );
  }
}

4. JSX :- JSX is basically a compromise because instead of writing react components with this “React.createElement” syntax , we may use a syntax very similar to HTML and then use a compiler to convert it into “React.createElement” calls. A compiler which translates one form of syntax to another is known as “transpiler”. Transpiler is used for translate JSX.

5. DOM :- DOM means Document Object Model. It is used in browser programming interface for HTML and XML documents later on which is treats them as a tree structures. Moreover, DOM API is used to change a document structure, style & content. On the other hand React can manage on their state instead of actions on their DOM elements.

6. Virtual DOM :- This is a concept where an ideal or virtual representation of a UI is kept in memory and synced with the real DOM with the help of library , this process known as reconciliation. Moreover, Virtual DOM is implemented by libraries in JavaScript on top of browser API.

7. Lifecycle of Components in React :- There are four main phases in react component life cycle. Those are Mounting, Updating, Unmounting and Error Handling. Mounting means putting elements inside the DOM. Update it occurs when a components are updated and it will update when component’s sate or props changed. Unmounting this is the third phase of life cycle and it’s occur when a components are removed from DOM. Error Handling it works when there is error occurs in rendering.

8. React Context API :- The React context API is a messaging system which is similar in concept to Publish or Subscribe pattern. React Context API is consists of 3 main parts 1) Context 2) Provider 3) Consumer.

9. Default Props :- When we assigning defaultprops object in a components and react renders then the defaultprops will be used unless the parent overrides them.

10. Avoid Reconciliation :- React ignore creating DOM nodes and accessing existing ones beyond necessity, so it can be slower than operations on JavaScript objects. Sometimes it is referred to as a “virtual DOM”, but it works the same as React Native.