Ενσωμάτωση του React στην εφαρμογή Astro

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

Βασικά συμπεράσματα

• Πρέπει να εγκαταστήσετε το πακέτο React και τα αντίστοιχα plugins
• Η δομή των συστατικών σας στο Astro διαφέρει ελαφρώς από την καθαρή HTML.
• Για να διασφαλίσετε ότι τα συστατικά σας React θα αποδίδονται στο πρόγραμμα περιήγησης, πρέπει να χρησιμοποιήσετε το χαρακτηριστικό client:only.

Οδηγός βήμα προς βήμα

Για να προσθέσετε το React στην εφαρμογή σας Astro, προχωρήστε ως εξής:

Πρώτον, πρέπει να βεβαιωθείτε ότι ο διακομιστής ανάπτυξης δεν εκτελείται πλέον. Μπορείτε να το κάνετε αυτό ακυρώνοντας την εντολή npm run dev. Αυτό είναι σημαντικό για να βεβαιωθείτε ότι δεν θα έχετε συγκρούσεις κατά την εγκατάσταση των νέων εξαρτήσεων.

Τώρα είστε έτοιμοι να ενσωματώσετε επίσημα το React. Για να το κάνετε αυτό, χρησιμοποιήστε την εντολή npx astro add react. Με αυτή την εντολή, προσθέτετε τα απαραίτητα πακέτα που απαιτούνται για την υποστήριξη του React στην εφαρμογή Astro σας.

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

Κατά τη διάρκεια της διαδικασίας εγκατάστασης, γίνονται επίσης αλλαγές στο astro.config.mjs. Θα πρέπει επίσης να αποδεχτείτε αυτές τις αλλαγές, ώστε όλα να λειτουργούν ομαλά.

Μόλις ολοκληρωθεί η εγκατάσταση, η εφαρμογή σας θα πρέπει πλέον να έχει υποστήριξη React. Ας ελέγξουμε ποιες νέες εξαρτήσεις έχουν προστεθεί. Στο package.json σας θα βρείτε τώρα τα react, react-dom και @astrojs/react ως plugins.

Για να βεβαιωθείτε ότι όλα έχουν ρυθμιστεί σωστά, χρειάζεστε ένα στοιχείο React που μπορείτε να δοκιμάσετε. Δημιουργήστε ένα νέο φάκελο με όνομα components στο φάκελο src, ο οποίος θα περιέχει αργότερα τα συστατικά του React σας.

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

Τώρα πρέπει να βεβαιωθείτε ότι το συστατικό στο αρχείο index.astro έχει εισαχθεί. Αυτό γίνεται ανάμεσα στις τρεις παύλες (---) στην κορυφή του αρχείου, όπου μπορείτε να εισάγετε δηλώσεις import.

Η δήλωση εισαγωγής σας θα μπορούσε να μοιάζει κάπως έτσι: import App from '../components/index.jsx';. Αυτό θα διασφαλίσει ότι το στοιχείο σας φορτώνεται σωστά.

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

Θυμηθείτε να ορίσετε ένα χαρακτηριστικό client:only για το συστατικό σας. Αυτό διασφαλίζει ότι το συστατικό αποδίδεται στο πρόγραμμα περιήγησης και όχι στον διακομιστή.

Τώρα ας πάμε στο αρχείο index.jsx και ας δημιουργήσουμε ένα απλό στοιχείο React. Για παράδειγμα, μπορείτε να εισαγάγετε ένα απλό div με το κείμενο "App" στην HTML.

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

Αν ρίξετε μια ματιά στο DOM, θα παρατηρήσετε ότι το Astro χρησιμοποιεί έναν ειδικό placeholder που ονομάζεται "Astro Island", όπου αποδίδονται τα React components σας.

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

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

Περίληψη

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