Top ten important things of React

Today I am going to discuss some important concepts of React. So, let’s start →

#01: What is React?

As we know React is an open-source front-end JavaScript library which is used for building user interfaces, especially for single page application.

#02: What are the major features of React?

The major features of React are:

• It uses VirtualDOM instead of RealDOM considering that RealDOM manipulations are expensive.
• Supports server-side rendering.
• Follows Unidirectional data flow or data binding.
• Uses reusable/composable UI components to develop the view.

#03: What is JSX?

JSX is a XML like syntax extension to ECMAScript. Basically is just provides syntactic sugar for the React.createElement() function.

In the example below text inside <h1> tag return as JavaScript function to the render function.

class App extends React.Component {
  render() {
    return(
      <div>
        <h1>{'Welcome to React world!'}</h1>
      </div>
    )
  }
}

#04: When to use a Class Component over a Function Component?

If the component needs state or lifecycle methods then use the class component otherwise use function component. However, from React 16.8 with the addition of Hooks, you could use state, lifecycle methods, and other features that were only available in-class component right in your function component.

#05: What is the difference between state and props?

Both props and state are plain JavaScript objects. While both of them hold information that influences the output of render, they are different in their functionality with respect to the component. Props get passed to the component similar to function parameters whereas the state is managed within the component similar to variables declared within a function.

#06: What is the difference between HTML and React event handling?

1: In HTML, the event name should be in lowercase:

<button onclick='activateLasers()'>

Whereas in React it follows camelCase convention:

<button onClick={activateLasers}>

2: In HTML, you can return false to prevent default behavior:

<a href='#' onclick='console.log("The link was clicked."); return false;' />

Whereas in React you must call preventDefault() explicitly:

function handleClick(event) {
  event.preventDefault()
  console.log('The link was clicked.')
}

3: In HTML, you need to invoke the function by appending () Whereas in react you should not append () with the function name. (refer "activateLasers" function in the first point for example)

#07: What is Virtual DOM?

The Virtual DOM (VDOM) is an in-memory representation of Real DOM. The representation of a UI is kept in memory and synced with the “real” DOM. It’s a step that happens between the render function being called and the displaying of elements on the screen. This entire process is called reconciliation.

#08: How virtual DOM Works?

Virtual DOM works in three simple steps.

1. Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.

virtual DOM

2: Then the difference between the previous DOM representation and the new one is calculated.

3: Once the calculations are done, the real DOM will be updated with only the things that have actually changed.

#09: What are controlled components?

A component that controls the input elements within the forms on subsequent user input is called Controlled Component, i.e, every state mutation will have an associated handler function.

For example, to write all the names in uppercase letters, we use handleChange as below,

handleChange(event) {
  this.setState({value: event.target.value.toUpperCase()})
}

#10: What are the uncontrolled components?

The Uncontrolled Components are the ones that store their own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

In the below UserProfile component, the name input is accessed using ref.

class UserProfile extends React.Component {
  constructor(props) {
    super(props)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.input = React.createRef()
  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value)
    event.preventDefault()
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          {'Name:'}
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

In most cases, it’s recommended to use controlled components to implement forms.

No more today. If you want to know more please search google and keep learning. If I make any mistakes please inform me. I will try my best to solve it. Thank you all.