logo

TechCodeview

Composants fonctionnels ReactJS

Le composant fonctionnel est un moyen de créer des composants dans une application React. Les composants fonctionnels React.js aident à créer des composants d'interface utilisateur de manière fonctionnelle et plus concise. Dans cet article, nous découvrirons les composants fonctionnels dans React, les différentes manières d'appeler le composant fonctionnel, et apprendrons également comment créer les composants fonctionnels. Nous démontrerons également l'utilisation de hooks dans les composants fonctionnels

Table des matières



Composants fonctionnels dans React :

Composants fonctionnels ReactJS sont quelques-uns des composants les plus courants que vous rencontrerez lorsque vous travaillerez dans React. Ce sont simplement des fonctions JavaScript. Nous pouvons créer un composant fonctionnel dans React en écrivant une fonction JavaScript. Ces fonctions peuvent ou non recevoir des données en paramètres. Dans les composants fonctionnels, la valeur de retour est le code JSX à restituer dans l'arborescence DOM.

Façons d’appeler le composant fonctionnel :

Nous pouvons appeler les fonctions en javaScript d'autres manières comme suit :

1. Appelez la fonction en utilisant le nom de la fonction suivi des parenthèses. 

// Example of Calling the function with function name followed by Parentheses function Parentheses() {  return (; }; const PropsExample = () =>{ // const [change, setChange] = useState(true);  const [change, setChange] = useState(false);  return ( setChange(!change)}> Cliquez ici ! {change ? ( 'Bienvenue sur techcodeview.com' /> ) : ( 'Un portail informatique pour les geeks' /> )} ); } ; exporter PropsExample par défaut ;    Étape pour exécuter l'application : Ouvrez le terminal et tapez la commande suivante.  npm start Sortie : ouvrez le navigateur et notre projet s'affiche dans l'URL http://localhost:3000/>