Open in app

Ernesto Garcia N You can now subscribe to

get stories delivered directly
293 Followers Lists About Follow to your inbox.

Got it

¡Construye tu primera aplicación web con

ReactJS! 🔥 — Parte 5
Ernesto Garcia N Feb 24, 2019 · 8 min read

Si estás aquí es porque vienes de parte 4 de este tutorial de React, donde vemos cómo
separar nuestra aplicación en componentes, tanto smart components como dumb
components. Sin embargo, en esta parte llevaremos esa idea al siguiente nivel.

Lo ideal cuando separas tu aplicación en componentes, es hacerlo de la manera más

modular posible, permitiendo así asegurar la escalabilidad de tu aplicación, y
permitiendo que tus colaboradores puedan mantener de forma más sencilla cada parte
de la aplicación.

Por eso, en este tutorial vamos utilizar el concepto de propiedades de los componentes
para dotarles de funcionalidad, y a su vez, vamos a migrar toda la aplicación a una
arquitectura completamente hecha de componentes.

Step 5 — Propiedades y Modularización

Llegado este punto nos encontramos con un problema interesante: ¿cómo podemos
consumir los datos del App.js en el task.js?

Y bueno, para eso existen las propiedades de los componentes, que son simplemente
atributos que se le pasan como argumentos a través de su tag, y que son útiles
precisamente para el caso de uso que se nos presenta.

La forma adecuada de colocarle propiedades es de la siguiente forma:

 <ComponenteCualquiera propiedad1={"algo1"} propiedad2={"algo2"} />

Como puedes observar, las propiedades son como los atributos de html, sólo que pueden
contener cualquier tipo de dato que le pasemos entre corchetes (gracias a JSX), por lo
que, en nuestra aplicación (en el App.js), a cada uno de los <Task /> vamos a enviarle
el valor de dicha tarea, de la siguiente forma:

<Task value={task}/>

Este dato es enviado al componente correspondiente como prop, así que en dicha
función, podemos recibirlos de esa forma, quedando nuestro componente de la siguiente
forma:

import React from "react";

