React-alkalmazás létrehozása a Visual Studióban

Ebben az oktatóanyagban létrehoz egy React előtérrendszert egy to-do lista webalkalmazáshoz a JavaScript és a Visual Studio 2022 használatával. Az alkalmazás kódja a ToDoJSWebAppalatt található.

Előfeltételek

Győződjön meg arról, hogy a következőket telepíti:

Visual Studio 2022 vagy újabb verzió. Nyissa meg a Visual Studio letöltési oldalát, és telepítse ingyenesen.
npm (https://www.npmjs.com/), amely a Node.jsrésze.

A React ToDo List alkalmazás létrehozása

A Visual Studióban válassza Fájl > Új > Projekt lehetőséget az Új projekt létrehozása párbeszédpanel megnyitásához, válassza ki a React App JavaScript-sablont, majd válassza Következőlehetőséget.
Nevezze el a projektetTodoWebApp, és válassza a Létrehozás lehetőséget.

Ez létrehozza a JavaScript-projektet a vite parancssori eszközével.
A Megoldáskezelőben kattintson a jobb gombbal a src mappára, és válassza a > Új mappa hozzáadásalehetőséget. és hozzon létre egy componentsnevű új mappát.

Gyakori konvenció, hogy az összetevőket az összetevők mappájába helyezik, de ez nem kötelező.
Kattintson a jobb gombbal az új mappára, válassza az Új elem hozzáadása >lehetőséget, majd a párbeszédpanelen válassza a React JSX-összetevőfájlt, nevezze elTodoList, majd kattintson a Hozzáadás gombra. Ha nem látja az elemsablonok listáját, válassza az Összes sablon megjelenítése lehetőséget.

Ezzel létrehoz egy új JSX-fájlt az összetevők mappájában.
Nyissa meg a TodoList összetevőt, és cserélje le az alapértelmezett tartalmat a következőre:
```
function TodoList() {
  return (
    <h2>TODO app contents</h2>
  );
}
export default TodoList;
```
Ez az összetevő megjelenít egy fejlécet, amelyet később lecserél.

Ezután az összetevőt az alkalmazásban kell bekötni. App.jsx a betöltött fő összetevő, amely a to-do listaalkalmazást jelöli. Ezt az összetevőt a main.jsx fájlban használja.
A Megoldáskezelőben nyissa meg a App.jsx, távolítsa el az összes importálást felülről, és törölje a visszatérési utasítás tartalmát. A fájlnak az alábbihoz hasonlóan kell kinéznie.
```
function App() {
  return (
    <>
      <TodoList />
    </>
  );
}
export default App;
```
A TodoList összetevő hozzáadásához helyezze a kurzort a töredékbe, majd írja be <TodoL RETURN vagy <TodoL TAB. Ez hozzáadja a komponenst. Előfordulhat, hogy automatikusan hozzáadja az importálási utasítást.

Ha az importálási utasítás nem lesz automatikusan hozzáadva, adja hozzá a fájl elején a import TodoL billentyű beírásával és lenyomásával.

Ezután törölje a CSS-fájlokat.
Nyissa meg App.css, és törölje az összes tartalmat.

Nyissa meg Index.css, és távolítsa el az összes tartalmat a :rootstílusai kivételével:

: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;
}

Az alkalmazás futtatása

Válassza a Hibakeresés indítása gombot az eszköztáron, vagy nyomja le az F5 billentyűparancsot.

Az alkalmazás egy böngészőablakban nyílik meg.

Képernyőkép a böngészőben futó alkalmazásról.

Tennivalólista funkcióinak hozzáadása az alkalmazáshoz

Hagyja futni az alkalmazást. Amikor módosításokat hajt végre, az alkalmazás automatikusan frissül a legújabb tartalommal a Vite forró modulcseretámogatásának segítségével. Bizonyos műveletekhez, például mappák hozzáadásához vagy fájlok átnevezéséhez le kell állítania a hibakeresést, majd újra kell indítania az alkalmazást, de általában a háttérben hagyhatja azt az alkalmazás fejlesztése során. Nyissa meg a TodoList.jsx összetevőt, hogy elkezdhessük definiálni.

A Megoldáskezelőben nyissa meg a TodoList.jsx, és adja hozzá a to-do listabejegyzések megjelenítéséhez és kezeléséhez szükséges felhasználói felületet. Cserélje le a tartalmat a következő kódra:
```
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;
```
Az előző kód hozzáad egy beviteli mezőt az új to-do feladathoz, és egy gombot a bemenet elküldéséhez. Ezután csatlakoztatja a Hozzáadás gombot. A useState React hook használatával két állapotváltozót adhat hozzá, egyet a hozzáadott feladathoz, a másikat pedig a meglévő tevékenységek tárolásához. Ebben az oktatóanyagban a feladatok a memóriában lesznek tárolva, nem pedig állandó tárolóban.
Adja hozzá a következő importálási utasítást a TodoList.jsxuseStateimportálásához.
```
import { useState } from 'react'
```
Ezután a horoggal hozza létre az állapotváltozókat. Adja hozzá a következő kódot a TodoList függvényhez a visszatérési utasítás fölött.
```
const [tasks, setTasks] = useState(["Drink some coffee", "Create a TODO app", "Drink some more coffee"]);
const [newTaskText, setNewTaskText] = useState("");
```
Ez két változót, tasks és newTaskTextállít be az adatokhoz és két függvényhez, amelyeket meghívhat a változók frissítéséhez, setTasks és setNewTasks. Egy állapotváltozó értékének módosításakor a React automatikusan újra rendereli az összetevőt.

