¿Cómo crear una identificación única en ReactJS?

En este artículo, veremos los pasos simples para crear una identificación de referencia única en reaccionar JS. Esto tiene muchos usos, como dar a la imagen cargada por el usuario un nombre único para guardar en una base de datos.

Enfoque: Usaremos Uuid V4 en este tutorial. Uuid v4 es una biblioteca o paquete React que crea un identificador único universal (UUID). Es un generador de identificadores únicos de 128 bits. Los bits que componen un UUID v4 se generan aleatoriamente y sin lógica inherente. Debido a esto, no hay forma de identificar la información sobre la fuente mirando el UUID, por lo que es muy exclusivo.

A continuación se muestra la implementación paso a paso:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2:  después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Estructura del proyecto: después de crear, el directorio de su proyecto debería verse así.

Directorio de proyectos

Paso 3: elimine todos los archivos de la carpeta src excepto index.js y app.js (no es necesario pero se recomienda). Luego, instale UUID v4 usando el siguiente comando:

npm install uuidv4

Paso 4: Importe el paquete a su componente, página o código, etc. Ahora puede asignar la ID única a cualquier variable usando el siguiente código. unique_id es un ejemplo aquí, puede ser cualquier nombre de variable. Estamos almacenando la identificación única en él. Luego puede console.log() para ver el resultado y también usarlo donde sea necesario. Aquí lo estoy mostrando en una etiqueta <p>.

Si la identificación única es demasiado larga, puede dividirla o extraer una pequeña parte para usarla. Podemos usar la función slice() de JavaScript aquí. Toma 2 parámetros, el número de caracteres y el último carácter. La variable small_id almacenará esta identificación dividida. Mostraremos ambos ID en el navegador para ver la diferencia.

//import uuid v4
import { v4 as uuid } from 'uuid';
  
export default function App() {
  const unique_id = uuid();
  const small_id = unique_id.slice(0,8)
  return (
    <div className="App">
      <h1>Unique ID</h1>
      <p>{unique_id}</p>
      <h1>Sliced Unique ID</h1>
      <p>{small_id}</p>
    </div>
  );
}

Paso para ejecutar la aplicación: Para ejecutar la aplicación, use el siguiente comando:

npm start

Salida: ahora, si ejecuta la aplicación, la identificación única se mostrará debajo del encabezado. Cada vez que actualice, se mostrará una identificación nueva y única sin repetición .

Producción