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.

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 JavaScript in de HTML moet worden gezien 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.

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

}

export default App;

In deze functie staat een verwijzing naar een CSS class. Laten we deze toevoegen.

Maak een nieuwe file App.css in dezelfde folder als de App.js staat en zet daar het volgende in:

.App {
  text-align: center;
  color: red;
}

Voeg nu de regel: import './App.css'; toe boven de functie App() in App.js

Dynamische CSS in JSX

We gaan nu een knop maken waarmee we de kleur van de tekst (myString) kunnen aanpassen.

Allereerst maken we een button. Zet tussen regel 9 en 10 de volgende code om een knop te laten zien.

<button onClick={() => this.changeColor() } >Change Color</button>

 

State

In React kun je gegevens bewaren door deze op te slaan in een speciale variabele, de state variabele. Om deze te gebruiken is het makkelijker om onze functie om te zetten in een class. Een class heeft in React twee belangrijke methods (functies); constructor() en render().

De constructor wordt eenmalig aan geroepen en hierin kun je state variabelen initialiseren.

In de render() method bepaald de output gemaakt. Je kunt dit vergelijken met de view (van MVC).

We gaan de bovenstaande functie omzetten naar het object model van React.

import './App.css';

import React from 'react';

class App extends React.Component {
  
  constructor(props) {
    super(props);
  }
  
  getNumbers() {
    var myString = "";
    for (var i=0; i < 10; i++) {
      myString = myString + String(i) + ", ";
    }
  }
  
  render() {
    return (
      <div className="App">
        {myString}
      </div>
    );
  }

}

export default App;

Kijk goed hoe je vanuit de render() methode de getNumber methode aanroept. Dat gaat via een XML tag!

Als je deze code runt dan werkt die niet :( Dat komt omdat myString geen state variabele is. myString is alleen bekend in getNumers() en niet daarbuiten!

In de volgende stap hebben we van myString een state variabele gemaakt.

In de constructor method (deze wordt één keer aangeroepen!) wordt de state variabele gedeclareerd en daarna word de method getNumbers() aangeroepen. Met hetNumbers wordt de myString gevuld.

 

import './App.css';

import React from 'react';

class App extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      myString: ''
    }
    this.getNumbers();
  }
  
  getNumbers() {
    var myString = "";
    for (var i=0; i < 10; i++) {
      this.state.myString = this.state.myString + String(i) + ", ";
    }
  }
  
  render() {
    return (
      <div className="App">
        {this.state.myString}
      </div>
    );
  }

}

export default App;