Erstellen einer React-App in Visual Studio

Artikel
02/04/2025

In diesem Lernprogramm erstellen Sie ein React-Front-End für eine to-do Listenweb-App mit JavaScript und Visual Studio 2022. Der Code für diese App finden Sie unter ToDoJSWebApp.

Voraussetzungen

Stellen Sie sicher, dass Sie Folgendes installieren:

Visual Studio 2022 oder höher. Wechseln Sie zur Visual Studio-Downloads Seite, um sie kostenlos zu installieren.
npm (https://www.npmjs.com/), das in Node.jsenthalten ist.

Erstellen der React ToDo List-App

Wählen Sie in Visual Studio Datei > Neues > Projekt aus, um das Dialogfeld "Neues Projekt erstellen" zu öffnen, wählen Sie die Vorlage React App JavaScript aus, und wählen Sie dann Nextaus.
Geben Sie dem Projekt den Namen TodoWebApp, und wählen Sie Erstellen aus.

Dadurch wird das JavaScript-Projekt mithilfe des Vite-Befehlszeilentoolserstellt.
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den src-Ordner, und wählen Sie Hinzufügen > Neuer Ordner aus. und erstellen Sie einen neuen Ordner mit dem Namen components.

Es ist eine gängige Konvention, Komponenten in einem Komponentenordner zu platzieren, dies ist jedoch nicht erforderlich.
Klicken Sie mit der rechten Maustaste auf den neuen Ordner, wählen Sie Hinzufügen > React JSX-Komponentendatei aus, nennen Sie sie TodoList, und klicken Sie auf Hinzufügen.

Dadurch wird eine neue JSX-Datei im Komponentenordner erstellt.
Öffnen Sie die TodoList Komponente, und ersetzen Sie den Standardinhalt durch Folgendes:
```
function TodoList() {
  return (
    <h2>TODO app contents</h2>
  );
}
```
Diese Komponente zeigt eine Kopfzeile an, die Sie später ersetzen werden.

Als Nächstes verbinden Sie diese Komponente in der App. App.jsx ist die geladene Hauptkomponente, die die to-do Listenanwendung darstellt. Diese Komponente wird in der main.jsx Datei verwendet.
Öffnen Sie im Projektmappen-Explorer App.jsx, entfernen Sie alle Importe von oben, und löschen Sie den Inhalt der return-Anweisung. Die Datei sollte wie folgt aussehen.
```
function App() {
  return (
    <>
      <TodoList />
    </>
  );
}
export default App;
```
Wenn Sie die TodoList-Komponente hinzufügen möchten, platzieren Sie den Cursor innerhalb des Fragments, und geben Sie dann <TodoL RETURNein. Dadurch werden die Komponente und die Import-Anweisung hinzugefügt.

Löschen Sie als Nächstes die CSS-Dateien.
Öffnen Sie App.css, und löschen Sie alle Inhalte.

Öffnen Sie Index.css, und entfernen Sie alle Inhalte mit Ausnahme der Formatvorlagen für :root:

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;
}

Ausführen der App

Wählen Sie die Schaltfläche Debuggen starten auf der Symbolleiste aus, oder drücken Sie die F5-Tastenkombination.

Die App wird in einem Browserfenster geöffnet.

Screenshot der App, die im Browser ausgeführt wird.

to-do-Listenfunktionen zur App hinzufügen

Sie können die App laufen lassen. Während Sie Änderungen vornehmen, aktualisiert die App automatisch mit den aktuellen Inhalten durch die Unterstützung des Supports für Hot Module Replacement von Vite. Einige Aktionen, z. B. das Hinzufügen von Ordnern oder das Umbenennen von Dateien, erfordern, dass Sie das Debuggen beenden und dann die App neu starten, aber im Allgemeinen können Sie sie beim Entwickeln der App im Hintergrund ausführen lassen. Öffnen Sie die TodoList.jsx Komponente, damit wir damit beginnen können, sie zu definieren.

