Vamos a empezar a ver donde está realmente la gracia de esta librería, lo que vimos en el post de introducción bien lo podíamos tener con un poco de código HTML de toda la vida. Ahora vamos a darle algo de dinamismo a nuestro código.
Teníamos este código al final de nuestro primer post:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<!-- Libreria para trabajar con React -->
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<!-- Libreria de react para trabajar con el Dom-->
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<!--Preprocesador para traducir lo que escribimos a todos los navegadores ya que react funciona con ECS6 y puede que no
funcione en todos -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">
class SuperComponente extends React.Component{
render(){
return (
<div>
<h2>Hello with React</h2>
<MiSegundoComponente/>
</div>
);
}
}
class MiSegundoComponente extends React.Component{
render(){
return (
<h2>REACT is in the HOUSE...YEAH!!!!</h2>
)
}
}
ReactDOM.render(
<SuperComponente/>,
document.getElementById('root')
);
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
Bien tenemos 2 componentes y los renderizamos dentro del body en nuestro div con id root, pues bien, vamos a añadir/modificar lo siguiente en nuestro MiSegundoComponente:
class MiSegundoComponente extends React.Component{
constructor(){
super();
this.name = {
nombre: "Your Super Name"
}
}
render(){
return (
<div>
<h2>REACT is in the HOUSE...YEAH!!!!</h2>
<h4> { this.name.nombre } </h4>
</div>
)
}
}
Lo que hacemos es crear un método constructor (OJO es palabra reservada no es que lo haya puesto yo), por el momento siempre llamamos a super (esencial para que se ejecute), y hacemos que nuestra instancia del componente (nuestro amigo this) tenga una propiedad name, que es un objeto de clave=valor en este caso con una key nombre con un texto. Asimismo en la parte de render entre {}, llamamos a this, es decir, a la instancia de nuestro componente, pasándole la propiedad y el key que hemos creado. ESTO SERIA PROPIO DE JSX, este superpoder nos permite añadir JS en nuestro código HTML. Si ahora ejecutamos esto:
Vemos como nos añade el contenido de la key nombre, "pues muy bien, y esto pa que cansino??" diréis...vale realmente Your superName es un placeholder, la idea es que ese texto cambie en algún momento.
Para ello necesitamos "escuchar algo en algún sitio" y hacérselo saber a nuestra propiedad nombre. Pero... ¿como hacemos esto? Muy fácil, vamos por partes, primero como "escuchamos":
//Añadimos un input con la propiedad onChange
<input onChange={}/>
<h4> { this.name.nombre } </h4>
Y esto que hace, básicamente envía los eventos de cambio de ese elemento a lo que tengamos dentro de {} y ¿que debemos poner dentro? pues como es costumbre un método que creemos a través de nuestra instancia(this):
//Fuera de render
getName(input){
console.log(input)
}
//Dentro de render
<input onChange={this.getName}></input>
<h4> { this.name.nombre } </h4>
Como véis tenemos un método getName que recibe algo por parámetro, y le pasamos dentro del onChange, nuestra instancia llamando al método getName. De momento le ponemos un console.log para que podamos ver que es lo que nos pasa cada vez que escribimos. Si guardamos y abrimos nuestro index.html, cada vez que escribamos algo en nuestro input, recibiremos algo del estilo a esto:
Es un objeto con nombre Proxy y mogollón de información. Es un estilo de elemento clásico de eventos(digo estilo), pero claro no es lo que realmente buscamos, como conseguimos el contenido de nuestro input:
getName(input){
console.log(input.target.value)
}
Esto lo habréis tenido que ver alguna vez ya, simplemente buscamos el value del target de nuestro elemento, y ahora nuesto console.log nos ofrece, esta información según escribimos:
Bien ya tenemos lo que necesitamos, ahora completemos la función para que nos modifique nuestro placeholder.
getName(input){
this.setState(this.name = {nombre: input.target.value});
}
Para modificar "el estado" de un objeto o elemento del DOM tenemos el método o propiedad setState, el cual modificaría solo lo que le pasemos entre ().
Teóricamente sería algo como esto, pero lo habéis probado? Si lo probáis veréis que no funciona,nos indica que this es undefined
pero.....¿por qué? Básicamente porque this no está disponible como propiedad u objeto de las funciones o métodos que nosotros mismos creamos, para hacer que funcione es necesario enlazar(bind) el this con el contexto de ejecución. Para ello solo seria necesario hacer el siguiente cambio:
<div>
<h2>REACT is in the HOUSE...YEAH!!!!</h2>
<input onChange={this.getName.bind(this)}></input>
<h4> { this.name.nombre } </h4>
</div>
Como veis dentro de nuestro método render le hemos añadido bind(this), es decir, enlazame el this de render con mi método getName et voilá:
Realmente es todo muy sencillo ¿verdad?
Antes de terminar con este post me faltaría comentar otro concepto, fijaros en esta parte del código que casi no hemos comentado:
this.setState(this.name = {nombre: input.target.value});
Hemos hablado de la propiedad setState pero no mucho de lo que hay dentro, si miráis un poco el código esto es prácticamente lo mismo que tenemos dentro de nuestro método constructor(es un poco feo no?). Pues bien realmente la propiedad tiene un motivo por el que se llama setState() y es porque el método constructor ya está preparado para gestionar los cambios de estado, si cambiamos el nombre de la propiedad y en lugar de name ponemos state:
constructor(){
super();
this.state = {
nombre: "Your Super Name"
}
}
Veamos como tendría que quedar nuestro método getName:
getName(input){
this.setState({nombre: input.target.value});
}
Y que no se nos olvide cambiar nuestro placeholder:
<input onChange={this.getName.bind(this)}></input>
<h4> { this.state.nombre } </h4>
Si lo probáis veréis que todo funciona correctamente y hemos quitado alguna cosa que no quedaba del todo bien, aún así puede que algún momento queramos usarlo por lo que solo tenemos que recordar que si en el constructor no lo hacemos todo dentro del this.state, a la hora de usarlo es necesario indicar la estructura completa del objeto o propiedad que queremos cambiar.
En el próximo post veremos como comunicarnos entre componentes y alguna cosa más. Nos vemooooooos