React puede funcionar de manera aislada, pero habitualmente lo hace de la mano de Babel y de JSX (JavaScript Extended).
Una de las características más potentes de React es la posibilidad de actualizar elementos de la página web sin tener que recargarla de una manera muy rápida y sencilla. Las páginas web con React tienen una copia virtual en un DOM paralelo que sustituye al original de la web, de tal manera que cuando cambias un elemento no tienes que recargar toda la página tan solo el elemento que ha cambiado.
El mecanismo principal que utilizamos con React para modificar estos elementos son los estados y las propiedades.
Habitualmente cuando creamos un componente de React le asignamos unos estados, cuando modificamos estos estados no solo cambia su valor si no que también ese cambio se renderiza en pantalla de manera asíncrona.
Os pongo un ejemplo:
Los estados han sido creados como parte del componente, podemos modificarlos utilizando directamente this.state.test = '12', pero de esta manera no sería correcto ya que por una parte no se ejecutaría el método render() que es el que actualiza el DOM de la web y por otra parte podemos encontrarnos con que el contexto de this haya cambiado y al no existir un contexto con el estado test se produzca un error.
Las propiedades se designan siempre en el padre del componente y son inmutables desde dentro del componente. Los estados sin embargo están pensados para ser actualizables.
No todos los componentes tienen por qué tener estado, aunque no es lo habitual.
Los componentes sin estado existen para generar vistas inmutables que no admiten ningún tipo de modificación.
Os pongo aquí un ejemplo:
Bueno, pues ya sabemos un poquito más de estados y propiedades en componentes de React.
Comentarios