#2 Components

Map en Barcharts

In mijn App.js bestand roep ik een aantal components aan. Deze components staan in verbinding met andere stukken react code, die een speciaal doel hebben zoals in dit geval een map of barchart renderen. Met deze code roep ik de components aan in mijn App.js:

//This code is at the top of App.js
import React from 'react';
import Barchart from './charts/barchart';
import Mapchart from './charts/mapchart';

//This is in the return of App.js
<Barchart />
<Mapchart />

Dit is de manier waarop React components importeert en gebruikt. Dit kan je meerdere lagen diep laten gaan, maar dat hangt af van de complexiteit van je paginastructuur. Door components te gebruiken in react creëer je meer overzicht. Niet alles staat nu op 1 plek, maar staat verdeeld over verschillende bestanden die aan elkaar gelinkt zijn.

Barchart

Om vervolgens de barchart te kunnen laten zien heb ik weer een javascript document nodig, waarin in door middel van react JSX return. React werkt door middel van 1 functie die een return bevat. Deze functie moet worden geëxporteerd door middel van een export default, en de naam van de functie moet beginnen met een hoofdletter, want anders wordt het niet gezien als een component maar als een reguliere functie. Binnen de geëxporteerde functie zit in de return een stuk JSX, wat later wordt gerenderd op de pagina. Dit wordt met de volgende code gedaan:

import React, { useEffect } from 'react'; //imports react

function Barchart() {
    return ( //returns JSX
        <svg id='bar'>
        </svg>
    )
}

export default Barchart; //gets imported at app.js

Door deze code uit te voeren hebben we een svg gerenderd met een id 'bar', maar hier zit nog geen content in. De code voor de barchart heb ik al eerder gemaakt door middel van d3 en moet ik nu toevoegen aan mijn svg. Hoe ik dit heb omgezet staat verder uitgelegd in #3 D3 naar react.

import React, { useEffect } from 'react';
import loadBar from './data/bar'

function Barchart() {

    useEffect(() => {
        loadBar();
    }, []);

    return (
        <svg id='bar'>
        </svg>
    )
}

export default Barchart;

Ik heb alle code van d3 in 1 functie geimporteerd, die ik vervolgens door middel van een hook aanroep. De hook die ik hiervoor gebruik is useEffect, en deze hook lijkt op componentDidMount en componentDidUpdate. Code die in de useEffect hook staat wordt pas uitgevoerd nadat de reactDOM is geüpdatet. Wat dit betekent is dat de loadBar() wordt uitgevoerd nadat de reactDOM is aangepast, en D3 het svg element dus kan selecteren. Wanneer ik dit niet doe bestaat de svg volgens D3 nog niet, omdat het nog niet is gereturnd en dus niet in de reactDOM te vinden is.

Mapchart

De mapchart heb ik op dezelfde manier uitgevoerd als mijn barchart. Het enige verschil tussen deze twee is dat ik de D3 code in meerdere functies heb opgesplitst. Dit heb ik gedaan om mijn code wat overzichtelijker te houden. Ook staan er in het svg element nog een paar g elementen, dit heb ik gedaan voor mijn D3, omdat mijn code die id's selecteert. Dit is de code die ik gebruik om mijn map te renderen:

import React, { useEffect } from 'react';
import loadMap from './data/map';
import loadCircles from './data/circles';

function Mapchart() {

    useEffect(() => {
        loadMap();
        loadCircles();
}, []);

    return (
        <svg id='map'>
            <g id='paths'></g>
            <g id='circles'></g>
        </svg>
    )
}

export default Mapchart;