6 Πλαίσια UI βασισμένα στο Best ReactJS

Δημοσιεύθηκε αρχικά στο Blog ZeoLearn

Αντιδράστε (ReactJS) μια βιβλιοθήκη που δεν χρειάζεται σήμερα εισαγωγή για όσους εργάζονται στο μπροστινό χώρο ανάπτυξης. Ωστόσο, περισσότερες λεπτομέρειες σχετικά με την αντίδραση js μπορούν να βρεθούν εδώ. Σε αυτό το άρθρο, θα διερευνήσουμε τα κορυφαία πλαίσια UI για εφαρμογές Reactjs. Αυτές οι βιβλιοθήκες συστατικών στοιχείων Reactive UI έχουν εφαρμόσει τις αντίστοιχες πρακτικές πλαισίου CSS ως στοιχεία αντίδρασης που είναι έτοιμα να χρησιμοποιήσουν, γεγονός που καθιστά την ανάπτυξή σας πιο εύκολη και παραγωγική.

Ας αρχίσουμε…

1. Υλικό υλικού

Το MaterialUI είναι ένα σύνολο στοιχείων React που εφαρμόζουν τις κατευθυντήριες γραμμές σχεδίασης υλικών της Google. Όταν πρόκειται για προκαθορισμένα στοιχεία, ειδικά UI, ένα σημαντικό πράγμα που πρέπει να βρούμε είναι πόσα widgets UI είναι διαθέσιμα και αν αυτά μπορούν να προσαρμοστούν με διαμορφώσεις. Το υλικό UI έχει όλα τα συστατικά που χρειάζεστε και είναι πολύ διαμορφωμένο με την προκαθορισμένη παλέτα χρωμάτων και το στοιχείο που σας επιτρέπει να ορίσετε ένα προσαρμοσμένο θέμα χρώματος για την εφαρμογή σας.

Από τις εκατοντάδες των πλαισίων UI, το υλικό UI είναι ένα από τα καλύτερα περιβάλλοντα UI βασισμένα στο Reactjs που έχουν την πιο εκλεπτυσμένη εφαρμογή του Σχεδιασμού Υλικών. Με 678 συνεργάτες και 35K αστέρια GitHub, είναι μία από τις πιο δημοφιλείς και ενεργά συντηρημένες βιβλιοθήκες.

Έχω δημιουργήσει την εφαρμογή δείγματος που παρέχεται στα παραδείγματα του υλικού-ui έργου για να stackblitz για μια γρήγορη επίδειξη. Ανατρέξτε στον κώδικα εδώ.

Εγώ προσωπικά αισθάνομαι ότι δεν είναι ένα καλό παράδειγμα για να δείξω την περίπτωση ποια είναι η ικανότητα του υλικού ui αλλά σίγουρα ένα απλό εκκινητή. Ο επίσημος δικτυακός τόπος έχει επίσης καλή τεκμηρίωση και demos ανά συνιστώσα, η οποία αποτελεί καλή πηγή πληροφοριών.

2. Αντιδράστε με Bootstrap

Το Bootstrap είναι ένα από τα πιο δημοφιλή και ευρέως χρησιμοποιούμενα πλαίσια CSS. Δεν αποτελεί έκπληξη το γεγονός ότι το duo του React και του Bootstrap. Ανταπόκριση Το Bootstrap είναι ένα σύνολο στοιχείων React που υλοποιούν το πλαίσιο Bootstrap. Το React-Bootstrap στοχεύει προς το παρόν το Bootstrap v3 και η ομάδα εργάζεται ενεργά στο Bootstrap v4.

Με 204 συνεργάτες και 12K αστέρια github είναι μία από τις δημοφιλέστερες και ενεργά συντηρημένες βιβλιοθήκες.

Το Unfortunatley react-bootstrap δεν παρέχει κανένα παράδειγμα εργασίας, αλλά υπάρχουν παραδείγματα για κάθε στοιχείο που μπορείτε να βρείτε εδώ.

Έχω ρυθμίσει μια εφαρμογή δείγματος σε stackblitz με την κατάρτιση 2 από τα ανεξάρτητα παραδείγματα από την τεκμηρίωση. Ανατρέξτε στον κώδικα εδώ.

