Introdução ao ReactJS: Vamos entender isso com um exemplo prático.

Digamos que um de seus amigos postou uma fotografia no Facebook. Agora você vai e curtiu a imagem e então começou a conferir os comentários também. Agora, enquanto você está navegando nos comentários, vê que a contagem de curtidas aumentou em 100, pois você gostou da foto, mesmo sem recarregar a página. Essa mudança mágica na contagem é por causa de Reactjs. 
React é uma biblioteca JavaScript declarativa, eficiente e flexível para construir interfaces de usuário. É 'V' em MVC. ReactJS é uma biblioteca de front-end baseada em componentes de código aberto responsável apenas pela camada de visualização do aplicativo. É mantido pelo Facebook.
O React usa um paradigma declarativo que torna mais fácil raciocinar sobre seu aplicativo e tem como objetivo ser eficiente e flexível. Ele projeta visualizações simples para cada estado em seu aplicativo, e o React atualizará e renderizará com eficiência o componente certo quando seus dados forem alterados. A visão declarativa torna seu código mais previsível e fácil de depurar.
Um aplicativo React é feito de vários componentes, cada um responsável por renderizar uma pequena parte reutilizável de HTML. Os componentes podem ser aninhados em outros componentes para permitir que aplicativos complexos sejam construídos a partir de blocos de construção simples. Um componente também pode manter um estado interno - por exemplo, um componente TabList pode armazenar uma variável correspondente à guia aberta no momento.

Nota: React não é uma estrutura. É apenas uma biblioteca desenvolvida pelo Facebook para resolver alguns problemas que enfrentávamos anteriormente.
Pré - requisitos : Baixe os pacotes do Node com sua versão mais recente.

Exemplo:  crie um novo projeto React usando o comando abaixo:

npx create-react-app myapp

Nome do arquivo App.js: Agora altere o arquivo App.js com o código fornecido a seguir:

import React,{ Component }  from 'react';
 
class App extends Component {
 
  render() {
    return (    
       <div>
         <h1>Hello, Learner.Welcome to GeeksforGeeks.</h1>
       </div>
 
    );
  }
}
    
export default App;

Saída: 

Como funciona:  ao construir aplicativos do lado do cliente, uma equipe de desenvolvedores do Facebook percebeu que o DOM é lento (o Document Object Model (DOM) é uma interface de programação de aplicativos (API) para documentos HTML e XML. Ele define a estrutura lógica de documentos e a forma como um documento é acessado e manipulado.). Portanto, para torná-lo mais rápido, o React implementa um DOM virtual que é basicamente uma representação de árvore do DOM em JavaScript. Portanto, quando precisar ler ou gravar no DOM, ele usará a representação virtual dele. Em seguida, o DOM virtual tentará encontrar a maneira mais eficiente de atualizar o DOM do navegador.
Ao contrário dos elementos DOM do navegador, os elementos React são objetos simples e baratos de criar. O React DOM cuida da atualização do DOM para corresponder aos elementos do React. A razão para isso é que o JavaScript é muito rápido e vale a pena manter uma árvore DOM nele para acelerar sua manipulação.
Embora o React tenha sido concebido para ser usado no navegador, devido ao seu design também pode ser usado no servidor com Node.js.