|
2 | 2 |
|
3 | 3 | Αν είσαι καινούριος στο React (ή στο frontend γενικότερα) μπορεί το οικοσύστημα να σου φαινεται δύσκολο. Υπάρχουν αρκετοί λόγοι που το προκαλούν αυτό.
|
4 | 4 |
|
5 |
| -* Το React ιστορικά στοχεύει αυτόυς που το χρησιμοποίησαν εξ αρχής και ανθρώπους με μεγάλη εμπειρία |
6 |
| -* Το Facebook κάνει open-source ότι αυτό χρησιμοποιεί, οπότε δεν δίνει μεγάλη έμφαση στα εργαλεία που μπορούν να χρησιμοποιηθούν για μικρότερες από τoy Facebook εφαρμογές |
| 5 | +* Το React ιστορικά απευθύνεται αυτόυς που το χρησιμοποίησαν εξ αρχής και ανθρώπους με μεγάλη εμπειρία |
| 6 | +* Το Facebook κάνει open-source ότι χρησιμοποιεί, οπότε δεν δίνει μεγάλη έμφαση στα εργαλεία που μπορούν να χρησιμοποιηθούν για μικρότερες από του Facebook εφαρμογές |
7 | 7 | * Υπάρχουν πολλοί React οδηγοί κακής ποιότητας που λειτουργούν ως κακή διαφήμιση του React
|
8 | 8 |
|
9 | 9 | Κατά τη διάρκεια αυτού του αρχείου, θα υποθέσω πως έχετε χτίσει μια εφαρμογή χρησιμοποιώντας HTML, CSS και Javascript.
|
|
29 | 29 |
|
30 | 30 | **Δεν είναι ανάγκη να τα μάθετε όλα αυτά για να είστε έτοιμοι να φτιάξετε κάτι έτοιμο για παραγωγή με React.** Περάστε σε επόμενο βήμα μόνο αν έχετε ένα πρόβλημα που πρέπει να λύσετε.
|
31 | 31 |
|
32 |
| -Επίσης υπάρχουν κάποιοι τομείς που αναφέρονται συχνά στην React κοινότητα και είναι στην "αιμορραγία άκρη". Οι παρακάτω τομείς είναι πολύ ενδιαφέροντες αλλά είναι δυσνόητοι, λιγότερο διαδεδομένοι από τους πάνω τομείς **και δεν χρειάζονται για τις περισσότερες εφαρμογές**. |
| 32 | +Επίσης υπάρχουν κάποιοι τομείς που αναφέρονται συχνά στην React κοινότητα και είναι στην "άκρη του ξυραφιού". Οι παρακάτω τομείς είναι πολύ ενδιαφέροντες αλλά είναι δυσνόητοι, λιγότερο διαδεδομένοι από τους πάνω τομείς **και δεν χρειάζονται για τις περισσότερες εφαρμογές**. |
33 | 33 | * [Inline styles](#Μαθαίνοντας-inline-styles)
|
34 | 34 | * [Server rendering](#Μαθαίνοντας-server-rendering)
|
35 | 35 | * [Immutable.js](#Μαθαίνοντας-immutablejs)
|
|
59 | 59 |
|
60 | 60 | ## Μαθαίνοντας ES6
|
61 | 61 |
|
62 |
| -Εκτός απο το JSX (που μάθατε στο React tutorial), μπορεί να είδατε κάποιο περίεργο συντακτικό στα React παραδδείγματα. Αυτό λέγεται ES6 και είναι η τελευταία έκδοση της Javascript, οπότε μπορεί να μην το έχετε μάθει ακόμα. Αφού είναι τόσο καινούριο δεν υποστηρίζεται στα προγράμματα περιήγησης ακόμα, αλλά το bundler σας μπορεί να το μεταφράσει για σας με την κατάλληλη παραμετροποίηση. |
| 62 | +Εκτός απο το JSX (που μάθατε στο React tutorial), μπορεί να είδατε κάποιο περίεργο συντακτικό στα React παραδείγματα. Αυτό λέγεται ES6 και είναι η τελευταία έκδοση της Javascript, οπότε μπορεί να μην το έχετε μάθει ακόμα. Αφού είναι τόσο καινούριο δεν υποστηρίζεται στα προγράμματα περιήγησης ακόμα, αλλά το bundler σας μπορεί να το μεταφράσει για σας με την κατάλληλη παραμετροποίηση. |
63 | 63 |
|
64 | 64 | Αν θέλετε απλά να κάνετε πράγματα με το React **μπορείτε να προσπεράσετε την εκμάθηση του ES6**, ή να προσπαθήσετε να το μάθετε στην πορεία.
|
65 | 65 |
|
|
79 | 79 |
|
80 | 80 | Πολλοί άνθρωποι κάθονται να χτίσουν μια εφαρμογή και θέλουν να διευκρινίσουν το data model τους και νομίζουν πως πρέπει να χρησιμοποίησουν το Flux για να το κάνουν. **Αυτός έιναι ο λάθος τρόπος σκέψης για να χρησιμοποιηθεί το Flux. Το Flux πρέπει να προστεθεί μόνο όταν πολλά componnets έχουν χτιστεί.**
|
81 | 81 |
|
82 |
| -Τα React components είναι φτιαγμένα με μια ιεραρχία. Τις περισσότερες φορές το data model επίσης ακολουθεί αυτή την ιεραρχία. Σε αυτές τις περιπτώσεις το Flux δεν χρησιμεύει και πολύ. Μερικές φορές βέβαια, το data model δεν ακολουθεί την ιεραρχία αυτή. Όταν τα React components ξεκινήσουν να λαμβάνουν `props` που δεν νοιώθετε πως είναι στο σωστό μέρος, ή έχετε ε΄να μικρό αριθμό components που ξεκινάνε να γίνονται πολύπλοκα, τότε μπορεί να θελήσετε να κοιτάξετε το Flux. |
| 82 | +Τα React components είναι φτιαγμένα με μια ιεραρχία. Τις περισσότερες φορές το data model επίσης ακολουθεί αυτή την ιεραρχία. Σε αυτές τις περιπτώσεις το Flux δεν χρησιμεύει και πολύ. Μερικές φορές βέβαια, το data model δεν ακολουθεί την ιεραρχία αυτή. Όταν τα React components ξεκινήσουν να λαμβάνουν `props` που δεν νοιώθετε πως είναι στο σωστό μέρος, ή έχετε ένα μικρό αριθμό components που ξεκινάνε να γίνονται πολύπλοκα, τότε μπορεί να θελήσετε να κοιτάξετε το Flux. |
83 | 83 |
|
84 | 84 | **Θα καταλάβετε όταν θα χρειαστείτε το Flux. Αν δεν είστε σίγουροι ότι το χρειάζεστε, τότε δεν το χρειάζεστε.**
|
85 | 85 |
|
|
99 | 99 |
|
100 | 100 | Το Server rendering συχνά καλείται και "universal" ή "isomorphic" JS. Σημαίνει ότι μπορείτε να πάρετε τα React components και να τα κάνετε render ως στατικά HTML στον server. Αυτό βελτιώνει την αρχική απόδοση επειδή ο χρήστης δεν χρειάζεται να περιμένει να φορτώσει το Javascript για να δει το αρχικό UI, και το React μπορεί να ξαναχρησιμοποιήσει τα server-rendered HTML οπότε δεν είναι ανάγκη να τα δημιουργήσει στο client side.
|
101 | 101 |
|
102 |
| -Χρειάζεστε server rendering αν θεωρείτε πως η αρχικό render είναι πολύ αργό ή αν θέλετε να βελτιώσετε το search engine ranking. |
| 102 | +Χρειάζεστε server rendering αν θεωρείτε πως το αρχικό render είναι πολύ αργό ή αν θέλετε να βελτιώσετε το search engine ranking. |
103 | 103 |
|
104 |
| -Το server rendering ακόμα χρειάζεται πολλά εργαλεία για να γίνει σωστά. Αφού υποστηρίζει React components γραμμένα μην έχοντας στο μυαλό το server rendering, καλό είναι να χτίζετε την εφαρμογή σας πρώτα και μετά να ανησυχίσετε για αυτό. Δεν θα χρειαστεί να ξαναγράψετε όλα τα components για να το υποστηρίξετε. |
| 104 | +Το server rendering ακόμα χρειάζεται πολλά εργαλεία για να γίνει σωστά. Αφού υποστηρίζει React components γραμμένα, μην έχοντας στο μυαλό το server rendering, καλό είναι να χτίζετε την εφαρμογή σας πρώτα και μετά να ανησυχίσετε για αυτό. Δεν θα χρειαστεί να ξαναγράψετε όλα τα components για να το υποστηρίξετε. |
105 | 105 |
|
106 | 106 | ## Μαθαίνοντας Immutable.js
|
107 | 107 |
|
|
0 commit comments