Το React είναι μια πολύ γνωστή βιβλιοθήκη JavaScript που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε UI για ευέλικτες εφαρμογές Ιστού. Το React είναι προσαρμόσιμο και μπορείτε να το συνδυάσετε με άλλες τεχνολογίες για να κάνετε πιο ισχυρές και αποτελεσματικές εφαρμογές.

Μάθετε πώς να ενσωματώνετε το React με διάφορες τεχνολογίες και θα αποκομίσετε οφέλη από πολλές πηγές.

1. React + Redux

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

Ακολουθεί μια απεικόνιση του τρόπου χρήσης του Redux με το React:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή {createStore } από"redux";
εισαγωγή { Πάροχος } από'react-redux';
συνθ αρχική κατάσταση = { 

instagram viewer

μετρώ: 0 };
λειτουργίαπεριστέλλων(κατάσταση = αρχικήΚατάσταση, δράση) {
διακόπτης (action.type) {
υπόθεση'ΑΥΞΗΣΗ':
ΕΠΙΣΤΡΟΦΗ { μετρώ: κατάσταση.count + 1 };
υπόθεση'ΜΕΙΩΣΗ':
ΕΠΙΣΤΡΟΦΗ { μετρώ: state.count - 1 };
Προκαθορισμένο:
ΕΠΙΣΤΡΟΦΗ κατάσταση;
 }
}
συνθεισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή { useQuery, gql } από'@apollo/client';
συνθ GET_USERS = gql`
 ερώτημα GetUsers {
 χρήστες {
 ταυτότητα
 όνομα
 }
 }
;
λειτουργίαΧρήστες() {
συνθ { φόρτωση, σφάλμα, δεδομένα } = useQuery (GET_USERS);
αν (φόρτωση) ΕΠΙΣΤΡΟΦΗ<Π>Φόρτωση...Π>;
αν (λάθος) ΕΠΙΣΤΡΟΦΗ<Π>Λάθος :(Π>;
ΕΠΙΣΤΡΟΦΗ (
store = createStore (μειωτής);
λειτουργίαΜετρητής() {
συνθ count = useSelector(κατάσταση => κατάσταση.count);
συνθ dispatch = useDispatch();
ΕΠΙΣΤΡΟΦΗ (


Καταμέτρηση: {count}</p>
 επιστολή({ τύπος: 'ΑΥΞΗΣΗ' })}>+</button>
 επιστολή({ τύπος: 'ΜΕΙΩΣΗ' })}>-</button>
 </div>
 );
}
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (


 </Provider>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Αυτό το παράδειγμα δημιουργεί ένα κατάστημα Redux με αρχική κατάσταση 0. Στη συνέχεια, μια λειτουργία μειωτήρα χειρίζεται το ΑΥΞΗΣΗ και ΜΕΙΩΣΗ επιχειρήσεις. Ο κώδικας χρησιμοποιεί το χρήση Επιλογέα και χρήσηΑποστολής αγκίστρια για να λάβετε τη συνεχή καταμέτρηση και να αποστείλετε τις δραστηριότητες μεμονωμένα.

Τέλος, για να κάνετε το κατάστημα προσβάσιμο σε ολόκληρη την εφαρμογή, τυλίξτε το στοιχείο μετρητή στο στοιχείο παρόχου.

2. Απόδοση από την πλευρά του διακομιστή με το Next.js

Το Next.js είναι ένα πλαίσιο ανάπτυξης που βελτιστοποιεί την ταχύτητα και την ταχύτητα του ιστότοπου SEO τακτικές μεταδίδοντας HTML σε πελάτες και χρησιμοποιώντας απόδοση των στοιχείων React από την πλευρά του διακομιστή.

Το πανίσχυρο σύνολο εργαλείων του λειτουργεί παράλληλα με το React, παρέχοντας εξαιρετική απόδοση και υψηλές κατατάξεις στις μηχανές αναζήτησης.

// pages/index.js
εισαγωγή Αντιδρώ από'αντιδρώ';
λειτουργίαΣπίτι() {
ΕΠΙΣΤΡΟΦΗ (


Γεια σου Κόσμε!</h1>


Αυτό είναι ένα στοιχείο React που αποδίδεται από διακομιστή.</p>
 </div>
 );
}
εξαγωγήΠροκαθορισμένο Σπίτι;

Σε αυτό το μοντέλο, χαρακτηρίζετε ένα στοιχείο React που ονομάζεται Σπίτι. Το Next.js δημιουργεί μια στατική σελίδα HTML με το περιεχόμενο αυτού του στοιχείου όταν το αποδίδει στον διακομιστή. Όταν η σελίδα δέχεται επίσκεψη από τον πελάτη, θα στείλει το HTML στον πελάτη και θα ενυδατώσει το στοιχείο, επιτρέποντάς του να λειτουργεί ως δυναμικό στοιχείο React.

3. Ανάκτηση δεδομένων με το GraphQL

Η GraphQL είναι μια γλώσσα ερωτημάτων για API που προσφέρει μια ικανή, ισχυρή και προσαρμόσιμη εναλλακτική λύση στο REST. Με το GraphQL, μπορείτε να λαμβάνετε δεδομένα πιο γρήγορα και να ενημερώνετε τη διεπαφή χρήστη πιο γρήγορα.

Αυτή είναι μια απεικόνιση του τρόπου χρήσης του GraphQL με το React:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή { useQuery, gql } από'@apollo/client';
συνθ GET_USERS = gql`
 ερώτημα GetUsers {
 χρήστες {
 ταυτότητα
 όνομα
 }
 }
