Comment configurer les props d'un composant React par défaut ?
Les composants sont le cœur du fonctionnement de la librairie React. C'est en les utilisant et en les assemblant entre eux que l'on crée une application. Ce principe de composants permet d'avoir une grande modularité et de multiples réutilisations possibles pour un morceau de code. Lorsque l'on crée un composant, il est possible d'attribuer une valeur par défaut aux propriétés.
Pour créer un composant, la classe doit hériter de la classe "React.Component". À l'intérieur du composant, vous devez avoir au minimum la méthode "render()". C'est cette méthode qui affiche le rendu du composant dans votre application.
class AjoutAdresseComposant extends React.Component {
render() {
let {adresse, codePostal, ville} = this.props
return (
<div>Votre adresse est : {adresse} {codePostal} {ville}</div>
)
}
}
Les propriétés et les valeurs par défaut sont ensuite définies avec des méthodes situées en dehors de la classe. La méthode "propTypes" définit les propriétés du composant tandis que la méthode "defaultProps" permet d'attribuer des valeurs par défaut aux propriétés de son choix.
AjoutAdresseComposant.propTypes = {
adresse: React.PropTypes.string.isRequired,
codePostal: React.PropTypes.string.isRequired,
ville: React.PropTypes.string.isRequired,
}
AjoutAdresseComposant.defaultProps = {
adresse: "1, rue du test",
codePostal: "75000",
ville: "Paris"
}
Pour afficher ce test, il ne manque que deux méthodes à ajouter. La méthode "contextTypes" définit le contexte d'affichage du composant. La méthode "ReactDom.render()" permet quant à elle d'afficher l'application. Ici on utilise une division avec comme identifiant "monApplication".
AjoutAdresseComposant.contextTypes = {
router: React.PropTypes.object.isRequired
}
ReactDOM.render(
<AjoutAdresseComposant/>, document.getElementById('monApplication')
)
Pour le code HTML, il suffit d'ajouter les balises nécessaires pour ajouter les scripts de React et de l'extenstion "React-dom", puis la division qui contient l'application.
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <div id="monApplication"></div>