JSX

Εισαγωγή στο JSX

Εάν έχετε εφαρμόσει ποτέ μια εφαρμογή ιστού με το πλαίσιο "React.js", ίσως έχετε παρατηρήσει ότι η σύνταξη για τη σύνταξη στοιχείων React.js μοιάζει λίγο διαφορετική από τον άλλο κώδικα Javascript. Παρόλο που τα περισσότερα είναι ίδια, τα στοιχεία React περιγράφονται μέσω ειδικών αγκυλών, των παρενθέσεων αριστερής και δεξιάς γωνίας. Μοιάζουν ακριβώς με σύνταξη για XML, την «Εκτεταμένη γλώσσα σήμανσης». Στο React.js, αυτή η σύνταξη ονομάζεται "JSX", που σημαίνει "Javascript XML".

Ο κύριος στόχος αυτής της σύνταξης είναι να απλοποιήσει τη γραφή του κώδικα React. Ο κώδικας JSX δεν μπορεί να ερμηνευτεί από JVM, επομένως πρέπει να μεταγλωττιστεί σε πραγματικό κώδικα Javascript πριν από τη χρήση - μια εργασία που συνήθως γίνεται από δέσμες όπως το Babel ή το Webpack.

Ο κώδικας React που πιθανότατα δεν έχετε γράψει ποτέ

Αυτό σημαίνει αποτελεσματικά ότι είναι πολύ πιθανό να μην έχετε γράψει ποτέ τέτοια "αληθινά" στοιχεία React.js που δημιουργούνται από τον κώδικα JSX. Αλλά μην ανησυχείτε, αυτό μπορεί να γίνει εύκολα χωρίς μεγάλη ταλαιπωρία. Στην πραγματικότητα, μπορείτε ακόμη και να γράψετε μια πλήρη εφαρμογή ιστού React χωρίς να χρησιμοποιήσετε ποτέ JSX. Το παρακάτω απόσπασμα κώδικα δείχνει πώς μοιάζει ένα πραγματικά στοιχείο React.js με μόνο Javascript.

// A common JSX-element.

<Header title="Lorem ipsum" variant="primary">
  I am a subtitle
</Header>

//
// ...
//

// After the compilation step:

React.createElement(
  Header,
  {title: 'Lorem ipsum', variant: "primary"},
  'I am a subtitle'
);

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

Χρησιμοποιώντας το JSX για να απλοποιήσετε τον κωδικό σας

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

Ένα άλλο μεγάλο χαρακτηριστικό του JSX είναι ότι γίνεται απλά μια έκφραση μετά το βήμα της σύνταξης. Επομένως, μπορείτε να το χρησιμοποιήσετε σε δηλώσεις if-else ή ακόμη και να αποθηκεύσετε το αποτέλεσμα σε μια μεταβλητή. Και επειδή τα στοιχεία του React.js μπορούν να περιέχουν εκφράσεις ως παιδιά, μπορείτε να γράψετε κώδικα UI υψηλής σύνθεσης!

Μια προεπιλεγμένη εισαγωγή για κάθε αρχείο JSX

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

Μοιάζει με HTML, αλλά δεν είναι

Ένας βασικός περιορισμός κατά την κωδικοποίηση σε σύνταξη JSX είναι η σημειογραφία του ονόματος του στοιχείου σας. Για να αναγνωρίσει σωστά τα στοιχεία σας ο δέκτης, πρέπει να είναι μοναδικά από τις τυπικές ετικέτες HTML, καθώς η σύνταξη φαίνεται η ίδια.

// 1. A valid example.
function Header(props){
  return (
    <div>
      <h1>{props.title}</h1>
      {props.children}
    </div>
  );
}

// 2. Invalid, only uppercase for React elements.
function header(props){
  return (
    // ...
  );
}

// 3. Invalid, only uppercase 
// when calling React components.
function Page(props){
  // Notice the invalid 'layout':
  return (
    <div style={{ margin: 12 }}>
      <layout>{/* ... */}</layout/>
    </div>
  );
}

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

Η παραλλαγή Typescript

Mayσως έχετε παρατηρήσει ότι πολλά έργα χρησιμοποιούν επίσης TSX ως επίθημα αρχείων για τα συστατικά τους αρχεία React.js. Αυτή είναι απλώς μια επέκταση του αρχικού JSX για να είναι συμβατή με το Typescript. Τα αρχεία TSX σάς επιτρέπουν να γράφετε κώδικα Typescript μαζί με στοιχεία σημειογραφίας JSX.

Μόνο η αρχή

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