¿Qué es React JS?

Pensaba que había hablado ya de React JS en otros posts, pero he hecho una revisión rápida y no había comentando nunca nada. Así que vamos allá.

React JS es una librería orientada a ayudarnos en la creación de interfaces de usuario, no es un framework cómo Angular que trae su propio conjunto de reglas y su manera estricta de hacer las cosas.

A día de hoy es sin duda la librería de JS más utilizada a nivel de desarrollo web.

React JS gestiona su propio Virtual DOM (Document Object Model), este DOM es la representación en código del HTML de una página.

Sin React cuando modificas algún elemento del DOM el navegador borra el DOM de la página por completo y lo reescribe desde cero, con React se sobreescribe solo la parte que ha cambiado por lo que la velocidad de renderización de los cambios por parte del navegador se multiplica de manera exponencial.

Otro de los elementos que definen a React es JSX, JSX es una extensión sintaxis de Javascript que permite combinar en el mismo código HTML, JS y CSS, es decir, podemos meter los tags de HTML dentro del código Javascript, de hecho en un proyecto con React no hay páginas HTML separadas, todos los elementos son componentes.

No es obligatorio utilizar JSX con React, pero si que es muy recomendable ya que la web se renderizará más rápido.

Os pongo aquí un ejemplo muy sencillo de código.

const element = <h1>Hola mundo</h1>

Una clase de React desarrollada con JSX sería algo así:

class Hello extends React.Component {
  render() {
    return <div>Hola {this.props.toWhat}</div>;
  }
}

ReactDOM.render(
  <hello towhat="Mundo">
    ,document.getElementById('root'));
  </hello>

);

Escribiré nuevos posts sobre React pronto.