Usar NPM UUID en Reactjs

Oluwafisayo Oluwatayo 15 febrero 2024

React React NPM

Cree una aplicación de generación de ID simple usando NPM UUID en Reactjs
Cree una aplicación de lista de tareas pendientes usando NPM UUID en Reactjs
Cree una aplicación para tomar notas usando NPM UUID en Reactjs
Conclusión

Cuando las aplicaciones están integradas en React, hay instancias en las que usamos componentes que son similares en identificación. El UUID garantiza que estos componentes se reconcilien y, cuando dos componentes sean totalmente similares, se actualicen; de lo contrario, cada componente se renderiza individualmente.

El UUID significa Universal Unique Identifier, que nos ayuda a identificar elementos que son similares en composición pero tienen diferencias muy leves. Es muy útil para hacer una lista de artículos.

También es ideal para identificar y diferenciar artículos colocados en sitios web de comercio electrónico. Por ejemplo, para un sitio web de venta de zapatos, el UUID nos ayudará a identificar los distintos tipos de zapatos que se muestran en ese sitio web.

Debido a que los ID generados por el UUID no se repiten, es muy efectivo para crear innumerables aplicaciones en el marco React. Veremos a continuación cómo podemos aplicar el UUID para crear diferentes tipos de aplicaciones.

Cree una aplicación de generación de ID simple usando NPM UUID en Reactjs

El UUID es una dependencia de terceros, por lo que después de haber creado nuestra carpeta de proyecto usando npx, navegaremos a esa carpeta de proyecto desde nuestra terminal e instalaremos la dependencia de UUID usando npm install uuid.

Una vez hecho esto, importaremos el UUID dentro de App.js. También importaremos ReactDOM desde react-dom y luego agregaremos algunos códigos:

Fragmento de código- App.js:

import React from "react";
import ReactDOM from "react-dom";
import { v4 as uuidv4 } from "uuid";
import "./App.css";

