Comprendre les bases de React : Props, Children et Element Props

React est une bibliothèque JavaScript largement utilisée pour le développement d’applications Web interactives et dynamiques. Afin de maîtriser React, il est essentiel de comprendre les concepts de base tels que les props, les children et les element props. Dans cet article, nous allons explorer ces notions en détail, en fournissant des définitions claires, des explications techniques et des exemples pratiques pour vous aider à les comprendre.

I. Props (Propriétés)

Les props (abréviation de « properties ») sont des objets JavaScript immuables utilisés pour transmettre des données d’un composant parent à un composant enfant. Les props permettent de configurer et de personnaliser les composants React. Voici ce que vous devez savoir sur les props :

1) Définition et utilisation des props 

Les props sont passées aux composants React comme des attributs HTML-like lorsqu’ils sont utilisés. Elles sont utilisées pour transmettre des valeurs spécifiques d’un composant parent à un composant enfant. Par exemple :

// Composant parent
function App() {
    return <Button label="Cliquez ici" />;
}

// Composant enfant
function Button(props) { 
    return <button>{props.label}</button>;
}

Dans cet exemple, la propriété label est transmise au composant Button en tant que prop. À l’intérieur du composant Button, les props sont accessibles via l’objet props. Elles peuvent être utilisées pour afficher dynamiquement le contenu du bouton.

2) Valeurs par défaut avec defaultProps 

Il est possible de définir des valeurs par défaut pour les props en utilisant la propriété defaultProps. Si aucune valeur n’est fournie pour une prop donnée, la valeur par défaut sera utilisée. Par exemple :

function Button(props) { 
    return <button>{props.label}</button>;
}

Button.defaultProps = { label: "Cliquez ici", };

Dans cet exemple, si aucune valeur pour label n’est fournie, le bouton affichera « Cliquez ici » par défaut.

II. Children (Enfants)

Les children (enfants) sont un concept important de React. Ils permettent d’inclure du contenu supplémentaire entre les balises d’ouverture et de fermeture d’un composant. Voici ce que vous devez savoir sur les children :

1) Utilisation des children 

Pour utiliser les children dans un composant, vous pouvez les inclure en tant que contenu supplémentaire entre les balises d’ouverture et de fermeture. Le composant parent peut ensuite accéder à ces children via la prop spéciale props.children. Par exemple :

function Card(props) { 
    return (
        <div className="card"> 
            <h2>{props.title}</h2> 
            <div>{props.children}</div>
        </div> );
} 

function App() {
    return ( 
        <Card title="Mon titre">
            <p>Contenu de la carte</p> 
        </Card> );
}

Dans cet exemple, le composant Card affiche le titre transmis via la prop title, puis affiche le contenu supplémentaire (le paragraphe) entre les balises ouvrantes et fermantes du composant Card.

2) Utilisation d’éléments React en tant que children 

Les children peuvent être n’importe quel élément React, y compris d’autres composants React. Cela permet de créer des structures de composants flexibles et réutilisables. Par exemple :

function Wrapper(props) {
    return <div>{props.children}</div>; 
} 

function App() {
    return ( 
    <Wrapper> 
        <h1>Titre principal</h1>
        <p>Contenu de l'application</p>
        <Button label="Cliquez ici" />
    </Wrapper> ); }

Dans cet exemple, le composant Wrapper englobe plusieurs éléments React en tant que children, y compris le titre, le paragraphe et le bouton.

III. Element Props (Propriétés des éléments)

Les element props sont des propriétés spéciales fournies par React qui permettent de transférer des données spécifiques à un élément HTML. Elles diffèrent des props traditionnelles car elles ne sont pas destinées à être utilisées entre les composants parent et enfant. Voici quelques points importants à retenir sur les element props :

1) Utilisation des element props 

Les element props sont utilisées pour configurer le comportement ou l’apparence d’un élément HTML spécifique. Elles sont spécifiées en tant qu’attributs dans les balises HTML-like des composants React. Par exemple :

function App() { 
    return <input type="text" value="Hello" onChange={handleChange} />;
}

Dans cet exemple, l’element prop type est utilisée pour définir le type de l’élément <input>, l’element prop value est utilisée pour définir la valeur initiale de l’input, et l’element prop onChange est utilisée pour spécifier une fonction de rappel lorsqu’il y a un changement dans l’input.

2) Utilisation des element props dynamiques 

Les element props peuvent également être utilisées de manière dynamique en utilisant des expressions JavaScript. Cela permet de configurer les éléments HTML en fonction de l’état ou des données de l’application. Par exemple :

function App() { 
    const buttonText = "Cliquez ici"; 
    return <button>{buttonText}</button>;
}

Dans cet exemple, la valeur de l’element prop buttonText est définie dynamiquement en fonction de la variable buttonText.

Conclusion

Les props, les children et les element props sont des concepts fondamentaux de React. Les props permettent de transmettre des données d’un composant parent à un composant enfant. Les children permettent d’inclure du contenu supplémentaire entre les balises d’ouverture et de fermeture d’un composant. Les element props sont utilisées pour configurer des éléments HTML spécifiques. En comprenant ces concepts, vous serez en mesure de créer des composants React flexibles, réutilisables et personnalisables. Utilisez-les judicieusement pour développer des applications Web réactives et interactives avec React.

Notice react : Site officiel