React op een statische HTML pagina
Home

React op een statische HTML pagina

React op een statische HTML pagina

Dit is de manier die het meest gelijkt op de manier waarop je JQuery installeert. Het is niet de manier die wij verder zullen gebruiken. Maar het laat je wel toe om klein met React te beginnen en de smaak ervan te pakken te krijgen. We beginnen met een statische HTML pagina met de naam index.html en we laden drie CDN's in het head element: React, React DOM en Babel. We voegen een div element toe met een id ingesteld op root en we een script tag om onze JavaScript code in te plaatsen.

Statisch HTML bestand (zie ook Add React in One Minute)

  1. index.html
    We maken een submap in de root van onze workspace met de naam static-react en daarin maken we de index.html pagina. 
    <!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React installen in een Static HTML file</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<body>
    <div id="root"></div>
    <script>
        // je eigen React code komt hier
    </script>   
</body>
</html>
    1. We laden de nieuwste stabiele versies van de bibliotheken in. Voor de allerlaatste versies:
      1. React - de React Top-Level API
      2. ReactDOM - voegt DOM-specifieke methoden toe
    2. Het startpunt voor onze app is het div#root-element. Dat het div element een id met de naam root heeft, is een conventie.
    3. Dit is de volledige template:
  2. React knooppunten

    De bouwsteen van een React-component is een React-knooppunt (React-node). Een React-knooppunt is:

    een lichte, stateloze, onveranderlijke, virtuele weergave van een DOM-knooppunt.

    React-knooppunten zijn geen echte DOM-knooppunten, HTML-elementknooppunten, maar een weergave van een potentiële DOM-knoop. Deze weergave wordt beschouwd als de virtuele DOM.

    Reactieknooppunten kan je maken met JSX of JavaScript. We bekijken eerst hoe je React-knooppunten maakt met alleen JavaScript. Nog geen JSX. M.i. moet je eerst leren wat JSX verbergt om JSX te begrijpen.

  3. React knooppunten maken
    We leren eerst hoe React-knooppunten maakt zonder JSX. Je gebruikt daarvoor de methode createElement van het React object: React.createElement(type, props, children). Deze methode aanvaardt 3 argumenten:
    1. type (string | React.createClass()): kan een tekenreeks zijn die een HTML-element (of een aangepast HTML-element) of instantie van een React-component vertegenwoordigt (d.w.z. een instantie van React.createClass())
    2. props (null | object): kan null zijn of een object dat attributen/props en waarden bevat
    3. children (null | string | React.createClass() | React.createElement()): children kunnen null zijn, een tekenreeks die wordt omgezet in een tekstknooppunt, een instantie van React.createClass() of React.createElement()
  4. Voorbeelden
    1. Een h1 knooppunt creëren (static-react/h1.html)
      Bestaat altijd uit twee stappen:
      1. maken van een React-knooppunt: 
        let welcome = React.createElement('h1',{style:{color:"red"}},`Welcome to react world`)
      2. toevoegen aan en weergeven in de DOM: 
        ReactDOM.render(welcome,document.querySelector('#root'))
      3. Volledige code: 
        <!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snel starten met React</title>
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="js/helpers.js"></script>
    <script src="js/marvel-characters.js"></script>
    <script>
        let welcome = React.createElement('h1', { style: { color: "red" } }, `Beginnen met React`)
    </script>
</head>
<body>
    <div id="root"></div>
    <script>
        ReactDOM.render(welcome, document.querySelector('#root'))
    </script>
</body>
</html>
    2. Een React knooppunt met kinderen
      We maken een pagina static-react/marvel.html met een h1 titel met daarin de tekst Marvel personnages. Daaronder een div met daarin voor elk personnage een div en een img. Let erop:
      1. we gaan vele keren de methode React.createElement moeten gebruiken, we maken voor het gemak een afkorting met de naam e
      2. we definiëren de css regels niet volgens de css syntax maar als objecten
      3. we geven het style attribuut als een object door aan de React.createElement methode
      4. hier volgt de volledige static/marvel.html pagina: 
        <!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snel starten met React</title>
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script>
        // we gaan veel keer createElement moeten gebruiken
        // we maken een afkorting
        const e = React.createElement;
        const marvelListStyle = {
            color: 'green',
            display: 'flex'
        };
        const marvelItemStyle = {
            color: 'white',
            backgroundColor: 'red',
            textAlign: 'center',
            width: '15em',
            fontSize: '2em;',
            fontFamily: 'Arial',

                    paddingTop: '0.5em'
        };
        const marvelImageStyle = {
            color: 'blue',
            width: '15em'
            paddingTop: '0.5em' 
        };
        let marvel = e('div', null,
            e('h1', { style: { color: "red" } }, `Marvel Personnages`),
            e('div', { style: marvelListStyle },
                e('div', { style: marvelItemStyle }, 'Avengers', 
                    e('img', {src: 'http://i.annihil.us/u/prod/marvel/i/mg/0/03/523219b086a17.jpg', 
                        style: marvelImageStyle})),
                e('div', { style: marvelItemStyle }, 'Hulk', 
                    e('img', {src: 'http://i.annihil.us/u/prod/marvel/i/mg/5/a0/538615ca33ab0.jpg', 
                        style: marvelImageStyle})),
                e('div', { style: marvelItemStyle }, 'Spider-Man', 
                    e('img', {src: 'http://i.annihil.us/u/prod/marvel/i/mg/3/50/526548a343e4b.jpg', 
                        style: marvelImageStyle})),
                e('div', { style: marvelItemStyle }, 'Spider-Girl', 
                    e('img', {src: 'http://i.annihil.us/u/prod/marvel/i/mg/1/70/4c003adccbe4f.jpg', 
                        style: marvelImageStyle})),
                e('div', { style: marvelItemStyle }, 'X-Man', 
                    e('img', {src: 'http://i.annihil.us/u/prod/marvel/i/mg/d/10/535febd73f84f.jpg', 
                        style: marvelImageStyle}))
            )
        );
    </script>
