JSX: επέκταση JavaScript και παραδείγματα χρήσης

Τι είναι το JSX;

JSX (JavaScript XML) — μια επέκταση σύνταξης για τη JavaScript, που παρουσιάστηκε για πρώτη φορά στο React το 2013. Επιτρέπει στους προγραμματιστές να περιγράφουν τη δομή της διεπαφής χρήστη με δηλωτικό τρόπο, συνδυάζοντας σήμανση και λογική σε ένα αρχείο.

Πριν από την εμφάνιση του JSX, οι προγραμματιστές χρησιμοποιούσαν πρότυπα κειμένου (Mustache, Handlebars) ή δημιουργούσαν χειροκίνητα στοιχεία DOM μέσω document.createElement. Και οι δύο προσεγγίσεις είχαν μειονεκτήματα: τα πρότυπα κειμένου δεν ελέγχονταν ως προς τους τύπους και η χειροκίνητη δημιουργία DOM ήταν δυσκίνητη και επιρρεπής σε σφάλματα.

Το React επέλεξε έναν διαφορετικό δρόμο — την ενσωμάτωση σήμανσης απευθείας στον κώδικα. Αυτή η απόφαση προκάλεσε συζήτηση στην κοινότητα, αλλά με την πάροδο του χρόνου έγινε πρότυπο. Σήμερα το JSX χρησιμοποιείται όχι μόνο στο React, αλλά και σε SolidJS, Preact, Qwik ακόμα και στο Vue μέσω προσθηκών.

Βασική σύνταξη JSX

Ένα στοιχείο JSX μοιάζει με ετικέτα HTML, αλλά ενσωματώνεται απευθείας στη JavaScript. Κάθε στοιχείο μεταγλωττίζεται σε μια κλήση React.createElement με τρία ορίσματα: τον τύπο στοιχείου, το αντικείμενο props και τα θυγατρικά στοιχεία. Ένα ριζικό στοιχείο — υποχρεωτικός κανόνας: μια έκφραση JSX πρέπει να επιστρέφει ένα γονικό στοιχείο ή fragment.

import React from 'react';

// Βασικό JSX - ένα ριζικό στοιχείο
const element = (
  <div className="app">
    <h1>Hello, World!</h1>
    <p>Welcome to React</p>
  </div>
);

Fragments για ομαδοποίηση

Όταν δεν χρειάζεται ένας επιπλέον κόμβος DOM, χρησιμοποιήστε React.Fragment ή τη σύντομη σύνταξη <></>. Τα fragments δεν δημιουργούν πραγματικό στοιχείο DOM, αλλά μόνο ομαδοποιούν τα θυγατρικά στοιχεία. Αυτό είναι ιδιαίτερα χρήσιμο σε πίνακες και λίστες, όπου ένα επιπλέον περίβλημα θα διατάρασσε τη δομή HTML.

function Columns() {
  return (
    <>
      <td>First</td>
      <td>Second</td>
    </>
  );
}

Εκφράσεις και μεταβλητές στο JSX

Οποιαδήποτε έκφραση JavaScript ενσωματώνεται στο JSX μέσω αγκύλων { }. Μέσα μπορούν να χρησιμοποιηθούν μεταβλητές, κλήσεις συναρτήσεων, τριαδικοί τελεστές και μέθοδοι πινάκων. Υπό όρους απόδοση πραγματοποιείται μέσω τριαδικού τελεστή ή λογικού AND.

function Greeting({ name, isLoggedIn }) {
  const items = ['Red', 'Green', 'Blue'];

  return (
    <div>
      {/* Expression with variable */}
      <h1>Hello, {name}</h1>

      {/* Conditional rendering */}
      {isLoggedIn ?
        <p>Welcome back!</p :
        <button>Login</button>
      }

      {/* Render array */}
      <ul>
        {items.map(item =>
          <li key={item}>{item}</li>
        )}
      </ul>
    </div>
  );
}

Ο βασικός περιορισμός — μέσα στις αγκύλες μπορούν να χρησιμοποιηθούν μόνο εκφράσεις, όχι εντολές. Δεν μπορούν να χρησιμοποιηθούν if/else, for, switch — μόνο τριαδικός τελεστής, λογικοί τελεστές και μέθοδοι πινάκων. Οι κλήσεις συναρτήσεων, συμπεριλαμβανομένων των συναρτήσεων βέλους, επιτρέπονται.

