Aprender una nueva tecnología como React puede ser confuso sin experiencia práctica. Como desarrollador, crear proyectos del mundo real es una de las formas más efectivas de comprender conceptos y funciones.

Siga el proceso de creación de una lista de tareas sencilla con React y mejore su comprensión de los fundamentos de React.

Requisitos previos para crear una lista de tareas pendientes

Antes de comenzar este proyecto, hay varios requisitos. Debe tener una comprensión básica de lo siguiente, HTML, CSS, JavaScript, ES6y Reaccionar. Necesitas tener Node.js y npm, el administrador de paquetes de JavaScript. También necesita un editor de código, como Visual Studio Code.

Aquí está el CSS que utilizará este proyecto:

/* estilos.css */
.aplicación {
Familia tipográfica: sans-serif;
mostrar: doblar;
justificar-contenido: centro;
alinear elementos: centro;
altura: 100vh;
}
.Hacer {
color de fondo: trigo;
texto alineado





instagram viewer
: centro;
ancho: 50%;
relleno: 20píxeles;
sombra de la caja: rgb(0, 0, 0, 0.24) 0píxeles 3píxeles 8píxeles;
margen: auto;
}

ul {
tipo-estilo-lista: ninguno;
relleno: 10píxeles;
margen: 0;
}
botón {
ancho: 70píxeles;
altura: 35píxeles;
color de fondo: marrón arena;
borde: ninguno;
tamaño de fuente: 15píxeles;
peso de fuente: 800;
borde-radio: 4píxeles;
sombra de la caja: rgb(0, 0, 0, 0.24) 0píxeles 3píxeles 8píxeles;
}
.aporte {
borde: ninguno;
ancho: 340píxeles;
altura: 35píxeles;
borde-radio: 9píxeles;
texto alineado: centro;
sombra de la caja: rgb(0, 0, 0, 0.24) 0píxeles 3píxeles 8píxeles;
}
.Arriba {
mostrar: doblar;
justificar-contenido: centro;
brecha: 12píxeles;
}
li {
mostrar: doblar;
justificar-contenido: uniformemente en el espacio;
alinear elementos: centro;
relleno: 10píxeles;
}
li:antes {
contenido: "*";
margen derecho: 5píxeles;
}

1. Configurar el entorno del proyecto

Esta etapa incluye todos los comandos y archivos necesarios para configurar el proyecto. Para comenzar, cree un nuevo proyecto React. Abra una terminal y ejecute este comando:

npx create-react-app lista de tareas pendientes

Esto toma unos minutos para instalar todos los archivos necesarios y también los paquetes. Crea una nueva aplicación React llamada lista de tareas pendientes. Una vez que veas algo como esto, estás en el camino correcto:

Navegue al directorio de su proyecto recién creado usando este comando:

lista de tareas de cd

Ejecute su proyecto localmente con este comando:

inicio de npm

Y luego vea el proyecto en su navegador en http://localhost: 3000/.

En la carpeta src de su proyecto, hay un par de archivos que no necesita. Eliminar estos archivos: aplicación.css, Aplicación.prueba.js, logotipo.svg, informeWebVitals.js, setupTests.js.

Asegúrese de buscar declaraciones de importación en los archivos disponibles y elimine cualquier referencia a los archivos eliminados.

2. Crear un componente TodoList

Este es el componente en el que implementaremos todos los códigos necesarios para la lista de tareas pendientes. Cree un archivo llamado "TodoList.js" en su carpeta src. Luego, para probar que todo funciona como debería, agregue el siguiente código:

importar Reaccionar de'reaccionar';
constante TodoLista = () => {
devolver (



Hola mundo </h2>
 </div>
 );
};
exportarpor defecto Lista de quehaceres; 

Abra su archivo App.js, importe el componente TodoList y reprodúzcalo dentro del componente de la aplicación. Se verá algo como esto:

importar Reaccionar de'reaccionar';
importar'./estilos.css'
importar Lista de quehaceres de'./Lista de quehaceres';
constante aplicación = () => {
devolver (




 </div>
 );
};
exportarpor defecto aplicación;

Vaya a su navegador local que tiene localhost: 3000 en ejecución y verifique que "Hello World" esté escrito en negrita. ¿Todo está bien? Al siguiente paso.

3. Manejar entrada y cambio de entrada

Este paso le permite desencadenar un evento cuando escribe una tarea en el cuadro de entrada. Importe el enlace useState de su paquete React. useState es un gancho React que le permite administrar el estado de manera eficiente.

importar Reaccionar, { estado de uso } de'reaccionar';

Use el enlace useState para crear una variable de estado llamada "inputTask" con un valor inicial de una cadena vacía. Además, asigne la función "setInputTask" para actualizar el valor de "inputTask" según la entrada del usuario.

constante [inputTask, setInputTask] = useState("");

Cree una función llamada "handleInputChange", tomando un parámetro de evento. Debería actualizar el estado de inputTask usando la función setInputTask. Acceda al valor del objetivo del evento con event.target.value. Esto se ejecutará cada vez que cambie el valor del campo de entrada.

constante manejarCambioEntrada = (evento) => {
 setInputTask (evento.objetivo.valor);
}; 

Devuelve un par de elementos JSX. El primero es el encabezado que dice "Mi lista de cosas por hacer", puede elegir el encabezado que desee. Incluya un par de atributos a sus elementos de entrada. tipo = "texto": Esto especifica su tipo de entrada como texto, valor={tarea de entrada}: esto vincula el valor del campo de entrada a la variable de estado inputTask, lo que garantiza que refleje el valor actual.onChange={handleInputChange}: Esto llama a la función handleInputChange cuando cambia el valor del campo de entrada, actualizando el estado de inputTask.

