JSX en state variabelen 2

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

Verder leren we wat in React een state variabele is en hoe we daar mee kunnen werken.

Met dit alles maken we een kleine applicatie waarmee de CSS-stijl van een <div> kan worden aangepast door code.

Wat moet je weten?

Om deze les te kunnen volgen heb je kennis van:

Javascript (ES6), HTML, CSS en de REST API maken we in Yii, dus om deze API te maken is ook ervaring met Yii nodig.

ES6 versus ES5

React gebruikt JavaScript ES6 (ECMAScript 6). ES6 heeft op bepaalde punten een ander syntax dan ES5.

Kijk op

https://medium.com/recraftrelic/es5-vs-es6-with-example-code-9901fa0136fc

waarin het verschil tussen ES5 en ES6 met voorbeelden wordt uitgelegd.

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

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;

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;

Opdracht

Als je het voorbeeld goed hebt uitgewerkt dan worden de nummer 0 tot en met 9 afgedrukt.

Verander de code nu zodat je de nummer 1 to en met 10 afdrukt en dat de cijfers worden gescheiden door een spatie en druk jouw naam af op de regel onder de nummers.

De output ziet er dus bijvoorbeeld als volgt uit:

Inleveren

Een schermafdruk van jouw output.

Dynamische CSS in JSX

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

We volgen de volgende stappen:

Knop maken die functie aanroept.
state variabele maken waarin de kleur wordt vastgelegd.
In de functie de state variabele aanpassen.
We maken de stijlen in de css file.
in de render method de style/class aanpassen; is de state variabele red dan gebruiken we een stijl waarin de tekst in rood wordt afgedrukt en is de state variabele green dan gebruiken we een stijl die de tekst groen maakt.

Stap 1, Knop maken

Allereerst maken we een button. Zet deze na de regel waarop de nummers worden afgedrukt.

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

Als je de code nu runt dan krijg je een foutmelding als je op de knop drukt. Dat komt omdat de method changeColor() (nog) niet bestaat.

Stap 2, State variabele maken

voeg myColor toe als string aan de state variabele, let op dat je wel een komma gebruikt tussen de state variabelen.

this.state = {
   myString: '',
   myColor: 'red'
}

Stap 3, State variabele aanpassen in functie

Een state variabele mag en kan alleen worden aangepast met een (ingebouwde functie setState(). Dat werkt als volgt:

changeColor() {
  if ( this.state.myColor === "red") {
    this.setState({ 'myColor': 'green'} );
  } else {
    this.setState({ 'myColor': 'red'} );
  }
}

De setState() method is ingebouwd in React. De state variabelen staan in JSON formaat.

Wat deze functie doet is de variabele myColor op green zetten als die rood is, en op rood zetten als die groen is.

Stap 4, css aanpassen

In de css maken we twee extra classes.

.red {
  color: red;
}
.green {
  color: green;
}

Stap 5, class dynamisch maken

In de app.js file passen we nu de stijl aan.

De class wordt dus de waarde van de state variabele myColor. Deze is green of red. Deze stijlen heb je in de CSS aangemaakt in stap 4.

De class App is nu weg, laten we die ook nog even toevoegen.

<div className={"App "+this.state.myColor}>

Stel myColor is "red"dan staat er dus className="App red". Dit betekent dat CSS classes App en red worden toegepast.

Je kunt in de CSS file bij de classes red en green natuurlijk veel meer aanpassen. Probeer zelf maar!

Opdracht

Verander de method getNumbers().

getNumbers() {
  for (var i=0; i < 10; i++) {
    this.state.myString = this.state.myString + "*";
  }
}

Nu zie je 10 sterretjes in plaats van de nummers.

Maak nu een tweede button. Telkens als je op de button drukt laat je een extra sterretje zien. De string myString wordt dus telkens iets langer.

Quiz

Hoe zou je JSX het beste omschrijven?

Een soort combinatie van JavaScript ES5 en JavaScript ES6.
Een soort combinatie van JavaScript en HTML
Een soort combinatie tussen JavaScript en CSS
Een soort combinatie tussen JavaScript, HTML en CSS.

Hoe geef je een code blok weer in JSX?

Tussen [ en ] (rechte haken)
Tussen ( en ) (ronder haken)
Tussen { en } (curly brackets)
Tussen < en > (visgraten)

Wat doet de constructor method in een class?

Die wordt aangeroepen als je voor de eerste de class aanroept.
Die wordt aangeroepen elke keer als je een class aanroept.
Die moet je zelf aanroepen om variabelen te initialiseren.
Die wordt aangeroepen als je voldoende vrij geheugen hebt en wordt gebruikt als cache (code wordt daardoor sneller).

Als je in JSX iets wilt 'onthouden' dan gebruik je wat?

De constructor method.
Een JSON array.
Een variabele.
De state variabele.

In JSX is de HTML syntax helemaal hetzelfde als 'gewone' HTML zoals we dat gewend zijn.

Zeker
Zeker maar je mag alleen hoofdletters gebruiken
Zeker maar er zijn kleine verschillen class wordt bijvoorbeeld className
Zeker alleen zet je HTML blokken tussen { en } (curly brackets).

Wat doet de render method in een JSX class?

Die houd zich bezig met het omzetten van code naar HTML
Die wordt standaard uitgevoerd als je de class aanroept en in de regel wordt daar de output gedefinieerd (soort view uit MVC).
Daarin wordt de HTML (opmaak) gecodeerd.
Daarin wordt de data uit bijvoorbeeld de database opgehaald. De data wordt dan vervolgens gestyled via de styleName class.