Το jQuery και το React είναι και οι δύο δημοφιλείς βιβλιοθήκες JavaScript για ανάπτυξη front-end. Ενώ το jQuery είναι μια βιβλιοθήκη χειρισμού DOM, το React είναι μια βιβλιοθήκη JavaScript για τη δημιουργία διεπαφών χρήστη.

Μάθετε πώς μπορείτε να μετεγκαταστήσετε μια υπάρχουσα εφαρμογή από το jQuery στο React.

jQuery vs. Αντιδρώ?

Όσον αφορά την επιλογή μεταξύ jQuery και React, εξαρτάται από τις ανάγκες και τις προτιμήσεις σας. Αν ψάχνετε για μια βιβλιοθήκη που να είναι εύκολη στη χρήση και να έχει μεγάλη κοινότητα, τότε το jQuery είναι μια καλή επιλογή. Αλλά αν ψάχνετε για μια βιβλιοθήκη που είναι πιο κατάλληλη για ανάπτυξη μεγάλης κλίμακας, το React είναι η καλύτερη επιλογή.

Γιατί να μεταβείτε από το jQuery στο React;

Υπάρχουν διάφοροι λόγοι για τους οποίους μπορεί να θέλετε να μετεγκαταστήσετε την εφαρμογή σας από το jQuery στο React.

  • Το React είναι ταχύτερο από το jQuery: Αν μιλάμε για πρωτογενείς επιδόσεις, το React είναι πιο γρήγορο από το jQuery. Αυτό συμβαίνει επειδή το React χρησιμοποιεί ένα εικονικό DOM, το οποίο είναι μια αναπαράσταση JavaScript του πραγματικού DOM. Αυτό σημαίνει ότι όταν ένας χρήστης αλληλεπιδρά με μια εφαρμογή React, θα ενημερώνονται μόνο τα τμήματα του DOM που αλλάζουν. Αυτό είναι πιο αποτελεσματικό από τον πλήρη χειρισμό DOM του jQuery.
    instagram viewer
  • Το React είναι πιο διατηρητέο: Ένας άλλος λόγος για τη μετάβαση στο React είναι ότι είναι πιο διατηρήσιμο από το jQuery. Αυτό συμβαίνει επειδή τα στοιχεία του React είναι αυτόνομα, ώστε να μπορείτε εύκολα να τα επαναχρησιμοποιήσετε. Αυτό σημαίνει ότι εάν χρειάζεται να κάνετε μια αλλαγή σε ένα στοιχείο React, μπορείτε να το κάνετε χωρίς να επηρεάσετε την υπόλοιπη βάση κώδικα.
  • Το React είναι πιο επεκτάσιμο: Τέλος, το React είναι πιο επεκτάσιμο από το jQuery. Χρησιμοποιεί μια αρχιτεκτονική βασισμένη σε στοιχεία, η οποία είναι πιο επεκτάσιμη από τη μονολιθική προσέγγιση του jQuery. Αυτό σημαίνει ότι μπορείτε εύκολα να επεκτείνετε και να τροποποιήσετε μια εφαρμογή React όπως απαιτείται.
  • Το React έχει καλύτερη υποστήριξη για τη δοκιμή μονάδας: Όσον αφορά τη δοκιμή μονάδας, το React έχει καλύτερη υποστήριξη από το jQuery. Επειδή μπορείτε εύκολα να απομονώσετε στοιχεία React, είναι πιο εύκολο να γράψετε δοκιμές μονάδας για αυτά.

Πώς να μετεγκαταστήσετε την εφαρμογή σας από το jQuery στο React

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

Προαπαιτούμενα

Πριν ξεκινήσετε τη διαδικασία μετεγκατάστασης, υπάρχουν μερικά πράγματα που πρέπει να κάνετε για να ρυθμίσετε τα πράγματα. Πρώτα, πρέπει δημιουργήστε μια εφαρμογή React χρησιμοποιώντας τη δημιουργία-react-app.

Αφού εγκαταστήσετε αυτές τις εξαρτήσεις, πρέπει να δημιουργήσετε ένα αρχείο που ονομάζεται index.js στο δικό σου src Ευρετήριο. Αυτό το αρχείο θα είναι το σημείο εισόδου για την εφαρμογή React.

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

1. Χειρισμός συμβάντων

Στο jQuery, μπορείτε να επισυνάψετε συμβάντα σε στοιχεία. Για παράδειγμα, εάν έχετε ένα κουμπί, μπορείτε να επισυνάψετε ένα συμβάν κλικ σε αυτό. Όταν κάποιος κάνει κλικ στο κουμπί, θα εκτελεστεί ο χειριστής συμβάντων.

$("button").κλικ(λειτουργία() {
// Κάνε κάτι
});

Το React χειρίζεται διαφορετικά τα γεγονότα. Αντί να επισυνάπτετε συμβάντα σε στοιχεία, τα ορίζετε σε στοιχεία. Για παράδειγμα, εάν έχετε ένα κουμπί, θα ορίσετε το συμβάν κλικ στο στοιχείο:

