Μάθετε και κατανοήστε το React - Οδηγός πρακτικής άσκησης

Εδώ παρουσιάζονται τα θέματα που θα εξεταστούν στη συνέχεια και γίνεται αναφορά στην κίνητρα πίσω από αυτό το μάθημα.

Υπάρχουν πλέον αμέτρητα πλαίσια χρήστη (UI-Frameworks) για τη γλώσσα προγραμματισμού JavaScript - γιατί λοιπόν πρέπει να είναι ακριβώς το React; Εκτός από την αμφιλεγόμενη δημοφιλία αυτής της βιβλιοθήκης, υπάρχουν και μερικοί βαθύτεροι λόγοι που μιλούν υπέρ του React.

Σε αυτό το μάθημα θα ρυθμίσουμε το περιβάλλον ανάπτυξης και θα δημιουργήσουμε γρήγορα την πρώτη μας εφαρμογή React με την εντολή npm create vite.

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

Μια μικρή ανανέωση στο θέμα var εναντίον let/const.

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

Οι λειτουργίες είναι ουσιώδεις στο JS και έχουν δηλωθεί και οριστεί μέχρι στιγμής μόνο μέσω της λέξης-κλειδιού function. Το ES6 εισάγει έναν κομψό και σύντομο τρόπο γραφής που κάνει τον κώδικα πιο ευανάγνωστο και παρέχει μια λύση για ένα προσκαλεστικό πρόβλημα με το this.

Στο NodeJs, από την αρχή χρησιμοποιούνταν ήδη modules, αλλά στην αρχή βασίστηκε αποκλειστικά στο CommonJs-Moduleformat με το require. Από το ES6 υπάρχει μια κανονική ορισμός μοντούλ και έτσι τα νέα Keywords import/export. Αυτή τη στιγμή αυτή η μορφή υποστηρίζεται από σχεδόν όλες τις (νέες) βιβλιοθήκες JS και το NodeJs μπορεί να χειριστεί τις πιο πρόσφατες εκδόσεις.

Με το JSX περιγράφετε το UI ενός στοιχείου και ενσωματώνετε JS εκφράσεις μέσα σε αυτό. Το αρχείο έργου για το βίντεο περιέχει τον έτοιμο κώδικα για αυτή την ενότητα του οδηγού.

Τα δικά σας στοιχεία React μπορούν να γραφτούν πολύ εύκολα χρησιμοποιώντας συναρτήσεις που επιστρέφουν JSX.

Αυτό το μάθημα εξηγεί πώς μπορούν να ενσωματωθούν δεδομένα και εκφράσεις JavaScript στο JSX.

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

Τα Props χρησιμοποιούνται για τη μεταφορά δεδομένων στα παιδικά συστατικά. Εδώ εξηγείται πώς συμβαίνει ακριβώς αυτό και πρέπει να ληφθεί υπόψη.

Όταν οι Props αλλάζουν δυναμικά, η αντίστοιχη συνάρτηση Render του στοιχείου καλείται ξανά.

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

Τα to-dos πρέπει κάποτε να ολοκληρωθούν. Εδώ συζητάμε πώς λειτουργεί αυτό στον κώδικα.

Το στυλ μιας διεπαφής χρήστη είναι αναμφισβήτητα σημαντικό. Γι' αυτό εξηγώ εδώ πώς μπορείτε να το κάνετε με τη βιβλιοθήκη Emotion και πώς μπορείτε να χρησιμοποιήσετε την ιδιότητα className. Επιπλέον, αναφέρομαι επίσης στο χαρακτηριστικό style-, με το οποίο μπορείτε να στολίσετε κάθε στοιχείο ξεχωριστά με λεπτομερή τρόπο.

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

Φυσικά πρέπει να είναι δυνατός και ο διαγραφή των «To-dos». Εδώ εξηγείται πώς λειτουργεί αυτό μέσω του φιλτραρίσματος του πίνακα.

Μέχρι τώρα συστατικά τα τοποθετούσαμε πάντα μέσα σε DIVs. Ωστόσο, μπορεί κανείς να το αποφύγει σε ορισμένες περιπτώσεις.