"Hacer">
Mi lista de tareas pendientes</h1>
"Arriba">
"aporte" tipo ="texto" valor={tarea de entrada}
 onChange={handleInputChange} placeholder="Introduce una tarea" />

Continuando, cree un botón que agregará la tarea ingresada a la lista.

"btn">AÑADIR</button>
 </div>
</div>

En esta etapa, así es como se verá la salida de su navegador.

4. Añadir funcionalidad al botón "AÑADIR"

Utilizar el useState gancho para crear una variable de estado llamada 'lista' con un valor inicial de una matriz vacía. La variable 'setList' almacena la matriz de tareas según la entrada del usuario.

constante [lista, establecerLista] = usarEstado([]);

Cree una función handleAddTodo que se ejecutará cuando el usuario haga clic en el botón "AÑADIR" para agregar una nueva tarea. Toma el parámetro todo, que representa la nueva tarea ingresada por el usuario. Luego, cree un objeto newTask con una identificación única generada usando Math.random(), y la propiedad todo que contiene el texto de entrada.

Continuando, actualice el estado de la lista usando el operador de propagación [… lista] para crear una nueva matriz con las tareas existentes en la lista. Agregue newTask al final de la matriz. Esto asegura que no mutamos la matriz de estado original. Finalmente, restablezca el estado de la tarea de entrada a una cadena vacía, borrando el campo de entrada cuando el usuario haga clic en el botón.

constante handleAddTodo = (hacer) => {
constante nueva tarea = {
 identificación: Matemáticas.aleatorio(),
 hacer: hacer
 };
 setList([...lista, nuevaTarea]);
 setInputTask('');
}; 

Incluir la al hacer clic atributo al elemento botón con el texto "AÑADIR". Al hacer clic, activa la handleAddTodo función, que agrega una nueva tarea al estado de la lista

 handleAddTodo (inputTask)}>ADD</button> 

En esta etapa, la salida de su navegador se verá igual, pero si hace clic en el botón "AÑADIR" después de ingresar una tarea, el campo de entrada se vaciará. Si eso está funcionando bien, al siguiente paso.

5. Agregar un botón Eliminar

Este es el paso final para permitir que los usuarios eliminen su tarea si han cometido un error o han completado la tarea. Cree una función handleDeleteTodo que actúe como un controlador de eventos cuando el usuario haga clic en el botón "Eliminar" para una tarea específica. Toma como parámetro el id de la tarea.

Dentro de la función, use el método de filtro en la matriz de lista para crear una nueva matriz newList que excluya la tarea con la identificación coincidente. El método de filtro recorre en iteración cada elemento de la matriz de lista y devuelve una nueva matriz que contiene solo los elementos que satisfacen la condición dada. En este caso, compruebe si el ID de cada tarea es igual al ID pasado como parámetro. Actualice el estado de la lista llamando a setList (newList), que establece el estado en la nueva matriz filtrada, eliminando efectivamente la tarea con la identificación coincidente de la lista.

constante handleDeleteTodo = (identificación) => {
constante nuevaLista = lista.filtro((hacer) =>
 todo.id !== id
 );
 setList (nuevaLista); 
};

Utilice el método map para iterar sobre cada elemento de la matriz de lista y devolver una nueva matriz. Luego, crea un

Acceda a la propiedad todo de cada objeto todo. por último, crea un botón que al hacer clic activa la función handleDeleteTodo con el id de la tarea correspondiente como parámetro, permitiéndonos eliminar la tarea de la lista.

<ul>
{ lista.mapa((hacer) => (
<linombre de la clase="tarea"llave={todo.id}>
 {todo.todo}
<botónal hacer clic={() => handleDeleteTodo (todo.id)}>Eliminarbotón>
li>
))}
ul>

Así es como debería verse su código final:

importar Reaccionar, { estado de uso } de'reaccionar';
constante TodoLista = () => {
constante [inputTask, setInputTask] = useState('');
constante [lista, establecerLista] = usarEstado([]);
constante handleAddTodo = () => {
constante nueva tarea = {
 identificación: Matemáticas.aleatorio(),
 todo: tarea de entrada
 };
 establecerLista([...lista, nueva tarea]);
 setInputTask('');
 };
constante handleDeleteTodo = (identificación) => {
constante nuevaLista = lista.filtro((hacer) => todo.id !== id);
 setList (nuevaLista);
 };
constante manejarCambioEntrada = (evento) => {
establecer tarea de entrada(evento.objetivo.valor);
 };
devolver (
<divisiónnombre de la clase="Hacer">

mi to-HacerLista

<divisiónnombre de la clase="Arriba">
<aportenombre de la clase="aporte"tipo="texto"valor={tarea de entrada}
 onChange={handleInputChange} placeholder="Introduce una tarea" />
<botónnombre de la clase="btn"al hacer clic={manejarAñadirTodo}>AGREGARbotón>
división>
<ul>
 { lista.mapa((hacer) => (
<linombre de la clase="tarea"llave={todo.id}>
 {todo.todo}
<botónal hacer clic={() => handleDeleteTodo (todo.id)}>
Borrar
botón>
li>
 ))}
ul>
división>
 );
};
exportarpor defecto Lista de quehaceres; 

Así es como será su resultado final, con los botones Agregar y Eliminar funcionando como se esperaba.

Felicitaciones, ha creado una lista de tareas pendientes que agrega y elimina tareas. Puede ir más allá agregando estilo y más funcionalidades.

Use proyectos del mundo real para aprender a reaccionar

La práctica puede ser una manera efectiva de aprender. Le permite aplicar los conceptos y las mejores prácticas de React de manera práctica, lo que refuerza su comprensión del marco. Hay toneladas de proyectos por ahí, deberías encontrar los correctos.