Van oudsher houden developers hun markup en logica gescheiden in aparte bestanden, waarbij ze HTML gebruiken voor structuur en CSS voor styling, en dan JavaScript schrijven om interacties en gegevensmanipulatie af te handelen.

Maar wat als er een manier was om deze technologieën te combineren, waardoor het ontwikkelingsproces wordt vereenvoudigd en het gemakkelijker wordt om complexe gebruikersinterfaces te bouwen? Dat is waar JSX om de hoek komt kijken.

In dit artikel leer je wat JSX is, hoe het werkt, en waarom het belangrijk is voor het bouwen van dynamische gebruikersinterfaces bij webontwikkeling.

Laten we deze revolutionaire technologie nader onderzoeken.

Wat is JSX?

JSX (JavaScript XML) is een syntax-extensie voor JavaScript waarmee developers HTML-achtige code kunnen schrijven in een JavaScript bestand. Het is ontwikkeld door Meta (voorheen Facebook).

De syntaxis van JSX lijkt op HTML, met openende en sluitende tags, attributen en nested elementen.

Je zou bijvoorbeeld de volgende JSX code kunnen schrijven om een eenvoudig heading-element te renderen:

const heading = <h1>Hello, JSX!</h1>;

Deze code lijkt op HTML, maar het is JavaScript. Het const kewyord maakt een nieuwe variabele genaamd heading, en de waarde van die variabele is het resultaat van de JSX expressie.

Hoe werkt JSX?

JSX wordt omgezet in gewoon JavaScript voordat het in de browser wordt uitgevoerd. Deze omzetting gebeurt met een tool die een transpiler heet. De populairste transpiler voor JSX is Babel.

Babel zet de JSX code om in een serie functie calls. Deze functie calls komen overeen met de HTML-achtige code die in JSX is geschreven. De browser kan dan de resulterende JavaScript code uitvoeren.

Bijvoorbeeld de volgende JSX code:

const element = <h1>Hello, world!</h1>;

wordt omgezet in de volgende JavaScript code:

const element = React.createElement("h1", null, "Hello, world!");

Met deze transformatie kunnen developers code schrijven in een syntaxis die vertrouwd en gemakkelijk te lezen is, terwijl ze toch profiteren van de kracht en flexibiliteit van JavaScript.

JSX en React

JSX is een integraal onderdeel van React, waardoor developers de markup en logica voor deze componenten in één bestand kunnen schrijven.

Hier is een eenvoudig voorbeeld van JSX code in een React component:

import React from 'react';

function Greet() {
  return <h1>Hello World!</h1>;
}

export default Greeting;

In dit voorbeeld heb je een functionele component met de naam Greet die een h1 element met een groetbericht rendert.

De React compiler zet deze code om in geoptimaliseerde JavaScript code die door de browser kan worden uitgevoerd, waardoor de component op het scherm kan worden weergegeven.

Dit is wat de React compiler van de component Greet zou maken:

import React from 'react'

function Greet() {
  return React.createElement("h1", {}, "Hello, World!")
}

In deze code is de JSX code omgezet in een React.createElement call die dezelfde structuur en inhoud creëert als de oorspronkelijke JSX code.

Dit is wat er achter de schermen gebeurt als React JSX code compileert, waardoor het door de browser kan worden uitgevoerd. De getransformeerde code kan echter minder leesbaar zijn dan de oorspronkelijke JSX code.

In React versie 17 is een nieuwe JSX transformatiefunctie geïntroduceerd, die automatisch speciale functies importeert uit de nieuwe inputpoints van het React pakket, waardoor developers JSX kunnen gebruiken zonder React bovenaan hun bestanden te hoeven importeren.

// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}

JavaScript expressies gebruiken met JSX

In JSX kunnen JavaScript expressies direct in de opmaak worden opgenomen om dynamisch inhoud te genereren. Hierdoor kunnen ontwikkelaars JavaScript-code gebruiken om waarden te berekenen, bewerkingen uit te voeren en inhoud voorwaardelijk weer te geven binnen hun JSX-componenten.

Dit voorbeeld laat zien hoe je twee JavaScript expressies in JSX kunt gebruiken:

import React from 'react';

const MyComponent = () => {
  const name = 'John';
  const age = 30;

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
      <p>Next year, you will be {age + 1} years old.</p>
      {age >= 18 && <p>You are an adult.</p>}
    </div>
  );
};

export default MyComponent;

In dit voorbeeld worden JavaScript expressies als {name}, {age}, {age + 1}, en {age >= 18 && <p>You are an adult.</p>} gebruikt om dynamisch inhoud weer te geven op basis van de waarden van de variabelen name en age.

CSS gebruiken met JSX

CSS kan op verschillende manieren worden toegepast op JSX componenten, zoals inline styles, aparte CSS bestanden, of CSS-in-JS bibliotheken. Inline styles worden direct in de JSX markup gedefinieerd met behulp van JavaScript objecten, terwijl aparte CSS bestanden of CSS-in-JS bibliotheken externe en modulaire styling van componenten mogelijk maken.

Dit voorbeeld laat zien hoe je inline styles – gedefinieerd met behulp van een JavaScript object – toepast op elementen met behulp van het style attribuut in JSX:

import React from 'react';

const MyComponent = () => {
  const styles = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px'
  };

  return (
    <div style={styles}>
      <h1>Hello, World!</h1>
      <p>This is a component with inline styles.</p>
    </div>
  );
};

export default MyComponent;

