React Intermediate Tutorial: 3 Βήματα

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:33

React Intermediate Tutorial

Δείτε το τελικό προϊόν εδώ.

Τι θα μάθεις;

Θα δημιουργήσετε μια απλή λίστα υποχρεώσεων με το React.js και θα μάθετε για τα πιο περίπλοκα μέρη του reag. Προϋποθέσεις (συνιστάται ιδιαίτερα) συμπληρώνουν τον οδηγό έναρξης του reag.js. Γνώση της HTML Γνώση CSS Βασικές εντολές κελύφους Αξιοπρεπή γνώση JavaScript

Προμήθειες

Όλο το λογισμικό θα καλυφθεί στο σεμινάριο.

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

• npm/νήματα
• Ένα IDE που υποστηρίζει js
• Ένα πρόγραμμα περιήγησης ιστού

Βήμα 1: React Intermediate Tutorial

Ξεκινώντας

Γιατί React.js;

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

Εγκατάσταση του απαιτούμενου λογισμικού/πακέτων

Θα χρειαστείτε:

npm/νήματα

Πώς να εγκαταστήσω:

1. Μεταβείτε και εγκαταστήστε το πιο πρόσφατο LTS του Node.js
2. ΠΡΟΑΙΡΕΤΙΚΟ: αν προτιμάτε το νήμα ως διαχειριστή πακέτων, εγκαταστήστε το νήμα πληκτρολογώντας το νήμα power -npm install -g
3. Ανοίξτε το powerhell/cmd.exe
4. Μεταβείτε στον κατάλογο στον οποίο θέλετε να δημιουργήσετε το έργο σας
5. Πληκτρολογήστε npx create-react-app.

Ολοκληρώσατε τη φάση εγκατάστασης. για να το δοκιμάσετε, ανοίξτε το powerhell, μεταβείτε στον κατάλογο του έργου σας και πληκτρολογήστε npm start. θα πρέπει να λάβετε μια ιστοσελίδα φορτωμένη στο προεπιλεγμένο πρόγραμμα περιήγησής σας.

Βήμα 2: Βήμα 1: Ξεκινώντας

Για να ξεκινήσετε, διαγράψτε τα ακόλουθα αρχεία από τον κατάλογο /src:

• App.test.js
• index.css
• logo.svg
• serviceWorker.js
• setupTests.js

Δεν χρειαζόμαστε αυτά τα αρχεία.

Ας οργανώσουμε επίσης το σύστημα αρχείων μας. Δημιουργήστε αυτούς τους καταλόγους στο /src /:

• js
• css

βάλτε το App.js στο js dir και το App.css στο css dir.

Στη συνέχεια, ας αναδιοργανώσουμε τις εξαρτήσεις.

στο index.js, καταργήστε τις εισαγωγές για serviceWorker και index.css. Διαγραφή serviceWorker.register (). Κάντε δρομολόγηση των διαδρομών για την εφαρμογή.

στο App.js, αφαιρέστε την εισαγωγή για το logo.svg, καθώς δεν το χρειαζόμαστε πια. Reroute App.css. διαγράψτε τη λειτουργία App () και την εξαγωγή για εφαρμογή.

Στο React, έχουμε 2 τρόπους καθορισμού στοιχείων. Έχουμε λειτουργίες και κλάσεις. οι συναρτήσεις είναι για λιγότερο περίπλοκα στοιχεία και οι κλάσεις είναι γενικά για πιο περίπλοκα στοιχεία. Επειδή μια λίστα todo είναι πιο περίπλοκη από μια δέσμη HTML, θα χρησιμοποιήσουμε τη σύνταξη κλάσης.

Προσθέστε αυτό στον κωδικό σας:

pastebin.com/nGXeCpaH

το html θα μπει στα 2 div.

ας ορίσουμε το Στοιχείο.

pastebin.com/amjd0jnb

παρατηρήστε πώς ορίσαμε την αξία στην κατάσταση. Θα το χρειαστούμε αργότερα.

στη λειτουργία απόδοσης, αντικαταστήστε το hi με {this.state.value}

αποδίδουμε την τιμή που διέρχεται από την κατάσταση που ορίσαμε.

ας το δοκιμάσουμε λοιπόν!

στη λειτουργία απόδοσης της εφαρμογής, αντικαταστήστε την με αυτήν:

pastebin.com/aGLX4jVE

θα πρέπει να εμφανίζει μια τιμή: "δοκιμή".

ας δούμε αν μπορούμε να αποδώσουμε πολλαπλές εργασίες!

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

αλλάξτε τη λειτουργία απόδοσης σε αυτό:

pastebin.com/05nqsw71

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

Τώρα που η λίστα εργασιών μας λειτουργεί, βρίσκουμε έναν τρόπο φόρτωσης των εργασιών. Εδώ μπαίνει η πολιτεία μας.