3. Σημασιολογική UI

Το Semantic UI είναι ένα αναπτυξιακό πλαίσιο που βοηθάει στη δημιουργία όμορφων, ευαίσθητων σχεδιαγραμμάτων χρησιμοποιώντας HTML φιλικό προς τον άνθρωπο. Αυτό το πλαίσιο επηρεάζεται περισσότερο από το σημασιολογικό στυλ της HTML που έχει νόημα για κάθε τάξη css. Σημαντικό UI αντιμετωπίζει τα λόγια και τις κλάσεις ως εναλλάξιμες έννοιες. Οι κλάσεις χρησιμοποιούν τη σύνταξη από τη φυσική γλώσσα όπως τη σχέση ουσιαστικού / τροποποιητή, την πολυφωνία, τη σειρά λέξεων για να υπάρχει μια σύνδεση μεταξύ εννοιών διαισθητικά. Το Σημασιολογικό χρησιμοποιεί επίσης απλές φράσεις που ονομάζονται συμπεριφορές που ενεργοποιούν λειτουργικότητα.

Το Σημασιολογικό UI React είναι η επίσημη ενσωμάτωση React για το Semantic UI

Με 175 συνεισφέροντες και 6K αστέρια github είναι μία από τις δημοφιλέστερες και ενεργά συντηρημένες βιβλιοθήκες.

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

Μια εφαρμογή δείγματος που παρουσιάζει το στοιχείο της κάρτας μπορεί να διερευνηθεί εδώ

4. Επαναλάβετε την εργαλειοθήκη

Ένα άλλο φτερό στη Βιβλιοθήκη βασισμένη στο υλικό του Google. Το React Toolbox είναι μια βιβλιοθήκη UI που ακολουθεί τις έννοιες του Σχεδιασμού Υλικών της Google και είναι χτισμένη πάνω από μερικές από τις πιο μοντέρνες προτάσεις όπως τα Modules CSS (γραμμένα σε SASS), το Webpack και το ES6. Η βιβλιοθήκη ενσωματώνεται αρμονικά με τη ροή εργασίας του Webpack και είναι εύκολα προσαρμόσιμη και πολύ ευέλικτη.

Με 219 συνεργάτες και 7k αστέρια GitHub είναι μία από τις δημοφιλέστερες και ενεργά συντηρημένες βιβλιοθήκες.

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

5. Σχεδιασμός μυρμηγκιών

Μια γλώσσα σχεδιασμού διεπαφών επιχειρησιακής κλάσης και υλοποίηση βάσει React. Το σχέδιο Αντ είναι ρυθμισμένο από υψηλής ποιότητας στοιχεία React εκτός του πλαισίου που είναι γραμμένα σε TypeScript. Υποστηρίζει περιβάλλον περιήγησης, διακομιστή και ηλεκτρονίων, έχει πολλά συστατικά και ακόμη και ένα εκπαιδευτικό πρόγραμμα με το Create-react-app

Με 443 συνεργάτες και 24k αστέρια GitHub είναι μία από τις δημοφιλέστερες και ενεργά συντηρημένες βιβλιοθήκες.

Μπορείτε να ανατρέξετε στο demos εδώ

6. Αντιδράστε το Ίδρυμα

Όπως το bootstrap, το CSS framework Foundation είναι ένα άλλο δημοφιλές πλαίσιο CSS. Το ίδρυμα από το Zurb είναι μια πολύ πλούσια σε βιβλία και εύκολα προσαρμόσιμη βιβλιοθήκη. Το React Foundation είναι μια βιβλιοθήκη που υλοποίησε το Ίδρυμα ως αντιδραστήρια.

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

Σε αντίθεση με άλλες βιβλιοθήκες UI για την ανάπτυξη εφαρμογών Reactjs που έχουμε διερευνήσει παραπάνω το React Foundation έχει πολύ περιορισμένους συνεργάτες και πολύ χαμηλή ενεργητική ανάπτυξη.

Μπορείτε να ανατρέξετε στο demos εδώ