</head>
<body>
    <div id="root"></div>
    <script>
        ReactDOM.render(marvel, document.querySelector('#root'))
    </script>
</body>
</html>
      5. Met dit als resultaat:
        marvel-React-knooppunten maken
        marvel-React-knooppunten maken
  5. We beginnen met een codeblok in React te schrijven. We gebruiken ES6-klassen om een React-component te maken met de naam App. In de React-component roepen we methode render op. Dat is de enige methode die we nodig hebben om DOM knopen te weer te geven. Deze methode bevat een return statement die de DOM elementen retourneert. We beginnen met zeer eenvoudige code: 
    <script>
    // je eigen React code komt hier
    class App extends React.Component {
        render() {
            return React.createElement('h1', {id:'title'}, 'Beginnen met React');
        }
    }
</script>
  7. We roepen de ReactDOM render methode op. Voor eerste argument creëren we een React element op basis van de App klasse. Als tweede argument geven we het div element met de id ingesteld op root mee. De render methode geeft in dat element de React component weer die we net gecreëerd hebben: 
    ReactDOM.render(React.createElement(App), document.getElementById('root'));
  8. De volledige index.html pagina: 
    <!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snel starten met React</title>
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script>
        class App extends React.Component {
            render() {
                return React.createElement('h1', {id:'title'}, 'Beginnen met React');
            }
        }
    </script>
</head>
<body>
    <div id="root"></div>
    <script>
         ReactDOM.render(React.createElement(App), document.getElementById('root'));
    </script>
</body>
</html>
  9. Als je die pagina in de browser laadt, zie je dat het h1 element in de DOM wordt weergegeven:
    React in Static HTML File
    React in Static HTML File
  10. props
    1. Een props-object bevat argumenten die worden doorgegeven aan React-componenten. We geven die als tweede argument mee in de React.createElement methode als een object. We geven de titel van de webpagina mee: 
      const domContainer = document.querySelector('#marvel-characters');
ReactDOM.render(React.createElement(MarvelCharacters,
    { title: 'Marvel personnages' }), domContainer);

      We kunnen dat props object gebruiken in de React component. In de render methode van de component bijvoorbeeld:

      render() {
   return  React.createElement(
        'h2',
        { 'id' : 'subtitle' },
        this.props.title
        );;

  11. state

    1. Daarnaast beschikt elke React component over een state object. Daarin kunnen we gegevens opslaan die in de component gebruikt worden. Als het state object gewijzigd wordt, wordt automatisch de render methode van de component uitgevoerd en worden de wijzigingen getoond:

      1. React-componenten hebben een ingebouwd state-object.
      2. in het state-object worden eigenschapswaarden opgeslagen die bij de component horen.
      3. wanneer het state-object verandert, wordt het onderdeel opnieuw weergegeven (re-rendered).
    2. We maken van een React component in het bestand met de naam js/marvel-characters.js:
      1. de constructor initialiseert de loaded key van het state object op false;
      2. indien de waarde van de loaded key in het state object false is, retourneert de render methode een knop;
      3. het onclick event van de geretourneerde knop bevat een functie die het json bestand zal inlezen en de ingelezen tekst toekent aan de list key in het state object; de waarde van de loaded key wordt ingesteld op false;
      4. de render methode gaat nu een pre element met daarin de tekst uit het json bestand weergeven; 
        'use strict';
const e = React.createElement;
class MarvelCharacters extends React.Component {
    constructor(props) {
      super(props);
      this.state = { 
         loaded: false
      };
    }
    loaded(response) {
        this.setState({ list: response, loaded: true })
    }
    render() {
      if (this.state.loaded) {
        return  e(
            'pre',
            { 'id' : 'response' },
            this.state.list
          );;
      }
      return e(
        'button',
        { onClick: () => loadJSON('data/marvel-top-characters.json', response => this.loaded(response)) },
        'Show Marvel characters in json'
      );
    }
  }
    3. We maken een webpagina die het volgende doet:
      1. initieel bevat de React component een knop met de tekst Toon Marvel personnages in JSON tekst.
      2. als je op de knop drukt, wordt json bestand met gegevens over Marvel karakters ingelezen en bevat de React component alleen nog een pre met daarin de tekst van het geladen json bestand;
    4. Dan passen we de index.html aan:
      2. bij het laden van de index.html pagina laden we de React component en zal de constructor dus uitgevoerd worden;

JI
2020-04-17 09:05:13