function Task(props) {

return (

...

);

export default Task;

Al ser Task un componente, éste puede recibir parámetros, y en este caso el parámetro
recibido es props, que contiene los atributos que le asignamos cuando llamamos el
componente.

Si por alguna razón deseamos inspeccionar props, podremos encontrarnos con esto:

props = {

value: "Nombre de la tarea"

Ahora, para consumirlo, tan sólo hay que reemplazar {“task”} por {props.value}, tal
como se muestra en el ejemplo a continuación:

Ahora nuestro componente sí recibe los datos de Task

Puedes probar ahora el componente funcionando en tu navegador, y debería mostrarte

el contenido de la tarea que está renderizando.
Finalmente, vamos a convertir todo a componentes, para tener una mejor organización
de nuestra aplicación.

Aunque esta arquitectura pueda parecer un poco exagerada dada la sencillez de nuestra
aplicación, este tipo de conceptos se manejan de forma usual en la construcción de
aplicaciones más complejas, por lo que vale la pena hacer un poco de práctica.

Representación general de nuestra arquitectura final

Actualmente tenemos los componentes task.js y title.js, no obstante, con la

reorganización, el uso que le daremos a cada componente es el siguiente:

1. App.js: Nuestro componente inteligente, que controla todo.

2. layout.js: Este componente sólo contendrá los estilos que envuelven al smart
component.

3. title.js: El título lo dejaremos igual en cuanto a funcionalidad, dado que ya cumple

su función.

4. input.js: Toda la funcionalidad actual de nuestro input de tareas lo abstraeremos

aquí.

5. task-list.js: Aquí irá la parte de la aplicación que mapea cada una de las tareas que
tenemos.

6. task.js: Será el mismo componente que ya tenemos, pero con la funcionalidad de

borrar tareas.

Ahora prepararemos nuestra arquitectura creando los archivos correspondientes,

quedando así:
 src/

|--components/

|--title.js

|--task-list.js

|--task.js

|--layout.js

|--input.js

Enseguida mostraré la creación de cada uno de los componentes. No obstante, no daré

muchos detalles a menos que sea necesario, ya que asumo que todo quedó claro en el
paso 4 de este tutorial.

layout.js
Para este componente, vamos a retirar el <div> que envuelve la aplicación, y lo
pasaremos a un componente. No obstante, ¿cómo hacemos para que este
componente contenga todos los datos que están dentro del div? Fácil, con
props.children.

children viene por defecto en las propiedades de cada componente, y hace referencia a
aquello a lo que envuelve dicho componente, por lo que podemos hacer uso de esto así:

import React from 'react';

function Layout(props){

return(

<div className="container">

{props.children}

</div>

export default Layout;

Y después, importándolo en App.js tal como ya sabemos hacer, quedando finalmente así:
task-list.js
En este componente pondremos la parte de la aplicación que mapea los <Task/>, así
que, no sólo nos encargaremos de copiar y pegarlo en un nuevo archivo, si no que
también debemos importar en este el archivo task.js

El archivo task-list.js va a quedar de esta manera:

import React, { Fragment } from 'react';

import Task from './task'

function TaskList(props){

return(

<Fragment>

{props.tasks.map((task, id) =>

<Task

key={id}

value={task}

/>

)}

</Fragment>

export default TaskList;

En negritas, puse los elementos nuevos que se agregaron, los cuáles describo a
continuación:

1. Fragment: Es un componente que viene desde la librería de React, y que no

renderiza absolutamente nada, pero que envuelve a los demás elementos, y funciona
especialmente para cumplir con la regla que tiene react, de que cada componente
debe ser sólo un tag que envuelva al resto. De no utilizarse, React tiraría un error
indicando que los elementos deben estar envueltos en un tag de JSX.

2. key={id}: En caso de no incluir esto, React te dará una advertencia indicándote que
cada uno de los elementos mapeados deben tener un key. Este ayuda a React a
ordenar el árbol de componentes del que hablamos en el paso 2, y tiene que ser
único. Para ello utilizamos el segundo parámetro que entrega el .map(), el cuál es el
índice en el arreglo del elemento que se está iterando (1, 2, 3… n).

3. import Task: Corresponde a la importación del componente que usaremos por cada
tarea.

Finalmente lo incluimos en App.js, quedando así:

input.js
Este componente simplemente deberemos de copiar y pegar su estructura en un nuevo
archivo, pero pasándole tanto el valor como el handler del input y del submit a través de
las propiedades, dejándolo de esta forma:

import React from "react";

function Input(props) {

return (

<form onSubmit={props.handleSubmit}>

<input

value={props.value}

onChange={props.handleTaskChange}

type="text"

className="new-task"

/>

</form>

);

export default Input

Dejando, finalmente nuestro App.js tal como luce en la siguiente imagen:

Bonus: Eliminar tareas
Por último, y para dejar completamente funcional nuestra aplicación, vamos a crear un
botón para eliminar cualquier tarea agregada.

Para eso, vamos a crear un método en nuestro App.js, que maneje la eliminación de una
tarea, haciendo uso de su posición en el arreglo, por lo que nuestro handler será una
función que reciba la posición de la tarea a eliminar en el arreglo, y con ello, removerla
del mismo.

handleDelete = (id) => {

let newTasks = this.state.tasks;

newTasks.splice(id, 1)

this.setState({

tasks: newTasks,

})

He resaltado el método splice, puesto que es la primera vez que se utiliza. No obstante,
básicamente recibe dos parámetros; la posición del elemento a eliminar, y la cantidad de
elementos por remover.

En este caso la posición es el id que recibimos, y la cantidad es sólo 1 elemento.

Le pasamos este método como propiedad a nuestra lista de tareas, y a su vez, este mismo
método hay que pasarlo a cada una de las tareas junto con su id (que utilizaremos para
identificar la tarea a eliminar), tal como se muestra a continuación:

Vamos a pasar el método a través de los componentes hasta llegar a task

Una vez que ya lo recibimos en el componente task, debemos de hacer uso de él. Sin
embargo, hasta ahora no hemos visto cómo podemos mandar parámetros en las
funciones que añadimos dentro de los eventos de html. Aunque en realidad, esto es
bastante sencillo. Tan sólo hay que seguir el ejemplo mostrado a continuación:

import React from 'react';

function Task(props) {

return (

<div className="task-container">

<h3 className="task">{props.value}</h3>

<div className="button-container">

<button

onClick={() => {props.handleDelete(props.id)}}

className="delete-button"

>

</button>

</div>

</div>

);

export default Task;

El evento onClick (y cualquier otro), recibe una función en javascript, por lo que
podemos invocar a una función que llame a otra función. En este caso, escribimos un
arrow function que llama a la función que recibimos por propiedades, y aquí es donde
podemos añadir el id para que encuentre cuál es la tarea que hay que eliminar.

Para asegurarnos de que los botones se vean correctamente, hay que agregar los
siguientes estilos a nuestro App.css:

.delete-button {

background-color: black;

border-radius: 13px;

height: 23px;

color: white;

border-width: 0px;

font-weight: bolder;

.button-container {

position: relative;

float: right;

margin: -32px 10px;

Finalmente, si todo está hecho de forma correcta, tendremos una aplicación

funcionando tal cuál como en el siguiente GIF:
 Resultado final de la aplicación

Conclusión
Finalmente. Ahora ya tienes todas las herramientas para poder colaborar en proyectos
basados en react, al menos hasta un nivel básico, y además, si seguiste todos los pasos,
deberías de tener un proyecto bien desarrollado en React que puedes mostrar a tus
amigos, profesores y colegas, que además te sirve como portafolio y es una excelente
herramienta de empleabilidad.

En la última parte de esta serie de tutoriales, haremos algunas mejoras extras al diseño
de nuestra aplicación, pero no añadirá nada nuevo en términos de conocimiento, por lo
que es totalmente opcional.

Lo que sigue a partir de aquí es investigar de cómo utilizar librerías de manejo de estado
más robusto como Redux, o Apollo con GraphQL, y por supuesto, aprender de cómo
integrar una arquitectura ahora sí con un backend completo, utilizando ExpressJS y
bases de datos como MongoDB, e incluso, a realizar el setup completo de React sin
utilizar create-react-app, y aprendiendo a configurar Webpack.

Podrás deducir que toda esta serie de tutoriales son sólo la punta del iceberg, pero una
buena herramienta para iniciarte como desarrollador en ReactJS.

Tal como dije al inicio de este grupo de tutoriales; este es el tutorial que hubiera querido
tener al principio como desarrollador con esta tecnología, por lo que, espero que te haya
servido.

Recuerda: Todos los avances de los tutoriales hasta este punto los puedes encontrar en
mi repositorio.

Gracias, y felicidades!

-Ernesto G.

Follow me on IG: @ernestognw

React JavaScript Web Development Tutorial Workshop

About Write Help Legal

Get the Medium app