;
λειτουργίαΧρήστες() {
συνθ { φόρτωση, σφάλμα, δεδομένα } = useQuery (GET_USERS);
αν (φόρτωση) ΕΠΙΣΤΡΟΦΗ<Π>Φόρτωση...Π>;
αν (λάθος) ΕΠΙΣΤΡΟΦΗ<Π>Λάθος :(Π>;
ΕΠΙΣΤΡΟΦΗ (


 {data.users.map(χρήστης => (
{user.name}</li>
 ))}
 </ul>
 );
}
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (


Χρήστες</h1>

 </div>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Αυτό το μοντέλο καλεί το useQuery λειτουργία από το @apollo/client βιβλιοθήκη για να φέρει την περίληψη των πελατών από τη διεπαφή προγραμματισμού GraphQL. Στη συνέχεια, η λίστα χρηστών εμφανίζεται στη διεπαφή χρήστη.

4. Στυλ με CSS-in-JS

Το CSS-in-JS είναι μια μέθοδος βασισμένη σε JavaScript για το στυλ των στοιχείων React. Καθιστά απλούστερη τη διαχείριση σύνθετων φύλλων στυλ και σας επιτρέπει να γράφετε στυλ σε αρθρωτό στυλ και στυλ βασισμένο σε στοιχεία.

Ακολουθεί μια απεικόνιση του τρόπου χρήσης του CSS-in-JS με το React:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή στιλ από'στυλ-εξαρτήματα';
συνθ Κουμπί = στυλ.κουμπί`
 χρώμα του φόντου: #007bff;
 χρώμα: #fff;
 υλικό παραγεμίσματος: 10px 20px;
 ακτίνα συνόρων: 5px;
 μέγεθος γραμματοσειράς: 16px;
 δρομέας: δείκτης;
 &:hover {
 χρώμα του φόντου: #0069d9;
 }
;
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (


Κάντε κλικ με!</Button>
 </div>
 );
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

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

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

5. Ενσωμάτωση με το D3 για Οπτικοποίηση Δεδομένων

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

εισαγωγή React, { useRef, useEffect } από'αντιδρώ';
εισαγωγή * όπως και δ3 από'd3';
λειτουργίαΡαβδόγραμμα({ δεδομένα }) {
συνθ ref = useRef();
 useEffect(() => {
συνθ svg = d3.select (ref.current);
συνθ πλάτος = svg.attr('πλάτος');
συνθ ύψος = svg.attr('ύψος');
συνθ x = d3.scaleBand()
 .domain (data.map((ρε) => δ.ετικέτα))
 .εύρος([0, πλάτος])
 .υλικό παραγεμίσματος(0.5);
συνθ y = d3.scaleLinear()
 .τομέα([0, d3.max (δεδομένα, (d) => d.value)])
 .range([ύψος, 0]);
 svg.selectAll("σωστά")
 .data (δεδομένα)
 .εισαγω()
 .προσαρτώ("σωστά")
 .attr('Χ', (δ) => x (d.label))
 .attr('εε', (d) => y (d.value))
 .attr('πλάτος', x.bandwidth())
 .attr('ύψος', (d) => ύψος - y (d.value))
 .attr('γέμισμα', '#007bff');
 }, [δεδομένα]);
ΕΠΙΣΤΡΟΦΗ (
400}>
 {/* άξονες πάνε εδώ */}
 </svg>
 );
}
εξαγωγήΠροκαθορισμένο Ραβδόγραμμα;

Αυτός ο κώδικας ορίζει α Ραβδόγραμμα συστατικό που δέχεται α δεδομένα prop στο προηγούμενο απόσπασμα κώδικα. Καλεί το useRef αγκιστρώστε για να κάνετε μια αναφορά στο στοιχείο SVG που θα το χρησιμοποιήσει για να σχεδιάσει το περίγραμμα.

Μετά από αυτό, αποδίδει τις ράβδους του γραφήματος και ορίζει τις κλίμακες με το Άγκιστρο useEffect()., που αντιστοιχίζει τις τιμές των δεδομένων στις συντεταγμένες της οθόνης.

6. Προσθήκη λειτουργικότητας σε πραγματικό χρόνο με WebSockets

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

Χρησιμοποιείτε το WebSockets με τον ακόλουθο τρόπο με το React:

εισαγωγή React, { useState, useEffect } από'αντιδρώ';
εισαγωγή io από'socket.io-client';
λειτουργίαChatroom() {
συνθ [messages, setMessages] = useState([]);
συνθ [inputValue, setInputValue] = useState('');
συνθ πρίζα = io(' http://localhost: 3001');
 useEffect(() => {
 socket.on('μήνυμα', (μήνυμα) => {
 setMessages([...μηνύματα, μήνυμα]);
 });
 }, [μηνύματα, υποδοχή]);
συνθ handleΥποβολή = (μι) => {
 e.preventDefault();
 socket.emit('μήνυμα', inputValue);
 setInputValue('');
 };
ΕΠΙΣΤΡΟΦΗ (




 {messages.map((μήνυμα, i) => (
{μήνυμα}</li>
 ))}
 </ul>


 τύπος="κείμενο"
 value={inputValue}
 onChange={(e) => setInputValue (e.target.value)}
 />
"υποβάλλουν">Αποστολή</button>
 </form>
 </div>
 );
}
εξαγωγήΠροκαθορισμένο Chatroom;

Σε αυτό το παράδειγμα, ορίζετε α Chatroom συστατικό που χρησιμοποιεί το socket.io-client βιβλιοθήκη για σύνδεση σε διακομιστή WebSocket. Μπορείτε να χρησιμοποιήσετε το χρήση Κατάσταση γάντζο για να αντιμετωπίσετε την υποβάθμιση των μηνυμάτων και την εκτίμηση των πληροφοριών.

Μόλις λάβετε ένα νέο μήνυμα, το useEffect Το hook καταχωρεί έναν ακροατή για να ενεργοποιήσει μια ενημέρωση συμβάντος μηνύματος στη λίστα μηνυμάτων. Για να διαγράψετε και να στείλετε μια τιμή εισόδου για το μήνυμα συμβάντος, υπάρχει α handleSubmit λειτουργία.

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

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

7. Ενσωμάτωση με το React Native for Mobile Development

Το React Local είναι ένα σύστημα για τη δημιουργία τοπικών καθολικών εφαρμογών χρησιμοποιώντας το React, οι οποίες συνδέονται για την προώθηση φορητών εφαρμογών για στάδια iOS και Android.

Χρησιμοποιώντας την ενοποίηση του React Native με το React, μπορείτε να χρησιμοποιήσετε τη σχεδίαση που βασίζεται σε στοιχεία και τον επαναχρησιμοποιήσιμο κώδικα του React σε πλατφόρμες κινητών και ιστού. Αυτό μειώνει τους κύκλους ανάπτυξης εφαρμογών για κινητά και τον χρόνο για την αγορά. Το React Native είναι ένα δημοφιλές πλαίσιο για την ανάπτυξη εγγενών εφαρμογών για κινητά που κάνει χρήση της βιβλιοθήκης React.

Παρουσιάζοντας τον ζωτικό προγραμματισμό και τις βιβλιοθήκες, όπως Node.js, Απάντηση σε τοπικό CLI, και Xcode ή Android Studio, είναι θεμελιώδους σημασίας για τους σχεδιαστές που ασχολούνται με το iOS και το Android ξεχωριστά. Τέλος, τα απλά στοιχεία React Native επιτρέπουν στους προγραμματιστές να δημιουργούν ισχυρές και πλούσιες σε δυνατότητες εφαρμογές για κινητές συσκευές για τις πλατφόρμες iOS και Android.

Συνδυάστε το React με άλλες τεχνολογίες

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

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