Sukurkite paprastą užduočių sąrašo programą naudodami „React“.

Sukurkite paprastą užduočių sąrašo programą naudodami „React“.
Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

Mokymasis naujos technologijos, tokios kaip „React“, gali būti painu be praktinės patirties. Kaip kūrėjas, realaus pasaulio projektų kūrimas yra vienas iš efektyviausių būdų suprasti sąvokas ir funkcijas.





MUO dienos video SLĖKITE, KAD TĘSITE SU TURINIU

Sekite paprasto darbų sąrašo kūrimo procesą naudodami „React“ ir patobulinkite savo „React“ pagrindų supratimą.



Būtinos užduočių sąrašo sudarymo sąlygos

Prieš pradedant šį projektą, yra keletas reikalavimų. Turite turėti pagrindinį supratimą apie šiuos dalykus: HTML, CSS, JavaScript, ES6 ir Reaguoti. Turite turėti Node.js ir npm, „JavaScript“ paketų tvarkyklė . Taip pat reikia kodo rengyklės, pvz., „Visual Studio Code“.





Štai CSS, kurį naudos šis projektas:

 /* 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. Nustatyti projekto aplinką

Šis etapas apima visas komandas ir failus, reikalingus projektui nustatyti. Norėdami pradėti, sukurkite naują „React“ projektą. Atidarykite terminalą ir paleiskite šią komandą:



 npx create-react-app todo-list

Tai užtruks kelias minutes, kol bus įdiegti visi reikalingi failai ir paketai. Tai sukuria naują „React“ programą, pavadintą „Todo-list“. Kai pamatysite kažką panašaus, eisite teisingu keliu:

Komandų, kurias reikia vykdyti kataloge, sąrašas.

Eikite į naujai sukurto projekto katalogą naudodami šią komandą:



 cd todo-list

Vykdykite projektą vietoje naudodami šią komandą:

 npm start

Tada peržiūrėkite projektą savo naršyklėje adresu http://localhost:3000/.



Jūsų projekto src aplanke yra keletas failų, kurių jums nereikia. Ištrinkite šiuos failus: App.css , App.test.js , logotipas.svg , reportWebVitals.js , setupTests.js .

Failai, esantys React programos src aplanke.

Įsitikinkite, kad esamuose failuose ieškote importavimo teiginių ir pašalinkite visas nuorodas į ištrintus failus.

kaip pašalinti virusą iš „Android“ telefono

2. Sukurkite TodoList komponentą

Tai yra komponentas, kurį įdiegsime visus užduočių sąrašui reikalingus kodus. Savo src aplanke sukurkite failą pavadinimu „TodoList.js“. Tada norėdami patikrinti, ar viskas veikia taip, kaip turėtų, pridėkite šį kodą:

 import React from 'react'; 
 
const TodoList = () => { 
    return ( 
        <div> 
            <h2>Hello World </h2> 
        </div> 
    ); 
}; 
 
export default TodoList;  
 

Atidarykite failą App.js, importuokite TodoList komponentą ir pateikite jį programos komponente. Tai atrodys maždaug taip:

prijunkite „Android“ telefoną prie monitoriaus ir klaviatūros 
 import React from 'react'; 
import './styles.css' 
import TodoList from './TodoList'; 
 
const App = () => { 
    return ( 
        <div> 
            <TodoList /> 
        </div> 
    ); 
}; 
 
export default App;

Eikite į vietinę naršyklę, kurioje veikia „localhost:3000“, ir patikrinkite, ar drąsiai parašyta „Hello World“. Viskas gerai? Į kitą žingsnį.

3. Valdykite įvestį ir įvesties keitimą

Šis veiksmas leidžia suaktyvinti įvykį, kai įvedate užduotį įvesties laukelyje. Importuokite „useState“ kabliuką iš „React“ paketo. useState yra „React Hook“, leidžiantis efektyviai valdyti būseną .

 import React, { useState } from 'react';

Naudokite kabliuką useState, kad sukurtumėte būsenos kintamąjį pavadinimu „inputTask“, kurio pradinė vertė yra tuščia eilutė. Be to, priskirkite funkciją „setInputTask“, kad atnaujintumėte „inputTask“ reikšmę pagal vartotojo įvestį.

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

Sukurkite funkciją, pavadintą „handleInputChange“, įtraukdami įvykio parametrą. Ji turėtų atnaujinti inputTask būseną naudodama funkciją setInputTask. Pasiekite įvykio tikslo vertę naudodami event.target.value. Tai veiks, kai pasikeis įvesties lauko reikšmė.

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

Grąžinkite keletą JSX elementų. Pirmoji yra antraštė, kuri parašyta „Mano darbų sąrašas“. Galite pasirinkti bet kurią jums patinkančią antraštę. Į įvesties elementus įtraukite keletą atributų. tipas = 'tekstas' : nurodomas įvesties tipas kaip tekstas, value={inputTask} : Tai susieja įvesties lauko reikšmę su inputTask būsenos kintamuoju, užtikrinant, kad jis atspindėtų dabartinę reikšmę. onChange={handleInputChange} : Pasikeitus įvesties lauko vertei, iškviečiama HandelInputChange funkcija ir atnaujinama inputTask būsena.

 <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" />

Toliau sukurkite mygtuką, kuris įtrauks įvestą užduotį į sąrašą.

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

Šiame etape taip atrodys jūsų naršyklės išvestis.

Tuščias darbų sąrašas.

4. Pridėkite funkcionalumą prie mygtuko „PRIDĖTI“.

Naudoti useState kabliukas, kad sukurtumėte būsenos kintamąjį pavadinimu „list“ su pradine tuščio masyvo reikšme. Kintamasis „setList“ saugo užduočių masyvą, pagrįstą vartotojo įvestimi.

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

Sukurkite funkciją handleAddTodo, kuri bus paleista, kai vartotojas spustelėja mygtuką „PRIDĖTI“, kad pridėtų naują užduotį. Tam reikia todo parametro, kuris parodo naują vartotojo įvestą užduotį. Tada sukurkite objektą newTask su unikaliu ID, sugeneruotu naudojant Math.random(), ir todo ypatybę, kurioje yra įvesties tekstas.

Toliau atnaujinkite sąrašo būseną naudodami sklaidos operatorių […list], kad sukurtumėte naują masyvą su sąraše esančiomis užduotimis. Prie masyvo pabaigos pridėkite naują užduotį. Tai užtikrina, kad nepakeisime pradinės būsenos masyvo. Galiausiai iš naujo nustatykite inputTask būseną į tuščią eilutę ir išvalykite įvesties lauką, kai vartotojas spustelėja mygtuką.

 const handleAddTodo = (todo) => { 
    const newTask = { 
        id: Math.random(), 
        todo: todo 
   }; 
 
   setList([...list, newTask]); 
    setInputTask(''); 
};

Įtraukti onClick atributas mygtuko elementui su tekstu 'PRIDĖTI'. Spustelėjus, suaktyvinama funkcija handleAddTodo, kuri į sąrašo būseną prideda naują užduotį

 <button onClick={() => handleAddTodo(inputTask)}>ADD</button>

Šiame etape jūsų naršyklės išvestis atrodys taip pat, bet jei įvedę užduotį spustelėsite mygtuką „PRIDĖTI“, įvesties laukas bus ištuštintas. Jei viskas gerai, pereikite prie kito veiksmo.

5. Pridėkite trynimo mygtuką

Tai paskutinis veiksmas, leidžiantis vartotojams ištrinti savo užduotį, jei jie padarė klaidą arba atliko užduotį. Sukurkite „handleDeleteTodo“ funkciją, kuri veikia kaip įvykių tvarkytoja, kai vartotojas spustelėja mygtuką „Ištrinti“ tam tikrai užduočiai atlikti. Kaip parametrą jis naudoja užduoties ID.

Funkcijoje naudokite sąrašo masyve esantį filtravimo metodą, kad sukurtumėte naują masyvą newList, kuris neįtrauktų užduoties su atitinkamu ID. Filtro metodas kartojasi per kiekvieną sąrašo masyvo elementą ir grąžina naują masyvą, kuriame yra tik tie elementai, kurie atitinka nurodytą sąlygą. Tokiu atveju patikrinkite, ar kiekvienos užduoties ID yra lygus ID, perduotam kaip parametras. Atnaujinkite sąrašo būseną iškviesdami setList(newList), kuri nustato būseną į naują filtruotą masyvą, veiksmingai pašalindama užduotį su atitinkamu ID iš sąrašo.

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

Naudokite žemėlapio metodą, kad pakartotumėte kiekvieną sąrašo masyvo elementą ir grąžintumėte naują masyvą. Tada sukurkite elementą

  • , kad pavaizduotų kiekvieno užduoties objekto užduotį sąrašo masyve. Pateikdami elementų sąrašą programoje „React“, būtinai pridėkite rakto atributą. Tai padeda „React“ unikaliai identifikuoti kiekvieną sąrašo elementą ir efektyviai atnaujinti vartotojo sąsają, kai jis pasikeičia. Tokiu atveju nustatykite raktą į kiekvieno todo objekto ID, kad užtikrintumėte unikalumą.

    Pasiekite kiekvieno todo objekto todo savybę. galiausiai sukurkite mygtuką, kurį spustelėjus, suaktyvinama handDeleteTodo funkcija su atitinkamos užduoties ID kaip parametru, leidžianti ištrinti užduotį iš sąrašo.

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

    Štai kaip turėtų atrodyti jūsų galutinis kodas:

     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;

    Toks bus jūsų galutinis rezultatas, o mygtukai pridėti ir ištrinti veiks taip, kaip tikėtasi.

    Užduočių sąrašas, kuriame rodomos kelios užduotys.

    Sveikiname, sukūrėte darbų sąrašą, kuriame pridedamos ir pašalinamos užduotys. Galite eiti toliau pridėdami stiliaus ir daugiau funkcijų.

    kaip sukurti pasirinktinį „snapchat“ filtrą

    Naudokite realaus pasaulio projektus, kad išmoktumėte reaguoti

    Praktika gali būti veiksmingas mokymosi būdas. Tai leidžia praktiškai pritaikyti „React“ koncepcijas ir geriausią praktiką, o tai sustiprina jūsų supratimą apie sistemą. Yra daugybė projektų, jums reikia rasti tinkamus.