10 — Things You Need To Know About React.

10 — Things You Need To Know About React.

1. Understand Virtual Dom Working.

React uses virtual DOM to enhance its performance. It uses the observable to detect state and prop changes. React uses an efficient diff algorithm to compare the versions of virtual DOM. It then makes sure that batched updates are sent to the real DOM for repainting or re-rendering of the UI

How Does Virtual DOM Work? Like the actual DOM, the Virtual DOM is a node tree that lists elements and their attributes and content as objects and properties. React’s render() method creates a node tree from React components and updates this tree in response to mutations in the data model, caused by actions.

2. Understanding The Virtual DOM

Now that you know how the DOM is build, let us now look more into Virtual DOM. So here I will use a small app and explain how virtual DOM works. So that it becomes easy for you to visualize it.
I will not go into details of how things work during initial render, but will focus on what happens when you re-render as that is what will help you to understand how the virtual-dom and diffing works. Once you are clear with this, understanding initial rendering is just a breeze ❤

3. What Is Props In React

Props are arguments passed into React components. Props are passed to components via HTML attributes. React Props are like function arguments in JavaScript and attributes in HTML. To send props into a component, use the same syntax as HTML attributes.

For a React component created using the ES6 class syntax, you can set default props by adding a static property named defaultProps to the component class. The defaultProps static property should be set to an object representing the default props for the component.

4. Why do we use state in react?

React components has a built-in state object. The state object is where you store property values that belongs to the component. When the state object changes, the component re-renders.

Always use the setState() method to change the state object, it will ensure that the component knows its been updated and calls the render() method (and all the other lifecycle methods).

5. React Is All About Components

In React, we describe UIs using components that are reusable, composable, and stateful. We define small components and then put them together to form bigger ones. All components small or big are reusable, even across different projects. You can think of components as simple functions (in any programming language). We call functions with some input and they give us some output. We can reuse functions as needed and compose bigger functions from smaller ones. React components are exactly the same; their input is a set of “props” and their output is a description of a UI. We can reuse a single component in multiple UIs and components can contain other components. The basic form of a React component is actually a plain-old JavaScript function. Some React components are pure but you can also introduce side effects in a component. For example, a component might change the HTML “title” of a web page when it gets mounted in the browser or it might scroll the browser view into a certain position.
Most importantly, a React component can have a private state to hold data that may change over the lifecycle of the component. This private state is an implicit part of the input that drives the component’s output and that’s actually what gives React its name.

6. React Functional Components VS Class Components

Functional Components

• Functional components are basic JavaScript functions. These are typically arrow functions but can also be created with the regular function keyword.
• Sometimes referred to as “dumb” or “stateless” components as they simply accept data and display them in some form; that is they are mainly responsible for rendering UI.
• React lifecycle methods (for example, componentDidMount) cannot be used in functional components.
• There is no render method used in functional components.
• These are mainly responsible for UI and are typically presentational only (For example, a Button component).
• Functional components can accept and use props.
• Functional components should be favored if you do not need to make use of React state.

import React from "react";

const Programming = props => (
  <div>
    <h1>Hello Programming Hero, {props.name}</h1>
);

export default Programming;

Class Components

• Class components make use of ES6 class and extend the Component class in React.
• Sometimes called “smart” or “stateful” components as they tend to implement logic and state.
• React lifecycle methods can be used inside class components (for example, componentDidMount).
• You pass props down to class components and access them with this.props

import React, { Component } from "react";

class Hero extends Component {
  constructor(props){
    super(props);
    this.state = {
      myState: true;
    }
  }
  
  render() {
    return (
      <div>
        <h1>Hello Programming Hero Boys</h1>
      </div>
    );
  }
}

export default Hero;

7. Benefits of Components

By using components we can easily use a task many times in many places. components make our work much easier.

Below are some of the benefits of components.

1. It facilitates the overall process of writing components.

2. It boosts productivity and facilitates further maintenance.

3. It ensures faster rendering.

4. It guarantees stable code.

5. It is SEO friendly.

6. It is focused and easy-to-learn.

8.