header_lecciones_v5

Pilares para crear una primera aplicación en ReactJS

por Sebastián Castaño, el 5 de junio de 2019

h_react

React es una librería de código abierto, diseñada por Facebook, para la creación de SPA’s (Single Page Applications), que tiene como objetivo principal facilitar el desarrollo de interfaces de usuario con el uso de la programación, orientada a componentes.

Esos componentes son representados como clases que se extienden de React.Component y tienen como función principal especificar el método Render. Estos mismos son creados con una sintaxis especial llamada JSX.

Cabe destacar que React hace uso de un Virtual DOM, el cual es una ventaja de performance, ya que React trabaja y compara sobre este, para posteriormente actualizar de una manera más eficiente el DOM del navegador.

Este es un ejemplo de un componente en ReactJS:

React

En este artículo conocerás los dos pasos  para crear una primera aplicación en ReactJS. Aprende cómo hacerlo de manera sencilla. 

¿Cómo empezar con React?

El equipo de desarrollo de React ha dejado a la comunidad el proyecto Create React App, gracias a este no tendremos que preocuparnos por la configuración inicial para poder empezar con React.

¿Cómo se usa? La respuesta es sencilla: solo debes tener en cuenta tu versión de Node, ya que debe ser igual o, recomendablemente, superior a cuatro y abrir la consola de tu sistema operativo (macOS, Windows, o Linux).

Si tienes Node 5.2+ o superior puedes ejecutar el comando:
1
Si por el contrario, tú versión de Node es inferior, puedes usar:
2
O si prefieres usar Yarn:
3
Para posteriormente, crear la aplicación con:
4
Únicamente con estos comandos, tenemos la configuración inicial de nuestro proyecto de React. Está todo listo para correr el servidor y ver reflejado el template inicial. Para ello, debemos ejecutar:
5
Y posteriormente:
6
Ahora, podremos ir en el navegador a localhost:3000 para ver la aplicación que hemos creado. Queda así


8

Una vez creado el proyecto, podremos analizar la estructura del mismo:

9

Node_modules: contiene las dependencias npm del proyecto.
Public: esta es la raíz de nuestro servidor donde se podrá encontrar el index.html, el archivo principal y el favicon.
Src: es el directorio principal donde vamos a poner los archivos de nuestros componentes.

Las propiedades

Las propiedades, más conocidas como Props, son aquellas que nos permiten la manipulación de datos para su posterior interacción dentro de los componentes en React, son comúnmente usadas para transferir datos entre componentes.
 
11

En esta ilustración, tenemos un componente padre, el cuál es App.js y le está enviando a un componente hijo una propiedad definida rol, con el valor “Children”.

12
Por otra parte, el componente hijo está recibiendo la propiedad rol de su padre para hacer un binding en una etiqueta H1 de su valor, que en este caso sería “Children”.
 

children componente

Así pues, corriendo el servidor con el comando npm start o yarn start, tendríamos este resultado siendo la primera palabra de nuestro H1 el resultado de hacer un binding a la propiedad rol.

 

Componentes de presentación (Stateless)

Los componentes Stateless se escriben como funciones en Javascript y no poseen estado, pueden trabajar con propiedades recibidas, pero no pueden modificar los métodos de su ciclo de vida.

Entre las ventajas de trabajar con este tipo de componente, tenemos dos muy significativas: fáciles de escribir y mejoran el performance de la aplicación.

EJEMPLO COMPONENTE

Este sería un ejemplo con nuestro ChildrenComponent recibiendo las propiedades enviadas desde el padre y creado como un componente de presentación a través de una arrow function (ES6).

Componentes contenedores (Stateful)

A diferencia de los componentes Stateless, los componentes Stateful se caracterizan por tener un state y utilizan la encapsulación en clases. Cuándo hay un cambio en el state o en las props, el componente Stateful hace un re-rendering.

Rendering es el proceso de actualizar un componente de React en el navegador. Esto significa cambiar la apariencia o el contenido de un componente en el DOM. React se encarga de manejar el rendering de manera inteligente haciendo una comparación entre el estado anterior y el nuevo estado. También hace la misma comparación a nivel de props, pero es recomendable usar el estado si se requiere actualizar un componente en el navegador.

