¿Qué es React? Como dicen en su propia web: React es una librería Javascript para construir interfaces de usuario. Es una librería javascript y se utiliza para escribir código de cliente, no de servidor. Sirve para implementar la interfaz de usuario y está orientada a componentes. Los componentes son "piezas" de código auto-contenidas, parametrizables y reutilizables.
Sus principales características son:
- Lenguaje declarativo (no programático) para construir la UI
- Basado en componentes (reutilizables)
- Independiente de la plataforma (web, mobile...)
En estos artículos voy a intentar mostrar React desde un punto de vista absolutamente práctico y para desarrolladores. No quiero contar lo mismo que hacen cientos de tutoriales y manuales sobre React. Me gustaría contar las cosas de forma que un desarrollador con cierta experiencia en web pueda aprender React lo más rápidamente posible.
Por otro lado, quiero aclarar que aunque React no está "atado" a ninguna plataforma, en estos artículos me voy a centrar en la web. Existen librerías como React native, basadas en React que permiten desarrollar para plataformas móviles.
Empezamos con el clásico Hello world para ir abriendo boca...
Hello world of React!
En principio, para empezar a desarrollar y aprender con React, no es necesario instalar nada. Aunque más adelante veremos que es conveniente instalar algunas sencillas herramientas, sobre todo para el despliegue de la aplicación.Vamos a hacer una pequeña página HTML con React.
En primer lugar nos descargamos tres ficheros javascript que incluiremos en nuestra página HTML:
- react.js : librería react
- react-dom.js : librería react para acceso a DOM
- babel.js : transforma JSX (que ya veremos más adelante) en javascript que entiende el navegador
En segundo lugar, copiamos estos tres ficheros en el directorio donde vayamos a poner nuestra página HTML.
Y por último vamos con nuestro ejemplo.
HTML
Creamos una página html con el siguiente contenido:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello world of React!</title> </head> <body> <div id="app"></div> <script type="text/javascript" src="react.js"></script> <script type="text/javascript" src="react-dom.js"></script> <script type="text/javascript" src="babel.js"></script> <script type="text/babel" src="./app.js"> </script> </body> </html>
Javascript
Y ahora creamos un fichero javascript denominado app.js en el mismo directorio de la página html y con el siguiente contenido:var template = <div><h1>Hello world of React!</h1><p>This is JSX</p></div> var appElement = document.getElementById('app'); ReactDOM.render(template, appElement);
Ejecutamos
Es importante abrir el fichero html con Firefox, no con Chrome. Y no porque Chrome no sea compatible con React (no entremos en modo pánico tan al principio), sino porque al abrir un fichero en local, no descargado de un servidor http, Chrome da algunos errores de seguridad con los ficheros js que hemos descargado. Ya digo que esto no es un problema, porque en un caso real la aplicación React vendrá descargada por http.Cómo instalar un sencillo web server para nuestros ejemplos
Si a pesar de todo queremos que nuestra aplicación se descargue mediante http y además queremos visualizarla con Chrome, voy a proponer una solución muy sencilla (hay otras muchas soluciones).En primer lugar instalamos nodejs (si no lo tenemos ya instalado): nodejs
Abrimos una consola en el directorio que estamos trabajando y ejecutamos el siguiente comando para instalar live-server (un servidor http basado en node):
npm install -g live-serverEjecutamos el servidor:
live-serverSe abrirá el navegador por defecto y mostrará todos los ficheros. Pulsamos sobre la página html y podremos ver nuestra página React en acción!
