De afkorting JSX staat voor Javascript XML, waarmee een XML syntax toegevoegd wordt aan Javascript. Het gebruik van JSX in React is niet verplicht, maar is wel aan te raden als het schrijven van HTML een aanzienlijke rol speelt in jouw project. Met JSX kan je als (front-end) ontwikkelaar de herkenbare schrijfwijze en structuur van HTML gebruiken binnen React. JSX ziet er dan ook uit als HTML, maar dit is het niet. In deze blog geef ik een introductie op het gebruik en de mogelijkheden van JSX en licht ik toe waarin het verschilt van HTML.

JSX is syntactic sugar

JSX moet door een compiler zoals Babel omgezet worden naar bruikbare HTML voor de browser. Als je het commando create-react-app hebt gebruikt om een nieuw React project te starten, dan is Babel al automatisch voor je geconfigureerd. Anders zal je dit zelf moeten configureren.

Elke JSX-methode roept achter de schermen de React.createElement() functie aan. Dit is de pure Javascript oplossing vanuit React om elementen aan de DOM toe te voegen. Meer info en documentatie over de React.createElement() functie zelf is hier te vinden.

Herhaaldelijk gebruik van React.createElement() voor het aanmaken van DOM nodes maakt de code langer en vereist wat meer schrijfwerk. Daarnaast neemt de leesbaarheid snel af naarmate de hoeveelheid aan HTML toeneemt.

Een klein voorbeeld om het verschil duidelijk te maken:

Gebruik van React.createElement()

ReactDOM.render(
  React.createElement('div', { className: 'component-x' },
    React.createElement('h1', {}, 'My heading'),
    React.createElement('p', {}, 'Lorem ipsum dolor sit amet.')
  ),
  document.getElementById(app)
)

Gebruik van JSX

ReactDOM.render(
  <div className="component-x">
    <h1>My heading</h1>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>,
  document.getElementById('app)
)

De syntax van JSX is korter en overzichtelijker, vooral omdat de structuur ervan hetzelfde is als die van HTML. Vandaar dat JSX ook wel syntactic sugar genoemd wordt en het gebruik ervan erg populair is bij React ontwikkelaars.

Waarin verschilt JSX van HTML?

Ondanks de overeenkomsten in syntax zijn er een paar belangrijke verschillen ten opzichte van HTML:

Gebruik className in plaats van class
Het class keyword is al gereserveerd binnen Javascript zelf, vandaar dat React er geen gebruik van kan maken om classes toe te voegen aan de HTML. Gebruik daarom className in React:

export const productCard = () => {
  return (
    <div className="product-card">
      <h4>Product Title</h4>
    </div>
  )
}

Verpak siblings in een wrapper element
JSX-tags kunnen children bevatten, maar geen siblings. Dat komt omdat React in de return statement maar één waarde terug kan geven. Siblings moeten dus verpakt worden binnen een wrapper.

Hier kan een wrapper div omheen geplaatst worden, maar als deze div functioneel niets toevoegt aan het component dan is het beter om <Fragment> te gebruiken. Een Fragment voorkomt dat een wrapper-element zoals een div onnodig wordt toegevoegd aan de DOM. Deze oplossing is in React 16.2.0+ beschikbaar gemaakt en vanaf Babel 7.0 kan Fragment ook worden afgekort tot een lege tag <>:

export const myComponent = () => {
  return (
    <>
      <div>Sibling A</div>
      <div>Sibling B</div>
    </>
  )
}

Sluit alle tags in JSX
Alle tags in JSX moeten afgesloten worden. HTML elementen en React componenten die geen children bevatten kunnen direct afgesloten worden met een slash. Zie het voorbeeld hieronder, waar het PageHeader component gebruikt wordt. React componenten beginnen altijd met een hoofdletter.

class App extends Component {
  render() {
    return(
      <>
        <Pageheader />
        <img scr="images/logo-indivirtual.svg" alt="logo" />
      </>
    )
  }
}

Schrijf eigenschappen en methoden in camelCase
Een ander klein verschil in syntax is dat methoden zoals event handling in camelCase geschreven worden in plaats van lowercase zoals in HTML. Ook is het gebruikelijk om hier een functie mee te geven in plaats van een string.

onchange = onChange
onclick = onClick
tabindex = tabIndex

export class Button extends Component {

  handleClick(e) {
    e.preventDefault()
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click Here</button>
    )
  }
}

Conditional Rendering

Omdat JSX zich altijd in een Javascript bestand bevindt, kan de output van de HTML bepaald worden op basis van logica. Dit wordt conditional rendering genoemd: de HTML is dan afhankelijk van de state waarin de React applicatie zich op dat moment bevindt.

Om deze logica aan te brengen is het gebruik van de ternary operator een waardevol hulpmiddel. Daarmee kunnen if/else statements in Javascript kort en bondig worden opgeschreven.

In onderstaand voorbeeld bepaalt de ternary operator de class van de div aan de hand van de state. Zodra de functie fetchData() de data heeft opgehaald wordt eerst de state geüpdatet en daarna ook de class van de div.

export class myComponent extends Component {

  state = {
    isLoading: true
  }

  // a function might update the state:
  // fetchData = () => {
  //   // 1. fetch data
  //   // 2. data is collected
  //   // 3. update the state
  //
  //   this.setState({
  //     isLoading: false
  //   })
  // }

  render() {
    return (
      <div className={this.state.isLoading ? "is-loading" : "is-loaded"}>
        <p>Lorem ipsum dolor sit amet</p>
      </div>
    )
  }
}

Javascript in JSX

Tenslotte wordt ook alle Javascript binnen curly braces geaccepteerd in JSX:

const headingText = 'This is my heading text'
const paragraphText = 'Lorem ipsum dolor sit amet.'

ReactDOM.render(
  <>
    <h1>{headingText}</h1>
    <p>{paragraphText}</p>
  <>,
  document.getElementById('app')
)

Kortom: alles wat valide Javascript is, zal ook werken in JSX.

JSX is een waardevolle tool om elementen aan de DOM toe te voegen. De snelheid van React applicaties wordt voor een groot deel bepaald door het zo efficiënt mogelijk updaten van deze DOM. React gebruikt daarvoor de Virtual DOM, een concept dat zij zelf hebben ontwikkeld. Wil je meer weten over de Virtual DOM van React? Lees dan in dit artikel hoe dat precies werkt.

De syntax van JSX en HTML hebben veel overeenkomsten. Door JSX te gebruiken breng je een duidelijke structuur aan in de code van React componenten. Als je al wat kennis hebt van HTML, dan is het idee van JSX eenvoudig tot je te nemen. Daarbij heb je als ontwikkelaar ook volledig de kracht van Javascript tot je beschikking.