Egy új technológia, például a React elsajátítása gyakorlati tapasztalat nélkül zavaró lehet. Fejlesztőként a valós projektek építése az egyik leghatékonyabb módja a fogalmak és funkciók megértésének.

Kövesse az egyszerű teendőlista létrehozásának folyamatát a React segítségével, és javítsa a React alapjainak megértését.

A teendőlista készítésének előfeltételei

Mielőtt elkezdené ezt a projektet, számos követelménynek kell megfelelnie. Alapvető ismeretekkel kell rendelkeznie a következőkben: HTML, CSS, JavaScript, ES6és React. A Node.js és a npm, a JavaScript csomagkezelő. Szüksége van egy kódszerkesztőre is, például a Visual Studio Code-ra.

Ez a projekt által használt CSS:

/* styles.css */
.App {
betűtípus család: sans-serif;
kijelző: Flex;
indokolja-tartalom: központ;
align-ites: központ;
magasság: 100vh;
}
.Csinálni {
háttérszín: búza;
szöveg igazítás: központ;
szélesség: 50%;
párnázás: 20px;
doboz-árnyék: rgba(0, 0, 0, 0.24) 0px 3px 8px;
árrés: auto;
}





instagram viewer

ul {
lista-stílusú: egyik sem;
párnázás: 10px;
árrés: 0;
}
gomb {
szélesség: 70px;
magasság: 35px;
háttérszín: homokbarna;
határ: egyik sem;
betűméret: 15px;
font-weight: 800;
határ-sugár: 4px;
doboz-árnyék: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.bemenet {
határ: egyik sem;
szélesség: 340px;
magasság: 35px;
határ-sugár: 9px;
szöveg igazítás: központ;
doboz-árnyék: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.Felső {
kijelző: Flex;
indokolja-tartalom: központ;
rés: 12px;
}
li {
kijelző: Flex;
indokolja-tartalom: térben egyenletesen;
align-ites: központ;
párnázás: 10px;
}
li:előtt {
tartalom: "*";
margó-jobb: 5px;
}

1. Projektkörnyezet beállítása

Ez a szakasz tartalmazza a projekt beállításához szükséges összes parancsot és fájlt. A kezdéshez hozzon létre egy új React projektet. Nyisson meg egy terminált, és futtassa ezt a parancsot:

npx create-react-app todo-list

Ez néhány percet vesz igénybe az összes szükséges fájl és csomag telepítéséhez. Létrehoz egy új React alkalmazást todo-list néven. Ha valami ehhez hasonlót lát, jó úton halad:

Ezzel a paranccsal keresse meg az újonnan létrehozott projekt könyvtárát:

cd todo-list

Futtassa a projektet helyileg ezzel a paranccsal:

npm start

Ezután tekintse meg a projektet böngészőjében a következő címen: http://localhost: 3000/.

A projekt src mappájában van néhány olyan fájl, amelyekre nincs szüksége. Törölje ezeket a fájlokat: App.css, App.test.js, logo.svg, reportWebVitals.js, setupTests.js.

Ügyeljen arra, hogy keresse az importálási utasításokat a rendelkezésre álló fájlokban, és távolítsa el a törölt fájlokra mutató hivatkozásokat.

2. Hozzon létre egy TodoList komponenst

Ez az a komponens, amelyen a teendők listájához szükséges összes kódot implementáljuk. Hozzon létre egy „TodoList.js” nevű fájlt az src mappájában. Ezután annak teszteléséhez, hogy minden megfelelően működik-e, adja hozzá a következő kódot:

import Reagál tól től'reagál';
const TodoList = () => {
Visszatérés (



Hello Világ </h2>
 </div>
 );
};
exportalapértelmezett Feladatlista; 

Nyissa meg az App.js fájlt, importálja a TodoList összetevőt, és jelenítse meg az App összetevőben. Valahogy így fog kinézni:

import Reagál tól től'reagál';
import'./styles.css'
import Feladatlista tól től'./Feladatlista';
const App = () => {
Visszatérés (




 </div>
 );
};
exportalapértelmezett App;

Nyissa meg a helyi böngészőt, amelyen fut a localhost: 3000, és ellenőrizze, hogy a „Hello World” merészen fel van-e írva. Minden rendben? A következő lépéshez.

3. Kezelje a bevitelt és a bemenet módosítását

Ez a lépés lehetővé teszi, hogy eseményt indítson el, amikor beír egy feladatot a beviteli mezőbe. Importálja a useState hookot a React csomagból. A useState egy React hook, amely lehetővé teszi az állapotok hatékony kezelését.

import React, { useState } tól től'reagál';

A useState hook segítségével hozzon létre egy „inputTask” nevű állapotváltozót üres karakterlánc kezdeti értékével. Ezenkívül rendelje hozzá a „setInputTask” funkciót az „inputTask” értékének a felhasználói bevitel alapján történő frissítéséhez.

const [inputTask, setInputTask] = useState("");

Hozzon létre egy „handleInputChange” nevű függvényt, és vegyen be egy eseményparamétert. Frissítenie kell az inputTask állapotát a setInputTask függvény segítségével. Az esemény célértékét az event.target.value paranccsal érheti el. Ez minden alkalommal lefut, amikor a beviteli mező értéke megváltozik.

const handleInputChange = (esemény) => {
 setInputTask (event.target.value);
}; 

Adjon vissza néhány JSX elemet. Az első a „My Todo-List” feliratú címsor, így bármelyik címsort kiválaszthatja. Adjon meg néhány attribútumot a beviteli elemekhez. type=“szöveg”: Ez adja meg a beviteli típust szövegként, value={inputTask}: Ez a beviteli mező értékét az inputTask állapotváltozóhoz köti, biztosítva, hogy az az aktuális értéket tükrözze.onChange={handleInputChange}: Ez meghívja a handleInputChange függvényt, ha a beviteli mező értéke megváltozik, frissítve az inputTask állapotát.

"Csinálni">
Saját teendők listája</h1>
"Felső">
"bemenet" típus="szöveg" value={inputTask}
 onChange={handleInputChange} helyőrző="Adjon meg egy feladatot" />

Továbblépve hozzon létre egy gombot, amely hozzáadja a bevitt feladatot a listához.

"btn">ADD</button>
 </div>
</div>

Ebben a szakaszban a böngésző kimenete így fog kinézni.

4. Adja hozzá a funkcionalitást az "ADD" gombhoz

Használja a useState hook egy „lista” nevű állapotváltozó létrehozásához, amelynek kezdőértéke egy üres tömb. A „setList” változó a feladatok tömbjét tárolja a felhasználói bevitel alapján.

const [lista, setList] = useState([]);

Hozzon létre egy handleAddTodo függvényt, amely akkor fut le, amikor a felhasználó az „ADD” gombra kattint új feladat hozzáadásához. Felveszi a todo paramétert, amely a felhasználó által beírt új feladatot jelöli. Ezután hozzon létre egy newTask objektumot a Math.random() segítségével generált egyedi azonosítóval és a bemeneti szöveget tartalmazó todo tulajdonsággal.

Továbblépve frissítse a lista állapotát a […list] szórás operátor használatával új tömb létrehozásához a listában már meglévő feladatokkal. Adja hozzá a newTask-ot a tömb végéhez. Ez biztosítja, hogy ne mutáljuk az eredeti állapottömböt. Végül állítsa vissza az inputTask állapotát egy üres karakterláncra, és törölje a beviteli mezőt, amikor a felhasználó a gombra kattint.

const handleAddTodo = (csinálni) => {
const newTask = {
 azonosító: Math.véletlen(),
 tenni: tenni
 };
 setList([...lista, newTask]);
 setInputTask('');
}; 

Tartalmazza a kattintásra attribútumot a gombelemhez az "ADD" szöveggel. Ha rákattint, kiváltja a handleAddTodo függvényt, amely egy új feladatot ad a lista állapotához

 handleAddTodo (inputTask)}>ADD</button> 

Ebben a szakaszban a böngésző kimenete ugyanúgy fog kinézni, de ha a feladat bevitele után a "ADD" gombra kattint, a beviteli mező kiürül. Ha ez jól működik, folytassa a következő lépéssel.

5. Adjon hozzá egy Törlés gombot

Ez az utolsó lépés, amely lehetővé teszi a felhasználók számára, hogy töröljék a feladatukat, ha hibáztak vagy befejezték a feladatot. Hozzon létre egy handleDeleteTodo függvényt, amely eseménykezelőként működik, amikor a felhasználó a „Törlés” gombra kattint egy adott feladatnál. Paraméterként a feladat azonosítóját veszi fel.

A függvényen belül használja a listatömb szűrőmódszerét egy új newList tömb létrehozásához, amely kizárja a feladatot a megfelelő azonosítóval. A szűrőmódszer a listatömb minden egyes elemén keresztül iterál, és egy új tömböt ad vissza, amely csak azokat az elemeket tartalmazza, amelyek megfelelnek az adott feltételnek. Ebben az esetben ellenőrizze, hogy az egyes feladatok azonosítója megegyezik-e a paraméterként átadott azonosítóval. Frissítse a lista állapotát a setList (newList) meghívásával, amely beállítja az állapotot az új szűrt tömbre, hatékonyan eltávolítva a listáról a megfelelő azonosítójú feladatot.

const handleDeleteTodo = (id) => {
const newList = list.filter((csinálni) =>
 todo.id !== id
 );
 setList (newList); 
};

A leképezési módszerrel ismételje meg a listatömb egyes elemeit, és adjon vissza egy új tömböt. Ezután hozzon létre egy

Hozzáférés minden teendő objektum todo tulajdonságához. végül hozzon létre egy gombot, amelyre kattintva elindítja a handleDeleteTodo függvényt a megfelelő feladat azonosítójával paraméterként, lehetővé téve a feladat törlését a listából.

<ul>
{ list.map((csinálni) => (
<liosztály név="feladat"kulcs={todo.id}>
 {todo.todo}
<gombkattintásra={() => handleDeleteTodo (todo.id)}>Törlésgomb>
li>
))}
ul>

Így kell kinéznie a végső kódnak:

import React, { useState } tól től'reagál';
const TodoList = () => {
const [inputTask, setInputTask] = useState('');
const [lista, setList] = useState([]);
const handleAddTodo = () => {
const newTask = {
 azonosító: Math.véletlen(),
 teendő: inputTask
 };
 setList([...lista, új feladat]);
 setInputTask('');
 };
const handleDeleteTodo = (id) => {
const newList = list.filter((csinálni) => todo.id !== id);
 setList (newList);
 };
const handleInputChange = (esemény) => {
setInputTask(esemény.cél.érték);
 };
Visszatérés (
<divosztály név="Csinálni">

az én címem-TeddLista

<divosztály név="Felső">
<bemenetosztály név="bemenet"típus="szöveg"érték={inputTask}
 onChange={handleInputChange} helyőrző="Adjon meg egy feladatot" />
<gombosztály név="btn"kattintásra={handleAddTodo}>HOZZÁADgomb>
div>
<ul>
 { list.map((csinálni) => (
<liosztály név="feladat"kulcs={todo.id}>
 {todo.todo}
<gombkattintásra={() => handleDeleteTodo (todo.id)}>
Töröl
gomb>
li>
 ))}
ul>
div>
 );
};
exportalapértelmezett Feladatlista; 

Így lesz a végső kimenet, a hozzáadás és a törlés gombok is a várt módon működnek.

Gratulálunk, létrehozott egy teendőlistát, amely feladatokat ad hozzá és töröl. A stílus és további funkciók hozzáadásával tovább léphet.

Használja a Való Világ projektjeit, hogy tanuljon reagálni

A gyakorlás a tanulás hatékony módja lehet. Lehetővé teszi a React koncepciók és legjobb gyakorlatok gyakorlati alkalmazását, megerősítve ezzel a keretrendszer megértését. Rengeteg projekt van, meg kell találnia a megfelelőt.