Why React is so popular.

For JSX

“What the hack is JSX?” If I explain, JSX means HTML insides the Javascript. You can write HTML syntax inside JavaScript. So that you can easily make a Dynamic website so fast. So let’s see an example

function HelloWorld(toWhat) {
    return <div>Hello {toWhat}</div>;
}
HelloWorld('World'); 

you can Use JS elements on HTML. It’s crazy, ha! Let’s know some interesting features of React Js

1. You can use the self-closing tag. Like this

<div className="sidebar" />

2. You can define an empty tag if needed

<>...</>

actually empty tag is a shorthand version of <React.Fragment >, which allows you to have multiple op-most elements without wrapping further HTML.

3. After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.

This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions:

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;  }
  return <h1>Hello, Stranger.</h1>;}

Fox Component

ReactJS is all about components. ReactJS application is made up of multiple components, and each component has its own logic and controls. These components can be reusable, which helps you to maintain the code when working on larger-scale projects.

For Virtual DOM

A virtual DOM object is a representation of the original DOM object. It works like a one-way data binding. Whenever any modifications happen in the web application, the entire UI is re-rendered in virtual DOM representation. Then it checks the difference between the previous DOM representation and the new DOM. Once it has been done, the real DOM will update only the things that have actually changed. This makes the application faster, and there is no wastage of memory.

For One-way Data Binding

React’s one-way data binding keeps everything modular and fast. A unidirectional data flow means that when developers design a React app, they often nest child components within parent components. This way, a developer knows where and when an error occurs, giving them better control of the whole web application.

For State

The state is a built-in React object that is used to contain data or information about the component. A component’s state can change over time; whenever it changes, the component re-renders. The state change can happen as a response to user action or system-generated events, and these changes determine the behavior of the component and how it will render.

For Props

Props are short for properties. It is a React built-in object that stores a tag’s attributes and works similar to the HTML attributes. It provides a way to pass data from one component to other components in the same way as arguments are passed in a function.