Hozzon létre egy egyszerű feladatlista-alkalmazást a React segítségével

Hozzon létre egy egyszerű feladatlista-alkalmazást a React segítségével
A hozzád hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

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.





A nap MUO videója GÖRGÖZSEN A TARTALOM FOLYTATÁSHOZ

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.



laptop hang nem működik windows 10

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 { 
  font-family: sans-serif; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100vh; 
} 
 
.Todo { 
  background-color: wheat; 
  text-align: center; 
  width: 50%; 
  padding: 20px; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
  margin: auto; 
} 
 
ul { 
  list-style-type: none; 
  padding: 10px; 
  margin: 0; 
} 
 
button { 
  width: 70px; 
  height: 35px; 
  background-color: sandybrown; 
  border: none; 
  font-size: 15px; 
  font-weight: 800; 
  border-radius: 4px; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
} 
 
.input { 
  border: none; 
  width: 340px; 
  height: 35px; 
  border-radius: 9px; 
  text-align: center; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
} 
 
.Top { 
  display: flex; 
  justify-content: center; 
  gap: 12px; 
} 
 
li { 
  display: flex; 
  justify-content: space-evenly; 
  align-items: center; 
  padding: 10px; 
} 
 
li:before { 
  content: "*"; 
  margin-right: 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:

A könyvtárban futtatandó parancsok listája.

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 http://localhost:3000/ címen.



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 .

Fájlok egy React alkalmazás src mappájában.

Ü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 React from 'react'; 
 
const TodoList = () => { 
    return ( 
        <div> 
            <h2>Hello World </h2> 
        </div> 
    ); 
}; 
 
export default TodoList;  
 

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 React from 'react'; 
import './styles.css' 
import TodoList from './TodoList'; 
 
const App = () => { 
    return ( 
        <div> 
            <TodoList /> 
        </div> 
    ); 
}; 
 
export default App;

Nyissa meg a helyi böngészőt, amelyben 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 } from 'react';

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 = (event) => { 
    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.

 <div className="Todo"> 
    <h1>My To-Do List</h1> 
    <div className="Top"> 
        <input className="input" type="text" value={inputTask} 
           onChange={handleInputChange} placeholder="Enter a task" />

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

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

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

Üres teendőlista.

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 [list, 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.

stop kód memóriakezelés win 10

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 = (todo) => { 
    const newTask = { 
        id: Math.random(), 
        todo: todo 
   }; 
 
   setList([...list, newTask]); 
    setInputTask(''); 
};

Tartalmazza a onClick attribútumot a gombelemhez az 'ADD' szöveggel. Ha rákattint, aktiválja a handleAddTodo függvényt, amely új feladatot ad a lista állapotához

 <button onClick={() => 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.

ha a laptopot folyamatosan csatlakoztatva kell hagynia

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((todo) =>  
        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

  • elemet, amely a listatömb minden teendőobjektumához egy feladatot jelenít meg. Ügyeljen arra, hogy hozzáadja a kulcsattribútumot, amikor elemlistát jelenít meg a React alkalmazásban. Segítségével a React egyedileg azonosítja az egyes listaelemeket, és hatékonyan frissíti a felhasználói felületet, ha azok megváltoznak. Ebben az esetben állítsa be a kulcsot az egyes teendőobjektumok azonosítójához az egyediség biztosítása érdekében.

    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, mint paraméterrel, lehetővé téve a feladat törlését a listából.

     <ul> 
    { list.map((todo) => ( 
       <li className="task" key={todo.id}> 
            {todo.todo} 
            <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button> 
        </li> 
    ))} 
    </ul>

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

     import React, { useState } from 'react'; 
     
    const TodoList = () => { 
        const [inputTask, setInputTask] = useState(''); 
        const [list, setList] = useState([]); 
     
        const handleAddTodo = () => { 
            const newTask = { 
                id: Math.random(), 
                todo: inputTask 
            }; 
     
           setList([...list, newTask]); 
            setInputTask(''); 
        }; 
     
       const handleDeleteTodo = (id) => { 
            const newList = list.filter((todo) => todo.id !== id); 
            setList(newList); 
        }; 
     
       const handleInputChange = (event) => { 
            setInputTask(event.target.value); 
        }; 
     
       return ( 
            <div className="Todo"> 
                <h1>My To-Do List</h1> 
     
                <div className="Top"> 
                    <input className="input" type="text" value={inputTask} 
                       onChange={handleInputChange} placeholder="Enter a task" /> 
     
                    <button className="btn" onClick={handleAddTodo}>ADD</button> 
                </div> 
     
               <ul> 
                    { list.map((todo) => ( 
                        <li className="task" key={todo.id}> 
                            {todo.todo} 
                            <button onClick={() => handleDeleteTodo(todo.id)}> 
                               Delete 
                           </button> 
                        </li> 
                    ))} 
                </ul> 
            </div> 
        ); 
    }; 
     
    export default TodoList;

    Í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.

    Egy teendőlista, amely több feladatot is tartalmaz.

    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.