ReactJS 💙

"A JavaScript library for building user interfaces"

React te ayuda a crear interfaces de usuario interactivas de forma sencilla. Diseña vistas simples para cada estado en tu aplicación, y React se encargará de actualizar y renderizar de manera eficiente los componentes correctos cuando los datos cambien.

Conceptos Principales

JSX

JSX es una abreviatura de JavaScript XML. Este es un tipo de archivo usado por React que utiliza la sintaxis de JavaScript junto con la sintaxis HTML como plantilla. Esto hace que el archivo HTML sea realmente fácil de entender. Este archivo hace que las aplicaciones sean robustas y aumenta su rendimiento.

Estado

Los Estados son la fuente de los datos y deben ser lo más simples posible. Básicamente, los estados son los objetos que determinan la representación y el comportamiento de los componentes. Son mutables a diferencia de las props y crean componentes dinámicos e interactivos. Se accede a ellos a través de this.state().

Componentes

Los componentes permiten separar la interfaz de usuario en piezas independientes, reutilizables y pensar en cada pieza de forma aislada.

Tenemos dos tipos de componentes:

• Componentes stateless: Son componentes que se pueden definir en funciones puras, estas por definición no tienen efectos colaterales, con lo cual este tipo de componentes no admite ciclos de vida.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

• Componentes statefull: Los componentes con estado permiten mantener datos propios a lo largo del tiempo e implementar comportamientos en sus diferentes métodos del ciclo de vida.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Propiedades

Son componentes de sólo lectura que deben mantenerse puros, es decir, inmutables. Siempre se transmiten de los componentes padre a hijo a través de la aplicación. Un componente secundario no puede enviar nunca una prop al componente padre. Esto ayuda a mantener el flujo de datos unidireccional y se utilizan generalmente para renderizar los datos generados dinámicamente.