Tutorial de React JS interactivo

Cómo empezar con React JS

Como sugerencia, te recomiendo algunos libros de html, libros de css, libros de javascript y libros de Java que sirven para entrar en detalle en estas materias.

Dentro del universo javascript, podemos encontrar React JS, que es una librería Javascript que se utiliza para construir interfaces de usuario.
Inicialmente se diseñó pensando en aplicaciones que mostraban datos que variaban con el paso del tiempo. Se diseñó por Facebook y hoy en día muchas empresas utilizan React JS, tales como Airbnb, Paypal o Netflix.
En realidad React JS no requiere un conocimiento muy profundo de Javascript.
Con unas nociones básicas y con un poco de EcmaScript (clases, funciones arrow, template literals, let y const) podemos empezar a hacer cosas interesantes.
En este tutorial interactivo vamos a ver lo básico de React JS y vamos a construir un componente, enviar datos, y gestionar los eventos del usuario.
React JS utiliza una representación del DOM en memoria que permite hacer cambios muy rápidamente, y minimizando las modificaciones en la vista.

Componentes

Un componente de React JS es similar a una función de Javascript, se hace una llamada con parámetros que se denominan "props" y devuelve un resultado que son elementos de React JS.
Nota: las props son sólo de lectura, no se pueden modificar dentro de esas funciones.

Para construir un componente simple, creamos clases de Javascript que heredan de una clase básica llamada "React.Component".
Luego ese componente tiene que implementar la función "render" que es la que muestra la "vista".
Luego indicamos en que sitio del DOM se insertará este componente, algo que hacemos fácilmente con getElementById.
Implementamos el código en un fichero js y lo importamos con la etiqueta script.

Un componente está formado por elementos, que son la unidad de construcción más pequeña de una aplicación React JS.
Así por ejemplo un elemento sería:

const elemento = <h1>Hola mundo</h1>;

Para renderizar este elemento necesitamos un punto de inserción dentro del DOM, habitualmente será un div con un "id". Así pues para mostrar el elemento hacemos lo siguiente:

ReactDOM.render(elemento, document.getElementById('root'));

Habitualmente para definir un componente vamos a utilizar clases de EcmaScript.
Nota: Siempre usar la primera letra en mayúsculas para el nombre del componente.
Esto es importante porque React JS trata a los componentes que empiezan en minúsculas como una etiqueta del DOM.
<Hola/> representa un componente, pero div representa una etiqueta HTML.

A continuación vemos un ejemplo de un componente definido como una clase:

class Libro extends React.Component {
  render() {
    return( <div>Libro<</div> );
  }
}
ReactDOM.render(
    <Libro />, document.getElementById('tema')
    );

En el html habrá un div con un id que será la referencia del método "render":
<div id="tema"></div>

JSX

Como se puede ver, el componente retorna un conjunto de etiquetas html y texto que no van entre comillas.
No es un string, ni tampoco HTML.
Este tipo de contenido se denomina JSX (Javascript XML). Es muy similar al HTML que ya conocemos (ver curso interactivo de html).
Aunque JSX usa un lenguaje parecido a HTML, algunos atributos, como "class" de html se transforma a "className" y "tabindex" se transforma a "tabIndex".
Por defecto usa la convención "camelCase".
En JSX para imprimir el contenido de una variable o de una expresión se pone entre llaves {expresion}

Así pues para imprimir un valor:

const pi=3.14;
El número PI es {pi}

props

A los componentes se les pueden pasar argumentos que se denominan "props", son como los atributos de las etiquetas de html. Se muestran invocando a "this.props.atributo".

state

Se invoca con this.state y es un objeto que se encuentra definido dentro de cada componente.
Los estados son útiles para gestionar el ciclo de vida de un componente.
Habitualmente se definen en el constructor del componente y se usan dentro del método render().
Para ello usamos el estado de un componente de Reacti JS.

Normalmente los eventos como los clicks de un botón, un enlace, un envio de un formulario, una petición AJAX generan cambios de estados.
Para realizar un cambio de un estado no se usa this.state.atributo="nuevo" sino this.setState({nuevo:'hola'}).
El único sitio donde se usa this.state.atributo="nuevo" es en el constructor del componente.

Ciclo de vida de los componentes

Habitualmente en las aplicaciones React JS acabermos tendiendo muchos componentes, por eso de cara a liberar recursos una vez se destruyen, tenemos una serie de métodos muy importantes para gestionar el ciclo de vida de un componente React.

Cuando se renderiza por primera vez en el DOM se denomina "montar". Y cuando se elimina el DOM del componente se llama "desmontar".

