Verwenden Sie die NPM-UUID in Reactjs

Oluwafisayo Oluwatayo 15 Februar 2024

React React NPM

Erstellen Sie eine einfache ID-generierende App mit NPM UUID in Reactjs
Erstellen Sie eine To-Do-Listen-App mit NPM UUID in Reactjs
Erstellen Sie eine Notizen-App mit NPM UUID in Reactjs
Abschluss

Wenn Apps in React integriert werden, gibt es Fälle, in denen wir Komponenten verwenden, die sich in der Identifizierung ähneln. Die UUID stellt sicher, dass diese Komponenten abgeglichen werden, und wenn zwei Komponenten völlig ähnlich sind, werden sie aktualisiert; Andernfalls wird jede Komponente einzeln gerendert.

Die UUID bedeutet Universal Unique Identifier, die uns hilft, Artikel zu identifizieren, die in der Zusammensetzung ähnlich sind, aber sehr geringfügige Unterschiede aufweisen. Es ist sehr nützlich, um eine Liste von Elementen zu erstellen.

Es ist auch ideal zum Identifizieren und Unterscheiden von Artikeln, die auf E-Commerce-Websites platziert werden. Bei einer Schuhverkaufs-Website hilft uns die UUID beispielsweise dabei, die verschiedenen Arten von Schuhen zu identifizieren, die auf dieser Website angezeigt werden.

Da die von der UUID generierten IDs nicht wiederholt werden, ist sie sehr effektiv, um unzählige Apps auf dem React-Framework zu erstellen. Wir werden unten sehen, wie wir die UUID zum Erstellen verschiedener Arten von Anwendungen anwenden können.

Erstellen Sie eine einfache ID-generierende App mit NPM UUID in Reactjs

Die UUID ist eine Drittanbieter-Abhängigkeit. Nachdem wir also unseren Projektordner mit npx erstellt haben, navigieren wir von unserem Terminal zu diesem Projektordner und installieren die UUID-Abhängigkeit mit npm install uuid.

Sobald dies erledigt ist, importieren wir die UUID in App.js. Wir werden auch ReactDOM von react-dom importieren und dann einige Codes hinzufügen:

Code-Snippet – 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);

Ausgang:

Einfache ID-Generierungs-App mit Reactjs NPM uuid

Wir sehen eine lange Reihe von Codes, die angezeigt werden, wenn wir die Webseite öffnen. Dies zeigt die UUID in ihrem Rohzustand, und sobald wir sie aktualisieren, wird ein neuer Code generiert.

Dies liegt daran, dass die UUID auf Anfrage eine neue ID generiert, selbst wenn die von uns gesendete Anfrage sehr ähnlich ist, und sie wird nie wiederholt.

Erstellen Sie eine To-Do-Listen-App mit NPM UUID in Reactjs

Lassen Sie uns die UUID anwenden, um eine Todolist-App in React zu erstellen. Die UUID ist sehr nützlich, da eine To-Do-Liste die Verwendung der App zum Erstellen einer Liste beinhaltet; Die UUID hilft uns, IDs für jedes Element in der Liste zu generieren.

Zunächst müssen wir ein neues Reaktionsprojekt erstellen, mit dem Terminal in den Projektordner navigieren und dann einige Abhängigkeiten installieren.

Wir werden Bootstrap installieren, damit wir die Schaltflächen und die Liste einrichten können. Wir werden npm install respond-bootstrap verwenden.

Als nächstes installieren wir eine Übergangsgruppe für React. Dies ermöglicht animierte Effekte, wenn wir Elemente zur Liste hinzufügen oder daraus entfernen.

Das machen wir mit npm install respond-transition-group im Projektordner.

Zuletzt ist die UUID; Wir verwenden npm i uuid im Projektordner. Nach den Installationen importieren wir jede Abhängigkeit in die Datei index.js und beginnen dann mit der Codierung.

Code-Snippet – 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')
);

