JSX

In REACT maken we gebruik van de 'taal' JSX. In deze les leren we wat JSX is.

JSX

JSX staat voor JavaScript XML en is een mengeling van JavaScript en XML. XML is niets meer dan een formaat waarbij je telkens <begin>..</begin> gebruik. HTML-tags zijn eigenlijk XML tags. De XML tags in JSX lijken heel veel op HTML maar zijn hier en daar net even iets anders.

Een voorbeeld van JSX staat hieronder. Plaats deze code in de app.js die je tijdens de installatie hebt gemaakt.

import React from 'react';

function App() {
  return (
    <div>
      <h1 className="greeting">>Hello!</h1>
      <h2>Good to see you here.</h2>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
}

export default App;

Dit is bijna allemaal 'gewone' HTML. Alleen class is geen class, maar heet in JSX className.

Verder zien we dat tussen de HTML JavaScript staat. Dit is zo omdat deze JavasciptJavaScript in de HTML moet worden geizengezien als tekst staat deze tussen { }.

Kijk naar de volgende code die in app.js staat en probeer te voorspellen wat de code doet, voer het daarna uit en kijk of je begrijpt wat er gebeurt en waarom.

import './App.css';

function App() {
  
  var myString = "";
  for (var i=0; i < 10; i++) {
    myString = myString + String(i) + ", ";
  }
  
  return (
    <div className="App">
      {myString}
    </div>
  );

}

export default App;