Δημιουργήστε μια απλή εφαρμογή λίστας υποχρεώσεων με το React

Δημιουργήστε μια απλή εφαρμογή λίστας υποχρεώσεων με το React
Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών. Διαβάστε περισσότερα.

Η εκμάθηση μιας νέας τεχνολογίας όπως το React μπορεί να προκαλέσει σύγχυση χωρίς πρακτική εμπειρία. Ως προγραμματιστής, η δημιουργία έργων σε πραγματικό κόσμο είναι ένας από τους πιο αποτελεσματικούς τρόπους κατανόησης των εννοιών και των χαρακτηριστικών.





MUO βίντεο της ημέρας ΚΥΛΙΣΤΕ ΓΙΑ ΝΑ ΣΥΝΕΧΙΣΕΤΕ ΜΕ ΠΕΡΙΕΧΟΜΕΝΟ

Ακολουθήστε τη διαδικασία δημιουργίας μιας απλής λίστας υποχρεώσεων με το React και βελτιώστε την κατανόησή σας για τις βασικές αρχές του React.



Προϋποθέσεις για τη δημιουργία λίστας υποχρεώσεων

Πριν ξεκινήσετε αυτό το έργο, υπάρχουν πολλές απαιτήσεις. Πρέπει να έχετε βασική κατανόηση των παρακάτω, HTML, CSS, JavaScript, ES6 , και React. Πρέπει να έχετε Node.js και npm, ο διαχειριστής πακέτων JavaScript . Χρειάζεστε επίσης ένα πρόγραμμα επεξεργασίας κώδικα, όπως το Visual Studio Code.



Ακολουθεί το 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. Ρύθμιση Περιβάλλοντος Έργου

Αυτό το στάδιο περιλαμβάνει όλες τις εντολές και τα αρχεία που απαιτούνται για τη ρύθμιση του έργου. Για να ξεκινήσετε, δημιουργήστε ένα νέο έργο React. Ανοίξτε ένα τερματικό και εκτελέστε αυτήν την εντολή:



 npx create-react-app todo-list

Αυτό διαρκεί μερικά λεπτά για να εγκαταστήσετε όλα τα απαραίτητα αρχεία και πακέτα. Δημιουργεί μια νέα εφαρμογή React που ονομάζεται λίστα εργασιών. Μόλις δείτε κάτι τέτοιο, είστε στο σωστό δρόμο:

Μια λίστα εντολών που θα εκτελεστούν μέσα σε έναν κατάλογο.

Μεταβείτε στον κατάλογο του νεοδημιουργημένου έργου σας χρησιμοποιώντας αυτήν την εντολή:



 cd todo-list

Εκτελέστε το έργο σας τοπικά με αυτήν την εντολή:

 npm start

Στη συνέχεια, δείτε το έργο στο πρόγραμμα περιήγησής σας στο http://localhost:3000/.



Στον φάκελο src του έργου σας, υπάρχουν μερικά αρχεία που δεν χρειάζεστε. Διαγράψτε αυτά τα αρχεία: App.css , App.test.js , logo.svg , reportWebVitals.js , setupTests.js .

πώς να χρησιμοποιήσετε τη γραμμή εντολών στα Windows 10
Αρχεία εντός του φακέλου src μιας εφαρμογής React.

Βεβαιωθείτε ότι έχετε αναζητήσει δηλώσεις εισαγωγής στα διαθέσιμα αρχεία και αφαιρέστε τυχόν αναφορές στα διαγραμμένα αρχεία.

2. Δημιουργήστε ένα στοιχείο TodoList

Αυτό είναι το στοιχείο που θα εφαρμόσουμε όλους τους κωδικούς που χρειάζονται για τη λίστα υποχρεώσεων. Δημιουργήστε ένα αρχείο με το όνομα 'TodoList.js' στον φάκελο src. Στη συνέχεια, για να ελέγξετε ότι όλα λειτουργούν όπως θα έπρεπε, προσθέστε τον ακόλουθο κώδικα:

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

Ανοίξτε το αρχείο App.js, εισαγάγετε το στοιχείο TodoList και αποδώστε το μέσα στο στοιχείο App. Θα μοιάζει κάπως έτσι:

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

Μεταβείτε στο τοπικό πρόγραμμα περιήγησής σας που έχει το localhost:3000 σε λειτουργία και ελέγξτε για να δείτε το 'Hello World' γραμμένο με τόλμη. Ολα καλά? Στο επόμενο βήμα.

3. Χειριστείτε την αλλαγή εισόδου και εισόδου