Öffnen Sie im Projektmappen-Explorer TodoList.jsx, und fügen Sie die Benutzeroberfläche hinzu, die zum Anzeigen und Verwalten von to-do Listeneinträgen erforderlich ist. Ersetzen Sie den Inhalt durch den folgenden Code:
```
function TodoList() {
  return (
    <div>
      <h1>TODO</h1>
      <div>
        <input type="text" placeholder="Enter a task" required aria-label="Task text" />
        <button className="add-button" aria-label="Add task">Add</button>
      </div>
      <ol id="todo-list">
        <p>existing tasks will be shown here</p>
      </ol>
    </div>
  );
}
export default TodoList;
```
Der vorangehende Code fügt ein Eingabefeld für die neue to-do Aufgabe und eine Schaltfläche zum Übermitteln der Eingabe hinzu. Als Nächstes verbinden Sie die Schaltfläche „Hinzufügen“. Verwenden Sie den useState React-Hook, um zwei Statusvariablen hinzuzufügen, eine für die Aufgabe, die hinzugefügt wird, und eine weitere zum Speichern der vorhandenen Aufgaben. In diesem Lernprogramm werden die Aufgaben im Arbeitsspeicher und nicht im persistenten Speicher gespeichert.
Fügen Sie die folgende Import-Anweisung zu TodoList.jsx hinzu, um useStatezu importieren.
```
import { useState } from 'react'
```
Verwenden Sie als Nächstes diesen Hook, um die Statusvariablen zu erstellen. Fügen Sie den folgenden Code in der funktion TodoList oberhalb der Return-Anweisung hinzu.
```
const [tasks, setTasks] = useState(["Drink some coffee", "Create a TODO app", "Drink some more coffee"]);
const [newTaskText, setNewTaskText] = useState("");
```
Dadurch werden zwei Variablen tasks und newTaskTextfür die Daten und zwei Funktionen eingerichtet, die Sie zum Aktualisieren dieser Variablen, setTasks und setNewTasksaufrufen können. Wenn ein Wert für eine Zustandsvariable geändert wird, rendert React die Komponente automatisch erneut.

Sie sind fast soweit, TodoList.jsx zu aktualisieren, um die to-do Elemente als Liste anzuzeigen, aber es gibt ein wichtiges React-Konzept, das Sie zuerst lernen müssen.

Wenn Sie in React eine Liste von Elementen anzeigen, müssen Sie einen Schlüssel hinzufügen, um jedes Element in der Liste eindeutig zu identifizieren. Dieses Feature wird ausführlich in den React-Dokumenten unter Renderinglistenerläutert, aber hier lernen Sie die Grundlagen kennen. Sie verfügen über eine Liste mit to-do anzuzeigenden Elementen, und Sie müssen jedem Element einen eindeutigen Schlüssel zuordnen. Der Schlüssel für jedes Element sollte sich nicht ändern, und aus diesem Grund können Sie den Index des Elements im Array nicht als Schlüssel verwenden. Sie benötigen eine ID, die sich während der gesamten Lebensdauer dieser Werte nicht ändert. Sie verwenden randomUUID(), um eine eindeutige ID für jedes to-do Element zu erstellen.

Erstellen Sie TodoList.jsx mithilfe einer UUID als Schlüssel für jedes to-do Element. Aktualisieren Sie TodoList.jsx mit dem folgenden Code.

import React, { useState } from 'react';

const initialTasks = [
    { id: self.crypto.randomUUID(), text: 'Drink some coffee' },
    { id: self.crypto.randomUUID(), text: 'Create a TODO app' },
    { id: self.crypto.randomUUID(), text: 'Drink some more coffee' }
];

function TodoList() {
    const [tasks, setTasks] = useState(initialTasks);
    const [newTaskText, setNewTaskText] = useState("");

    return (
        <article
            className="todo-list"
            aria-label="task list manager">
            <header>
                <h1>TODO</h1>
                <form className="todo-input" aria-controls="todo-list">
                    <input
                        type="text"
                        placeholder="Enter a task"
                        value={newTaskText} />
                    <button
                        className="add-button">
                        Add
                    </button>
                </form>
            </header>
            <ol id="todo-list" aria-live="polite" aria-label="task list">
                {tasks.map((task, index) =>
                    <li key={task.id}>
                        <span className="text">{task.text}</span>
                    </li>
                )}
            </ol>
        </article>
    );
}
export default TodoList;

