Reactjs で NPM UUID を使用する

Oluwafisayo Oluwatayo 2024年2月15日

React React NPM

Reactjs で NPM UUID を使用してシンプルな ID 生成アプリを作成する
Reactjs で NPM UUID を使用して To Do リストアプリを作成する
Reactjs で NPM UUID を使用してメモを取るアプリを作成する
まとめ

アプリが反応して組み込まれている場合、識別が似ているコンポーネントを使用する場合があります。 UUID により、これらのコンポーネントが確実に調整され、2つのコンポーネントが完全に類似している場合は更新されます。それ以外の場合、各コンポーネントは個別にレンダリングされます。

UUID は Universal Unique Identifier を意味し、構成が似ているがわずかな違いがあるアイテムを識別するのに役立ちます。アイテムのリストを作成するのに非常に便利です。

また、e コマース Web サイトに配置されたアイテムの識別と差別化にも最適です。たとえば、靴を販売する Web サイトの場合、UUID は、その Web サイトに表示されているさまざまな種類の靴を識別するのに役立ちます。

UUID によって生成される ID は繰り返されないため、React フレームワーク上で無数のアプリを作成する場合に非常に効果的です。さまざまな種類のアプリケーションを作成するために UUID を適用する方法を以下に示します。

Reactjs で NPM UUID を使用してシンプルな ID 生成アプリを作成する

UUID はサードパーティの依存関係であるため、npx を使用してプロジェクトフォルダーを作成した後、ターミナルからそのプロジェクトフォルダーに移動し、npm install uuid を使用して UUID 依存関係をインストールします。

それが完了したら、App.js 内に UUID をインポートします。また、react-dom から ReactDOM をインポートし、いくつかのコードを追加します。

コードスニペット - 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);

出力：

Reactjs NPM uuid を使用したシンプルな ID 生成アプリ

Web ページを開くと、長いコードが表示されます。これは生の状態の UUID を示しており、更新すると新しいコードが生成されます。

これは、UUID が要求に応じて新しい ID を生成するためです。これは、送信した要求が非常に似ていても、繰り返されることはありません。

Reactjs で NPM UUID を使用して To Do リストアプリを作成する

React で Todolist アプリを作成するために UUID を適用しましょう。 To Do リストにはアプリを使用してリストを作成する必要があるため、UUID は非常に便利です。 UUID は、リスト内の各項目の ID を生成するのに役立ちます。

まず、新しい反応プロジェクトを作成し、ターミナルを使用してプロジェクトフォルダーに移動し、いくつかの依存関係をインストールする必要があります。

ボタンとリストを設定できるように、ブートストラップをインストールします。 npm install react-bootstrap を使用します。

次に、React の遷移グループをインストールします。これにより、リストにアイテムを追加または削除するときにアニメーション効果が可能になります。

プロジェクトフォルダー内の npm install react-transition-group でそれを行います。

最後は UUID です。プロジェクトフォルダー内で npm i uuid を使用します。インストール後、index.js ファイル内の各依存関係をインポートしてから、コーディングを開始します。

コードスニペット - 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')
);

出力：

Reactjs NPM uuid を使用した To-Do リストアプリ

アプリでアイテムを追加および削除すると、コンポーネントの状態が変化します。したがって、コンポーネントの変更を処理するには、コンポーネントに useState フックを適用する必要があります。

次に、onClick イベントハンドラを 2つのボタンに割り当てます。最初のボタンは、削除ボタンとして追加されたすべてのアイテムに付けられます。これにより、アイテムの ID を使用してリストからアイテムを削除できます。

2 番目のボタンは、項目をリストに追加するために使用されます。 Add Item ボタンをクリックすると、入力フィールドのあるポップアップが表示されます。ここで、追加したい項目を入力します。

これを行うと、新しいアイテムがリストに表示されます。新しいアイテムが追加されると、新しい ID が自動的に生成されます。

onClick イベントハンドラーは、この ID を使用してアイテムを削除します。

Reactjs で NPM UUID を使用してメモを取るアプリを作成する

このメモ作成アプリは、以前に取り組んだ To Do リストアプリと同じように機能し、リストに項目を追加および削除します。

これは、UUID 依存関係がいかに効果的で適用可能であるかを示しています。このようなアプリの構築が容易になります。

まず、新しいプロジェクトを作成し、プロジェクトフォルダーに、npm install uuid を使用して UUID 依存関係をインストールします。次に、src 内に Main.js と Sidebar.js の 2つのファイルをさらに作成します。

Main.js は、メモを書き込むアプリのメインインターフェイスになります。 Sidebar.js は、メモを管理する場所になります。

App.js ファイル内で、UUID、Main.js、Sidebar.js をインポートし、次のコードを入力します。

コードスニペット - 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;

ここでは、コンポーネントを useState フックに割り当てます。これにより、アプリで作業するときにコンポーネントの状態が更新されます。 onAddNote イベントハンドラーは newNote 関数を開始し、新しいメモを追加します。

また、メモ作成アプリを構築しているため、HTML でメモをレンダリングするのに役立つ依存関係が必要です。 npm install react-markdown でマークダウンをインストールし、Main.js 内にインポートしてから、これらのコードを追加します。

コードスニペット - 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;

ここでは、作成したメモ内に入力しているので、コンポーネントを onChange イベントハンドラーに割り当てます。これにより、メモ作成アプリのテキスト領域内で行ったすべての変更が処理されます。

次に、サイドバーをコーディングしますが、最初に、検索、削除、および追加ボタンをアイコンとしてレンダリングするマテリアル UI 依存関係をインストールする必要があります。そこで、npm install @material-ui/core と npm install @material-ui/icons でインストールします。

次に、使用するアイコンをインポートし、Sidebar.js ファイルでいくつかのコーディングを行います。

コードスニペット - 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;

Web アプリを美しくするために、これらのコードを App.css 内に配置する必要があります。

コードスニペット - 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;
}

出力：

Reactjs NPM uuid を使用したメモ作成アプリ

まとめ

アイテムのリストを識別および管理する際の UUID の有効性は、アプリの構築、特にコーダーがアイテムの広範なリストをカテゴリとサブカテゴリに整理することになる e コマースおよびポートフォリオアプリで重要です。

著者： 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.

Reactjs で NPM UUID を使用してシンプルな ID 生成アプリを作成する

Reactjs で NPM UUID を使用して To Do リスト アプリを作成する

Reactjs で NPM UUID を使用してメモを取るアプリを作成する

まとめ

Reactjs で NPM UUID を使用して To Do リストアプリを作成する