Εξασκήστε τις δεξιότητές σας στο React με αυτήν την κλασική, κατανοητή εφαρμογή δείγματος.

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

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

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

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

Ακολουθεί το CSS που θα χρησιμοποιήσει αυτό το έργο:

/* styles.css */
.Εφαρμ {
γραμματοσειρά-οικογένεια: Σανς σέριφ;
απεικόνιση: καλώδιο;
δικαιολογώ-περιεχόμενο: κέντρο;
στοίχιση-στοιχεία





instagram viewer

: κέντρο;
ύψος: 100vh;
}
.Να κάνω {
χρώμα του φόντου: σιτάρι;
στοίχιση κειμένου: κέντρο;
πλάτος: 50%;
υλικό παραγεμίσματος: 20px;
κουτί-σκιά: rgba(0, 0, 0, 0.24) 0px 3px 8px;
περιθώριο: αυτο;
}


ul {
λίστα-στυλ-τύπου: κανένας;
υλικό παραγεμίσματος: 10px;
περιθώριο: 0;
}


κουμπί {
πλάτος: 70px;
ύψος: 35px;
χρώμα του φόντου: αμμοκαφέ;
σύνορο: κανένας;
μέγεθος γραμματοσειράς: 15px;
βάρος γραμματοσειράς: 800;
σύνορα-ακτίνα: 4px;
κουτί-σκιά: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}


.εισαγωγή {
σύνορο: κανένας;
πλάτος: 340px;
ύψος: 35px;
σύνορα-ακτίνα: 9px;
στοίχιση κειμένου: κέντρο;
κουτί-σκιά: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}


.Μπλουζα {
απεικόνιση: καλώδιο;
δικαιολογώ-περιεχόμενο: κέντρο;
χάσμα: 12px;
}


li {
απεικόνιση: καλώδιο;
δικαιολογώ-περιεχόμενο: χώρο-ομοιόμορφα;
στοίχιση-στοιχεία: κέντρο;
υλικό παραγεμίσματος: 10px;
}
li:πριν {
περιεχόμενο: "*";
περιθώριο-δεξιά: 5px;
}

1. Ρύθμιση Περιβάλλοντος Έργου

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

npx create-react-app todo-list

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

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

cd todo-list

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

npm έναρξη

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

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

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

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

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

εισαγωγή Αντιδρώ από'αντιδρώ';
συνθ TodoList = () => {
ΕΠΙΣΤΡΟΦΗ (




Γεια σου Κόσμο </h2>
 </div>
 );
};


εξαγωγήΠροκαθορισμένο TodoList;

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

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή"./styles.css"
εισαγωγή TodoList από'./TodoList';
συνθ Εφαρμογή = () => {
ΕΠΙΣΤΡΟΦΗ (





 </div>
 );
};
εξαγωγήΠροκαθορισμένο Εφαρμογή?

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

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

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

εισαγωγή React, { useState } από'αντιδρώ';

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

συνθ [inputTask, setInputTask] = useState("");

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

συνθ handleInputChange = (Εκδήλωση) => {
 setInputTask (event.target.value);
};

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

"Να κάνω">
Η λίστα υποχρεώσεων μου</h1>
"Μπλουζα">
"εισαγωγή" τύπος="κείμενο" value={inputTask}
 onChange={handleInputChange} placeholder="Εισαγάγετε μια εργασία" />

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

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

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

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

συνθ [list, setList] = useState([]);

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

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

συνθ handleAddTodo = (να κάνω) => {
συνθ newTask = {
 ταυτότητα: Μαθηματικά.τυχαίος(),
 todo: κάνω
 };
 setList([...list, newTask]);
 setInputTask('');
};

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

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

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

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

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

συνθ handleDeleteTodo = (ταυτότητα) => {
συνθ newList = list.filter((να κάνω) =>
 todo.id !== id
 );
 setList (newList); 
};

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

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

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

    <ul>
    {list.map((να κάνω) => (
    <liόνομα τάξης="έργο"κλειδί={todo.id}>
     {todo.todo}
    <κουμπίστο κλικ={() => handleDeleteTodo (todo.id)}>Διαγραφήκουμπί>
    li>
    ))}
    ul>

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

    εισαγωγή React, { useState } από'αντιδρώ';
    συνθ TodoList = () => {
    συνθ [inputTask, setInputTask] = useState('');
    συνθ [λίστα, setList] = useState([]);
    

    συνθ handleAddTodo = () => {
    συνθ newTask = {
     ταυτότητα: Μαθηματικά.τυχαίος(),
     todo: inputTask
     };
    

     setList([...λίστα, νέα εργασία]);
     setInputTask('');
     };
    

    συνθ handleDeleteTodo = (ταυτότητα) => {
    συνθ newList = list.filter((να κάνω) => todo.id !== id);
     setList (newList);
     };
    

    συνθ handleInputChange = (Εκδήλωση) => {
    setInputTask(Εκδήλωση.στόχος.αξία);
     };
    

    ΕΠΙΣΤΡΟΦΗ (
    <divόνομα τάξης="Να κάνω">
    

    μου προς-ΚάνωΛίστα

    

    <divόνομα τάξης="Μπλουζα">
    <εισαγωγήόνομα τάξης="εισαγωγή"τύπος="κείμενο"αξία={inputTask}
     onChange={handleInputChange} placeholder="Εισαγάγετε μια εργασία" />
    

    <κουμπίόνομα τάξης="btn"στο κλικ={handleAddTodo}>ΠΡΟΣΘΗΚΗκουμπί>
    div>
    

    <ul>
     {list.map((να κάνω) => (
    <liόνομα τάξης="έργο"κλειδί={todo.id}>
     {todo.todo}
    <κουμπίστο κλικ={() => handleDeleteTodo (todo.id)}>
    Διαγράφω
    κουμπί>
    li>
     ))}
    ul>
    div>
     );
    };
    εξαγωγήΠροκαθορισμένο TodoList;

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

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

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

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