React — Creando una app to do list con create-react-app y el Hook useState

Temario

• Introducción
• Creando una app con create-react-app
• Definiendo los componentes
• Creando componentes funcionales
• Construyendo la aplicación para subir a producción
• Subiendo el proyecto a un servidor

i. Introducción

En esta entrega vamos a crear un to-do list con React, lo haremos con create-react-app, componentes funcionales y el Hook useState.

Si llegaste aquí directamente y quieres aprender React desde cero, te recomiendo que inicies por acá (React — Primeros pasos…[ref])

La idea es tener algo así:

Ver proyecto en línea[ref]

Así que comencemos!!!…

ii. Creando una app con create-react-app

Lo primero que vamos a hacer es ir a la carpeta donde tenemos los proyectos, y desde ahí ejecutamos el siguiente comando:

Si tienes dudas por que npx o llegaste aquí directo, te recomiendo que inicies primero por acá (Mi primera App con create-react-app [ref])

Vamos a instalar el módulo para poder usar SASS, entonces en consola ejecutamos el siguiente comando:

Una vez que hemos descargado todo, vamos a levantar el servidor, y ver nuestra aplicación, pueden usar yarno npm :

Se debe abrir una ventana en el navegador, mostrando la aplicación.

iii. Definiendo los componentes

El siguiente paso, es definir qué componentes son los que vamos a construir, entonces:

• Checkbox — Es el componente que va a tener lo necesario para mostrar el checkbox, poder marcar/desmarcar una tarea
• FormTodo — Es el componente donde vamos a escribir una tarea, y vamos a poder agregarla.
• TaskList — Es el componente que va a tener una lista de tareas por hacer o hechas, donde va a poder eliminar todas las tareas que ya estén hechas.
• Container — Es el componente que va a pasar FormTodo a TaskList

iv. Creando componentes funcionales

Antes de generar los componentes funcionales, primero, vamos a limpiar el proyecto:

El componente App.js debe quedar así:

Los estilos App.css cambiar el nombre a App.scss y debe quedar así:

Eliminar : logo.svg

Nuestra carpeta debe verse así:

Ahora si el siguiente paso, es ir creando uno a uno de los componentes funcionales, pero sin nada de código (cargando sus respectivos hijos)

• Dentro de la carpeta src debemos crear la carpeta components
• Dentro de la carpeta components, vamos a crear el componente funcional Container.jsx (si estás utilizando visual code e instalaste los plugins, solo basta escribir rafce(react arrow function componente export)) y dar enter.

• Lo importamos y agregamos al JSX en el componente App.js , (el atajo en visual code es imp, para importar un componente)

• Creamos el componente FormTodo.jsx

• Creamos el componente TaskList.jsx

• Vamos a importar y agregar al JSX FormTodo, TaskList, en el componente funcional Container

• Creamos el componente Checkbox.jsx

• Vamos a importar y agregar al JSX Checkbox en el componente funcional TaskList

Si lo hemos hecho todo bien, debemos de ver lo siguiente en el navegador:

Y nuestras carpetas deben verse así:

a— FormTodo

Vamos a darle forma al componente funcional FormTodo, para que quede de la siguiente manera:

:: Vamos paso a paso

• Primero agregamos los elementos input y button.
• Después generamos el estado description para asignarlo al input.
• Finalmente validamos el botón, sí description no tiene valor lo deshabilitamos, caso contrario lo habilitamos.

• Vamos a crear un manejador de evento (onSubmit) para el formulario form .
• Cuando se de enter en el input o click en el botón, debe ejecutar el método handleSubmit(No olvidemos usar e.preventDefault(), para evitar que se refresque la página).
• Por último, limpiamos el estado description, con setDescription .

• Vamos a recibir de props el método handleAddItem, que le vamos a mandar el nuevo registro (se le debe mandar id, done, description)

:: Código completo

:: Ejemplo de la app

b — Container

Vamos a darle forma al componente funcional Container, para que quede de la siguiente manera:

:: Vamos paso a paso

• Vamos a crear el estado list, que nos va a servir para almacenar los datos.
• En el componente FormTodo vamos a agregarle el atributo handleAddItem y le vamos a pasar el método handleAddItem, donde vamos a actualizar el estado list.