Αυτό το βήμα σάς δίνει τη δυνατότητα να ενεργοποιήσετε ένα συμβάν όταν πληκτρολογείτε μια εργασία στο πλαίσιο εισαγωγής. Εισαγάγετε το άγκιστρο useState από το πακέτο React. Το useState είναι ένα άγκιστρο React που σας επιτρέπει να διαχειρίζεστε την κατάσταση αποτελεσματικά .

 import React, { useState } from 'react';

Χρησιμοποιήστε το άγκιστρο useState για να δημιουργήσετε μια μεταβλητή κατάστασης με το όνομα 'inputTask' με αρχική τιμή κενού συμβολοσειράς. Επιπλέον, εκχωρήστε τη συνάρτηση «setInputTask» για να ενημερώσετε την τιμή του «inputTask» με βάση την είσοδο του χρήστη.

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

Δημιουργήστε μια συνάρτηση που ονομάζεται 'handleInputChange', λαμβάνοντας μια παράμετρο συμβάντος. Θα πρέπει να ενημερώσει την κατάσταση inputTask χρησιμοποιώντας τη συνάρτηση setInputTask. Αποκτήστε πρόσβαση στην τιμή του στόχου του συμβάντος με το event.target.value. Αυτό θα εκτελείται κάθε φορά που αλλάζει η τιμή του πεδίου εισαγωγής.

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

Επιστρέψτε μερικά στοιχεία JSX. Η πρώτη είναι η επικεφαλίδα που γράφει 'Η λίστα εργασιών μου', μπορείτε να αποφασίσετε για οποιαδήποτε επικεφαλίδα θέλετε. Συμπεριλάβετε μερικά χαρακτηριστικά στα στοιχεία εισόδου σας. τύπος = 'κείμενο' : Αυτό καθορίζει τον τύπο εισαγωγής ως κείμενο, value={inputTask} : Αυτό δεσμεύει την τιμή του πεδίου εισαγωγής στη μεταβλητή κατάστασης inputTask, διασφαλίζοντας ότι αντικατοπτρίζει την τρέχουσα τιμή. onChange={handleInputChange} : Αυτό καλεί τη συνάρτηση handleInputChange όταν αλλάζει η τιμή του πεδίου εισαγωγής, ενημερώνοντας την κατάσταση inputTask.

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

Προχωρώντας, δημιουργήστε ένα κουμπί που θα προσθέσει την εισαγόμενη εργασία στη λίστα.

καλύτερη δωρεάν εφαρμογή αναπαραγωγής μουσικής για το android 
         <button className="btn">ADD</button> 
   </div> 
</div>

Σε αυτό το στάδιο, έτσι θα είναι η έξοδος του προγράμματος περιήγησής σας.

Μια κενή λίστα υποχρεώσεων.

4. Προσθήκη λειτουργικότητας στο κουμπί 'ADD'.

Χρησιμοποιήστε το χρήση Κατάσταση αγκιστρώστε για να δημιουργήσετε μια μεταβλητή κατάστασης με το όνομα «list» με μια αρχική τιμή ενός κενού πίνακα. Η μεταβλητή «setList» αποθηκεύει τη σειρά εργασιών με βάση την είσοδο του χρήστη.

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

Δημιουργήστε μια λειτουργία handleAddTodo που θα εκτελείται όταν ο χρήστης κάνει κλικ στο κουμπί 'ADD' για να προσθέσει μια νέα εργασία. Παίρνει την παράμετρο todo, η οποία αντιπροσωπεύει τη νέα εργασία που έχει εισαχθεί από τον χρήστη. Στη συνέχεια, δημιουργήστε ένα αντικείμενο newTask με ένα μοναδικό αναγνωριστικό που δημιουργείται χρησιμοποιώντας τη Math.random() και την ιδιότητα todo που περιέχει το κείμενο εισαγωγής.

Προχωρώντας, ενημερώστε την κατάσταση της λίστας χρησιμοποιώντας τον τελεστή spread […list] για να δημιουργήσετε έναν νέο πίνακα με τις υπάρχουσες εργασίες στη λίστα. Προσθέστε το newTask στο τέλος του πίνακα. Αυτό διασφαλίζει ότι δεν θα μεταλλάξουμε τον αρχικό πίνακα καταστάσεων. Τέλος, επαναφέρετε την κατάσταση inputTask σε μια κενή συμβολοσειρά, καθαρίζοντας το πεδίο εισαγωγής όταν ο χρήστης κάνει κλικ στο κουμπί.

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

Συμπεριλάβετε το onClick χαρακτηριστικό στο στοιχείο κουμπιού με το κείμενο 'ADD'. Όταν κάνετε κλικ, ενεργοποιεί τη συνάρτηση handleAddTodo, η οποία προσθέτει μια νέα εργασία στην κατάσταση της λίστας

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