Da die ID-Werte außerhalb der TodoList-Funktion zugewiesen werden, können Sie sicherstellen, dass sich die Werte nicht ändern, wenn die Seite erneut gerendert wird. Wenn Sie die App in diesem Zustand testen, werden Sie feststellen, dass Sie nicht in das Todo-Eingabeelement eingeben können. Dies liegt daran, dass das Eingabeelement an newTaskTextgebunden ist, das in eine leere Zeichenfolge initialisiert wurde. Damit Benutzer neue Aufgaben hinzufügen können, müssen Sie das onChange Ereignis für dieses Steuerelement behandeln. Sie müssen auch die Unterstützung der Schaltfläche "Hinzufügen" implementieren.

Fügen Sie die erforderlichen Funktionen unmittelbar vor der Rückgabe-Anweisung in der TodoList-Funktion hinzu.
```
function handleInputChange(event) {
    setNewTaskText(event.target.value);
}

function addTask() {
    if (newTaskText.trim() !== "") {
        setTasks(t => [...t, { id: self.crypto.randomUUID(), text: newTaskText }]);
        setNewTaskText("");
    }
    event.preventDefault();
}
```
In der handleInputChanged-Funktion wird der neue Wert aus dem Eingabefeld über event.target.valueübergeben, und dieser Wert wird verwendet, um den Wert für die variable newTaskText mit setNewTaskTextzu aktualisieren. Fügen Sie in der funktion addTask die neue Aufgabe der Liste der vorhandenen Aufgaben mithilfe von setTasks hinzu, und legen Sie die ID des Elements als neuen UUID-Wert fest. Aktualisieren Sie das Eingabeelement so, dass es onChange={handleInputChange} enthält, und aktualisieren Sie die Schaltfläche "Hinzufügen", um onClick={addTask}einzuschließen. Dieser Code verkabelt das Ereignis mit der Funktion, die dieses Ereignis behandelt. Anschließend sollten Sie in der Lage sein, der Aufgabenliste eine neue Aufgabe hinzuzufügen. Neue Aufgaben werden am Ende der Liste hinzugefügt. Um diese App nützlicher zu machen, müssen Sie Unterstützung zum Löschen von Aufgaben und zum Verschieben einer Aufgabe nach oben oder unten hinzufügen.
Fügen Sie die Funktionen hinzu, um das Löschen zu unterstützen, nach oben und nach unten zu wechseln, und aktualisieren Sie dann das Markup, um eine Schaltfläche für jede Aktion anzuzeigen. Fügen Sie den folgenden Code in der TodoList-Funktion oberhalb der Return-Anweisung hinzu.
```
function deleteTask(id) {
    const updatedTasks = tasks.filter(task => task.id != id);
    setTasks(updatedTasks);
}

function moveTaskUp(index) {
    if (index > 0) {
        const updatedTasks = [...tasks];
        [updatedTasks[index], updatedTasks[index - 1]] = [updatedTasks[index - 1], updatedTasks[index]];
        setTasks(updatedTasks);
    }
}

function moveTaskDown(index) {
    if (index < tasks.length) {
        const updatedTasks = [...tasks];
        [updatedTasks[index], updatedTasks[index + 1]] = [updatedTasks[index + 1], updatedTasks[index]];
        setTasks(updatedTasks);
    }
}
```
Die Löschfunktion übernimmt die Aufgaben-ID und löscht diese aus der Liste, verwendet die Array filter() Methode, um ein neues Array zu erstellen, das das ausgewählte Element ausschließt, und ruft anschließend setTasks()auf. Die anderen beiden Funktionen bearbeiten den Index des Elements, da diese Arbeit spezifisch für die Reihenfolge der Elemente ist. Sowohl moveTaskUp() als auch moveTaskDown() verwenden die Arraydestrukturierungszuordnung, um den ausgewählten Task mit seinem Nachbarn zu tauschen.