Ausgang:

To-Do-Listen-App mit Reactjs NPM uuid

In der App werden wir Elemente hinzufügen und entfernen, und die Zustände der Komponente werden sich ändern. Daher müssen wir den useState-Hook auf unsere Komponente anwenden, um die Änderungen in der Komponente zu verarbeiten.

Dann weisen wir den beiden Buttons den Event-Handler onClick zu; Die erste Schaltfläche wird jedem Element hinzugefügt, das als Löschschaltfläche hinzugefügt wird. Dadurch können wir Artikel anhand der Artikel-ID aus der Liste löschen.

Die zweite Schaltfläche wird verwendet, um Elemente zur Liste hinzuzufügen. Nach dem Klick auf die Schaltfläche Artikel hinzufügen erscheint ein Popup mit einem Eingabefeld, in das wir den Artikel eingeben, den wir hinzufügen möchten.

Sobald wir das getan haben, wird das neue Element in der Liste angezeigt. Sobald ein neues Element hinzugefügt wird, wird automatisch eine neue ID dafür generiert.

Der Eventhandler onClick verwendet diese ID, um die Elemente zu entfernen.

Erstellen Sie eine Notizen-App mit NPM UUID in Reactjs

Diese Notizen-App funktioniert genauso wie die To-do-Listen-App, an der wir zuvor gearbeitet haben, da wir Elemente zu einer Liste hinzufügen und daraus entfernen.

Es zeigt, wie effektiv und anwendbar die UUID-Abhängigkeit sein kann. Es erleichtert das Erstellen von Apps wie dieser.

Zunächst erstellen wir ein neues Projekt und installieren dann im Projektordner die UUID-Abhängigkeit mit npm install uuid. Dann erstellen wir zwei weitere Dateien innerhalb der src, Main.js und Sidebar.js.

Die Main.js wird die Hauptschnittstelle der App sein, wo wir die Notizen schreiben werden. In Sidebar.js verwalten wir die Notizen.

In die Datei App.js importieren wir die UUID, Main.js, Sidebar.js und geben dann diese Codes ein:

Code-Snippet – 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;

Hier weisen wir unsere Komponenten dem Hook useState zu, sodass der Status der Komponenten aktualisiert wird, während wir in der App arbeiten. Der Ereignishandler onAddNote startet die Funktion newNote und fügt eine neue Notiz hinzu.

Da wir eine Notizen-App erstellen, benötigen wir außerdem eine Abhängigkeit, die uns hilft, die Notizen in HTML zu rendern. Wir installieren den Markdown mit npm install respond-markdown und importieren ihn in Main.js, dann fügen wir diese Codes hinzu.

Code-Snippet – 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;

Hier tippen wir in die erstellte Notiz, also weisen wir unsere Komponenten dem Event-Handler onChange zu. Dies behandelt alle Änderungen, die wir im Textbereich der Notizen-App vornehmen.

Als nächstes wollen wir die Seitenleiste codieren, aber zuerst müssen wir die Material-UI-Abhängigkeiten installieren, die die Schaltflächen zum Suchen, Löschen und Hinzufügen als Symbole darstellen. Also installieren wir mit npm install @material-ui/core und dann npm install @material-ui/icons.

Dann importieren wir die Symbole, die wir verwenden werden, und codieren in der Datei Sidebar.js:

Code-Snippet – 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;

Um die Web-App zu verschönern, müssen wir diese Codes in die App.css einfügen:

Codeschnipsel – 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;
}

Ausgang:

Notizen-App mit Reactjs NPM uuid

Abschluss

Die Effektivität der UUID beim Identifizieren und Verwalten einer Liste von Elementen ist entscheidend beim Erstellen von Apps, insbesondere bei E-Commerce- und Portfolio-Apps, bei denen Programmierer mit der Organisation einer umfangreichen Liste von Elementen in Kategorien und Unterkategorien zu tun haben.

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.