Τώρα γίνεται ενδιαφέρον: Τα to-dos μπορούν να αποθηκευτούν μόνιμα αρκετά εύκολα στη μνήμη του προγράμματος περιήγησης και φυσικά να φορτωθούν ξανά, ώστε να "επιβιώσουν" την επαναφόρτωση της σελίδας.

Με τη χρήση της useEffect μπορούν να ενσωματωθούν παρενέργειες. Η τοποθέτηση μιας συστατικής μπορεί επίσης να χειριστείται με αυτή τη λειτουργία.

Σύντομη περίληψη για την εφαρμογή μας για το καθήκον και τις τελευταίες βελτιώσεις.

Η εφαρμογή αναπαραγωγής βίντεο δημιουργείται με το create vite και εξηγείται πώς πρέπει να είναι δομημένη η εφαρμογή. Το αρχείο έργου που συνοδεύει το βίντεο περιέχει τον τελικό κώδικα για τον αναπαραγωγέα βίντεο.

Με το γνώρισμα ref μπορούμε να αναφερόμαστε σε στοιχεία DOM και να αποκτάμε πρόσβαση σε αυτά με το useRef. Εδώ το κάνουμε με το στοιχείο Video.

Δημιουργούμε τον πραγματικό βίντεο player, που έχει ήδη κουμπιά για Αναπαραγωγή, Παύση και Διακοπή.

Δεδομένου ότι ποτέ δεν χρειάζεται να έχουμε ταυτόχρονα το Play και το Pause, συνδυάζουμε αυτά τα δύο σε ένα κουμπί.

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

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

Το άλμα σε μια οποιαδήποτε θέση στο βίντεο (Seek) μπορεί να γίνει πολύ εύκολα με την ορισμό της ιδιότητας currentTime.

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

Η λίστα αναπαραγωγής υλοποιείται μέσω ενός λίστας που μπορεί να υλοποιηθεί με το στοιχείο HTML select.

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

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

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

Για τους ανυπόμονους: Κουμπιά για το επόμενο και προηγούμενο βίντεο.

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

Τώρα θα αποθηκεύσουμε και θα φορτώσουμε την λίστα αναπαραγωγής μας. Αυτό συμβαίνει ανάλογα με την εφαρμογή To-do στην τοπική αποθήκευση του προγράμματος περιήγησης.

Τα βίντεο που χρησιμοποιούνται ως παράδειγμα στην εφαρμογή Αναπαραγωγής Βίντεο μπορείτε να τα παρακολουθήσετε εδώ στην πρωτότυπη μορφή τους (με άδεια CC-Αναφορά, δείτε τις αντίστοιχες ιστοσελίδες):

Elephants dream: https://orange.blender.org/
Big Buck Bunny: https://peach.blender.org/
Sintel: https://durian.blender.org/

Στο παράδειγμα του useJsonFetch-Hooks εξηγείται πώς μπορούμε να γράψουμε τις δικές μας συναρτήσεις Hook.

Η αλλαγή κατάστασης με τον setter του useState μπορεί να είναι πολύπλοκη. Με το useImmer όμως δεν υπάρχει πρόβλημα πια.

Το UI χτίζεται ταχύτερα και ανταποκρίνεται ταχύτερα στην είσοδο του χρήστη όταν δεν συμβαίνουν περιττές κλήσεις των συναρτήσεων απεικόνισης. Με τη χρήση του memo, μπορεί να αποτραπεί η απεικόνιση συστατικών όταν δεν αλλάζουν τα Props τους.

Με το useCallback μπορείτε να αποτρέψετε την ανεπιθύμητη αναστροφή των υπο-συστατικών, όταν χρησιμοποιούνται Callback-Props.

Οι περίπλοκοι υπολογισμοί εντός των συναρτήσεων απεικόνισης πρέπει να εκτελούνται μόνο όταν είναι απαραίτητο. Με το useMemo μπορούμε να κρατάμε τα αποτελέσματα αυτών των υπολογισμών, λαμβάνοντας υπόψη τις εξαρτήσεις τους.

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