τάξηΚουμπίεκτείνεταιΑντιδρώ.Συστατικό{
 handleClick() {
// Κάνε κάτι
 }
 render() {
ΕΠΙΣΤΡΟΦΗ (
<κουμπί onClick={this.handleClick}>
 Κάντε κλικ με!
</button>
 );
 }
}

Εδώ, το στοιχείο Button περιέχει τον ορισμό της μεθόδου handleClick(). Όταν κάποιος κάνει κλικ στο κουμπί, αυτή η μέθοδος θα εκτελεστεί.

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

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

2. Υπάρχοντα

Στο jQuery, μπορείτε να χρησιμοποιήσετε τις μεθόδους .show() ή .hide() για να εμφανίσετε ή να αποκρύψετε ένα στοιχείο. Για παράδειγμα:

$("#στοιχείο").προβολή();

Στο React, μπορείτε να χρησιμοποιήσετε το άγκιστρο useState() για να διαχειριστείτε την κατάσταση. Για παράδειγμα, εάν θέλετε να εμφανίσετε ή να αποκρύψετε ένα στοιχείο, θα ορίσετε την κατάσταση στο στοιχείο:

εισαγωγή { useState } από "αντιδρώ";
λειτουργίαΣυστατικό() {
συνθ [isShown, setIsShown] = useState(ψευδής);
ΕΠΙΣΤΡΟΦΗ (
<div>
 {φαίνεται &&<div>Γειά σου!</div>}
<κουμπί onClick={() => setIsShown(!isShown)}>
 Μεταβάλλω
</button>
</div>
 );
}

Αυτός ο κώδικας ορίζει τη μεταβλητή κατάστασης isShown και τη συνάρτηση setIsShown(). Το React έχει διαφορετικών ειδών αγκίστρια που μπορείτε να χρησιμοποιήσετε στην εφαρμογή σας, ένα από τα οποία είναι το useState. Όταν ένας χρήστης κάνει κλικ στο κουμπί, η μεταβλητή κατάστασης isShown ενημερώνεται και το στοιχείο εμφανίζεται μόνο όταν χρειάζεται.

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

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

Στο jQuery, μπορείτε να χρησιμοποιήσετε τη μέθοδο $.ajax() για την ανάκτηση δεδομένων. Για παράδειγμα, εάν θέλετε να ανακτήσετε ορισμένα δεδομένα JSON, μπορείτε να το κάνετε ως εξής:

$.ajax({
 url: "https://example.com/data.json",
 Τύπος δεδομένων: "json",
 επιτυχία: λειτουργία(δεδομένα) {
 // κάνω κάτι με ο δεδομένα
 }
});

Στο React, μπορείτε να χρησιμοποιήσετε τη μέθοδο fetch() για την ανάκτηση δεδομένων. Δείτε πώς μπορείτε να ανακτήσετε δεδομένα JSON χρησιμοποιώντας αυτήν τη μέθοδο:

φέρω("https://example.com/data.json")
 .τότε (απόκριση => answer.json())
 .τότε (δεδομένα => {
 // κάνω κάτι με ο δεδομένα
 });

Στο jQuery, η μέθοδος $.ajax() είναι εύκολη στη χρήση. Ωστόσο, μπορεί να είναι δύσκολο να χειριστείτε τα σφάλματα. Στο React, η μέθοδος fetch() είναι πιο περιεκτική, αλλά είναι πιο εύκολο να χειριστεί κανείς τα σφάλματα.

4. CSS

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

κουμπί {
 Χρώμα φόντου: κόκκινο;
 άσπρο χρώμα;
}

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

<στυλ κουμπιού={{Χρώμα φόντου: 'το κόκκινο', χρώμα: 'άσπρο'}}>
 Κάντε κλικ με!
</button>

Ένας άλλος τρόπος για να διαμορφώσετε το στυλ των στοιχείων React είναι η χρήση καθολικών στυλ. Τα καθολικά στυλ είναι κανόνες CSS που ορίζετε εκτός ενός στοιχείου και εφαρμόζονται σε όλα τα στοιχεία της εφαρμογής. Για να το κάνετε αυτό, μπορείτε να χρησιμοποιήσετε μια βιβλιοθήκη CSS-in-JS όπως τα styled-components:

εισαγωγή στιλ από «στυλ-εξαρτήματα»·
συνθ Κουμπί = στυλ.κουμπί`
 Χρώμα φόντου: κόκκινο;
 άσπρο χρώμα;
`;

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

Αναπτύξτε εύκολα την εφαρμογή React σας

Ένα από τα πιο σημαντικά πλεονεκτήματα του React είναι ότι είναι πολύ εύκολο να αναπτύξετε την εφαρμογή React σας. Μπορείτε να αναπτύξετε το React σε οποιονδήποτε στατικό διακομιστή ιστού. Απλώς πρέπει να μεταγλωττίσετε τον κώδικά σας χρησιμοποιώντας ένα εργαλείο όπως το Webpack και, στη συνέχεια, να τοποθετήσετε το αρχείο bundle.js που προκύπτει στον διακομιστή ιστού σας.

Μπορείτε επίσης να φιλοξενήσετε την εφαρμογή React δωρεάν στις σελίδες GitHub.