|
3 | 3 | Αν είσαι καινούριος στο React (ή στο frontend γενικότερα) μπορεί το οικοσύστημα να σου φαινεται δύσκολο. Υπάρχουν αρκετοί λόγοι που το προκαλούν αυτό.
|
4 | 4 |
|
5 | 5 | * Το React ιστορικά στοχεύει αυτόυς που το χρησιμοποίησαν εξ αρχής και ανθρώπους με μεγάλη εμπειρία
|
6 |
| -* Το Facebook κάνει open-source ότι αυτό χρησιμοποιεί, οπότε δεν δίνει μεγάλη έμφαση στα εργαλεία που μπορούν να χρησιμοποιηθούν για μικρότερες από της Facebook εφαρμογές |
| 6 | +* Το Facebook κάνει open-source ότι αυτό χρησιμοποιεί, οπότε δεν δίνει μεγάλη έμφαση στα εργαλεία που μπορούν να χρησιμοποιηθούν για μικρότερες από τoy Facebook εφαρμογές |
7 | 7 | * Υπάρχουν πολλοί React οδηγοί κακής ποιότητας που λειτουργούν ως κακή διαφήμιση του React
|
8 | 8 |
|
9 | 9 | Κατά τη διάρκεια αυτού του αρχείου, θα υποθέσω πως έχετε χτίσει μια εφαρμογή χρησιμοποιώντας HTML, CSS και Javascript.
|
|
91 | 91 |
|
92 | 92 | Αυτή είναι μια τρελή ιδέα για πολλούς λόγους. Κάνει τα media queries πιο δύσκολα και είναι πιθανό να υπάρχουν περιορισμοί απόδοσης ακολουθώντας αυτήν την τεχνική. **Όταν ξεκινάτε με το React να κάνετε το styling με τον τρόπο που θα το κάνατε κανονικά.**
|
93 | 93 |
|
94 |
| -Όταν αποκτήσετε μια καλύτερη ιδέα για το πως λειτουργεί το React, μπορείτε να κοιτάξετε εναλλακτικές τεχνικές. Μια διάσημη είναι η [BEM](https://en.bem.info/). Προτείνω να καταργείτε σταδιακά τα CSS preprocessors, αφού ή React σας δίνει ένα πιο δυνατό τρόπο να ξαναχρησιμοποιείτε τα styles (ξαναχρησιμοποιώντας τα components) και το Javascript bundler μπορεί να δημιουργεί πιο αποτελεσματικά stylesheets για σας (έδωσα [μια ομιλία σχετικά με αυτό στο OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). Έχοντας πει αυτό, η React, όπως πολλές ακόμα Javascript βιβλιοθήκες, θα δουλέψουν μια χαρά με ένα CSS preprocessor. |
| 94 | +Όταν αποκτήσετε μια καλύτερη ιδέα για το πως λειτουργεί το React, μπορείτε να κοιτάξετε εναλλακτικές τεχνικές. Μια διάσημη είναι η [BEM](https://en.bem.info/). Προτείνω να καταργείτε σταδιακά τα CSS preprocessors, αφού το React σας δίνει ένα πιο δυνατό τρόπο να ξαναχρησιμοποιείτε τα styles (ξαναχρησιμοποιώντας τα components) και το Javascript bundler μπορεί να δημιουργεί πιο αποτελεσματικά stylesheets για σας (έδωσα [μια ομιλία σχετικά με αυτό στο OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). Έχοντας πει αυτό, το React, όπως πολλές ακόμα Javascript βιβλιοθήκες, θα δουλέψουν μια χαρά με ένα CSS preprocessor. |
95 | 95 |
|
96 |
| -Διαφορετικά, μπορείτε επίσης να χρησιμοποιήσετε [CSS Modules](http://glenmaddern.com/articles/css-modules), πιο συγκεκριμένα [react-css-modules](https://github.com/gajus/react-css-modules). Με τα CSS Modules θα γράφετε ακόμα CSS (ή SASS/LESS/Stylus), αλλά θα μπορείτε να διαχειρίζεστε τα CSS αρχεία σας όπως θα κάνατε με τα inline styles στη React. Επίσης δεν θα χρειάζεται να ανησυχείτε για το πως να ονομάζετε τις κλάσεις σας χρησιμοποιώντας μεθοδολογίες σαν το BEM, αφού αυτό θα έχει διαχειριστεί για σας απο το module system. |
| 96 | +Διαφορετικά, μπορείτε επίσης να χρησιμοποιήσετε [CSS Modules](http://glenmaddern.com/articles/css-modules), πιο συγκεκριμένα [react-css-modules](https://github.com/gajus/react-css-modules). Με τα CSS Modules θα γράφετε ακόμα CSS (ή SASS/LESS/Stylus), αλλά θα μπορείτε να διαχειρίζεστε τα CSS αρχεία σας όπως θα κάνατε με τα inline styles στο React. Επίσης δεν θα χρειάζεται να ανησυχείτε για το πως να ονομάζετε τις κλάσεις σας χρησιμοποιώντας μεθοδολογίες σαν το BEM, αφού αυτό θα έχει διαχειριστεί για σας απο το module system. |
97 | 97 |
|
98 | 98 | ## Μαθαίνοντας server rendering
|
99 | 99 |
|
100 |
| -Το Server rendering συχνά καλείται και "universal" ή "isomorphic" JS. Σημαίνει ότι μπορείτε να πάρετε να React components και να τα κάνετε render ως στατικά HTML στον server. Αυτό βελτιώνει την αρχική απόδοση επειδή ο χρήστης δεν χρειάζεται να περιμένει να φορτώσει το Javascript για να δει το αρχικό UI, και το React μπορεί να ξαναχρησιμοποιήσει τα server-rendered HTML οπότε δεν είναι ανάγκη να τα δημιουργήσει στο client side. |
| 100 | +Το Server rendering συχνά καλείται και "universal" ή "isomorphic" JS. Σημαίνει ότι μπορείτε να πάρετε τα React components και να τα κάνετε render ως στατικά HTML στον server. Αυτό βελτιώνει την αρχική απόδοση επειδή ο χρήστης δεν χρειάζεται να περιμένει να φορτώσει το Javascript για να δει το αρχικό UI, και το React μπορεί να ξαναχρησιμοποιήσει τα server-rendered HTML οπότε δεν είναι ανάγκη να τα δημιουργήσει στο client side. |
101 | 101 |
|
102 | 102 | Χρειάζεστε server rendering αν θεωρείτε πως η αρχικό render είναι πολύ αργό ή αν θέλετε να βελτιώσετε το search engine ranking.
|
103 | 103 |
|
|
0 commit comments