Διαδικτυακό μάθημα React. Ανάπτυξη σύνθετων εφαρμογών πελατών - δωρεάν μάθημα από την HTML Academy, εκπαίδευση 9 εβδομάδων, Ημερομηνία 15 Οκτωβρίου 2023.

Ενότητα 1 Εισαγωγή στο TypeScript
Ας εξετάσουμε το σχέδιο εργασίας στο μάθημα. Ας μάθουμε τι είναι το TypeScript και ποια προβλήματα επιλύει. Ας εξοικειωθούμε με το σύστημα τύπων και ας καταλάβουμε πώς συμβαίνει η διαδικασία πληκτρολόγησης. Ας μάθουμε πώς να διαμορφώνουμε τον μεταγλωττιστή και να δούμε τις βασικές ρυθμίσεις. Στη συνέχεια, ας προχωρήσουμε στην εξάσκηση και στην κατανόηση των χαρακτηριστικών της γραφής πληκτρολογημένου κώδικα: πλειάδες, διεπαφές, γενικά κ.λπ.

Οργανωτικά θέματα.

Ανασκόπηση έργων.
Σχέδιο εργασίας στο μάθημα.

Εισαγωγή στο TypeScript.

Τι είναι το TypeScript και ποια προβλήματα επιλύει;
Σύστημα τύπου.
Πώς ο κώδικας TypeScript μετατρέπεται σε JavaScript.
Υποδομή: ρυθμίσεις μεταγλωττιστή.
Σχολιασμοί και αυτόματη εξαγωγή συμπερασμάτων τύπων.

Εξασκηθείτε χρησιμοποιώντας το TypeScript.

Δακτυλογράφηση αντικειμένων, πινάκων, συναρτήσεων.
Γενόσημα.
Πλειάδες.
Διεπαφές, ψευδώνυμα τύπου.

Ενότητα 2 Αντιδράστε
Εισαγωγή στη βιβλιοθήκη React. Ας μάθουμε ποια προβλήματα επιλύει και πώς μπορεί να απλοποιήσει την ανάπτυξη του front-end. Ας προετοιμάσουμε τη βάση του έργου χρησιμοποιώντας το εργαλείο Create React App (CRA). Ας μάθουμε πώς να χρησιμοποιούμε πρότυπα για CRA. Στη συνέχεια θα εξοικειωθούμε με τα κύρια χαρακτηριστικά της βιβλιοθήκης React (JSX, components, μεταφορά δεδομένων μεταξύ στοιχείων).

Αντιδρώ.

Τι είναι το React.
Πώς λειτουργεί το React;
Ποια προβλήματα επιλύει αποτελεσματικά;
Εικονικό DOM.

Υποδομή.

Δημιουργήστε την εφαρμογή React.
TypeScript.

JSX

Σε τι διαφέρει από την HTML;
Βασικές μέθοδοι εργασίας.

Συστατική προσέγγιση.

Αντιδρούν συστατικά.
Στηρίγματα. Διαβίβαση δεδομένων μέσω ιδιοτήτων.
Σύνθεση.

Απόδοση εξαρτημάτων.

Λίστες απόδοσης.
Απόδοση υπό όρους.

Ενότητα 3 Δρομολόγηση (React Router)
Ας μάθουμε πώς οργανώνεται η δρομολόγηση στο SPA. Ας προσθέσουμε το React Router στο έργο και ας δούμε τις δυνατότητες του πακέτου: διαδρομές, ανακατευθύνσεις, ιδιωτικές διαδρομές κ.λπ.

Δρομολόγηση σε SPA.
History API.
Στοιχεία διαδρομής, σύνδεσης, ανακατεύθυνσης.
Διαχείριση διαδρομής.