• Agregamos los atributos de list y setList en el componente TaskList, y le pasamos el estado.

:: Código completo

C — TaskList

Vamos a darle forma al componente funcional TaskList, para que quede de la siguiente manera:

:: Vamos paso a paso

• Vamos a recibir de props la propiedad list y el método setList , la idea es recorrer list con map, para generar “n” componentes de Checkbox
• Si la list viene vacía, mostramos el mensaje No task y ocultamos el botón, caso contrario, mostramos la lista y el botón.

• Vamos a crear un manejador de eventos para onChange para el componente Checkbox
• Vamos a crear un método onChangeStatus, para el manejador onChange
• El método onChangeStatus va a recibir los datos del Checkbox que haya cambiado, por lo que debemos de recorrer con map nuestra lista list , y actualizar los valores.

• Vamos a crear un manejador de eventos para onClick para el elemento button
• Vamos a crear un método onClickRemoveItem, para el manejador onClick
• El método onClickRemoveItem , vamos filtrar la lista eliminando todos los ítems que done === true y posteriormente actualizar la lista con setList

:: Código completo

:: Ejemplo de la app

D— Checkbox

Vamos a darle forma al componente funcional Checkbox, para que quede de la siguiente manera:

:: Vamos paso a paso

• Vamos a recibir de props la propiedad data y el método onChange .
• De data vamos a abstraer las desestructurar id, description, done, asignamos las propiedades al JSX.
• En el atributo onChange del elemento input , vamos a agregar el método onChange , cuando se le de click, va a ejecutar el método.

:: Ejemplo de la app

Hasta aquí ya tenemos al 100% la funcionalidad con React, ahora solo falta :

• Agregar estilos
• Modificaciones al componente Checkbox, ya que usa SVG .

Por ahora vamos agregar todos los estilos en App.scss , entonces, copiar y pegar:

:: Ejemplo de la app

Para que se vea animado el Checkbox, he sacado el código de codepen[ref], ahora agregamos el SVG al componente funcional Checkbox:

:: Ejemplo de la app

:: Ejemplo completo de la app

:: Descarga ejemplo completo

• Ver código completo en GitHub[ref].

v. Construyendo la aplicación para subir a producción

Una vez que tenemos nuestro proyecto, el siguiente paso es construir el proyecto para producción, entonces, en consola debemos ejecutar el siguiente comando (no olvides estar en la carpeta del proyecto)

Si lo hemos hecho bien, la consola debe verse algo así:

Con este comando, lo que hace es crear una carpeta dentro de la aplicación, llamada build, que es nuestro proyecto listo para mandar a producción.

vi. Subiendo el proyecto a un servidor (netlify)

Hay muchos servidores donde podemos alojar nuestra aplicación, para este proyecto vamos a utilizar netlify[ref].

• Lo primero, es entrar a la página de netlify[ref]
• Nos vamos a loguear (es completamente gratuito)
• Una vez abierto, debemos de ver una pantalla como esta:

Tenemos varias formas de subir el proyecto:

• La primera y más fácil, es arrastrar la carpeta a la página, ver la siguiente imagen:

Y eso es todo!, te comparto la liga que he generado:

https://react-app-todo-list-2020.netlify.com/

• La otra forma es subir el repositorio a Github, una vez arriba, nos vamos al dashboard[ref], y le damos click al botón New site from Git

Le damos click en GitHub, y vinculamos la cuenta.

Una vez que vinculamos nuestro usuario con la página, debe salir una pantalla como la siguiente:

Buscamos el proyecto que vamos a subir, y le damos click, después le decimos de que rama va a tomar el proyecto y que comando es el que va a utilizar para construirlo, así como la carpeta que va a subir y por último le damos click a Deploy site

Cuando haya terminado, nos debe salir algo como la siguiente imagen:

Nota: La desventaja de hacerlo así es que toma más tiempo construirlo, que subirlo directamente la carpeta, pero la ventaja es de que siempre va a estar vinculado al proyecto.

En la siguiente entrega vamos a ver React — Valores por defecto con defaultProps y valores predeterminados con ES6

La entrega pasada vimos React — Mi primera App con create-react-app

Bibliografía y links que te puede interesar…

mauriciogc/my-todo-list-app

facebook/create-react-app

A Beginner’s Guide to Sass

React App