React JS – Les composants<span class="wtr-time-wrap after-title"><span class="wtr-time-number">5</span> min read</span>
composants reactjs

React JS – Les composants5 min read

Les composants sont les blocs de base de ReactJS. Ils vous permettent de rendre du code HTML et d’incorporer de la logique et des événements dans votre site web.

Ils rendent le développement d’un site web beaucoup plus simple. Les composants séparent l’HTML du site en plusieurs petites parties réutilisables.

Généralement, on va chercher à éclater le site web au maximum en pleins de petits composants de manière à pouvoir maintenir le code et à réutiliser les composants au maximum.

De plus, ReactJS utilise la technologie SPA, c’est à dire qu’il n’y à qu’un seul document HTML. Séparer la logique du site en plusieurs composants permets d’améliorer la vitesse du site en metant à jour les composants qui changent et en laissant les autres tranquille.

Les composants sont facilement reconnaissable. Sur mon site par exemple, on pourrai avoir un composant pour la barre du haut, la barre de recherche, l’article de blog et les commentaires. L’important, c’est de séparer la logique.

Comment fonctionnent les composants ReactJS

Les composants ReactJS fonctionne grâce au JSX, c’est une version de l’HTML qui est directement écrite à l’intérieur du composant et qui permets d’implémenter de la logique.

En JSX, on peux directement dire à un composant de lancer une fonction si on clique dessus, tout est simplifié.

Dans ReactJS, il y a deux types de composants :

Les composants fonctionnels

Les composants fonctionnels permettent de rendre du code HTML avec de la logique externalisée. On peux voir un composant fonctionnel comme une DIV qui va simplement afficher du HTML.

Les fonctions qui vont réagir aux événements sont extérieur au composant. On les passera grâce à des props, nous verrons ça dans un prochain tutoriel.

Voici un exemple de composant fonctionnel :

import React from 'react'
function Democomponent()
{
    return <h1>Un composant fonctionnel !</h1>;
}
export default DemoComponent

Ce code va simplement retourner un titre avec du contenu à l’intérieur, rien de très complexe.

Les composants classes

Pour créer des composants plus complexes avec de la logique, on va utiliser des classes. Elles permettent de retenir des states c’est à dire un état interne, et de lancer des fonctions qui vont modifier la page web. Par exemple, une animation ou une requête AJAX

Les composants de classe peuvent intéragir avec d’autres composants et donner des instructions à des composants fonctionnels. Voici un exemple de composant de classe :

import React from 'react'
class Democomponent extends React.Component
{
    render(){
          return <h1>Welcome Message!</h1>;
    }
}
export default DemoComponent

Ici, les composants sont similaires. Essayons d’implémenter un peu de logique en affichant une alerte lorsqu’un utilisateur clique sur notre titre

import React from 'react'
class Democomponent extends React.Component
{
    
    render(){
          return <h1 onClick={this.envoi_alert}>Welcome Message!</h1>;
    }
    envoi_alert(){
    alert('Vous avez cliqué')
    }
}
export default DemoComponent

Ici, on implémente un événement onClick et on lui donne une fonction. Celle-ci se lancera automatiquement lorsque l’utilisateur cliquera sur notre composant.

Comme vous pouvez le voir, il est très simple d’implémenter de la logique dans les composants React.

Comment afficher les composants

Maintenant que vous savez créer des composants basiques, nous allons voir comment les afficher dans votre application React JS.

Pour se faire, vous devez vous rendre dans votre fichier app.js et vous devez importer votre composant. Voici la ligne à rajouter

import DemoComponent from './DemoComponent'

Ensuite, rendez vous dans la fonction ReactDOM.render et ajoutez votre composant de cette manière

ReactDOM.render( 
    <Welcome />,  
    document.getElementById("root") 
); 

Une fois fait, vous obtiendrez votre titre sur votre page web. Félicitations, vous avez crée votre premier composant.

Si cet article vous as plu, vous pouvez vous abonner à ma newsletter pour recevoir le guide GRATUIT pour bien débuter la programmation

Vous abonner à notre newsletter

* champ requis

Si cet article vous as plu, je vous invite à me laisser un commentaire, je me ferai un plaisir de vous répondre. Si vous avez une question ou une requête de tutoriel , vous pouvez m’envoyer un mail à cet adresse : gailen@smartsiliconsystem.com

Je vous souhaite une bonne journée, au plaisir de vous voir sur mon blog !

Laisser un commentaire

Fermer le menu
×
×

Panier