Les composants React et les props

Les composants React - La syntaxe JSX

En React moderne, tous les composants créés sont des composants fonctionnels.

Un composant a besoin:
- d'un nom qui doit toujours commencé par une majuscule
- de paramètre (les props si besoin)
- d'un ensemble d'instructions

import : Webpack permet d'importer les composants avec import. Il permet de lier les fichiers entre eux et de les rendre ensuite lisibles par le navigateur.

JSX

React utilise le JSX comme langage.
Le JSX est utilisé dans la conception des composants. Il regroupe le HTML , le Javascript et le CSS.
Il ne peut pas être lu par le navigateur : il va être convertit (par Webpack et Babel) et retranscrit en HTML, CSS et Javascript. Le code pourra ainsi être compréhensible pour le navigateur.

Créer un premier composant

Si ce n'est pas fait, commencez par créer votre application React avec create-react-app en tapant dans votre terminal :

npx create-react-app tuto-react

Lancez ensuite votre application en tapant dans votre terminal:

npm start

Étape 1 - Création des dossiers et fichiers

Nous allons maintenant créer un composant React appelé 'Message' qui affiche un message de bienvenue sur notre blog.
Dans le dossier "src", créez un nouveau dossier que vous nommez "components".
Dans ce dossier "components", créez un nouveau dossier appelé "Message" et dans ce dossier un fichier nommé "Message.js".
C'est là que nous définirons notre composant.

Étape 2 - Importer React

Au début du fichier 'Message.js', nous  importons React à l'aide de l'instruction.

import React from 'react

Étape 3 - Définir le composant

Ensuite, nous allons définir notre composant en utilisant une fonction fléchée (arrow function) appelée 'Message'.

const Message = () => {
return (
<div>
<h1>Bienvenue sur mon Blog !</h1>
<p>De nombreux articles vous attendent.</p>
</div>
);
};

Un composant est simplement une fonction ou une classe qui renvoie du contenu à afficher.

À l'intérieur de la fonction 'Message', nous avons utilisé du JSX pour décrire ce que notre composant doit afficher.

Étape 4 - Exporter le composant

Enfin, à la fin du fichier 'Message.js', nous avons exporté notre composant en utilisant .

Cela permettra à d'autres parties de notre application d'importer et d'utiliser ce composant.

export default Message;

Le code complet de notre fichier Message.js :

import React from 'react';

const Message = () => {
return (
<div>
<h1>Bienvenue sur mon Blog !</h1>
<p>De nombreux articles vous attendent.</p>
</div>
);
};

export default Message;

Étape 5 - Utilisation dans App.js

Maintenant que nous avons créé notre composant 'Message', nous pouvons l'utiliser dans d'autres parties de notre application.

Dans le fichier 'App.js', nous avons importé le composant 'Message' et nous l'avons appelé comme ceci : <Message />.
Supprimez au préalable, la partie de base se trouvant dans "return()".

Cela affiche notre message de bienvenue lorsque nous exécutons notre application.

import './App.css';
import Message from './components/Message/Message';


function App() {
  return (
    <Message />
  );
}


export default App;

Visualisez le résultat dans votre navigateur et ajoutez de nouveaux composants pour tester.

Les props

Les composants sont réutilisables et peuvent donc avoir besoin de variantes au niveau d'un composant. On va alors utiliser les propriétés, les props.

Les props (propriétés) sont l'un des concepts fondamentaux de React permettant de passer des données de parent à enfant.

Voici un exemple simple d'utilisation des props dans un composant React :

Supposons que vous avez un composant parent appelé App et un composant enfant appelé Greeting. L'objectif est de passer un nom en tant que prop de App à Greeting pour afficher un message de salutation personnalisé.

Créez le composant Greeting :

import React from 'react';

const Greeting = (props) => {
return <h1>Hello, {props.name}!</h1>;
};

export default Greeting;

Dans ce code, nous avons créé un composant Greeting qui utilise props.name pour afficher le nom passé en tant que prop.

Maintenant dans App.js :

import React from 'react';
import Greeting from './Greeting';

const App = () => {
const name = 'John'; // Vous pouvez changer le nom ici pour voir le résultat

return (
<div>
<Greeting name={name} />
</div>
);
};

export default App;

Dans ce code, nous avons importé le composant Greeting que nous avons créé précédemment.
Ensuite, nous avons défini une variable name avec la valeur 'John'.
Cette valeur pourrait provenir d'une API, d'une base de données, ou être saisie par l'utilisateur via un formulaire, mais pour cet exemple, nous l'avons définie directement dans le composant App.

Enfin, nous avons rendu le composant Greeting à l'intérieur de App, en passant la variable name en tant que prop.
La syntaxe {name} signifie que nous passons la valeur de la variable name en tant que prop appelé name à Greeting.

Lorsque vous exécutez l'application, le composant Greeting affichera le message "Hello, John!".

Cet exemple simple montre comment les props peuvent être utilisées pour transmettre des données d'un composant parent à un composant enfant dans React.

La destructuration

Utiliser la destructuration (destructuring) permet de simplifier la manière dont nous accédons aux props dans les composants. Voici un exemple simple d'utilisation de la destructuration avec les props :

Composant Greeting avec destructuration des props :

import React from 'react';

const Greeting = ({ name }) => {
return <h1>Hello, {name}!</h1>;
};

export default Greeting;

Dans ce code, nous utilisons la destructuration des props dans la signature de la fonction Greeting. Au lieu d'utiliser props.name, nous déclarons { name } entre parenthèses pour extraire directement la propriété name du paramètre props. Cela rend le code plus concis et plus lisible.

Maintenant dans le composant App

import React from 'react';
import Greeting from './Greeting';

const App = () => {
const name = 'Alice'; // Vous pouvez changer le nom ici pour voir le résultat

return (
<div>
<Greeting name={name} />
</div>
);
};

export default App;

Dans le composant App, nous passons toujours le prop name au composant Greeting, mais cette fois, il est déstructuré dans le composant Greeting, comme nous l'avons vu dans l'exemple précédent. Le reste du code reste inchangé.

Lorsque vous exécutez cette application, elle affichera le message "Hello, Alice!".

La destructuration des props permet de simplifier l'accès aux données passées en tant que props dans les composants, ce qui rend le code plus concis et plus facile à lire.