__De afkorting [JSX](https://reactjs.org/docs/introducing-jsx.html) 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](https://babeljs.io/) omgezet worden naar bruikbare HTML voor de browser. Als je het commando [create-react-app](https://github.com/facebook/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](https://reactjs.org/docs/react-without-jsx.html) 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()*__ ```javascript 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*__ ```javascript ReactDOM.render(

My heading

Lorem ipsum dolor sit amet.

, 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: ```javascript export const productCard = () => { return (

Product Title

) } ``` __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 `````` 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 ```<>```: ```javascript export const myComponent = () => { return ( <>

Sibling A

Sibling B

) } ``` __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. ```javascript class App extends Component { render() { return( <> logo

) } } ``` __Schrijf eigenschappen en methoden in camelCase__ Een ander klein verschil in syntax is dat methoden zoals [event handling](https://reactjs.org/docs/handling-events.html) 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* ```javascript export class Button extends Component { handleClick(e) { e.preventDefault() } render() { return ( ) } } ``` # 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_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. ```javascript 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 (

Lorem ipsum dolor sit amet

) } } ``` # Javascript in JSX Tenslotte wordt ook alle Javascript binnen curly braces geaccepteerd in JSX: ```javascript const headingText = 'This is my heading text' const paragraphText = 'Lorem ipsum dolor sit amet.' ReactDOM.render( <>

{headingText}

{paragraphText}

<>, 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](https://blog.indivirtual.nl/the-virtual-dom) 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.

Articles by Pim Steketee

React & JSX: Een introductie