Ver contenido
carlosazaustre.es carlosazaustre.es

Ejemplo de aplicación con React.js en ECMAScript 6

🗓 | 💻 Desarrollo | 🕐 2 minutos de lectura | 💬 Comments

Hoy vamos a ver un pequeño ejemplo de aplicación web empleando React.js para crear componentes reutilizables y aprovecharemos para usar ECMAScript 6, el nuevo estándar de JavaScript, que traduciremos al estándar que todavía entienden los navegadores actuales con Browserify y Babel (Babelify).

Vamos a ser una aplicación muy sencilla, sin mucha interacción, simplemente representaremos datos, más adelante veremos cosas más completas.

Esto será lo que vamos a hacer. He delimitado con recuadros lo que yo consideraría como un componente, y por tanto un elemento de React.

Aplicación desglosada en componentes

Tendremos un EmpleadoAvatar (recuadro rojo), un EmpleadoRow (recuadro verde) y por último un EmpleadoList (recuadro azul).

La estructura de directorios y ficheros que voy a utilizar será la siguiente:

En la carpeta components tengo 3 componentes, el correspondiente al avatar del empleado, a la fila que contiene la información y al listado completo. Cada uno de ellos es una carpeta con su código JavaScript (index.jsx) y sus estilos, en el caso de que tuvieramos que definirlos. En este ejemplo utilizo stylus. index.jsx debajo de la carpeta src será el fichero de entrada de nuestra aplicación, el main.

En node_modules estarán nuestras dependencias tanto para desarrollo como finales. Para emplear React necesitamos instalar su librería, lo haremos por npm

Despues ya podemos implementar nuestros componentes. Empezamos por EmpleadoAvatar. Veamos su código en empleado-avatar/index.jsx

Creamos un componente que hereda de React.Component y va devolver una vista con un figure y un img, sus atributos o props van a ser únicamente la URL de la imagen que contiene la foto del empleado. Exportamos el módulo como EmpleadoAvatar para poder utilizarlo en otra parte de nuestra aplicación, como por ejemplo en el EmpleadoRow.

Voy a emplear Bootstrap para los estilos. Si tuviesemos estilos específicos de cada componente, podrían ir en su carpeta junto con el index.jsx y posteriormente con una tarea de Gulp, los preprocesaríamos y tendríamos un único fichero .css para producción.

Ahora pasemos a ver el código del siguiente componente, empleado-row/index.jsx:

Importamos de nuevo la librería React y el componente que hemos creado en el paso anterior EmpleadoAvatar. En EmpleadoAvatar definimos un props que era la imagen, con picture. Pues bien, ahora en este nuevo componente, como utilizaos el anterior vemos que le pasamos el atributo de la siguiente manera:

Porque picture es una prop de EmpleadoAvatar y lo que le pasamos en una prop del componente que estamos creando, por eso le pasamos this.props.picture.

El siguiente componente sería el listado de emplados, veamos su código empleado-list/index.jsx

Aquí utilizamos el componente EmpleadoRow junto con sus props: name, picture, title y department dentro del nuevo componente EmpleadoList el cual tiene un nuevo prop llamado listado que recibirá un array de objetos con la información de los empleados.

A este array le aplicamos la función map de JavaScript para que recorra cada elemento del array y devuelva un componente EmpleadoRow con sus propiedades. Exportamos el componente y seguimos.

Ahora veamos el código de index.jsx que es el fichero principal de la aplicación y el que va a renderizar la vista.

En este fichero tenemos un array de objectos Empleado. Importamos el componente EmpleadoList y le pasamos a su prop, listado, el array empleados en el método render() de React. también le pasamos el elemento HTML donde queremos insertar la vista. En este caso usaremos el div con id #application.

Es el momento de crear el index.html principal de la aplicación. Lo hacemos en la carpeta build donde tendremos los archivos de producción.

El fichero js/bundle.js es el que vamos a generar ahora gracias a Browserify y Babelify en una tarea de gulp. Primero instalamos las dependencias que utilizaremos:

Y este sería nuestro gulpfile.js

He añadido también tareas de preprocesado CSS en Stylus, por si tenemos estilos particulares para cada componente. Pero en este ejemplo estoy usando tan solo Bootstrap.

Para ejecutar y probar la aplicación debemos escribir en el terminal:

Y en http://localhost:8080 tendremos nuestra app corriendo.

✎ ¿Ves alguna errata? ¿Quieres modificar algo? Haz una Pull Request.

Carlos Azaustre

Soy Carlos Azaustre. Desarrollador web desde hace más de 8 años. He trabajado en Google, IBM y Eventbrite. Soy GDE (Google Developer Expert) en Tecnologías Web. Desde 2013 intento documentar en éste blog todo lo que aprendo y así compartirlo con el resto de la comunidad.

📬 Únete y estate al día en desarrollo web

Recibe puntualmente información sobre las últimas novedades en tecnologías web y desarrollo web moderno para que estés siempre actualizadx:

🔒 Libre de Spam. Sólo contenido que te interesa..