Antes de empezar este tutorial es recomendable tener conocimientos intermedios de Javascript y de ES6.
1. Introducción
React es una librería para crear interfaces de usuarios. Fue creada por Facebook en 2011 y liberada como open source en 2013, cuenta con proyectos en producción por compañías como Netflix, Airbnb, Walmart, Facebook e Instagram.
Sus más notables propuestas son:
- Propagación de datos unidireccional: Los datos son propagados de componentes padres a componentes hijos. La comunicación entre padres e hijos se hace mediante callbacks y los eventos son enviados de hijos a padres, siendo los componentes padre los que gestionan el estado y la lógica.
- DOM Virtual: React genera una estructura en memoria semejante al DOM físico. Cuando detecta algún cambio compara entre el DOM virtual y el DOM físico y sólamente recarga aquello que haya cambiado. Ésta innovación hace obsoleto el tener que recargar la página entera cada vez que el estado es modificado.
- JSX: JSX es una extensión de la sintaxis de Javascript comúnmente usada para codificar los componentes. Es semejante a html y se embebe en los ficheros
.js, con lo que disponemos de todas las ventajas programáticas de Javascript. - Aplicaciones isomórficas: Esto quiere decir que las aplicaciones web se pueden renderizar tanto en el cliente como en el servidor. Si ésta se renderiza en el servidor se puede enviar al cliente desde el servidor html puro en aquellos casos que se pueda.
- React Native: Facebook lanzó en 2015 React Native, el cual permite crear componentes usando herramientas de desarollo web y que genera aplicaciones nativas tanto para Android como para IOS.
Todo el código podrá verse en Github en este link.
2. Entorno
- Hardware: MacBook Pro 17’ (2,66 GHz Intel Core i7, 8GB DDR3)
- Sistema operativo: macOS Sierra 10.12.4
- Entorno de desarrollo: VSCode
- Nodejs 7.7.4
3. Instalación
Vamos a usar Create React App para crear una aplicación web sin necesidad de configurar nada.
Unicamente necesitaremos instalar en nuestra máquina NodeJS (Versión 7.7.4 o mayor). Si estás en windows es necesario reiniciar.
Una vez instalado NodeJS pasaremos a descargar la utilidad de create-react-app. Para ello abrimos terminal y seguimos estos comandos:
|
1 2 3 4 5 |
npm install -g create-react-app create-react-app react-tutorial cd react-tutorial/ npm start |
Si todo ha ido bien veremos la siguiente pantalla:
Además veríamos que se abre nuestro navegador con la aplicación ya corriendo.
4. ¿Qué es lo que ha hecho create-react-app?
Create React App ha generado y dispuesto una estructura de ficheros de la siguiente forma:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
react-tutorial/ README.md node_modules/ // Librerías de nuestra aplicación package.json // Información y dependencias de nuestro proyecto .gitignore // Fichero donde se determina qué carpetas no deberán ser trackeadas con git public/ favicon.ico index.html // Página donde se inyectarán los componentes de React src/ // Directorio de desarrollo que es el que usaremos nosotros App.css App.js App.test.js index.css index.js logo.svg |
Además nos ayuda a generar un servidor local de desarrollo que nos muestra errores nos ofrece linting en nuestro editor y recarga la página automáticamente cuando un cambio es detectado. ?
5. Componentes
Vamos a crear nuestro primer componente. Creamos un fichero nuevo llamado Hola.js en la carpeta src.
Nota: Por convención los componentes de React se escriben con la primera letra en mayúsculas.
|
1 2 3 4 5 6 7 8 9 10 11 |
import React, { Component } from 'react'; class Hola extends Component { render() { return ( <h1>Hola mundo</h1> ); } } export default Hola; |
Para usar este componente vamos a ir al fichero App.js y pondremos lo siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; // Importamos nuestro componente import Hola from './Hola'; class App extends Component { render() { return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2>Welcome to React</h2> </div> <div className="App-intro"> {/*Incluimos nuestro componente*/} <Hola/> </div> </div> ); } } export default App; |
Guardamos y veremos que la página se ha recargado automáticamente. Tendríamos que ver lo siguiente:
Vamos a hacer un repaso rápido del código que acabamos de escribir.
|
1 |
import React, { Component } from 'react'; |
Aquí importamos React. React tiene que estar en el contexto para que sepa que es un componente de React. Además, importamos de la librería de React el módulo { Component }. Esto se debe a que nuestra clase debe extender de Component.
|
1 2 3 |
class Hola extends Component { ... } |
Este es nuestro componente y debe extender de Component.
|
1 2 3 4 5 |
render() { return ( <h1>Hola mundo</h1> ); } |
Este es el único método de nuestra clase. Tiene que ser llamado obligatoriamente render() y este método es el que se encarga de renderizar el componente. Varios puntos a tener en cuenta. React necesita que retornemos un único elemento (Independientemente de cuantos hijos tenga), por ejemplo, esto nos daría un error:
|
1 2 3 4 5 6 |
render() { return ( <h1>Hola mundo</h1> <h1>Adios mundo</h1> ); } |
Mientras que esto estaría bien
|
1 2 3 4 5 6 7 8 |
render() { return ( <div> <h1>Hola mundo</h1> <h1>Adios mundo</h1> </div> ); } |
Y el otro punto importante es que hay ciertas palabras reservadas que no se pueden usar, ya que recordemos que estamos escribiendo html (JSX) en Javascript, y hay nombre que colisionan. Por ejemplo, class debe ser sustituida por className y for tiene que ser sustituida por htmlFor.
|
1 |
export default Hola; |
Esta línea quiere decir que vamos a exportar nuestro componente para que éste pueda ser usado a lo largo de nuestra aplicación.
6. Props
Vamos a hacer que nuestro componente Hola sea dinámico.
|
1 2 3 4 5 6 7 8 9 10 11 |
import React, { Component } from 'react'; class Hola extends Component { render() { return ( <h1>Hola {this.props.nombre}</h1> ); } } export default Hola; |
El objeto props es un objeto especial donde se determinan todas las propiedades que tiene un componente. Se usa para hacer que los componentes rendericen una cosa u otra. A este objeto props se le puede pasar desde strings hasta objetos e incluso funciones.
Para asignarle un prop a un componente vamos a App.js y cambiamos
|
1 |
<Hola/> |
por
|
1 |
<Hola nombre="César"/> |
Veremos que la página se recarga y deberíamos ver lo siguiente:
Es importante ver que para hacer uso de expresiones en jsx éstas tienen que estar entre llaves. Dentro de estas llaves podemos hacer virguerías como:
|
1 |
<h1>Hola {1 + 1}</h1> |
O por ejemplo
|
1 |
<h1>{this.props.nombre === 'César' ? `Ave ${this.props.nombre}` : 'Tú no eres César'}</h1> |
Que hace que si la propiedad que hemos pasado a nuestro componente es “César” nos saluda como es debido.
7. State
Vamos a ver una parte primordial de las aplicaciones hechas con React. El estado. Imaginemos que queremos hacer un contador que vaya contando de uno en uno.
Primero hagamos un componente llamado Contador.js en la carpeta src.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import React, { Component } from 'react'; class Contador extends Component { constructor() { super(); this.state = { contador: 0 }; } render() { return ( <span>{this.state.contador}</span> ); } } export default Contador; |
Vamos a ir poco a poco explicando lo que hace cada parte.
|
1 2 3 4 5 6 7 |
constructor() { super(); this.state = { contador: 0 }; } |
En el constructor de la clase llamamos a super() requisito obligatorio si tenemos un constructor. En la siguiente línea inicializamos state y le asignamos un objeto con una clave y un valor. Este estado puede ser cualquier cosa, desde más objetos hasta arrays o strings.
Si queremos más estados, sólamente los tenemos que separar por comas
|
1 2 3 4 5 6 7 |
this.state = { contador: 0, miArray: [1, 2, 3], miObjeto: { clave: 'valor' } }; |
|
1 2 3 4 5 |
render() { return ( <span>{this.state.contador}</span> ); } |
En el método ´render()´ pintamos el estado con this.state.contador. Ahora bien, el puntazo de React es que cuando modificamos el estado, todos aquellos componentes que dependen de ese estado se recargan automáticamente.
Para ello vamos a crear un botón que aumente el contador y un método de aumentar:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import React, { Component } from 'react'; class Contador extends Component { constructor() { super(); this.state = { contador: 0 }; } aumentarContador = () => { // Importante no modificar directamente el estado, si no usar setState // y pasarle la clave del objeto a modificar y su nuevo valor this.setState({contador: this.state.contador + 1}); } render() { return ( {/* Como veíamos antes es necesario devolver un único elemento padre por eso usamos un div para agrupar lo demás elementos */} <div> <span>{this.state.contador}</span> {/* Al método onClick le asignamos un método. Importante poner la C de onClick en mayúsculas */} <button onClick={this.aumentarContador}>+</button> </div> ); } } export default Contador; |
Y para usarlo vamos a App.js e importamos nuestro componente y lo incluimos como se muestra a continuación.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; // Importamos nuestro componente import Contador from './Contador'; class App extends Component { render() { return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2>Welcome to React</h2> </div> <div className="App-intro"> {/*Incluimos nuestro componente*/} <Contador/> </div> </div> ); } } export default App; |
Si todo ha ido bien veremos lo siguiente:
Y podrás comprobar que si pulsas sobre el botón el contador va aumentando. ?
8. Conclusión
React es una gran propuesta de Facebook para solventar el diseño y la programación de interfaces complejas. Además nos permite reutilizar componentes, abstrae la manipulación directa del DOM y nos da la posibilidad de separar modularmente los componentes.
Buenisimo el tutorial,
Solo un par de correcciones, que me han tenido un tiempo buscando solucionarlos. Dado mi falta de conocimiento en React. Pero que siempre sirve para aprender.
En el componente del Contador, al final de la primera linea hay un «» que sobra.
Y en el render del mismo componente en el boton, escribes en el onclick
this.aumentarContador()
Y eso provoca un loop infinito.
Lo correcto, segun mis busquedas, es asi:
this.aumentarContador
Sin los parentesis.
Muchas gracias por tus articulos, son muy utiles,
Saludos,
Buenas Carlos, muchas gracias por tu comentario 🙂 Sí, en efecto, hay que quitar los paréntesis ya que hemos de pasar la referencia. Ya está corregido en el artículo. Si tienes cualquier duda no dudes en preguntar. Un saludo.
[…] BlueOcean es la nueva propuesta del equipo de Jenkins para actualizar la imagen de Jenkins. Está hecho con React y últimas tecnologías web. Si te interesa React aquí tienes un tutorial escrito por mí. […]
Muy interesante el articulo. Debo hacer una presentación acerca de react y me gustaria tener un breve resumen de los metodos mas usados para almacenar y manejar el estado de las aplicaciones mediante react. muchas gracias.
¡Muchas gracias Pablo! Te recomendaría que echases un vistazo a esta parte de la guía oficial de React: https://reactjs.org/tutorial/tutorial.html#lifting-state-up. Muy esclarecedora. Un saludo.
Hola, perdón mi ignorancia, recién comienzo a ver React y me surgen algunas dudas básicas antes de implementarlo y que hasta ahora no me aclara ninguno de los artículos leídos. React solo se puede implementar si dispones de un servidor propio, o puedo aplicarlo a una página web con un servidor compartido común de las que alquilas para subir los sitios? En caso de que sea afirmativa… como subes el desarrollo desde tu PC al servidor? que archivos se deben llevar? Gracias por tu tiempo.
Pues no creo que puedas hacer uso de un «servidor compartido» a priori. Lo que tendrás que hacer es construir tu aplicación usando Webpack. Si usas la utilidad mencionada en el tutorial create-react-app ya te da eso de serie con el script «build». Una vez ejecutado ese comando generará un directorio dist, y ese ya lo puedes servir.
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment