Att lära sig en ny teknik som React kan vara förvirrande utan praktisk erfarenhet. Som utvecklare är att bygga verkliga projekt ett av de mest effektiva sätten att förstå koncept och funktioner.

Följ processen med att skapa en enkel att göra-lista med React och förbättra din förståelse för Reacts grunder.

Förutsättningar för att skapa en att-göra-lista

Innan du påbörjar det här projektet finns det flera krav. Du måste ha en grundläggande förståelse för följande, HTML, CSS, JavaScript, ES6, och Reagera. Du måste ha Node.js och npm, JavaScript-pakethanteraren. Du behöver också en kodredigerare, som Visual Studio Code.

Här är CSS som det här projektet kommer att använda:

/* styles.css */
.App {
typsnittsfamilj: sans serif;
visa: böja;
motivera-innehåll: Centrum;
align-objekt: Centrum;
höjd: 100vh;
}
.Att göra {
bakgrundsfärg: vete;
textjustera: Centrum;
bredd: 50%;
stoppning: 20px;
box-skugga: rgba(0, 0, 0, 0.24) 0px 3px 8px;
marginal: bil;
}





instagram viewer

ul {
list-stil-typ: ingen;
stoppning: 10px;
marginal: 0;
}
knapp {
bredd: 70px;
höjd: 35px;
bakgrundsfärg: sandbrunt;
gräns: ingen;
textstorlek: 15px;
teckensnittsvikt: 800;
gräns-radie: 4px;
box-skugga: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.inmatning {
gräns: ingen;
bredd: 340px;
höjd: 35px;
gräns-radie: 9px;
textjustera: Centrum;
box-skugga: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.Topp {
visa: böja;
motivera-innehåll: Centrum;
glipa: 12px;
}
li {
visa: böja;
motivera-innehåll: utrymmet jämnt;
align-objekt: Centrum;
stoppning: 10px;
}
li:innan {
innehåll: "*";
marginal-höger: 5px;
}

1. Ställ in projektmiljö

Detta steg innehåller alla kommandon och filer som behövs för att ställa in projektet. För att börja skapa ett nytt React-projekt. Öppna en terminal och kör detta kommando:

npx create-react-app att göra-lista

Det tar några minuter att installera alla filer och paket som behövs. Den skapar en ny React-applikation som heter att göra-lista. När du ser något sånt här är du på rätt väg:

Navigera till katalogen för ditt nyskapade projekt med detta kommando:

cd att göra-lista

Kör ditt projekt lokalt med detta kommando:

npm start

Och se sedan projektet i din webbläsare på http://localhost: 3000/.

I src-mappen i ditt projekt finns det ett par filer som du inte behöver. Ta bort dessa filer: App.css, App.test.js, logo.svg, reportWebVitals.js, setupTests.js.

Se till att du letar efter importsatser i de tillgängliga filerna och ta bort alla referenser till de raderade filerna.

2. Skapa en TodoList-komponent

Det här är komponenten vi kommer att implementera alla koder som behövs för att göra-listan. Skapa en fil med namnet "TodoList.js" i din src-mapp. För att sedan testa att allt fungerar som det ska, lägg till följande kod:

importera Reagera från'reagera';
konst TodoList = () => {
lämna tillbaka (



Hej världen </h2>
 </div>
 );
};
exporterastandard Att göra lista; 

Öppna din App.js-fil, importera TodoList-komponenten och rendera den inuti App-komponenten. Det kommer att se ut ungefär så här:

importera Reagera från'reagera';
importera'./styles.css'
importera Att göra lista från'./Att göra lista';
konst App = () => {
lämna tillbaka (




 </div>
 );
};
exporterastandard App;

Gå till din lokala webbläsare som har localhost: 3000 igång och kontrollera att "Hello World" är djärvt skrivet. Allt väl? Till nästa steg.

3. Hantera in- och ingångsändring

Detta steg gör att du kan utlösa en händelse när du skriver en uppgift i inmatningsrutan. Importera useState-kroken från ditt React-paket. useState är en React-hook som låter dig hantera tillstånd effektivt.

importera Reagera, { useState } från'reagera';

Använd useState-kroken för att skapa en tillståndsvariabel med namnet "inputTask" med ett initialt värde av en tom sträng. Tilldela dessutom funktionen "setInputTask" för att uppdatera värdet för "inputTask" baserat på användarinmatning.

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

Skapa en funktion som heter "handleInputChange", som tar in en händelseparameter. Den bör uppdatera inputTask-tillståndet med hjälp av setInputTask-funktionen. Få tillgång till värdet för händelsens mål med event.target.value. Detta kommer att köras när värdet på inmatningsfältet ändras.

konst handleInputChange = (händelse) => {
 setInputTask (event.target.value);
}; 

Returnera ett par JSX-element. Den första är rubriken som lyder "My Todo-List", du kan bestämma vilken rubrik du vill. Inkludera ett par attribut till dina inmatningselement. typ=”text”: Detta anger din inmatningstyp som text, värde={inputTask}: Detta binder värdet på inmatningsfältet till tillståndsvariabeln inputTask, vilket säkerställer att det återspeglar det aktuella värdet.onChange={handleInputChange}: Detta anropar handleInputChange-funktionen när värdet på inmatningsfältet ändras, vilket uppdaterar inputTask-tillståndet.

"Att göra">
Min att göra-lista</h1>
"Topp">
"inmatning" typ="text" värde={inputTask}
 onChange={handleInputChange} platshållare="Ange en uppgift" />

Gå vidare, skapa en knapp som lägger till den inmatade uppgiften till listan.

"btn">LÄGG TILL</button>
 </div>
</div>

I det här skedet är det så här din webbläsares utdata kommer att se ut.

4. Lägg till funktionalitet till "ADD"-knappen

Använd useState krok för att skapa en tillståndsvariabel med namnet 'lista' med ett initialt värde av en tom array. Variabeln "setList" lagrar mängden uppgifter baserat på användarinmatning.

konst [list, setList] = useState([]);

Skapa en funktion handleAddTodo som kommer att köras när användaren klickar på knappen "ADD" för att lägga till en ny uppgift. Den tar todo-parametern, som representerar den nya uppgiften som angetts av användaren. Skapa sedan ett objekt newTask med ett unikt id genererat med Math.random(), och todo-egenskapen som innehåller inmatningstexten.

Gå vidare, uppdatera listtillståndet genom att använda spridningsoperatorn […lista] för att skapa en ny array med de befintliga uppgifterna i listan. Lägg till den nya uppgiften i slutet av arrayen. Detta säkerställer att vi inte muterar den ursprungliga tillståndsmatrisen. Återställ slutligen inputTask-tillståndet till en tom sträng och rensar inmatningsfältet när användaren klickar på knappen.

konst handleAddTodo = (att göra) => {
konst newTask = {
 id: Matematik.slumpmässig(),
 göra: göra
 };
 setList([...lista, newTask]);
 setInputTask('');
}; 

Inkludera påKlicka attribut till knappelementet med texten "ADD". När du klickar på den utlöser den handleAddTodo funktion, som lägger till en ny uppgift till listtillståndet

 handleAddTodo (inputTask)}>ADD</button> 

I det här skedet kommer din webbläsares utdata att se likadant ut, men om du klickar på knappen "LÄGG TILL" efter att ha angett en uppgift kommer inmatningsfältet att tömmas. Om det fungerar bra, gå vidare till nästa steg.

5. Lägg till en raderingsknapp

Detta är det sista steget för att göra det möjligt för användarna att ta bort sin uppgift om de har gjort ett misstag eller har slutfört uppgiften. Skapa en handleDeleteTodo-funktion som fungerar som en händelsehanterare när användaren klickar på "Delete"-knappen för en specifik uppgift. Den tar uppgiftens ID som en parameter.

Inuti funktionen använder du filtermetoden på listarrayen för att skapa en ny array newList som exkluderar uppgiften med det matchande id: t. Filtermetoden itererar genom varje objekt i listarrayen och returnerar en ny array som endast innehåller de objekt som uppfyller det givna villkoret. I det här fallet kontrollerar du om ID: t för varje uppgift är lika med ID: t som skickas som parameter. Uppdatera listtillståndet genom att anropa setList (newList), vilket ställer in tillståndet till den nya filtrerade arrayen, vilket effektivt tar bort uppgiften med det matchande ID: t från listan.

konst handleDeleteTodo = (id) => {
konst newList = list.filter((att göra) =>
 todo.id !== id
 );
 setList (newList); 
};

Använd kartmetoden för att iterera över varje objekt i listarrayen och returnera en ny array. Skapa sedan en

Få åtkomst till todo-egenskapen för varje todo-objekt. slutligen, skapa en knapp som när den klickas utlöser funktionen handleDeleteTodo med id för motsvarande uppgift som parameter, vilket gör att vi kan ta bort uppgiften från listan.

<ul>
{ list.map((att göra) => (
<liklassnamn="uppgift"nyckel={todo.id}>
 {todo.todo}
<knapppåKlicka={() => handleDeleteTodo (todo.id)}>Ta bortknapp>
li>
))}
ul>

Så här ska din slutliga kod se ut:

importera Reagera, { useState } från'reagera';
konst TodoList = () => {
konst [inputTask, setInputTask] = useState('');
konst [lista, setList] = useState([]);
konst handleAddTodo = () => {
konst newTask = {
 id: Matematik.slumpmässig(),
 att göra: inputTask
 };
 låtlista([...lista, ny uppgift]);
 setInputTask('');
 };
konst handleDeleteTodo = (id) => {
konst newList = list.filter((att göra) => todo.id !== id);
 setList (newList);
 };
konst handleInputChange = (händelse) => {
setInputTask(händelse.mål.värde);
 };
lämna tillbaka (
<divklassnamn="Att göra">

Min till-DoLista

<divklassnamn="Topp">
<inmatningklassnamn="inmatning"typ="text"värde={inputTask}
 onChange={handleInputChange} platshållare="Ange en uppgift" />
<knappklassnamn="btn"påKlicka={handleAddTodo}>LÄGG TILLknapp>
div>
<ul>
 { list.map((att göra) => (
<liklassnamn="uppgift"nyckel={todo.id}>
 {todo.todo}
<knapppåKlicka={() => handleDeleteTodo (todo.id)}>
Radera
knapp>
li>
 ))}
ul>
div>
 );
};
exporterastandard Att göra lista; 

Så här kommer din slutliga utdata att bli, med både lägg till och raderingsknapparna som fungerar som förväntat.

Grattis, du har skapat en att göra-lista som lägger till och tar bort uppgifter. Du kan gå längre genom att lägga till styling och fler funktioner.

Använd Real World Projects för att lära dig React

Övning kan vara ett effektivt sätt att lära sig. Det låter dig tillämpa React-koncept och bästa praxis på ett praktiskt sätt, vilket stärker din förståelse för ramverket. Det finns massor av projekt där ute, du borde behöva hitta de rätta.