Construir una aplicación de notas con React

Introducción

En este proyecto, crearemos una aplicación simple de notas utilizando React. La aplicación permitirá a los usuarios agregar, editar y eliminar notas. Dividiremos el desarrollo en varios pasos, asegurándonos de que cada paso cumpla con requisitos específicos y agregue funcionalidad esencial.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderá:

Cómo crear un nuevo proyecto de React con el comando Create React App
Cómo construir componentes funcionales de React para crear una interfaz de usuario
Cómo administrar el estado utilizando el hook useState de React
Cómo agregar y administrar notas dentro de la aplicación
Cómo implementar funciones como agregar, editar y eliminar notas
Cómo manejar interacciones y eventos de los usuarios en componentes de React
Cómo dar estilo a una aplicación de React utilizando CSS
Cómo desarrollar una aplicación básica CRUD (Crear, Leer, Actualizar, Eliminar)
Cómo estructurar y organizar un proyecto de React
Cómo construir una interfaz de usuario simple y reactiva para una aplicación de notas

🏆 Logros

Después de completar este proyecto, podrá:

Configurar un nuevo proyecto de React
Crear y administrar componentes de React
Utilizar hooks de React como useState para administrar el estado de un componente
Manejar la entrada de usuario y las solicitudes de formulario en una aplicación de React
Pasar datos y funciones entre componentes padre e hijo utilizando props
Crear interfaces de usuario reactivas e interactivas en React
Implementar el almacenamiento y manipulación básica de datos dentro de una aplicación de React
Estructurar y organizar archivos de código en un proyecto de React
Utilizar CSS para dar estilo a componentes de React
Depurar y solucionar problemas en aplicaciones de React
Seguir las mejores prácticas para construir una aplicación de React

Configuración del proyecto

Requisitos:

Instalar dependencias en el nuevo proyecto de React.

Funcionalidad:

Inicializar el proyecto con las dependencias necesarias y una estructura básica de proyecto.

Pasos:

Abra una terminal y navegue hasta la carpeta del proyecto:
```
cd notes-app
```
Debe ejecutar este comando en el directorio project.
Instalar dependencias en el proyecto:
```
npm install
```
Una vez completada la instalación, se crea una carpeta node_modules; si no existe, significa que la instalación no fue exitosa.

Crear el componente de nota

Requisitos:

Crear un componente Nota que represente una nota individual.
El componente Nota debe mostrar el contenido de la nota, proporcionar un botón de edición y un botón de eliminación.

Funcionalidad:

Mostrar el título y el texto de una nota.
Proporcionar botones para editar y eliminar una nota.

Pasos:

Dentro de la carpeta src, cree un nuevo archivo llamado Nota.js.
Implemente el componente Nota de la siguiente manera:

import React from "react";

const Nota = ({ nota }) => {
  return (
    <div className="nota">
      <h3>{nota.titulo}</h3>
      <p>{nota.texto}</p>
      <button>Editar</button>
      <button>Eliminar</button>
    </div>
  );
};

export default Nota;

✨ Revisar Solución y Practicar

Crear el componente de App y el estado

Requisitos:

Crear un componente App que gestionará las notas y su estado.
Inicializar el estado para almacenar una matriz de notas.
Implementar funciones para agregar, eliminar y editar notas.

Funcionalidad:

Mantener una matriz de notas.
Agregar nuevas notas.
Eliminar notas.
Editar notas.

Pasos:

En la carpeta src, abra el archivo App.js.

Importe el hook useState al principio del archivo:

// App.js
import React, { useState } from "react";
import "./App.css";
import Nota from "./Nota";

Establezca el estado inicial y las funciones para agregar, eliminar y editar notas dentro del componente App:

// App.js
function App() {
  const [notas, setNotas] = useState([]);
  const [nuevaNota, setNuevaNota] = useState({ titulo: "", texto: "" });

  const agregarNota = () => {
    // TODO: Implementar la función agregarNota
  };

  const eliminarNota = (id) => {
    // TODO: Implementar la función eliminarNota
  };

  const editarNota = (id, nuevoTexto) => {
    // TODO: Implementar la función editarNota
  };

  return <div className="App">{/* El contenido de App va aquí */}</div>;
}

✨ Revisar Solución y Practicar

Implementar la funcionalidad de agregar nota

Requisitos:

Implementar la función agregarNota para agregar nuevas notas al estado.
Asegurarse de que las notas tengan un título y un texto.

Funcionalidad:

Agregar nuevas notas al estado.
Limpiar los campos de entrada después de agregar una nota.

Pasos:

Implementar la función agregarNota:

// App.js
const agregarNota = () => {
  if (nuevaNota.titulo && nuevaNota.texto) {
    const nuevoId = Date.now().toString();
    setNotas([...notas, { ...nuevaNota, id: nuevoId }]);
    setNuevaNota({ titulo: "", texto: "" });
  }
};

En su JSX, use manejadores onChange para capturar los valores de entrada y actualizar el estado:

