REACT ΕΝΟΤΗΤΑ 2 – Your First React Code
Από την στιγμή που έχουμε το περιβάλλον έτοιμο, μπορούμε να γράψουμε την πρώτη μας γραμμή κώδικα σε React JS και μάλιστα να δούμε το αποτέλεσμα στο Browser.
Μην ξεχάσετε να πάτε στο directory όπου είναι ο φάκελος της εφαρμογής σας, και στο cmd να γράψετε npm start για να ξεκινήσει ο http server. Στον browser δεν θα δείτε τίποτα γιατί είχαμε διαγράψει εκείνο το κομμάτι κώδικα που εμφανιζόταν στον browser. Λογικά λοιπόν έχετε στον υπολογιστή σας ένα έτοιμο περιβάλλον React JS που αναμένει από εσάς να γράψετε κώδικα.
Αν και γνωρίζω ότι πολλοί από εσάς περιμένουν να δουν JSX κώδικα, σε αυτή την ενότητα θα το αποφύγω και θα δημιουργήσουμε το απλό μήνυμα Hello World με απλή JavaScript. Αφού καταλάβετε ποια είναι η βασική ιδέα πίσω από το React τότε θα εισάγουμε και JSX τρόπο γραφής και οργάνωσης κώδικα. Υπομονή λοιπόν μέχρι τότε.
Το κύριο αρχείο στο οποίο θα γράφουμε τον κώδικα μας είναι το index.js. Μέσα σε αυτό το αρχείο θα δημιουργήσουμε όλα τα components. Σαν υπενθύμιση το αρχείο αυτό πρέπει λογικά να περιέχει μόνο import statements και καθόλου React JS κώδικα.
Τα δύο πρώτα imports αναφέρονται
στο react και react-dom
αντίστοιχα. Δεν χρειάζεται να
κατεβάσουμε καμία από αυτές τις
βιβλιοθήκες γιατί όλα τα αρχεία
περιέχονται ήδη στην εφαρμογή μας.
Για
να δημιουργήσουμε το πρώτο μας React
element μπορούμε απλά να καλέσουμε την
μέθοδο createElement. Ας δούμε
πρώτα τον κώδικα και μετά θα μιλήσουμε
για την δομή του:
Γενική δομή ενός React element είναι
React.createElement
(elementName, data, child)
elementName
– Μπορούμε να περάσουμε
ένα οποιοδήποτε HTML tag σαν
string (όπως π.χ ‘h1’) ή
να δώσουμε ένα δικό μας όνομα που δεν
έχει καμία σχέση με κάποιο HTML
components
data
– Εδώ ορίζουμε δεδομένα
που περνάνε στο component είτε
σαν attributes είτε σαν
properties. Επειδή όμως δεν
έχουμε έξτρα τιμή στο παράδειγμα μας,
βάλαμε null σαν τιμή.
Child
– Εδώ ορίζουμε το περιεχόμενο
που θα έχει το component που
θα δημιουργήσουμε. Στο δικό μας παράδειγμα
είναι το μήνυμα ‘Welcome to my blogspot’.
Οπότε
καλούμε την createElement να
δημιουργήσουμε ένα αντικείμενο είδος
h1 και αποθηκεύουμε την
αναφορά σε αυτό το αντικείμενο σε μια
μεταβλητή h1. Η μεταβλητή
var h1 δεν έχει σχέση με το
h1 του HTML DOM.
Είναι απλά μια αναφορά στο React
h1 αντικείμενο που δημιούργησε η
createElement.
Αφού
λοιπόν δημιουργήσουμε το element
και το αποθηκεύσουμε, το επόμενο
βήμα είναι να καλέσουμε την render
μέθοδο για να το εμφανίσουμε στον
browser. H render μέθοδο δέχεται
σαν πρώτη παράμετρο το στοιχείο που
θέλουμε να εμφανίσουμε, και σαν δεύτερη
παράμετρο το id του HTML
στοιχείου το οποίο θα καλέσει στο
index.html για να εμφανιστεί.
Αν δούμε λοιπόν το index.html
αρχείο θα δούμε ότι έχει το όνομα
root σαν id στο
tag div.
Οπότε το στοιχείο δημιουργήθηκε, μετά
το κάναμε render και τέλος
καλούμε κάποιο id από το
index.html για να το εμφανίσουμε.
Μιχάλης Κασάπογλου