Már majdnem készen áll TodoList.jsx frissítésére, hogy listaként jelenítse meg a to-do elemeket, de van egy fontos React-koncepció, amelyet először meg kell tanulnia.

A Reactben az elemek listájának megjelenítésekor hozzá kell adnia egy kulcsot a lista egyes elemeinek egyedi azonosításához. Ezt a funkciót részletesen ismertetjük a Rendering ListsReact-dokumentációjában, de itt megismerheti az alapokat. A megjelenítendő elemek listája to-do, és minden elemhez egyedi kulcsot kell társítania. Az egyes elemek kulcsa nem módosítható, ezért nem használhatja kulcsként a tömbben lévő elem indexét. Olyan azonosítóra van szüksége, amely az értékek teljes élettartama alatt nem változik. A randomUID() használatával minden egyes to-do elemhez egyedi azonosítót fog létrehozni.

Készítse el a TodoList.jsx fájlt, az egyes teendő elemek kulcsaként használva egy UUID-t. Frissítse TodoList.jsx a következő kóddal.

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;

Mivel az azonosító értékek a TodoList függvényen kívül vannak hozzárendelve, biztos lehet benne, hogy az értékek nem változnak, ha a lap újra renderelve van. Ha ebben az állapotban próbálja ki az alkalmazást, láthatja, hogy nem tud begépelni a todo bemeneti elembe. Ennek az az oka, hogy a bemeneti elem a newTaskTextazonosítóhoz van kötve, amely egy üres karakterláncra lett inicializálva. Ahhoz, hogy a felhasználók új feladatokat vegyenek fel, kezelnie kell a vezérlő onChange eseményét. Emellett implementálnia kell a Hozzáadás gomb támogatását is.

Adja hozzá a szükséges függvényeket közvetlenül a TodoList függvény visszatérési utasítása előtt.
```
function handleInputChange(event) {
    setNewTaskText(event.target.value);
}

function addTask() {
    if (newTaskText.trim() !== "") {
        setTasks(t => [...t, { id: self.crypto.randomUUID(), text: newTaskText }]);
        setNewTaskText("");
    }
    event.preventDefault();
}
```
handleInputChanged függvényben a bemeneti mező új értéke event.target.valuesegítségével kerül átadásra, és ezt az értéket a newTaskText változó értékének frissítésére használják setNewTaskTextsegítségével. A addTask függvényben adja hozzá az új feladatot a meglévő tevékenységek listájához setTasks használatával, és állítsa be az elem azonosítóját új UUID-értékként. Frissítse a bemeneti elemet úgy, hogy onChange={handleInputChange} szerepeljen, és frissítse a Hozzáadás gombot onClick={addTask}. Ez a kód az eseményt az eseményt kezelő függvényhez köti. Ezt követően új feladatot kell hozzáadnia a feladatlistához. A rendszer új feladatokat ad hozzá a lista aljára. Az alkalmazás hasznosabbá tétele érdekében támogatást kell adnia a tevékenységek törléséhez és a tevékenységek felfelé vagy lefelé mozgatásához.
Adja hozzá a törlést támogató függvényeket, lépjen felfelé és lefelé, majd frissítse a korrektúrát, hogy minden művelethez megjelenítsen egy gombot. Adja hozzá a következő kódot a TodoList függvényhez a visszatérési utasítás fölött.
```
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);
    }
}
```
A törlési függvény felveszi a feladatazonosítót, és törli azt a listából, és a Tömbszűrő() metódussal létrehoz egy új tömböt a kijelölt elem nélkül, majd meghívja setTasks(). A másik két függvény azért veszi fel az elem indexét, mert ez a munka a tételsorrendezésre vonatkozik. Mind a moveTaskUp(), mind a moveTaskDown() a tömb destrukturáló hozzárendelés használatával felcserélik a kijelölt feladatot a szomszédjával.

Ezután frissítse a nézetet úgy, hogy tartalmazza ezt a három gombot. Frissítse a visszatérési utasítást, hogy az tartalmazza a következőket.

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>
);

Hozzáadta a korábban tárgyalt feladatok végrehajtásához szükséges gombokat. A gombokon Unicode-karaktereket használ ikonként. A jelölőkódban néhány attribútum hozzáadásra került, amelyek támogatják a későbbi CSS hozzáadást. Azt is észreveheti, hogy ARIA attribútumok a kisegítő lehetőségek javítása érdekében, amelyek opcionálisak, de erősen ajánlottak. Ha futtatja az alkalmazást, annak az alábbi ábrához hasonlóan kell kinéznie.