Para ello React JS proporciona un ciclo de estados:

  • constructor
  • componentWillMount (antes de renderizar el componente)
  • render (se renderiza el componente)
  • componentDidMount (después de renderizar el componente)
  • componentWillUnmount (justo antes de eliminar el componente del DOM)

Manejar eventos

Normalmente en html usamos onclick="mifuncion()" para los eventos de click, pero en React JS se usa camelCase y una función entre llaves: onClick={mifuncion}
Otra diferencia es que hay que especificar preventDefault si queremos evitar el comportamiento por defecto del navegador. Lo que en html se realiza con un return false.

Listas

En el caso de imprimir un array de cadenas se usa la función map

Por ejemplo para un array con los colores RGB son:

const colores = ['rojo','verde','azul'];
{colores.map( color => <li>{color}</li>}

Formularios

Se puede añadir un listener a un formulario con onSubmit={this._handleSubmit.bind(this)} y creando el método _handleSubmit(evento) {...}

handleSubmit(evento) {    
   evento.preventDefault();  
}

Luego se usa ref para asignar los valores del formulario a props (propiedades) de un componente.

<input className="form-control" id="nombre" placeholder="Nombre" ref={(input) => this._autor = input}  />

En el método que maneja el evento se puede recuperar el valor del input con this._autor

Ejemplo

Como ejemplo vamos a construir un libro de visitas para la web muy simple.
El componente sera Libro y dentro contendrá un componente Mensaje.

Ver Ejemplo

Pasos para desarrollarlo

Se suele empezar definiendo el html del libro de visitas.
Luego implementamos el componente del Libro y el Mensaje.
Habitualmente obtendremos los datos mediante arrays o en JSON.
Por ejemplo los mensajes de un libro:

const listaMensajes = [ {id:1, autor: 'Eva', cuerpo:'Probando el libro de visitas' }, {id:2, autor: 'Jose', cuerpo:'Buen tutorial amigo' }];

Para recorrer esos valores se utiliza un map.
Se puede usar un atributo para especificar una clave y así optimizar las búsquedas luego. key={mensaje.id}
Desde el componente Libro guardamos el retorno de getMensajes en una variable.
Se puede mejorar el literal "n mensajes" cuando vale 0,1,2
Una funcionalidad que podemos incorporar es mostrar/ocultar los mensajes, ya que puede llegar a ser bastantes.
Para fijar un estado inicial, lo podemos hacer en el constructor de nuestro componente.
Luego para cambiar el valor del estado usamos this.setState({mostrarMensajes: true}) que provoca un renderizado del componente.
Para definir el botón de Mostrar/Ocultar sería:

let textoBoton = 'Mostrar mensajes';

Creamos un nuevo componente para insertar los mensajes con un listener en el evento onSubmit.
Para asignar los valores del formulario a las propiedades del componente podemos usar refs.

El ejemplo se puede completar recuperando los mensajes del servidor, ya que el array de mensajes se definió en this.state={...} dentro del constructor de Libro. Te dejo algunas pistas...

Para ello definimos ese array a vacío [] y luego lo poblaremos con datos del servidor utilizando jQuery.
Hay que invocar la llamada a obtenerMensajes antes de invocar a render().
Mejor ponder la llamada a obtenerMensajes dentro de componentWillMount.
Luego podemos hacer 'polling' para ir cargando los nuevos mensajes del servidor cada 8 segundos.

En el método:

componentDidMount() {
    this._timer = setInterval( () => this.obtenerMensajes(), 8000);
  }

Hay que tener cuidado con hacer limpiezai recursos, por ejemplo del timer, lo haremos en el método:

componentWillUnmount() {
  clearInterval(this._timer};
      }

Este es el resumen del ciclo de vida del componente:

  • 1) se invoca a componentWillMount
  • 2) se invoca a render() y se monta el componente
  • 3) el componente lanza la llamada ajax y cuando recibe la respuesta y se invoca a setState() se vuelve a invocar a render()
  • 4) se invoca a componentDidMount que activa el timer obtenerMensajes cada 8 segundos
  • 5) se invoca a componentWillUnmount cuando el componente se elimine del DOM, limpiando el timer

Y en el render del Mensaje añadimos el botón eliminar.

Así pues los componentes padre pueden enviar datos a componentes hijos utilizando "props" y los hijos pueden aceptar funciones de callback como props para comunicarse de regreso con los componentes padres.


Y si quieres conocer tutoriales promocionados, no te pierdas estos cursos con descuentos increibles. También puedes recibir nuestro boletín por correo,

Si te gusta este tutorial, puedes contribuir anónimamente con unos tokens BAT.
No conoces Brave? el navegador web que permite navegar más rápido y respetando tu privacidad.

Editor de HTML