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 (
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
