Στην προηγούμενη ενότητα, είχαμε την ευκαιρία να δημιουργήσουμε nasting elements. Ας θυμηθούμε για ακόμα μια φορά τον κώδικα που είχαμε γράψει:

 

Μέχρι τώρα, σαν πρώτη παράμετρο στην μέθοδο createElement( ) δίναμε μια τιμή string. Όμως η πρώτη παράμετρο μπορεί να δεχτεί δύο διαφορετικά είδη εισαγωγής δεδομένων:

Ας δούμε αναλύσουμε λίγο περισσότερο το πρώτο μέρος πριν μιλήσουμε για React component classes. Ότι string βάζουμε λοιπόν σαν πρώτο όρο στην createElement μέθοδο, η React προσπαθεί να το αντιστοιχήσει με κάποιο γνωστό HTML tag. Εάν βρει κάποια αντιστοιχία τότε την χρησιμοποιεί σαν React element. Ας χρησιμοποιήσουμε λοιπόν αυτή την θεωρία για να εμφανίσουμε το output του κώδικα μας κάπως καλύτερα όπως π.χ να είναι το ένα link κάτω από το άλλο. Αυτό που έχουμε να κάνουμε είναι να δημιουργήσουμε ένα καινούργιο element και να το ονομάσουμε br έχοντας εισάγει σαν πρώτο όρο το string ‘br’. Μετά το προσθέτουμε στην render μέθοδο. Ο ανανεωμένος κώδικας με το output είναι ο εξής:

 

 

Ωραία, καταφέραμε με σχετικά εύκολο τρόπο να διορθώσουμε το πως εμφανίζεται το αποτέλεσμα μας στον browser. Αλλά όταν όμως σε μια πιο απαιτητική σε κώδικα εφαρμογή χρειαστεί να δημιουργήσουμε πολλά elements, σύντομα θα βρεθούμε σε αδιέξοδο. Δεν θα είναι εύκολο να μπορούμε να συνδυάσουμε πολλαπλά elements με αυτό τον τρόπο. Εδώ λοιπόν έρχονται να μας βοηθήσουμε τα component classes ή αλλιώς components για συντομία.

Η λογική πίσω από αυτή την καινούργια διαδικασία είναι ότι μπορούμε να δημιουργήσουμε custom elements που μπορούμε να τα καλέσουμε από οπουδήποτε στον κώδικα μας. Σκεφτείτε π.χ να έχετε δημιουργήσει ένα custom menu μια φορά και μετά να έχετε την δυνατότητα να το καλέσετε όσες φορές θέλετε από όπου θέλετε μέσα στον κώδικα σας. Και πως το κάνουμε αυτό? Στο πρακτικό κομμάτι λοιπόν, για να δημιουργήσουμε ένα component γράφουμε μια κλάση που κάνει extends την React.Component κλάση. Η μοναδική απαίτηση που έχει αυτή η γραφή κώδικα είναι ότι πρέπει να γράψουμε κώδικα μέσα σε μια render( ) μέθοδο η οποία επιστρέφει ένα και μόνο ένα element.

Ας δούμε λοιπόν πως μπορούμε να αλλάξουμε τον κώδικα μας για να δημιουργήσουμε components.

 

 

Στον πιο πάνω κώδικα, βλέπουμε στην γραμμή 11 πως δημιουργούμε ένα καινούργιο component με το όνομα CustomComponent κληρονομώντας από την κλάση React.Component. Μέσα στην render( ) μέθοδο, η οποία πάντα επιστρέφει ένα στοιχείο, γράφουμε όλο τον κώδικα από τον οποίο θέλουμε να αποτελείται το component μας. Στην συγκεκριμένη περίπτωση θέλουμε δύο linkReactElements και ένα br element. Τέλος, στην render( ) μέθοδο δεν έχουμε παρά να καλέσουμε το custom component μας με το όνομα του που είναι CustomComponent.

Ίσως με όλη αυτή την θεωρία να μην είναι άμεσα εμφανής ο λόγος για τον οποίο ένα τέτοιο refactoring είναι πιο εύκολο στην χρήση του από ότι το προηγούμενο version του κώδικα που είχαμε. Ας κάνουμε λοιπόν την ερώτηση: πόσο εύκολο είναι τώρα να προσθέσουμε όσο hyperlinks θέλουμε στον browser? Η απάντηση είναι απλή: κάλεσε όσες φορές θέλεις το custom component που έχεις δημιουργήσει περικλείοντας το σε ένα div όπως δείχνει ο πιο κάτω κώδικας.

 

 

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

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

Michail.Kassapoglou@gmail.com