React solo actualiza la parte del componente que es afectado por el nuevo estado, y deja intacto el resto de elementos del DOM que forman parte del componente pero no están en contacto con el nuevo estado.

Por otro lado, re-rendering solo es el proceso de hacer un nuevo renderizado en el mismo componente.

16

Aplicación de ejemplo

¿Qué haremos?

Desarrollaremos una aplicación básica para agregar y listar tareas con la ayuda de React y repasaremos lo explicado para ponerlo en práctica.

Comenzaremos esta aplicación de ejemplo teniendo en cuenta los numerales anteriormente detallados y empleando los comandos explicados en el segundo paso.

En mi caso, usaré npx para crear la aplicación. Entonces abriremos la consola y nos situaremos en la carpeta donde queremos crear la aplicación React y seguidamente utilizaremos los comandos aprendidos (en este caso):

1-- en caso de no haber instalado globalmente nuestro create-react-app.

2-1--nos ubicamos en la carpeta que contendrá el proyecto.

3-1--ejecutamos el comando para crear la aplicación.

4-1--nos ubicamos en la carpeta de la aplicación.

5 --ejecutamos el comando para iniciar la app.

Inicialmente eliminaremos el contenido del archivo App.css y en el App.js borraremos el contenido del return.

Trabajaremos sobre el componente App, por ende debemos editar el archivo App.js y comenzaremos creando la estructura para añadir tareas. Crearemos un input para recibir el nombre de la tarea, un botón para ejecutar la función de añadir y un label informativo.

6-1

Lo que nos daría como resultado:

componente

Ahora, antes de hacerlo funcional necesitamos crear el Array, donde se guardarán las tareas. Para esto haremos uso del State del componente. Gracias a que tenemos un componente Stateful podemos crear un constructor y dentro de él generar el state donde irán nuestras tareas.

8

Una vez creado el Array, nos encargaremos de que el input bindee el valor que tenga actualmente, para ello podríamos usar el típico document.getElementById pero en su lugar aprovecharemos el state de react.

7

El state inputValue sirve para almacenar el valor actual del input, lo cual se logra mediante la función onChange y aquí hay que hacer un énfasis ya que veremos cosas nuevas tales como el .bind y el setState.

SetState: El setState se utiliza para actualizar el estado local del componente.--Bind: sirve para indicar que, en este caso, la función handleChangeInput hace parte del contexto actual.
Ahora que ya tenemos el valor del input, procederemos a crear la función que nos almacenará las diferentes tareas y agregaremos un evento clic al botón Add.

11

Acabamos de crear una función llamada handleAddTask, la cual se encarga de actualizar el tasksArray mediante el setState pero… ¿Cómo se agregan las tareas?. En vanilla js generalmente usamos el Array.prototype.push() para agregar elementos a un array, pero hicimos uso del spread operator de ES6, con esto lo que hacemos es traer el array actual de tareas y concatenarle el nuevo valor.

Con esto ya podemos agregar tareas a nuestro array, pero aún no vemos el resultado, para ello, listaremos las tareas.

Entiendo que como primer opción tengas en mente el ciclo for pero con React (a manera de tip), es mejor trabajar con programación funcional en vez de programación imperativa, así que en vez de usar el ciclo for usaremos uno de los pilares de la programación funcional como lo es el map.

9

 

Finalmente, éste sería el resultado:

Resultado

Te queda como reto agregar una función para eliminar las tareas y expandir este pequeño proyecto hasta donde quieras aprender.

Te dejo el link del repositorio git de la aplicación por si te es de utilidad. 

Y ahora que ya hiciste tu primera aplicación, ¿Que te detiene para ser todo un crack de la mano de React JS ?

Descarga la guia para trabajar con ambientes IBM Websphere portal

 

 

Temas:Tecnologia e Innovación

Lecciones Pragma

Lecciones en Academia Pragma

Aquí encontrarás tutoriales técnicos para que apliques en temas de desarrollo de software, cloud, calidad en software y aplicaciones móviles. 

También puedes visitar nuestro Blog con contenido actual sobre Transformación Digital, Marketing, Conocimiento de Usuario y más. 

Blog

Suscríbete a la academia

Descarga la Guía para trabajar con ambientes IBM Websphere Portal