En este post registro todas las notas cortas pero que considero importantes sobre la librería React JS y su ecosistema de librerias complementarias, la idea es poder registrar en un solo parrafo, la idea general que intento mantener fresca en mi memoria.
[Nota 1] Todo comienza con la renderización de un elemento (React Element), iniciar una aplicación con React es tan sencillo como utilizar estas dos líneas de código:let element = React.createElement({div, {className:'main'},''});
ReactDOM.render(element,document.getElementById('app'));
[Nota 2] Existen tres conceptos que se relacionan que hay que entender correctamente, los elementos, los componentes y las instancias de componentes.
Los elementos son objetos javascript planos que describen lo que se quiere renderizar en pantalla, no tienen estado y son inmutables. Un elemento pueden referenciar a otros elementos, de esta manera se construye un arbol (de elementos) que en últimas es una representación en memoria de lo que es el DOM de una aplicación, en la realidad, este arbol de elementos react es lo que define como el virtual dom.
Un componente es una pieza de código ejecutable, que recibe propiedades como parámetros y retorna (a través de un método que por convención se denomina render()) un elemento de react, se define como “una pieza de código ejecutable” por que un componente puede ser definido como un clase (que extiende de React.Component) o como una función que recibe un objeto con propiedades y retorna un elemento react.
Las siguientes dos definiciones son equivalentes para definir un componente React
class App extends React.Component{
construct(props){
super(props)
}
render(){
return <div className=”{this.props.class}”>Hola Mundo
}
}
function app(props){
return <div class=’props.class’>Hola Mundo
}