In dit voorbeeld worden CSS eigenschappen als backgroundColor, color, en padding ingesteld als key-value paren in het styles object, en hun waarden zijn strings die de CSS waarden weergeven.

Opmerking: Hoewel inline stijlen flexibiliteit en eenvoud bieden, wordt aanbevolen CSS klassen of CSS-in-JS bibliotheken te gebruiken voor complexere of herbruikbare stijlen in grotere toepassingen.

6 belangrijke JSX regels

Bij het schrijven van JSX-code zijn er bepaalde regels die je moet volgen om te zorgen dat het geldig en goed leesbaar is.

1. Geef altijd een enkel hoofdelement terug

In JSX moet je altijd een enkel basiselement teruggeven. Dit betekent dat al je JSX code in een enkel buitenste element moet zitten. Dit is bijvoorbeeld geldige JSX:

return (
  <div>
    <h1>Hello World!</h1>
    <p>This is my first React component.</p>
  </div>
)

Maar dit niet omdat het twee elementen retourneert in plaats van één:

return (
  <h1>Hello World!</h1>
  <p>This is my first React component.</p>
)

Dit is belangrijk om in gedachten te houden bij het omzetten van HTML-codes naar JSX.

2. Gebruik className in plaats van class

In HTML gebruik je het class attribuut om een CSS klasse voor een element op te geven. In JSX moet je echter het className attribuut gebruiken. Bijvoorbeeld:

// Good
<div className="my-class">This element has a CSS class.</div>

// Bad
<div class="my-class">This element has a CSS class.</div>

Het gebruik van className in plaats van class is belangrijk en voorkomt naamgevingsconflicten omdat class een gereserveerd sleutelwoord is in JavaScript.

3. Gebruik accolades voor JavaScript expressies

Wanneer je een JavaScript expressie moet opnemen in je JSX code, moet je die omwikkelen met accolades {}. Dit kan voor van alles gebruikt worden, van het weergeven van dynamische gegevens tot het voorwaardelijk renderen van onderdelen. Hier is een voorbeeld:

// Good
<div>{myVariable}</div>

// Bad
<div>myVariable</div>

Je kunt ook wiskundige bewerkingen uitvoeren binnen de accolades, zoals:

<p>The total cost is {25*10}</p>

Ook kun je binnen je accolades voorwaardelijke uitspraken opzetten met behulp van ternary operators:

<h1>{(x) < 15 ? "Welcome" : "Goodbye"}</h1>

Hier is een beter voorbeeld met React component:

function Greeting() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <h1>Please log in.</h1>
      )}
    </div>
  );
}

In dit voorbeeld definiëren we een component Greet. De component gebruikt de ternary operator om voorwaardelijk een groet te renderen op basis van de waarde van isLoggedIn. Als isLoggedIn true is, rendert de component een h1 element met de tekst “Welcome back!”. Als isLoggedIn false is, geeft de component een h1 element weer met de tekst “Log in.”.

4. Gebruik camelCase voor de meeste dingen in JSX

Gebruik in JSX voor de meeste dingen camelCase, ook voor attributen, event handlers en namen van variabelen. Deze conventie is consistent met de JavaScript naamgevingsconventies en helpt de leesbaarheid te behouden.

Gebruik bijvoorbeeld code>onClick in plaats van onclick, en className in plaats van class.

// Good
<button onClick={handleClick} className="btn">Click me!</button>

// Bad
<button onclick={handle_click} class="btn">Click me!</button>

5. Sluit altijd je tags

In JSX moet je je tags altijd sluiten, zelfs als ze geen inhoud hebben. Bijvoorbeeld:

// Good
<div></div>

// Bad
<div/>

6. Gebruik zelfsluitende tags voor lege elementen

Als je een element hebt dat geen inhoud heeft, kun je een zelfsluitende tag gebruiken in plaats van een openende en sluitende tag. Bijvoorbeeld:

// Good
<img src="my-image.jpg" alt="My Image"/>

// Bad
<img src="my-image.jpg" alt="My Image"></img>

Waarom is JSX belangrijk voor webdevelopment?

JSX is belangrijk voor webdevelopment omdat:

  1. Het stelt developers in staat om gebruikersinterfaces te bouwen op een meer intuïtieve en vertrouwde manier.
  1. In plaats van de DOM rechtstreeks te manipuleren, kunnen developers JSX gebruiken om de structuur van hun gebruikersinterface te beschrijven op een manier die meer lijkt op het schrijven van HTML.
  1. Het maakt efficiëntere en flexibelere ontwikkeling mogelijk. Omdat JSX gewoon JavaScript is, kunnen developers alle mogelijkheden van JavaScript benutten om complexere en dynamische gebruikersinterfaces te maken.
  1. Het is een belangrijk onderdeel van de React bibliotheek, die een van de populairste keuzes is voor het bouwen van gebruikersinterfaces in de moderne webontwikkeling. Als je React wilt gebruiken, zul je JSX moeten leren.

Samenvatting

JSX is een syntaxisuitbreiding voor JavaScript waarmee developers HTML-achtige opmaak kunnen schrijven binnen een JavaScript bestand. Dit maakt het maken van dynamische en interactieve gebruikersinterfaces voor webapplicaties eenvoudiger.

Je hebt enkele regels geleerd die je moet volgen bij het gebruik van JSX – door deze regels te volgen kunnen we strakke, leesbare en onderhoudbare code schrijven die consistent is met de JavaScript naamgevingsconventies.