Αν είσαι καινούριος στο React (ή στο frontend γενικότερα) μπορεί το οικοσύστημα να σου φαινεται δύσκολο. Υπάρχουν αρκετοί λόγοι που το προκαλούν αυτό.
- Το React ιστορικά απευθύνεται αυτόυς που το χρησιμοποίησαν εξ αρχής και ανθρώπους με μεγάλη εμπειρία
- Το Facebook κάνει open-source ότι χρησιμοποιεί, οπότε δεν δίνει μεγάλη έμφαση στα εργαλεία που μπορούν να χρησιμοποιηθούν για μικρότερες από του Facebook εφαρμογές
- Υπάρχουν πολλοί React οδηγοί κακής ποιότητας που λειτουργούν ως κακή διαφήμιση του React
Κατά τη διάρκεια αυτού του αρχείου, θα υποθέσω πως έχετε χτίσει μια εφαρμογή χρησιμοποιώντας HTML, CSS και Javascript.
Υπάρχουν χιλιάδες συμβουλές εκεί εξώ, γιατί να ακούσετε εμένα;
Ήμουν ένα από τα αρχικά μέλη της ομάδας του Facebook που έχτισαν και έκαναν open-source το React. Δεν δουλέυω πια στο Facebook και είμαι πλέον σε μια μικρή startup, οπότε έχω και τη μη-Facebook οπτική.
Όλο το software είναι χτισμένο βασισμένο σε ένα σύνολο τεχνολογιών και πρέπει να καταλάβετε πως λειτουργούν αυτές για να μπορέσετε να χτίσετε τη δική σας εφαρμογή. Ο λόγος για τον οποίο το οικοσύστημα του React είναι τόσο πολύπλοκο είναι επειδή πάντα διδάσκεται με λάθος σειρά.
Θα πρέπει να τα μάθετε με αυτή τη σειρά χωρίς να περάσετε κάποιο ή να μαθαίνετε πολλά ταυτόχρονα:
Δεν είναι ανάγκη να τα μάθετε όλα αυτά για να είστε έτοιμοι να φτιάξετε κάτι έτοιμο για παραγωγή με React. Περάστε σε επόμενο βήμα μόνο αν έχετε ένα πρόβλημα που πρέπει να λύσετε.
Επίσης υπάρχουν κάποιοι τομείς που αναφέρονται συχνά στην React κοινότητα και είναι στην "άκρη του ξυραφιού". Οι παρακάτω τομείς είναι πολύ ενδιαφέροντες αλλά είναι δυσνόητοι, λιγότερο διαδεδομένοι από τους πάνω τομείς και δεν χρειάζονται για τις περισσότερες εφαρμογές.
Είναι μια γνωστή παρανόηση πως πρέπει να ξοδέψετε πολύ χρόνο για να στήσετε τα εργαλεία για να ξεκινήσετε να μαθαίνετε React. Στα επίσημα έγγραφα θα βρείτε ένα copy-paste HTML template που μπορείτε να σώσετε σε ένα .html αρχείο και να ξεκινήσετε κατ' ευθείαν. Δεν χρειάζονται εργαλεία για αυτό το βήμα, και δεν θα χρειαστεί να μάθετε επιπλέον εργαλεία μέχρι να αισθάνεστε άνετα με τις βασικές ιδέες του React
Ακόμα πιστεύω πως ο ευκολότερος τρόπος να μάθετε React είναι ο επίσημος οδηγός.
npm είναι ο διαχειριστής πακέτων του Node.js και είναι ο πιο διαδεδομένος τρόπος οι frontend προγραμματιστές και οι σχεδιαστές μοιράζονται Javascript κώδικα. Περιλαμβάνει ένα σύστημα μονάδας που λέγεται CommonJS και σε αφήνει να εγκαταστήσεις εργαλεία γραμμής εντολών που είναι γραμμένα σε Javascript. Διαβάστε αυτό το άρθρο για να δείτε γιατί το CommonJS είναι απαραίτητο για τα προγράμματα περιήγησης, ή το CommonJS Spec Wiki για περισσότερες πληροφορίες για το CommonJS API.
Τα περισσότερα επαναχρησιμοποιήμενα μέρη, βιβλιοθήκες και εργαλεία στο React οικοσύστημα μπορούν να βρεθούν ως CommonJS μέρη και εγκαταστώνται μέσω του npm.
Για ένα σύνολο καλών τεχνικών λόγων τα CommonJS μέρη (π.χ. τα πάντα μέσα στο npm) δεν μπορούν να χρησιμοποιηθούν άμεσα στην ιστοσελίδα σας. Χρειάζεστε ένα JavaScript “bundler” για να κάνετε “bundle” αυτά τα μέρη σε .js αρχεία που μπορείτε να εισάγετε στην ιστοσελίδα σας με ενα <script> tag.
Παραδείγματα JavaScript bundlers περιλαμβάνουν το webpack και το browserify. Και τα δυο είναι καλές επιλογές, αλλά προτιμώ το webpack διότι παρέχει πολλές επιλογές που κάνουν τον προγραμματισμό για μεγάλες εφαρμογές πιο εύκολο. Αφού τα έγγραφά τους είναι λίγο δυσνόητα έχω ένα plug-and-play template για να ξεκινήσετε και έχω γράψει ένα how-to οδηγό για το webpack για πιο δύσκολες περιπτώσεις.
Το React επίσης προσφέρει πλέον ένα επίσημο CLI εργαλείο που λέγεται Create React App. Σε αφήνει να δημιουργείς React εφαρμογές χρησιμοποιώντας το webpack χωρίς καμία παραμετροποιήση. Έχει τους περιορισμούς του, αλλά μπορεί να χρησιμοποιηθεί σαν πολύ καλή αρχή και οι αναβαθμίσεις του θα προσθέσουν περισσότερες επιλογές με τον καιρό. Προσφέρει επίσης μια "ejection" επιλογή που αντιγράφει όλες τις παραμετροποιήσεις στην εφαρμογή οπότε έχετε απόλυτο έλεγχο πάνω τους.
Ένα πράγμα που πρέπει να κρατάτε στο μυαλό σας είναι: CommonJS χρησιμοποιεί την require() λειτουργία για να εισάγει νέα μέρη, οπότε πολλοί νομίζουν πως έχει να κάνει με ένα project που λέγεται require.js. Για ένα σύνολο λόγων, θα πρότεινα να αποφεύγετε το require.js. Επίσης δεν είναι πολύ διαδεδομένο στο React οικοσύστημα.
Εκτός απο το JSX (που μάθατε στο React tutorial), μπορεί να είδατε κάποιο περίεργο συντακτικό στα React παραδείγματα. Αυτό λέγεται ES6 και είναι η τελευταία έκδοση της Javascript, οπότε μπορεί να μην το έχετε μάθει ακόμα. Αφού είναι τόσο καινούριο δεν υποστηρίζεται στα προγράμματα περιήγησης ακόμα, αλλά το bundler σας μπορεί να το μεταφράσει για σας με την κατάλληλη παραμετροποίηση.
Αν θέλετε απλά να κάνετε πράγματα με το React μπορείτε να προσπεράσετε την εκμάθηση του ES6, ή να προσπαθήσετε να το μάθετε στην πορεία.
Μπορεί να δείτε κάποιες συζητήσεις για ES6 κλάσεις να είναι ο αγαπημένος τρόπος για να δημιουργείτε τα React components. Αυτό δεν είναι αλήθεια. Οι περισσότεροι άνθρωποι (συμπεριλαμβάνοντας το Facebook) χρησιμοποιούν το React.createClass().
Τα “single-page applications” είναι πολυσυζητημένα αυτές τις μέρες. Αυτά είναι σελίδες που φορτώνουν μια φορά και όταν ο χρήστης πατάει σε ένα link ή ένα κουμπί, το Javascript που τρέχει στη σελίδα ανανεώνει το address bar, αλλά η σελίδα δεν ξαναφορτώνει. Η διαχείριση του address bar γίνεται με κάτι που λέγεται router.
Το πιο διαδεδομένο router στο React οικοσύστημα είναι το react-router. Αν χτίζετε ένα single-page application, χρησιμοποιήστε το εκτός αν έχετε κάποιο καλό λόγο να μην το κάνετε.
Μην χρησιμοποιείτε router αν δεν χτίζετε ένα single-page application. Τα περισσότερα projects ξεκινάνε ως μικρότερα μέρη μέσα σε μια μεγαλύτερη εφαρμογή έτσι κι αλλιώς.
Λογικά έχετε ακούσει το Flux. Υπάρχουν άπειρη παραπληροφόρηση για το Flux εκεί έξω.
Πολλοί άνθρωποι κάθονται να χτίσουν μια εφαρμογή και θέλουν να διευκρινίσουν το data model τους και νομίζουν πως πρέπει να χρησιμοποίησουν το Flux για να το κάνουν. Αυτός έιναι ο λάθος τρόπος σκέψης για να χρησιμοποιηθεί το Flux. Το Flux πρέπει να προστεθεί μόνο όταν πολλά componnets έχουν χτιστεί.
Τα React components είναι φτιαγμένα με μια ιεραρχία. Τις περισσότερες φορές το data model επίσης ακολουθεί αυτή την ιεραρχία. Σε αυτές τις περιπτώσεις το Flux δεν χρησιμεύει και πολύ. Μερικές φορές βέβαια, το data model δεν ακολουθεί την ιεραρχία αυτή. Όταν τα React components ξεκινήσουν να λαμβάνουν props που δεν νοιώθετε πως είναι στο σωστό μέρος, ή έχετε ένα μικρό αριθμό components που ξεκινάνε να γίνονται πολύπλοκα, τότε μπορεί να θελήσετε να κοιτάξετε το Flux.
Θα καταλάβετε όταν θα χρειαστείτε το Flux. Αν δεν είστε σίγουροι ότι το χρειάζεστε, τότε δεν το χρειάζεστε.
Αν αποφασίσατε πως θα το χρησιμοποιήσετε η πιο γνωστή και καλογραμμένη βιβλιοθήκη είναι το Redux. Υπάρχουν άπειρες εναλλακτικές εκεί έξω και θα θελήσετε να δοκιμάσετε πολλές από αυτές, αλλά η συμβουλή μου είναι να μείνετε με την πιο διαδεδομένη.
Πριν απο το React, πολλοί ξαναχρησιμοποιούσαν τα CSS styles με πολύπλοκα style sheets χτισμένομε preprocessors όπως το SASS. Από τη στιγμή που το React κάνει το επαναχρησιμοποιούμενα components εύκολα, τα stylesheets μπορούν να είναι λιγότερο πολύπλοκα. Πολλοί στην κοινότητα (συμπεριλαμβάνοντας εμένα) πειραματίζονται με το να βγάλουν τα stylesheets γενικά.
Αυτή είναι μια τρελή ιδέα για πολλούς λόγους. Κάνει τα media queries πιο δύσκολα και είναι πιθανό να υπάρχουν περιορισμοί απόδοσης ακολουθώντας αυτήν την τεχνική. Όταν ξεκινάτε με το React να κάνετε το styling με τον τρόπο που θα το κάνατε κανονικά.
Όταν αποκτήσετε μια καλύτερη ιδέα για το πως λειτουργεί το React, μπορείτε να κοιτάξετε εναλλακτικές τεχνικές. Μια διάσημη είναι η BEM. Προτείνω να καταργείτε σταδιακά τα CSS preprocessors, αφού το React σας δίνει ένα πιο δυνατό τρόπο να ξαναχρησιμοποιείτε τα styles (ξαναχρησιμοποιώντας τα components) και το Javascript bundler μπορεί να δημιουργεί πιο αποτελεσματικά stylesheets για σας (έδωσα μια ομιλία σχετικά με αυτό στο OSCON). Έχοντας πει αυτό, το React, όπως πολλές ακόμα Javascript βιβλιοθήκες, θα δουλέψουν μια χαρά με ένα CSS preprocessor.
Διαφορετικά, μπορείτε επίσης να χρησιμοποιήσετε CSS Modules, πιο συγκεκριμένα react-css-modules. Με τα CSS Modules θα γράφετε ακόμα CSS (ή SASS/LESS/Stylus), αλλά θα μπορείτε να διαχειρίζεστε τα CSS αρχεία σας όπως θα κάνατε με τα inline styles στο React. Επίσης δεν θα χρειάζεται να ανησυχείτε για το πως να ονομάζετε τις κλάσεις σας χρησιμοποιώντας μεθοδολογίες σαν το BEM, αφού αυτό θα έχει διαχειριστεί για σας απο το module system.
Το Server rendering συχνά καλείται και "universal" ή "isomorphic" JS. Σημαίνει ότι μπορείτε να πάρετε τα React components και να τα κάνετε render ως στατικά HTML στον server. Αυτό βελτιώνει την αρχική απόδοση επειδή ο χρήστης δεν χρειάζεται να περιμένει να φορτώσει το Javascript για να δει το αρχικό UI, και το React μπορεί να ξαναχρησιμοποιήσει τα server-rendered HTML οπότε δεν είναι ανάγκη να τα δημιουργήσει στο client side.
Χρειάζεστε server rendering αν θεωρείτε πως το αρχικό render είναι πολύ αργό ή αν θέλετε να βελτιώσετε το search engine ranking.
Το server rendering ακόμα χρειάζεται πολλά εργαλεία για να γίνει σωστά. Αφού υποστηρίζει React components γραμμένα, μην έχοντας στο μυαλό το server rendering, καλό είναι να χτίζετε την εφαρμογή σας πρώτα και μετά να ανησυχίσετε για αυτό. Δεν θα χρειαστεί να ξαναγράψετε όλα τα components για να το υποστηρίξετε.
Το Immutable.js παρέχει ένα set από data structures που μπορούν να βοηθήσουν να λύσετε κάποια θέματα απόδοσης χτίζοντας React εφαρμογές. Είναι μια πολύ καλή βιβλιοθήκη και λογικά θα την χρησιμοποιήσετε πολύ καθώς θα προχωράτε, αλλά είναι εντελώς περιττή μέχρι να έχετε αυτά τα θέματα απόδοσης.
Αυτές είναι τεχνολογίες που θα σας βοηθήσουν να μειώσετε τον αριθμό των AJAX requests. Είναι ακόμα στην αιχμή, οπότε αν δεν έχετ πρόβλημα με πολλά AJAX requests, δεν χρειάζεστε Relay ή Falcor.