Από την σημερινή ενότητα θα αρχίζουμε να εξερευνούμε τις δυνατότητες της React JS. Δεν θα μπω στην λογική να εξηγήσω γιατί πρέπει ή δεν πρέπει να επιλέξετε React για το επόμενο σας project. Αυτή την ανάλυση μπορείτε να την βρείτε στο Ίντερνετ με ένα απλό search.

Σε γενικές γραμμές όμως, όταν αποφασίσετε να υιοθετήσετε React JS στον κώδικας σίγουρα θα έχετε:

Ας μην ξεχνάμε ότι το React JS δημιουργήθηκε με την λογική να μας προσφέρει την δυνατότητα να μπορούμε να κατασκευάζουμε composable UΙs για αυτό και δεν θεωρείται να είναι framework αλλά μια component library.

Τώρα στην κύρια μας ερώτηση: πως μπορούμε να δημιουργήσουμε μια απλή εφαρμογή σε React JS? Ο πιο απλός τρόπος είναι να χρησιμοποιήσουμε την εφαρμογή που έχει δημιουργήσει η React JS ομάδα για να στηρίξουμε τον κώδικα μας και μας δίνει ολοκληρωμένη λειτουργικότητα. Βασική προϋπόθεση για να δημιουργήσουμε αυτή την εφαρμογή-καλούπι στην οποία θα στηρίξουμε τον κώδικα μας είναι να έχουμε εγκαταστημένο το node.js ( https://nodejs.org/en/). Εφόσον το έχετε εγκαταστήσει, ανοίξτε ένα καινούργιο terminal παράθυρο και στον φάκελο που θέλετε να δημιουργήσετε την καινούργια React JS εφαρμογή γράφετε: npx create-react-app my-app. Αντί για my-app μπορείτε να ονομάσετε με διαφορετικό όνομα την δική σας εφαρμογή.

 Μετά από μερικά λεπτά θα δημιουργηθεί μια ολοκληρωμένη εφαρμογή React JS στον φάκελο που είχατε ορίσει. Αυτό που μένει τώρα είναι να δοκιμάσουμε αν είναι λειτουργική. Εκτελούμε την εντολή cd για να μεταφερθούμε μέσα στο φάκελο που περιέχει την React JS my-app εφαρμογή και εκτελούμε npm start.

 Η συγκεκριμένη εντολή θα ξεκινήσει έναν http server μέσα στο node js και θα τρέξει την εφαρμογή μας. Πολύ σύντομα μετά την εκτέλεση της συγκεκριμένης εντολής, θα ανοίξει ο browser και θα εμφανιστεί η index.html ιστοσελίδα της εφαρμογή μας.

Μόλις ολοκληρώσαμε το πρώτο βήμα που ήταν η δημιουργία μιας εφαρμογής React JS που τρέχει σε έναν http server. Σαν δεύτερο βήμα, είναι να χρησιμοποιήσουμε κάποιο editor για να μπορούμε να γράψουμε κώδικα React JS και να σβήσουμε ορισμένα πράγματα από την εφαρμογή που τρέχει και δεν χρειαζόμαστε.

Νομίζω ότι πολλοί από εσάς θα συμφωνήσουν ότι το Visual Studio Code είναι ότι πιο γρήγορο και εύκολο εργαλείο μπορείτε να έχετε στα χέρια σας για να αναπτύξετε Web εφαρμογές. Αφού κατεβάσετε και εγκαταστήσετε το Visual Studio Code ανοίξτε στο κύριο μενού και επιλέξτε File → Open Folder. Επιλέξτε τον φάκελο της εφαρμογή σας και πατήστε Select Folder.. Ολόκληρη η δομή της εφαρμογή σας πρέπει τώρα να είναι εμφανής στο περιβάλλον του Visual Studio Code.

 Μην κλείσετε το terminal παράθυρο μέσα στο οποίο τρέξαμε την εντολή npm start. Όπως θα κάνουμε αλλαγές στον κώδικα, θα μπορούμε να δούμε τις αλλαγές να εμφανίζονται άμεσα στον browser.

Καιρός τώρα να διαγράψουμε κάποια στοιχεία μέσα από την εφαρμογή, έτσι ώστε να μην εμφανίζεται τίποτα στον browser που δεν προέρχεται από δικό μας κώδικα. Βασικά πρέπει να διαγράψουμε δύο πράγματα: πρώτον είναι μέρος του κώδικα στο αρχείο App.js. Διαγράψτε οτιδήποτε είναι ανάμεσα στα δύο div tags. Ο κώδικας σας θα πρέπει να μοιάζει όπως στην πιο κάτω εικόνα:

 Το δεύτερο βήμα είναι να πάμε στο αρχείο index.js και να κάνουμε σχόλια τις δύο γραμμές κώδικα που περιέχει (όχι τα imports). Η τελική μορφή του αρχείου θα πρέπει να μοιάζει όπως η πιο κάτω εικόνα:

Μην ξεχάσατε μετά από κάθε αλλαγή που κάνετε να αποθηκεύετε τις αλλαγές σας. Μετά από αυτές τις δύο αλλαγές στον κώδικα, έχουμε μια εφαρμογή React JS που δεν δείχνει τίποτα στον browser και περιμένει από εμάς να γράψουμε το πρώτο μας React Component.

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

Μιχάλης Κασάπογλου

Michail.Kassapoglou@gmail.com