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

Η React είναι μια από τις πιο δημοφιλείς βιβλιοθήκες JavaScript front-end. Πολλές εταιρείες χρησιμοποιούν το React για να αναπτύξουν τις διεπαφές χρήστη τους και έχει κερδίσει μεγάλη δημοτικότητα μεταξύ των προγραμματιστών.

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

Χαρακτηριστικά της εφαρμογής Counter

Σε αυτό το έργο, πρόκειται να αναπτύξετε μια εφαρμογή μετρητή με τα ακόλουθα χαρακτηριστικά:

  1. Κουμπί αύξησης μέτρησης: Αυτό θα αυξήσει την καταμέτρηση κατά ένα.
  2. Κουμπί μείωσης μέτρησης: Αυτό θα μειώσει την καταμέτρηση κατά ένα.
  3. Κουμπί επαναφοράς: Αυτό θα θέσει το πλήθος στο μηδέν.

Βασικές έννοιες του React

Πριν προχωρήσετε, πρέπει να κατανοήσετε μερικές από αυτές τις βασικές έννοιες στο React που θα χρησιμοποιήσετε σε αυτό το έργο:

instagram viewer

  1. Συστατικά: Τα στοιχεία είναι τα βασικά δομικά στοιχεία των εφαρμογών React. Περιέχουν ανεξάρτητο, επαναχρησιμοποιήσιμο κώδικα. Χρησιμοποιώντας στοιχεία, μπορείτε να χωρίσετε τη διεπαφή χρήστη σε ξεχωριστά μέρη. Στη συνέχεια, μπορείτε να επαναχρησιμοποιήσετε αυτά τα εξαρτήματα και να εργαστείτε με αυτά ανεξάρτητα.
  2. κατάσταση: Στο React μπορείτε να χρησιμοποιήσετε ένα αντικείμενο για να αποθηκεύσετε δεδομένα που αντιπροσωπεύουν την κατάσταση ενός στοιχείου. Αυτό επιτρέπει στα στοιχεία να διαχειρίζονται και να ενημερώνουν τα δικά τους δεδομένα. Η κατάσταση ενός συστατικού καθορίζει τον τρόπο απόδοσης και συμπεριφοράς.
  3. Λειτουργικά Εξαρτήματα: Το λειτουργικό στοιχείο του React είναι απλώς μια συνάρτηση JavaScript που δέχεται props ως όρισμα και επιστρέφει ένα στοιχείο React (JSX).
  4. Στηρίγματα: Μπορείτε να χρησιμοποιήσετε στηρίγματα—συντομογραφία των «ιδιοτήτων»—για να μεταβιβάσετε δεδομένα από ένα γονικό στοιχείο σε ένα θυγατρικό στοιχείο. Τα στηρίγματα είναι ένα από τα αναπόσπαστα μέρη του React και μπορείτε χρησιμοποιήστε props για να εκτελέσετε πολλές λειτουργίες στο React.
  5. Άγκιστρα: Τα React Hooks είναι ενσωματωμένες λειτουργίες που σας επιτρέπουν να διαχειρίζεστε την κατάσταση και άλλες δυνατότητες του React, όπως μεθόδους κύκλου ζωής μέσα σε λειτουργικά στοιχεία. Μπορούν επίσης να σας βοηθήσουν να γράψετε συνοπτικό και σαφή κώδικα. Σύντομα θα δείτε πώς μπορείτε να διαχειριστείτε την κατάσταση με το useState() άγκιστρο.

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

Βήμα 1: Ρύθμιση του έργου

Ανοίξτε το τερματικό σας και εκτελέστε την ακόλουθη εντολή για να ξεκινήσετε:

npx δημιουργώ-react-app react-counter-app

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

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

npm αρχή

Αυτή η εντολή θα πρέπει να ανοίξει μια νέα καρτέλα στο πρόγραμμα περιήγησής σας, με κατεύθυνση προς http://localhost: 3000. Όλες οι αλλαγές που θα κάνετε στο έργο θα ενημερωθούν αυτόματα εδώ.

Βήμα 2: Δημιουργία του σκελετού της εφαρμογής μετρητή

Ανοιξε το src/App.js αρχείο και διαγράψτε όλο τον προεπιλεγμένο κώδικα που υπάρχει εκεί. Τώρα, δημιουργήστε έναν σκελετό της εφαρμογής χρησιμοποιώντας τον ακόλουθο κώδικα:

εισαγωγή React, { useState } από"αντιδρώ";
λειτουργίαApp() {
συνθ [count, setCount] = useState(0);
αφήνω incrementCount = () => {
// Για προσθήκη αργότερα
 };
αφήνω decrementCount = () => {
// Για προσθήκη αργότερα
 };
αφήνω resetCount = () => {
// Για προσθήκη αργότερα
 }


ΕΠΙΣΤΡΟΦΗ (
<divόνομα τάξης="εφαρμογή">
<Π>Καταμέτρηση: {count}Π>
<divόνομα τάξης="κουμπιά">
div>
div>
);
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Η πρώτη δήλωση εισάγει το χρήση Κατάσταση γάντζος από το αντιδρώ μονάδα μέτρησης. Χρησιμοποιήστε το για να δημιουργήσετε το μετρώ κατάσταση και αρχικοποιήστε το σε 0. Μπορείτε να αλλάξετε την τιμή του μετρώ χρησιμοποιώντας την setCount λειτουργία.

Θα χρησιμοποιήσετε το incrementCount, μειώνεται Καταμέτρηση, και resetCount λειτουργεί αργότερα για αύξηση, μείωση και επαναφορά της τιμής του μετρητή.

Μπορεί να παρατηρήσετε ότι οι αγκύλες { } χρησιμοποιούνται γύρω από τη μεταβλητή count στη σήμανση. Αυτό ουσιαστικά επιτρέπει στον αναλυτή JSX να γνωρίζει ότι θα πρέπει να αντιμετωπίζει το περιεχόμενο μέσα σε αυτές τις αγκύλες ως JavaScript.

Βήμα 3: Προσθήκη της Λειτουργικότητας στην εφαρμογή Counter

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

<Κουμπίτίτλος={"Μείωση"} δράση={decrementCount} />
<Κουμπίτίτλος={"Αύξηση"} δράση={incrementCount} />
<Κουμπίτίτλος={"Επαναφορά"} δράση={resetCount} />

Όταν κάνετε κλικ σε αυτά τα κουμπιά, το μειώνεται Καταμέτρηση, incrementCount, και resetCount θα τρέξουν οι λειτουργίες. Σημειώστε ότι περνάτε το τίτλος και δράση στηρίγματα από τον γονέα App συστατικό για το παιδί Κουμπί συστατικό.

Ενημερώστε αυτές τις λειτουργίες στο App.js αρχείο με τον παρακάτω κώδικα:

αφήνω incrementCount = () => {
 setCount (count + 1);
};
αφήνω decrementCount = () => {
 setCount (count - 1);
};
αφήνω resetCount = () => {
 setCount (0);
}

ο setCount η λειτουργία θα ενημερώσει την κατάσταση του μετρώ.

Σημειώστε ότι δεν έχετε δημιουργήσει ακόμα το στοιχείο Button. Δημιούργησε ένα νέο συστατικά φάκελο στο src κατάλογο και, στη συνέχεια, δημιουργήστε ένα νέο αρχείο με το όνομα Κουμπί.js. Είναι καλή πρακτική να διατηρείτε όλα τα στοιχεία στον ίδιο φάκελο.

Προσθέστε τον ακόλουθο κώδικα στο components/Button.js αρχείο:

εισαγωγή Αντιδρώ από"αντιδρώ";
λειτουργίαΚουμπί(στηρίγματα) {
αφήνω { action, title } = props;
ΕΠΙΣΤΡΟΦΗ<κουμπίστο κλικ={δράση}>{τίτλος}κουμπί>;
}
εξαγωγήΠροκαθορισμένο Κουμπί;

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

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

Τέλος, εισαγάγετε το στοιχείο Button στο επάνω μέρος του App.js σελίδα χρησιμοποιώντας τον ακόλουθο κώδικα:

εισαγωγή Κουμπί από"./components/Botton";

Έτσι θα φαίνεται ο τελικός κώδικας στο App.js αρχείο:

εισαγωγή React, { useState } από"αντιδρώ";
εισαγωγή Κουμπί από"./components/Button";
λειτουργίαApp() {
συνθ [count, setCount] = useState(0);


αφήνω incrementCount = () => {
 setCount (count + 1);
 };


αφήνω decrementCount = () => {
 setCount (count - 1);
 };


αφήνω resetCount = () => {
 setCount (0);
 }


ΕΠΙΣΤΡΟΦΗ (
<divόνομα τάξης="εφαρμογή">
<Π>Καταμέτρηση: {count}Π>
<divόνομα τάξης="κουμπιά">
<Κουμπίτίτλος={"Μείωση"} δράση={decrementCount} />
<Κουμπίτίτλος={"Αύξηση"} δράση={incrementCount} />
<Κουμπίτίτλος={"Επαναφορά"} δράση={resetCount} />
div>
div>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Ακολουθήστε τις Βέλτιστες Πρακτικές React

Μπορείτε να γράψετε κώδικα React με διαφορετικούς τρόπους, αλλά είναι σημαντικό να τον δομήσετε όσο πιο καθαρά γίνεται. Αυτό θα διασφαλίσει ότι μπορείτε να το διατηρήσετε εύκολα και θα βοηθήσει στη βελτίωση της συνολικής απόδοσης της εφαρμογής σας.

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