// App.js
return (
  <div className="App">
    <h1>Aplicación de notas</h1>
    <div className="formulario-de-nota">
      <input
        type="text"
        placeholder="Título"
        value={nuevaNota.titulo}
        onChange={(e) => setNuevaNota({ ...nuevaNota, titulo: e.target.value })}
      />
      <textarea
        rows="4"
        cols="50"
        placeholder="Texto"
        value={nuevaNota.texto}
        onChange={(e) => setNuevaNota({ ...nuevaNota, texto: e.target.value })}
      />
      <button onClick={agregarNota}>Agregar nota</button>
    </div>
  </div>
);

✨ Revisar Solución y Practicar

Implementar la funcionalidad de eliminar nota

Requisitos:

Implementar la función eliminarNota para eliminar una nota del estado cuando se hace clic en el botón "Eliminar".

Funcionalidad:

Eliminar una nota del estado cuando se hace clic en el botón "Eliminar".

Pasos:

Implementar la función eliminarNota:

// App.js
const eliminarNota = (id) => {
  const notasActualizadas = notas.filter((nota) => nota.id !== id);
  setNotas(notasActualizadas);
};

Pasar la función eliminarNota como una propiedad al componente Nota para habilitar la eliminación de notas.

// App.js
<div className="App">
  <div className="lista-de-notas">
    {notas.map((nota) => (
      <Nota
        key={nota.id}
        nota={nota}
        onDelete={eliminarNota}
        onEdit={editarNota}
      />
    ))}
  </div>
</div>

✨ Revisar Solución y Practicar

Implementar la funcionalidad de editar nota

Requisitos:

Implementar la función editarNota para actualizar el texto de una nota cuando se hace clic en el botón "Editar".

Funcionalidad:

Mostrar el texto de la nota en un área de texto editable.
Actualizar el texto de la nota cuando se hace clic en el botón "Guardar".

Pasos:

Implementar la función editarNota:

// App.js
const editarNota = (id, nuevoTexto) => {
  const notasActualizadas = notas.map((nota) =>
    nota.id === id ? { ...nota, texto: nuevoTexto } : nota
  );
  setNotas(notasActualizadas);
};

Actualizar el componente Nota para manejar la edición:

// Nota.js
import React, { useState } from "react";
const Nota = ({ nota, onDelete, onEdit }) => {
  const [estaEditando, setEstaEditando] = useState(false);
  const [textoEditado, setTextoEditado] = useState(nota.texto);

  const manejarEdicion = () => {
    setEstaEditando(true);
  };

  const manejarGuardar = () => {
    onEdit(nota.id, textoEditado);
    setEstaEditando(false);
  };

  return (
    <div className="nota">
      <div className="cabecera-de-nota">
        <h3>{nota.titulo}</h3>
        <button onClick={() => onDelete(nota.id)}>Eliminar</button>
      </div>
      {estaEditando ? (
        <>
          <textarea
            rows="4"
            cols="50"
            value={textoEditado}
            onChange={(e) => setTextoEditado(e.target.value)}
          />
          <button onClick={manejarGuardar}>Guardar</button>
        </>
      ) : (
        <p>{nota.texto}</p>
      )}
      {!estaEditando && <button onClick={manejarEdicion}>Editar</button>}
    </div>
  );
};

✨ Revisar Solución y Practicar

Estilos (App.css)

Requisitos:

Aplicar estilos básicos a la aplicación para una interfaz visualmente atractiva.

Funcionalidad:

Dar estilo a los componentes de la aplicación para mejorar la experiencia del usuario.

Pasos:

Cree un archivo App.css y aplique estilos básicos a los componentes de su aplicación. Utilice el código CSS proporcionado para dar estilo a la aplicación.

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  max-width: 800px;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.header {
  background-color: #343a40;
  color: #fff;
  padding: 20px 0;
  text-align: center;
  font-size: 32px;
  margin-bottom: 20px;
  border-radius: 10px;
}

.note-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.note-form input[type="text"],
.note-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: none;
  border-bottom: 2px solid #007bff;
  background-color: transparent;
  font-size: 16px;
  transition: border-bottom 0.3s;
}

.note-form input[type="text"]:focus,
.note-form textarea:focus {
  border-bottom: 2px solid #0056b3;
  outline: none;
}

.note-form button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.note-form button:hover {
  background-color: #0056b3;
}

.note-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.note {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 300px;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}

.note:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.note-header h3 {
  margin: 0;
  font-size: 24px;
  color: #007bff;
}

.note-actions {
  display: flex;
  gap: 10px;
}

.note-actions button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.note-actions button:hover {
  background-color: #0056b3;
}

✨ Revisar Solución y Practicar

Ejecutando la aplicación

Para ejecutar tu aplicación de notas de React:

Abra su terminal o línea de comandos.
Asegúrese de estar en el directorio raíz del proyecto (donde se encuentra el archivo package.json).
Inicie el servidor de desarrollo:
```
npm start
```
Ahora debería ver una aplicación básica de React en ejecución en su navegador en el puerto 8080. A partir de esta base construiremos nuestra aplicación de notas.
El efecto de la página es el siguiente:

✨ Revisar Solución y Practicar

Resumen

En este proyecto, creamos una aplicación de notas simple utilizando React dividiendo el desarrollo en múltiples pasos. Configuramos el proyecto, creamos componentes para las notas, implementamos la funcionalidad para agregar, eliminar y editar notas y aplicamos estilos básicos. Siguiendo estos pasos, puedes construir una aplicación de notas funcional y expandir sus características para satisfacer tus necesidades.