Διαφορές μεταξύ JSX και HTML

Το JSX μοιάζει οπτικά με HTML, αλλά έχει θεμελιώδεις διαφορές. Χαρακτηριστικά γράφονται σε camelCase — className αντί για class, onClick αντί για onclick, tabIndex αντί για tabindex. Αυτό συμβαίνει επειδή το JSX μεταγλωττίζεται σε JavaScript, όπου η παύλα στο όνομα ιδιότητας δεν επιτρέπεται.

Άλλη μια σημαντική διαφορά — αυτο-κλειόμενες ετικέτες. Στην HTML, ορισμένες ετικέτες (br, hr, input) μπορεί να παραμείνουν ανοιχτές. Στο JSX, όλες οι αυτο-κλειόμενες ετικέτες πρέπει να έχουν κλείσιμο κάθετο: <br />, <input />. Τα ονόματα χαρακτηριστικών SVG μετατρέπονται επίσης σε camelCase: strokeWidth, fillOpacity.

Πώς μεταγλωττίζεται το JSX σε JavaScript

Τα προγράμματα περιήγησης δεν κατανοούν άμεσα το JSX. Πριν από την εκτέλεση, ο κώδικας JSX περνά από έναν μεταγλωττιστή — Babel, TypeScript ή esbuild. Κάθε στοιχείο JSX μετατρέπεται σε κλήση createElement ή jsx/runtime.

Μετασχηματισμός μέσω Babel

// Αρχικό JSX
const element = <h1 className="title">Hello</h1>;

// Μετά τη μεταγλώττιση
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

Από το React 17, εμφανίστηκε ένας νέος μετασχηματισμός JSX που δεν απαιτεί εισαγωγή του React. Αυτόματη εισαγωγή jsx-runtime επιτρέπει τη σύνταξη στοιχείων χωρίς import React from 'react'. Το Babel και το TypeScript υποστηρίζουν αυτόν τον μετασχηματισμό μέσω της ρύθμισης {"runtime": "automatic"}.

JSX εκτός React: Solid, Preact, Vue

Αν και το JSX συνδέεται με το React, άλλα πλαίσια το χρησιμοποιούν επίσης. SolidJS χρησιμοποιεί JSX με μεταγλώττιση σε πραγματικούς κόμβους DOM, χωρίς Virtual DOM. Preact — μια ελαφριά εναλλακτική για το React με πλήρη υποστήριξη JSX. Vue υποστηρίζει JSX μέσω @vue/babel-plugin-jsx, αν και το κύριο πρότυπό του είναι το template.

Η βασική διαφορά — σημασιολογία εκφράσεων. Στο React, οι εκφράσεις JSX εκτελούνται σε κάθε απόδοση. Στο SolidJS, το JSX μεταγλωττίζεται μία φορά και οι ενημερώσεις παρακολουθούνται μέσω σημάτων. Αυτό επηρεάζει την απόδοση: το SolidJS δεν απαιτεί Virtual DOM και reconciliation, επομένως η απόδοση JSX είναι ταχύτερη.

Στο TypeScript, το JSX υποστηρίζεται σε επίπεδο γλώσσας. Τα αρχεία με επέκταση .tsx επεξεργάζονται αυτόματα τη σύνταξη JSX. Τυποποίηση props — ένα από τα κύρια πλεονεκτήματα του TypeScript + JSX: το IDE προτείνει αναμενόμενα χαρακτηριστικά, τύπους callback και υποχρεωτικότητα props.

Βέλτιστες πρακτικές εργασίας με JSX

Γράψτε κώδικα JSX που είναι εύκολο να διαβαστεί και να συντηρηθεί. Βγάλτε σύνθετες εκφράσεις σε ξεχωριστές μεταβλητές ή συναρτήσεις — αυτό βελτιώνει την αναγνωσιμότητα και επιτρέπει τον έλεγχο της λογικής ξεχωριστά από τη σήμανση. Χρησιμοποιήστε fragments αντί για περιττά περιτυλίγματα div.

Ο κανόνας εσοχής — τηρείτε τις εσοχές για ένθετα στοιχεία. Κάθε επίπεδο ένθεσης — ένα επίπεδο εσοχής. Η ετικέτα κλεισίματος πρέπει να είναι στο επίπεδο της ετικέτας ανοίγματος. Για μεγάλα χαρακτηριστικά, χρησιμοποιήστε αλλαγή γραμμής.

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