Ενότητα 4 Αντιδράστε συστατικά. Άγκιστρα
Ας επεκτείνουμε τις γνώσεις μας για το React και τα συστατικά. Ας μάθουμε πώς να διαχειριζόμαστε την κατάσταση, να χρησιμοποιούμε συμβάντα και μεθόδους κύκλου ζωής εξαρτημάτων. Ας εξοικειωθούμε με τα React Hooks και ας μάθουμε πώς να αντικαταστήσουμε τα στοιχεία κλάσης με αυτά. Ας μάθουμε πώς να δουλεύουμε με φόρμες.

Κατάσταση.
Μονοκατευθυντική ροή δεδομένων.
Λειτουργικά στοιχεία, στοιχεία κλάσης, PureComponent.
Εισαγωγή στα React Hooks.

Μέθοδοι κύκλου ζωής.

Αντιδρούν και σχηματίζονται.

Ενότητα 5 Αντίδραση και Μοτίβα
Ας δούμε το ερώτημα τι είναι η αρχιτεκτονική λογισμικού και πώς να το σχεδιάσουμε. Ας γνωριστούμε και ας μάθουμε να εφαρμόζουμε μοτίβα σχεδίασης στην πράξη.

Σχέδιο.

Ποια είναι η διαφορά μεταξύ ενός καλού προγράμματος και ενός κακού;
Γιατί να σχεδιάσετε λογισμικό. Σχεδιαστικοί στόχοι.
Αρχιτεκτονική λογισμικού.
Εργαλεία σχεδίασης.

Σχεδιαστικά πρότυπα.

Ποια προβλήματα λύνουν τα μοτίβα;
Από τι αποτελείται το μοτίβο;
Τύποι μοτίβων σχεδίασης.

Μοτίβα στο React.

Ανιθαγενή εξαρτήματα.
Στοιχεία διακομιστή μεσολάβησης.
Εξαρτήματα ανώτερης τάξης.
Render Props.
Προμηθευτής.
React Άγκιστρα και μοτίβα.

Ενότητα 6 Κρατική Διαχείριση. Redux
Ας εξοικειωθούμε με την αρχιτεκτονική Flux: Actions, Dispatchers, Views και Stores. Συνδεόμαστε στο έργο Redux και ενημερώνουμε τη βάση κώδικα.

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

Redux.

Middlewares.

Επέκταση της λειτουργικότητας Redux.

Ενότητα 7 Ασύγχρονη στο Redux
Ας μάθουμε πώς να εφαρμόσουμε ασύγχρονο κώδικα στη σύγχρονη λειτουργία του Redux χρησιμοποιώντας το Middleware. Ας μάθουμε πώς να αλληλεπιδράσουμε με τον διακομιστή χρησιμοποιώντας το πακέτο Axios. Ας εξοικειωθούμε με τους αναχαιτιστές.

Redux-thunk.

Αξιος.

Ενότητα 8 Βελτιστοποίηση απόδοσης
Ας συζητήσουμε την απόδοση των εφαρμογών React: ποιες δυνατότητες υπάρχουν, τι πρέπει να προσέξεις κατά τον σχεδιασμό εξαρτημάτων αρχικά. Στη συνέχεια, θα ρίξουμε μια ματιά στο Redux Toolkit και θα μάθουμε πώς να το χρησιμοποιείτε για να απαλλαγείτε από τον κώδικα του boilerplate όταν εργάζεστε με το Redux.

Δημιουργία προφίλ στοιχείων.
Διαχείριση ενημέρωσης στοιχείων.
Απομνημόνευση.
Redux Toolkit.

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

Αστείο.
React Testing Library.

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

Δεύτερη εβδομάδα άμυνας
Η πρώτη αξιολόγηση του έργου από τον αναθεωρητή μέντορα σύμφωνα με κριτήρια ποιότητας.

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

Ενότητα 10 Τελικό
Ας συνοψίσουμε το μάθημα και ας προσδιορίσουμε τον περαιτέρω φορέα μελέτης του React και του οικοσυστήματος του. Στη συνέχεια, θα συζητήσουμε τις νέες δυνατότητες του React που αναμένονται σε μελλοντικές εκδόσεις.

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