ας προσθέσουμε έναν κατασκευαστή στο δικό μας.

pastebin.com/9jHAz2AS

Σε αυτόν τον κατασκευαστή, μετακινήσαμε το taskArray μακριά από τη λειτουργία απόδοσης στην κατάσταση. διαγράψτε το taskArray και for loop στη λειτουργία απόδοσης. αλλάξτε το taskArray στο div σε this.state.taskArray.

Μέχρι τώρα, ο κώδικας App.js θα πρέπει να μοιάζει με αυτόν:

pastebin.com/1iNtUnE6

Βήμα 3: Προσθήκη τρόπου προσθήκης και αφαίρεσης αντικειμένων

Ας προσθέσουμε έναν τρόπο προσθήκης και αφαίρεσης αντικειμένων. Ας το προγραμματίσουμε.

Τι χρειαζόμαστε?

• Ένας τρόπος για να προσθέσει αντικείμενα ο χρήστης
• Ένα μέρος για την αποθήκευση αντικειμένων
• Ένας τρόπος ανάκτησης των αντικειμένων

Τι θα χρησιμοποιήσουμε;

• Ένα στοιχείο
• Το τοπικό API αποθήκευσης w/ JSON

Ας ξεκινήσουμε με το στοιχείο εισόδου.

κάτω από {this.state.taskArray}, προσθέστε μια είσοδο και ένα κουμπί στον κωδικό σας

Προσθήκη

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

Δεν κάνει τίποτα αυτή τη στιγμή, οπότε ας προσθέσουμε 6 μεθόδους στη μέθοδο εφαρμογής μας.

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

ας προσθέσουμε αυτές τις 6 μεθόδους:

κουμπίΚλικ ()

inputTyped (evt)

generateTaskArray ()

saveTasks (εργασίες)

getTasks ()

removeTask (id)

ας προσθέσουμε επίσης αυτήν τη μεταβλητή στην κατάστασή μας:

εισαγωγή

Πρέπει επίσης να συνδέσουμε τις λειτουργίες μας σε αυτό.

pastebin.com/syx465hD

Ας αρχίσουμε να προσθέτουμε λειτουργικότητα.

προσθέστε 2 χαρακτηριστικά στα παρόμοια, έτσι:

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

προσθέστε ένα χαρακτηριστικό onClick στο Προσθήκη όπως:

Προσθήκη

όταν ο χρήστης κάνει κλικ στο κουμπί, η λειτουργία εκτελείται.

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

Έχω ήδη γράψει εκ των προτέρων τη διεπαφή localStorage API, οπότε αντικαταστήστε τις λειτουργίες saveTasks, getTasks και removeTask με αυτό:

pastebin.com/G02cMPbi

ας ξεκινήσουμε με τη συνάρτηση inputTyped.

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

ας το κάνουμε χρησιμοποιώντας τη συνάρτηση setState που παρέχεται με την αντίδραση.

this.setState ({input: evt.target.value});

με αυτόν τον τρόπο, μπορούμε να πάρουμε την τιμή της εισόδου.

μόλις ολοκληρωθεί, μπορούμε να δουλέψουμε στη λειτουργία buttonClick.

πρέπει να προσθέσουμε μια εργασία στη λίστα εργασιών. πρώτα τραβάμε τη λίστα εργασιών από το localStorage, την επεξεργαζόμαστε και στη συνέχεια την αποθηκεύουμε. Στη συνέχεια, καλούμε μια παρουσίαση του taskList για ενημέρωση.

var taskList = this.getTasks ();

taskList.tasks.push (this.state.input);

this.saveTasks (taskList);

this.generateTaskArray ();

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

τώρα, ας δουλέψουμε στη συνάρτηση generateTaskArray ().

εμείς πρέπει να:

• λάβετε εργασίες
• Δημιουργήστε μια σειρά από συστατικά της εργασίας
• περάσει τα στοιχεία της εργασίας για απόδοση

μπορούμε να πάρουμε τις εργασίες και να τις αποθηκεύσουμε σε μια μεταβλητή με το getTasks ()

εργασίες var = getTasks (). εργασίες

τότε πρέπει να δημιουργήσουμε έναν πίνακα και να τον συμπληρώσουμε.

pastebin.com/9gNXvNWe

θα πρέπει να λειτουργεί τώρα.

ΚΩΔΙΚΟΣ ΠΗΓΗΣ:

github.com/bluninja1234/todo_list_instructables

ΕΞΤΡΑ ΙΔΕΕΣ:

Λειτουργία αφαίρεσης (πολύ απλή, προσθέστε ένα κλικ και διαγράψτε χρησιμοποιώντας το removeTask από το ευρετήριο κλειδιών)

CSS (επίσης απλό, γράψτε το δικό σας ή χρησιμοποιήστε bootstrap)