Aktualisieren Sie als Nächstes die Ansicht so, dass sie diese drei Schaltflächen enthält. Aktualisieren Sie die Rückgabe-Anweisung so, dass sie Folgendes enthält.

return (
    <article
        className="todo-list"
        aria-label="task list manager">
        <header>
            <h1>TODO</h1>
            <form className="todo-input" onSubmit={addTask} aria-controls="todo-list">
                <input
                    type="text"
                    required
                    autoFocus
                    placeholder="Enter a task"
                    value={newTaskText}
                    aria-label="Task text"
                    onChange={handleInputChange} />
                <button
                    className="add-button"
                    aria-label="Add task">
                    Add
                </button>
            </form>
        </header>
        <ol id="todo-list" aria-live="polite">
            {tasks.map((task, index) =>
                <li key={task.id}>
                    <span className="text">{task.text}</span>
                    <button className="delete-button" onClick={() => deleteTask(task.id)}>
                        🗑️
                    </button>
                    <button className="up-button" onClick={() => moveTaskUp(index)}>
                        ⇧
                    </button>
                    <button className="down-button" onClick={() => moveTaskDown(index)}>
                        ⇩
                    </button>
                </li>
            )}
        </ol>
    </article>
);

Sie haben die Schaltflächen hinzugefügt, die zum Ausführen der zuvor erläuterten Aufgaben erforderlich sind. Sie verwenden Unicode-Zeichen als Symbole auf den Schaltflächen. Im Markup werden einige Attribute hinzugefügt, um das Hinzufügen einiger CSS zu einem späteren Zeitpunkt zu unterstützen. Möglicherweise bemerken Sie auch die Verwendung von Aria-Attributen, um die Barrierefreiheit zu verbessern. Diese sind zwar optional, werden jedoch dringend empfohlen. Wenn Sie die App ausführen, sollte sie wie in der folgenden Abbildung aussehen.

Screenshot, der die laufende App anzeigt und eine Liste zeigt

Nun sollten Sie in der TODO-Web-App folgendes ausführen können.

Aufgabe hinzufügen
Aufgabe löschen
Vorgang nach oben verschieben
Vorgang nach unten verschieben

Diese Funktionen funktionieren, Sie können jedoch umgestalten, um eine wiederverwendbare Komponente zum Anzeigen der to-do Elemente zu erstellen. Das Markup für das to-do-Element wird in eine neue Komponente , TodoItem, eingefügt. Da die Verwaltung der Liste in der Todo-Komponente verbleibt, können Sie Rückrufe an die Schaltflächen "Löschen" und "Verschieben" übergeben.

Klicken Sie zunächst mit der rechten Maustaste auf den Ordner Komponenten im Projektmappen-Explorer, und wählen Sie Neues Element hinzufügen >aus.
Wählen Sie im daraufhin geöffneten Dialogfeld die React JSX Component Fileaus, geben Sie ihm den Namen TodoItem, und wählen Sie Addaus.

Fügen Sie dem TodoItem den folgenden Code hinzu.

In diesem Code übergeben Sie die Aufgabe und Rückrufe als Eigenschaften an diese neue Komponente.

import PropTypes from 'prop-types';

function TodoItem({ task, deleteTaskCallback, moveTaskUpCallback, moveTaskDownCallback }) {
    return (
        <li aria-label="task" >
            <span className="text">{task}</span>
            <button
                type="button"
                aria-label="Delete task"
                className="delete-button"
                onClick={() => deleteTaskCallback()}>
                🗑️
            </button>
            <button
                type="button"
                aria-label="Move task up"
                className="up-button"
                onClick={() => moveTaskUpCallback()}>
                ⇧
            </button>
            <button
                type="button"
                aria-label="Move task down"
                className="down-button"
                onClick={() => moveTaskDownCallback()}>
                ⇩
            </button>
        </li>
    );
}