Σε αυτό το στάδιο, η έξοδος του προγράμματος περιήγησής σας θα είναι ίδια, αλλά εάν κάνετε κλικ στο κουμπί 'ΠΡΟΣΘΗΚΗ' μετά την εισαγωγή μιας εργασίας, το πεδίο εισαγωγής θα αδειάσει. Εάν αυτό λειτουργεί καλά, προχωρήστε στο επόμενο βήμα.

5. Προσθέστε ένα κουμπί διαγραφής

Αυτό είναι το τελευταίο βήμα για να μπορέσουν οι χρήστες να διαγράψουν την εργασία τους εάν έχουν κάνει λάθος ή έχουν ολοκληρώσει την εργασία. Δημιουργήστε μια συνάρτηση handleDeleteTodo που λειτουργεί ως χειριστής συμβάντων όταν ο χρήστης κάνει κλικ στο κουμπί 'Διαγραφή' για μια συγκεκριμένη εργασία. Παίρνει το αναγνωριστικό της εργασίας ως παράμετρο.

Μέσα στη συνάρτηση, χρησιμοποιήστε τη μέθοδο φίλτρου στον πίνακα λίστας για να δημιουργήσετε έναν νέο πίνακα newList που εξαιρεί την εργασία με το αντίστοιχο αναγνωριστικό. Η μέθοδος φίλτρου επαναλαμβάνεται μέσω κάθε στοιχείου στον πίνακα λίστας και επιστρέφει έναν νέο πίνακα που περιέχει μόνο τα στοιχεία που ικανοποιούν τη δεδομένη συνθήκη. Σε αυτήν την περίπτωση, ελέγξτε αν το αναγνωριστικό κάθε εργασίας είναι ίσο με το αναγνωριστικό που δόθηκε ως παράμετρος. Ενημερώστε την κατάσταση της λίστας καλώντας το setList(newList), το οποίο ορίζει την κατάσταση στον νέο φιλτραρισμένο πίνακα, καταργώντας ουσιαστικά την εργασία με το αντίστοιχο αναγνωριστικό από τη λίστα.

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

Χρησιμοποιήστε τη μέθοδο χάρτη για να επαναλάβετε κάθε στοιχείο στον πίνακα λίστας και να επιστρέψετε έναν νέο πίνακα. Στη συνέχεια, δημιουργήστε ένα στοιχείο

  • για να αναπαραστήσετε μια εργασία για κάθε αντικείμενο εργασίας στον πίνακα λίστας. Φροντίστε να προσθέσετε το χαρακτηριστικό κλειδί κατά την απόδοση μιας λίστας στοιχείων στο React. Βοηθά το React να αναγνωρίζει μοναδικά κάθε στοιχείο λίστας και να ενημερώνει αποτελεσματικά τη διεπαφή χρήστη όταν αλλάζει. Σε αυτήν την περίπτωση, ορίστε το κλειδί στο αναγνωριστικό κάθε αντικειμένου εκκρεμότητας για να εξασφαλίσετε μοναδικότητα.

    Πρόσβαση στην ιδιότητα todo κάθε αντικειμένου todo. Τέλος, δημιουργήστε ένα κουμπί που όταν το κάνετε κλικ, ενεργοποιεί τη συνάρτηση handleDeleteTodo με το αναγνωριστικό της αντίστοιχης εργασίας ως παράμετρο, επιτρέποντάς μας να διαγράψουμε την εργασία από τη λίστα.

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

    Έτσι θα πρέπει να μοιάζει ο τελικός σας κώδικας:

     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;

    Έτσι θα είναι η τελική σας έξοδος, με τα κουμπιά προσθήκης και διαγραφής να λειτουργούν όπως αναμένεται.

    Μια λίστα υποχρεώσεων που εμφανίζει πολλές εργασίες.

    Συγχαρητήρια, δημιουργήσατε μια λίστα υποχρεώσεων που προσθέτει και διαγράφει εργασίες. Μπορείτε να προχωρήσετε περισσότερο προσθέτοντας στυλ και περισσότερες λειτουργίες.

    Χρησιμοποιήστε Real World Projects για να μάθετε React

    Η εξάσκηση μπορεί να είναι ένας αποτελεσματικός τρόπος μάθησης. Σας επιτρέπει να εφαρμόζετε τις έννοιες και τις βέλτιστες πρακτικές του React με πρακτικό τρόπο, ενισχύοντας την κατανόησή σας για το πλαίσιο. Υπάρχουν πολλά έργα εκεί έξω, θα πρέπει να βρείτε τα σωστά.

    πως βλέπω τι μητρική έχω