function App() {
  return (
    <div className="App">
      <h1>{uuidv4()}</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Producción:

Aplicación de generación de ID simple usando Reactjs NPM uuid

Veremos un largo tramo de códigos mostrados cuando abramos la página web. Esto muestra el UUID en su estado original y, una vez que actualizamos, se genera un nuevo código.

Esto se debe a que el UUID genera una nueva ID cuando se solicita, incluso cuando la solicitud que enviamos es muy similar, y nunca se repite.

Cree una aplicación de lista de tareas pendientes usando NPM UUID en Reactjs

Apliquemos el UUID para crear una aplicación Todolist en reaccionar. El UUID es muy útil porque una lista de tareas implica usar la aplicación para hacer una lista; el UUID nos ayuda a generar ID para cada elemento de la lista.

Para empezar, necesitaremos crear un nuevo proyecto de reacción, navegar a la carpeta del proyecto usando la terminal y luego instalar un par de dependencias.

Instalaremos bootstrap para permitirnos configurar los botones y la lista. Usaremos npm install react-bootstrap.

A continuación, instalaremos un grupo de transición para React. Esto permitirá efectos animados cuando agreguemos o eliminemos elementos de la lista.

Lo haremos con npm install react-transition-group dentro de la carpeta del proyecto.

El último es el UUID; usamos npm i uuid dentro de la carpeta del proyecto. Después de las instalaciones, importaremos cada dependencia dentro del archivo index.js, y luego comenzaremos la codificación.

Fragmento de código- index.js:

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { Container, ListGroup, Button } from 'react-bootstrap';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { v4 as uuidv4 } from "uuid";
import './App.css';

function TodoList() {
  const [items, setItems] = useState([
    { id: uuidv4(), text: 'Buy eggs' },
    { id: uuidv4(), text: 'Pay bills' },
    { id: uuidv4(), text: 'Invite friends over' },
    { id: uuidv4(), text: 'Fix the TV' },
  ]);
  return (
    <Container style={{ marginTop: '2rem' }}>
      <ListGroup style={{ marginBottom: '1rem' }}>
        <TransitionGroup className="todo-list">
          {items.map(({ id, text }) => (
            <CSSTransition
              key={id}
              timeout={500}
              classNames="item">
              <ListGroup.Item>
                <Button
                  className="remove-btn"
                  variant="danger"
                  size="sm"
                  onClick={() =>
                    setItems(items =>
                      items.filter(item => item.id !== id)
                    )
                  }
                >
                  &times;
                </Button>
                {text}
              </ListGroup.Item>
            </CSSTransition>
          ))}
        </TransitionGroup>
      </ListGroup>
      <Button
        onClick={() => {
          const text = prompt('Enter some text');
          if (text) {
            setItems(items => [
              ...items,
              { id: uuidv4(), text },
            ]);
          }
        }}
      >
        Add Item
      </Button>
    </Container>
  );
}

ReactDOM.render(
  <TodoList />,
  document.getElementById('root')
);

Producción:

Aplicación de lista de tareas pendientes usando Reactjs NPM uuid

En la aplicación, agregaremos y eliminaremos elementos, y los estados del componente cambiarán. Por lo tanto, debemos aplicar el enlace useState a nuestro componente para manejar los cambios en el componente.

Luego asignaremos el controlador de eventos onClick a los dos botones; el primer botón se adjunta a cada elemento que se agrega como un botón de eliminación. Esto nos permite eliminar elementos de la lista usando la identificación del elemento.

El segundo botón se utiliza para agregar elementos a la lista. Una vez que se hace clic en el botón Agregar elemento, aparece una ventana emergente con un campo de entrada, y aquí es donde ingresamos el elemento que deseamos agregar.

Una vez que hacemos eso, el nuevo elemento se muestra en la lista. Una vez que se agrega un nuevo artículo, se genera automáticamente una nueva ID para él.

El controlador de eventos onClick utiliza este ID para eliminar los elementos.

Cree una aplicación para tomar notas usando NPM UUID en Reactjs

Esta aplicación para tomar notas funciona igual que la aplicación de lista de tareas en la que trabajamos anteriormente, ya que agregamos y eliminamos elementos de una lista.

Muestra cuán efectiva y aplicable puede ser la dependencia de UUID. Facilita la creación de aplicaciones como esta.

Para comenzar, crearemos un nuevo proyecto y luego, en la carpeta del proyecto, instalaremos la dependencia UUID usando npm install uuid. Luego crearemos dos archivos más dentro del src, Main.js y Sidebar.js.

El Main.js será la interfaz principal de la aplicación donde escribiremos las notas. El Sidebar.js será donde gestionaremos las notas.

Dentro del archivo App.js, importaremos el UUID, Main.js, Sidebar.js, y luego escribiremos estos códigos:

Fragmento de código- App.js:

import { useState } from "react";
import {v4 as uuidv4} from "uuid";
import "./App.css";
import Main from "./Main";
import Sidebar from "./Sidebar";

const newNote = () => {
  return { id: uuidv4(), title: "", body: "", lastModified: Date.now() };
};

function App() {
  const [notes, setNotes] = useState([]);
  const [filterednotes, setFilteredNotes] = useState([]);
  const [activeNote, setActiveNote] = useState(false);

  const onAddNote = () => {
    setNotes([newNote(), ...notes]);
  };

  const onUpdateNote = (updatedNote) => {
    const updatedNotesArray = notes.map((note) => {
      if (note.id === activeNote) {
        return updatedNote;
      }
      return note;
    });

    setNotes(updatedNotesArray);
  };

  const onDeleteNote = (idToDelete) => {
    setNotes(notes.filter((note) => note.id !== idToDelete));
  };

  const getActiveNote = () => {
    return notes.find((note) => note.id === activeNote);
  };

  return (
    <div className="App">
      <Sidebar
        notes={notes}
        setNotes={setNotes}
        onAddNote={onAddNote}
        onDeleteNote={onDeleteNote}
        activeNote={activeNote}
        setActiveNote={setActiveNote}
        filterednotes={filterednotes}
        setFilteredNotes={setFilteredNotes}
      />
      <Main activeNote={getActiveNote()} onUpdateNote={onUpdateNote} />
    </div>
  );
}

export default App;

Aquí, asignamos nuestros componentes al gancho useState, por lo que el estado de los componentes se actualiza a medida que trabajamos en la aplicación. El controlador de eventos onAddNote inicia la función newNote, agregando una nueva nota.

Además, dado que estamos creando una aplicación para tomar notas, necesitamos una dependencia que nos ayude a representar las notas en HTML. Instalaremos el markdown con npm install react-markdown y lo importaremos dentro de Main.js, luego agregaremos estos códigos.

Fragmento de código- Main.js:

import ReactMarkdown from "react-markdown";

const Main = ({ activeNote, onUpdateNote }) => {
  const onEditField = (key, value) => {
    onUpdateNote({
      ...activeNote,
      [key]: value,
      lastModified: Date.now()
    });
  };

  if (!activeNote)
    return <div className="no-active-note">No note selected</div>;
  return (
    <div className="app-main">
      <div className="app-main-note-edit">
        <input
          type="text"
          id="title"
          placeholder="Title"
          value={activeNote.title}
          onChange={(e) => onEditField("title", e.target.value)}
          autoFocus
        />
        <textarea
          id="body"
          placeholder="Write your note here..."
          value={activeNote.body}
          onChange={(e) => onEditField("body", e.target.value)}
        />
      </div>
      <div className="app-main-note-preview">
        <h1 className="preview-title">{activeNote.title}</h1>
        <ReactMarkdown className="markdown-preview">
          {activeNote.body}
        </ReactMarkdown>
      </div>
    </div>
  );
};

export default Main;

Aquí estamos escribiendo dentro de la nota creada, por lo que asignamos nuestros componentes al controlador de eventos onChange. Esto maneja todos los cambios que hacemos dentro del área de texto de la aplicación para tomar notas.

A continuación, queremos codificar la barra lateral, pero primero debemos instalar las dependencias de material-UI que representarán los botones de búsqueda, eliminación y adición como iconos. Así que instalamos con npm install @material-ui/core y luego npm install @material-ui/icons.

Luego importamos los íconos que usaremos y hacemos un poco de codificación en el archivo Sidebar.js:

Fragmento de código- Sidebar.js:

import AddIcon from "@material-ui/icons/Add";
import SearchIcon from "@material-ui/icons/Search";
import DeleteIcon from "@material-ui/icons/Delete";
import { useState } from "react";

const Sidebar = ({
  notes,
  filterednotes,
  setFilteredNotes,
  onAddNote,
  onDeleteNote,
  activeNote,
  setActiveNote
}) => {
  const sortedNotes = notes.sort((a, b) => b.lastModified - a.lastModified);
  const [input, setInput] = useState("");
  const getInput = (text) => {
    setInput(text);
    setFilteredNotes((prev) => {
      if (!text) {
        return notes;
      }
      return notes.filter((note) =>
        note.title.toLowerCase().includes(text.toLowerCase())
      );
    });
  };

  const currentActiveNotes = input ? filterednotes : notes;

  return (
    <div className="app-sidebar">
      <div className="app-sidebar-header">
        <h1>
          <span className="highlight">Notes</span>
        </h1>
        <AddIcon className="app-sidebar-header-add" onClick={onAddNote} />
      </div>
      <div className="app-sidebar-search">
        <input
          type="text"
          placeholder="Search"
          onChange={(e) => getInput(e.target.value)}
          value={input}
        ></input>
        <SearchIcon className="app-sidebar-search-icon" />
      </div>
      <div className="app-sidebar-notes">
        {currentActiveNotes.map((note) => (
          <div
            className={`app-sidebar-note ${note.id === activeNote && "active"}`}
            onClick={() => setActiveNote(note.id)}
          >
            <DeleteIcon
              className="sidebar-note-delete"
              onClick={() => onDeleteNote(note.id)}
            />
            <div className="sidebar-note-title">
              <strong>{note.title}</strong>
            </div>
            <p>{note.body && note.body.substr(0, 100) + "..."}</p>
            <small className="note-meta">
              {new Date(note.lastModified).toLocaleDateString("en-GB", {
                hour: "2-digit",
                minute: "2-digit"
              })}
            </small>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Sidebar;

Para embellecer la aplicación web, necesitamos poner estos códigos dentro de App.css:

Fragmento de código- App.css:

@import url("https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");

* {
  box-sizing: border-box;
}

/* GLOBAL STYLES */
:root {
  --light-grey: #f4f4f4;
  --red-color: #ff5f5f;
  --h1-font: 35px;
  --reg-font: 24px;
  --top-padding: 30px;
}

body {
  font-family: "Roboto", sans-serif;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  font-size: 16px;
  background-color: #eeeeee;
}

.App {
  display: flex;
  padding: 20px 50px;
  height: 100vh;
}

/* SIDEBAR STYLES */

.app-sidebar {
  background-color: #fff;
  width: 30%;
  height: 95vh;
  box-shadow: 10px 10px 30px 1px rgba(0, 0, 0, 0.1);
  border-radius: 30px;
  padding: var(--top-padding) 30px;
}

.app-sidebar-header {
  display: flex;
  position: relative;
  padding: 25px 0;
  background-color: white;
}

.app-sidebar-header h1 {
  margin: 0;
}

.highlight {
  position: relative;
}

.highlight:after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 30%;
  top: 25px;
  left: 0;
  background-color: var(--red-color);
  opacity: 0.3;
}

.app-sidebar-header-add {
  transform: scale(1.5);
  color: var(--red-color);
  position: absolute;
  right: 0px;
  cursor: pointer;
}

.app-sidebar-search {
  border: 1px solid var(--red-color);
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 30px;
}

.app-sidebar-search input {
  border: none;
  padding-left: 10px;
  font-size: 13px;
  width: 100%;
}

.app-sidebar-search-icon {
  color: var(--red-color);
}

.app-sidebar-notes {
  margin-top: 20px;
  height: calc(95vh - 200px);
  overflow-y: scroll;
}

.app-sidebar-note {
  padding: 20px;
  cursor: pointer;
  border-radius: 15px;
  border: 1px solid var(--red-color);
  margin-bottom: 10px;
  position: relative;
  background-color: #fff;
  overflow: hidden;
}

.sidebar-note-delete {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--red-color);
}

.sidebar-note-title {
  display: flex;
  justify-content: space-between;
  color: #999;
}

.app-sidebar-note p {
  margin: 3px 0;
  font-size: 13px;
  color: #999;
}

.app-sidebar-note small {
  display: block;
  color: #999;
  margin-top: 10px;
  font-size: 10px;
}

.app-sidebar-note:hover {
  background: #ddd;
}

.app-sidebar-note.active,
.app-sidebar-note.active p,
.app-sidebar-note.active small,
.app-sidebar-note.active .sidebar-note-delete {
  background: var(--red-color);
  color: #fff;
}

.app-sidebar-note.active .sidebar-note-title {
  color: black;
}

.app-main {
  width: 70%;
  height: 90vh;
}

.app-main-note-edit,
.app-main-note-preview {
  height: 47vh;
  border-radius: 30px;
  margin-left: 20px;
  margin-bottom: 10px;
}

.no-active-note {
  width: 70%;
  height: 100vh;
  line-height: 100vh;
  text-align: center;
  font-size: 2rem;
  color: #999;
}

.app-main-note-edit {
  padding: 25px;
  background-color: var(--red-color);
}

.app-main-note-edit input,
textarea {
  display: block;
  border: none;
  margin-bottom: 20px;
  width: 100%;
  height: calc(47vh - 130px);
  padding: 20px;
  resize: none;
  font-size: inherit;
  font-family: inherit;
  border-radius: 15px;
}

.app-main-note-edit input {
  height: 50px;
  font-size: 1.5rem;
}

.app-main-note-preview {
  border-top: 1px solid #ddd;
  overflow-y: scroll;
  background-color: #fff;
}

.preview-title {
  padding: 45px 45px 0 45px;
  margin: 0;
}

.markdown-preview {
  padding: 0 45px 45px 45px;
  font-size: 1rem;
  line-height: 2rem;
}

Producción:

Aplicación para tomar notas usando Reactjs NPM uuid

Conclusión

La efectividad del UUID para identificar y administrar una lista de elementos es fundamental en la creación de aplicaciones, especialmente en aplicaciones de cartera y comercio electrónico, donde los codificadores se ocuparán de organizar una extensa lista de elementos en categorías y subcategorías.

Autor: Oluwafisayo Oluwatayo

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.