React in 2 minutes

React is a Javascript(JS) library, developed by facebook in 2013.

Main differentiating factor between React and other JS frameworks and libraries was the JSX(Javascript Syntax and XML), it allowed users to put in HTML inside JS Code.

But main reason for React's rise to the top was the concept of 'virtual DOM'.

Elements in web can be represented as DOM tree:

Whenever you interact on a webpage, the change is reflected to the DOM tree. While the updates to the DOM take time, the updates to the virtual DOM can be done faster. The changes are then batched together and sent to update the Real DOM
<Virtual DOM image>

We make use of components in React, which are logical reusable piece of code. Components can be written in a form of either classes, or as simply as a function.

The return value from the functions can be in a form of JSX, which is later transpiled into regular markup so that browsers can understand.

jsx
const showItem = () => {
  return <div> My Item </div>
}

When we interact with a React app, we make changes to the UI, which can be in form of:

Props: Arguments passed into a component
State: Internal state of a component

Example of props:

jsx
function displayItems(props){
  return <div>{props.items}</div>
}

Example of state:

jsx
import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

React has a massive ecosystem surrounding itself, you can use any open source libraries to go along react, for example:
For Forms: Formik
State Management: Redux, Flux, Mobx

For Server Side Rendering: Next.js
For Static sites: Gatsby

React is the most popular UI library of the recent times, and comes with lots of Jobs if you decide to keep it in your kitty.