React - Knooppunten
Home

React - Knooppunten

React - Knooppunten

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.

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.

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

Paragraaf

JI
2020-04-15 13:38:43