react intro

componenten:


via class of via functie;
Class heeft mijn voorkeur inzake uitbreiding.
Component heeft state en kan props verwerken

een class overerft van React.Component
Er is altijd een constructor die props kan ontvangen en in de state zetten.
wanneer het component door
de class heeft altijd een render methode om de html te genereren

vervolgens zijn er 2 pagecycle methodes
1. componentDidMount
    wordt uitgevoerd als het component gerenderd is
2. componentWillUnmount
    wordt uitgevoerd las het component van de DOM is verwijderd

Om data in de state zetten roep je de functie setState aan.

Om een functie aan te roepen vanuit een event bijvoorbeeld moet je de functie in de class definieren als class field syntax;

boundFunction  = (e) => { e.preventDefault(); console.log('log...'); }

Om het component op de pagina te plaatsen wordt vanuit ReactDom.render (, htmlelement)
aangeroepen, als eerste wordt de constructor aangeroepen.

import React from 'react';

class MyButton extends React.Component {

constructor(props) {

super(props);

this.state = { name: props.name, href: props.href }; //only from constructor, otherwise use setState();

}

componentDidMount() {

//nadat het component gerenderd is

this.setState((state, props) =>

({ name: state.name + props.name })

);

}

componentWillUnmount() {

//wanneer is verwijderd van dom

}

handleClick = (e) => {

e.preventDefault();

this.setState( { name: e.toString()});

}

render() {

return (

<a href={this.state.href} onClick={this.handleClick}>{this.state.name}</a>

);

}

}

export default MyButton;

Nieuw app aanmaken:
npx create-react-app my-app