Képernyőkép a futó alkalmazásról és egy lista

Most már képesnek kell lennie a következők végrehajtására a TODO webalkalmazásban.

Tevékenység hozzáadása
Tevékenység törlése
Feladat feljebb helyezése
Tevékenység áthelyezése lefelé

Ezek a függvények működnek, de újrabontással létrehozhat egy újrafelhasználható összetevőt a to-do elemek megjelenítéséhez. A to-do elem jelölője egy új összetevőbe, a TodoItembe kerül. Mivel a lista kezelése a Todo összetevőben marad, visszahívásokat adhat át a Törlés és áthelyezés gombnak.

Első lépésként kattintson a jobb gombbal a összetevőkre mappára a Megoldáskezelőben, és válassza > Új elem hozzáadásalehetőséget.
A megnyíló párbeszédpanelen válassza a React JSX-összetevőfájlt, adja meg a TodoItem nevet, majd válassza a hozzáadása lehetőséget.

Adja hozzá a következő kódot a TodoItemhez.

Ebben a kódban tulajdonságokként adja át a feladatot és a visszahívásokat ennek az új összetevőnek.

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;

Az előző kód tartalmazza a Todo összetevő jelölését, és a végén a PropTypes-t deklarálja benne. A tulajdonságok a szülő komponensekből a gyermek komponensekhez való adatátvitelre szolgálnak. A prop-ok átadásáról további információt a React „Komponensnek való prop-ok átadása” című részében talál (). Mivel a törlési és áthelyezési függvények visszahívásként vannak átadva, a visszahívásokhoz frissíteni kell a onClick kezelőt.

Adja hozzá a szükséges kódot. Itt látható a TodoItem összetevőt használó TodoList teljes kódja.

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;

Most a TodoItem összetevőt használja az egyes to-do elemek rendereléséhez. Figyelje meg, hogy a kulcs task.idértékre van állítva, amely az adott tevékenység UUID-értékét tartalmazza. Amikor futtatja az alkalmazást, nem kellene semmilyen változást látnia az alkalmazás megjelenésében vagy viselkedésében, mivel átalakította a TodoItem használatával.

Most, hogy az összes alapfunkció támogatott, ideje hozzáadni némi stílust, hogy ez jól nézzen ki. Első lépésként adjon hozzá egy hivatkozást a Index.html egy olyan betűtípuscsaládhoz, az Interhez, amelyet az alkalmazáshoz fog használni. A Index.htmlnéhány más elemet is ki kell takarítani. Pontosabban a címet frissíteni kell, és az ikonként jelenleg használt vite.svg fájlt szeretné lecserélni.

Frissítse Index.html a következő tartalommal.

<!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>

Szerkessze a main.jsx fájlt úgy, hogy roothívásakor cserélje le a main-t createRoot-ra.

Itt látható main.jsx teljes kódja.
```
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>,
)
```
A módosítások mellett a fájl checkmark-square.svg lett hozzáadva a nyilvános mappához. Ez egy SVG a FluentUI pipa négyzet képéről, amelyet közvetlenül tölthet le. (Van egy csomag, amelyet az integráltabb élmény érdekében használhat, de ez nem tartozik a cikk hatókörébe.)

Ezután frissítse a TodoList összetevő stílusait.
Az Összetevők mappában adjon hozzá egy új, TodoList.cssnevű CSS-fájlt. Kattintson a jobb gombbal a projektre, és válassza > Új elem hozzáadása, majd válassza Stíluslaplehetőséget. Adja meg a fájl nevét TodoList.css.

Adja hozzá a következő kódot a TodoList.css.

.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;
}

Ezután szerkessze a TodoList.jsx fájlt, hogy importálja a következőket a fájl tetején.
```
import './TodoList.css';
```
Frissítse a böngészőt a módosítások mentése után. Ennek javítania kell az alkalmazás stílusát. Az alkalmazásnak az alábbihoz hasonlóan kell kinéznie.

Most létrehozott egy működő to-do listaalkalmazást, amely a memóriában tárolja a to-do elemeket. Ettől a ponttól kezdve frissítheti az alkalmazást úgy, hogy a to-do elemeket a localStorage/IndexedDbtárolja, vagy integrálhatja egy kiszolgálóoldali adatbázissal vagy más háttérrendszerrel a tartósabb tárolás érdekében.

Összefoglalás

Ebben az oktatóanyagban létrehozott egy új React-alkalmazást a Visual Studióval. Az alkalmazás egy to-do listából áll, amely támogatja a tevékenységek hozzáadását, a tevékenységek törlését és átrendezésüket. Két új React-összetevőt hozott létre, és az oktatóanyag során ezeket használta.

Erőforrások

A mintához tartozó kód: ToDoJSWebApp
Visual Studio JavaScript- és TypeScript-projektek

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2025-09-17