TodoItem.propTypes = {
    task: PropTypes.string.isRequired,
    deleteTaskCallback: PropTypes.func.isRequired,
    moveTaskUpCallback: PropTypes.func.isRequired,
    moveTaskDownCallback: PropTypes.func.isRequired,
};

export default TodoItem;

Der vorangehende Code enthält das Markup der Todo-Komponente, und am Ende davon deklarieren Sie die PropTypes. Props werden verwendet, um Daten von einer übergeordneten Komponente an untergeordnete Komponenten zu übergeben. Weitere Informationen zu Props finden Sie unter Übergeben von Props an eine Komponente – React. Da die Lösch- und Verschiebungsfunktionen als Rückrufe übergeben werden, muss der onClick-Handler aktualisiert werden, um diese Rückrufe aufzurufen.

Fügen Sie den erforderlichen Code hinzu. Der vollständige Code für TodoList, der die TodoItem-Komponente verwendet, wird hier gezeigt.

import React, { useState } from 'react'
import TodoItem from './TodoItem'

const initialTasks = [
    { id: self.crypto.randomUUID(), text: 'Drink some coffee' },
    { id: self.crypto.randomUUID(), text: 'Create a TODO app' },
    { id: self.crypto.randomUUID(), text: 'Drink some more coffee' }
];

function TodoList() {
    const [tasks, setTasks] = useState(initialTasks);
    const [newTaskText, setNewTaskText] = useState("");
    function handleInputChange(event) {
        setNewTaskText(event.target.value);
    }
    function addTask() {
        if (newTaskText.trim() !== "") {
            setTasks(t => [...t, { id: self.crypto.randomUUID(), text: newTaskText }]);
            setNewTaskText("");
        }
        event.preventDefault();
    }
    function deleteTask(id) {
        const updatedTasks = tasks.filter(task => task.id !== id);
        setTasks(updatedTasks);
    }
    function moveTaskUp(index) {
        if (index > 0) {
            const updatedTasks = [...tasks];
            [updatedTasks[index], updatedTasks[index - 1]] = [updatedTasks[index - 1], updatedTasks[index]];
            setTasks(updatedTasks);
        }
    }
    function moveTaskDown(index) {
        if (index < tasks.length) {
            const updatedTasks = [...tasks];
            [updatedTasks[index], updatedTasks[index + 1]] = [updatedTasks[index + 1], updatedTasks[index]];
            setTasks(updatedTasks);
        }
    }
    return (
        <article
            className="todo-list"
            aria-label="task list manager">
            <header>
                <h1>TODO</h1>
                <form onSubmit={addTask} aria-controls="todo-list">
                    <input
                        type="text"
                        required
                        placeholder="Enter a task"
                        value={newTaskText}
                        aria-label="Task text"
                        onChange={handleInputChange} />
                    <button
                        className="add-button"
                        aria-label="Add task">
                        Add
                    </button>
                </form>
            </header>
            <ol id="todo-list" aria-live="polite">
                {tasks.map((task, index) =>
                    <TodoItem
                        key={task.id}
                        task={task.text}
                        deleteTaskCallback={() => deleteTask(task.id)}
                        moveTaskUpCallback={() => moveTaskUp(index)}
                        moveTaskDownCallback={() => moveTaskDown(index)}
                    />
                )}
            </ol>
        </article>
    );
}

export default TodoList;

Jetzt wird die TodoItem-Komponente verwendet, um jedes to-do Element zu rendern. Beachten Sie, dass der Schlüssel auf task.idfestgelegt ist, das den UUID-Wert für diesen Vorgang enthält. Wenn Sie die App ausführen, sollten keine Änderungen am Aussehen oder Verhalten der App angezeigt werden, da Sie sie so umgestaltet haben, dass TodoItem verwendet wird.

Nachdem Sie nun alle grundlegenden Funktionen unterstützt haben, ist es an der Zeit, mit dem Hinzufügen einiger Formatierungen zu beginnen, damit es schön aussieht. Fügen Sie zunächst einen Link in Index.html für eine Schriftfamilie hinzu, inter, die Sie für diese App verwenden werden. In Index.htmlgibt es einige andere Elemente, die bereinigt werden müssen. Insbesondere sollte der Titel aktualisiert werden, und Sie möchten die vite.svg Datei ersetzen, die derzeit als Symbol verwendet wird.

Aktualisieren Sie Index.html mit dem folgenden Inhalt.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/checkmark-square.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>TODO app</title>
        <link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
        <script type="module" defer src="/src/main.jsx"></script>
    </head>
    <body>
    </body>
</html>

Bearbeiten Sie die Datei main.jsx , um root beim Aufrufen von createRootdurch main zu ersetzen.

Hier ist der vollständige Code für main.jsx dargestellt.
```
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css'

createRoot(document.querySelector('main')).render(
    <StrictMode>
        <App />
    </StrictMode>,
)
```
Zusätzlich zu diesen Änderungen wurde die Datei checkmark-square.svg dem öffentlichen Ordner hinzugefügt. Dies ist ein SVG aus dem quadratischen FluentUI-Häkchenbild, das Sie direkt herunterladen können. (Es gibt ein Paket, das Sie für eine integriertere Oberfläche verwenden können, aber das liegt außerhalb des Umfangs dieses Artikels.)

Aktualisieren Sie als Nächstes die Formatvorlagen der TodoList-Komponente.
Fügen Sie im Ordner "Komponenten" eine neue CSS-Datei mit dem Namen TodoList.csshinzu. Sie können mit der rechten Maustaste auf das Projekt klicken und Hinzufügen > Neues Element und dann Formatvorlage auswählen. Geben Sie der Datei den Namen TodoList.css.

Fügen Sie den folgenden Code zum TodoList.csshinzu.

.todo-list {
    background-color: #1e1e1e;
    padding: 1.25rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 25rem;
}

.todo-list h1 {
    text-align: center;
    color: #e0e0e0;
}

.todo-input {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.todo-input input {
    flex: 1;
    padding: 0.625rem;
    border: 0.0625rem solid #333;
    border-radius: 0.25rem;
    margin-right: 0.625rem;
    background-color: #2c2c2c;
    color: #e0e0e0;
}

.todo-input .add-button {
    padding: 0.625rem 1.25rem;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
}

.todo-input .add-button:hover {
    background-color: #0056b3;
}

.todo-list ol {
    list-style-type: none;
    padding: 0;
}

.todo-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem;
    border-bottom: 0.0625rem solid #333;
}

.todo-list li:last-child {
    border-bottom: none;
}

.todo-list .text {
    flex: 1;
}

.todo-list li button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    margin-left: 0.625rem;
    color: #e0e0e0;
}

.todo-list li button:hover {
    color: #007bff;
}

.todo-list li button.delete-button {
    color: #ff4d4d;
}

.todo-list li button.up-button,
.todo-list li button.down-button {
    color: #4caf50;
}

Bearbeiten Sie als Nächstes TodoList.jsx-, um den folgenden Import am Anfang der Datei hinzuzufügen.
```
import './TodoList.css';
```
Aktualisieren Sie den Browser nach dem Speichern der Änderungen. Dadurch sollte die Gestaltung der App verbessert werden. Die App sollte wie folgt aussehen.

Jetzt haben Sie eine funktionierende to-do Listen-App erstellt, die die to-do Elemente im Arbeitsspeicher speichert. Ab diesem Zeitpunkt können Sie die App aktualisieren, um die to-do Elemente in localStorage/IndexedDb-zu speichern oder diese in eine serverseitige Datenbank oder ein anderes Back-End zu integrieren, um dauerhafteren Speicher zu erhalten.

Zusammenfassung

In diesem Lernprogramm haben Sie eine neue React-App mit Visual Studio erstellt. Die App besteht aus einer to-do Liste, die Unterstützung zum Hinzufügen von Aufgaben, Löschen von Aufgaben und neu anordnen umfasst. Sie haben zwei neue React-Komponenten erstellt und diese in diesem Lernprogramm verwendet.

Ressourcen

Code für dieses Beispiel bei ToDoJSWebApp
Visual Studio-JavaScript- und TypeScript-Projekte

Freigeben über