React frontend example :
un premier composant, pas à pas
React frontend example : construisez un petit compteur en React, étape par étape, avec le code commenté. Un exemple concret pour comprendre composant et état.
Nous vous guidons pas à pas dans la création d’un petit compteur — le projet idéal pour saisir les quatre briques fondamentales de React : le composant, l’état, l’événement et la réutilisation.
En une trentaine de minutes, vous manipulerez les quatre briques de React : le composant, l’état, l’événement et la réutilisation. Tout le reste en découle.
Les étapes ci-dessus vous fournissent le code commenté. En résumé : vous partez d’un composant simple, puis ajoutez un état avec useState pour le rendre interactif. Chaque modification du compteur met à jour l’affichage sans recharger — c’est le mécanisme qui définit un composant React côté navigateur. Vous extrairez ensuite le bouton dans son propre composant réutilisable via les props, avant de générer une version optimisée pour la production.
Un vrai projet front-end React ajoute le routage, les appels à un back-end et une gestion d’état partagée. À Gembloux, Scornidigital construit des interfaces React complètes. Si votre projet dépasse l’exemple, demandez un devis gratuit.
Suivez les étapes dans l'ordre.
Chaque étape se construit sur la précédente. Suivez-les de haut en bas : à la fin, votre livrable est prêt, sans passe manquée.
Créer un projet React vierge
Dans un terminal, initialisez un projet React à l'aide de Vite, un outil de démarrage rapide. La commande crée un dossier avec la structure de base et les dépendances. Choisissez le modèle React quand l'outil le demande. Cette étape pose le squelette : un fichier d'entrée, un composant racine et la configuration prête à l'emploi.
npm create vite@latest mon-app -- --template react cd mon-app npm install npm run devComprendre le composant racine
Ouvrez le fichier src/App.jsx. C'est le composant racine, le point de départ de l'interface. Un composant React est simplement une fonction qui retourne du JSX — une syntaxe proche du HTML, écrite en JavaScript. Videz le contenu retourné pour repartir d'une base propre avant d'écrire votre propre exemple.
function App() { return ( <main> <h2>Mon premier composant React</h2> </main> ); } export default App;Ajouter de l'état avec le hook useState
L'état, c'est la donnée qui change dans le temps et qui pilote l'affichage. On l'introduit avec le hook useState : il renvoie la valeur courante et une fonction pour la modifier. Ici, on stocke un compteur initialisé à zéro. À chaque modification de cet état, React redessine automatiquement la partie concernée de l'interface.
import { useState } from 'react'; function App() { const [compteur, setCompteur] = useState(0); return ( <main> <h2>Compteur : {compteur}</h2> </main> ); } export default App;Réagir à un clic
Un composant devient vivant quand il répond aux actions. Ajoutez un bouton dont l'événement onClick appelle setCompteur pour augmenter la valeur. Notez qu'on ne modifie jamais l'état directement : on passe toujours par la fonction fournie par useState. React se charge de mettre à jour l'affichage après le changement.
<button onClick={() => setCompteur(compteur + 1)}> Ajouter 1 </button>Découper en un composant réutilisable
La force de React est la réutilisation. Extrayez le bouton dans son propre composant, qui reçoit ses données et ses actions via des props — les paramètres d'un composant. Vous pouvez alors réutiliser ce bouton partout, en lui passant à chaque fois un comportement différent. C'est le principe de composition au cœur de React.
function Bouton({ texte, onClick }) { return <button onClick={onClick}>{texte}</button>; } // Utilisation : <Bouton texte="Ajouter 1" onClick={() => setCompteur(compteur + 1)} />Construire pour la production
Une fois l'exemple satisfaisant, générez la version optimisée. La commande de build produit des fichiers statiques prêts à être déployés sur n'importe quel hébergement. C'est cette version, allégée et optimisée, que verront vos utilisateurs — pas le code de développement.
npm run build
On s'occupe de votre site, clé en main.
Formulaire fiable, relié à votre boîte mail et protégé du spam — ou site complet sur-mesure. Dites-nous votre besoin : réponse sous 24 h, sans engagement.
Vos questions sur ce guide.
Faut-il beaucoup de connaissances pour cet exemple ?
Des bases suffisent. Si vous connaissez HTML, CSS et un peu de JavaScript moderne, vous pouvez suivre cet exemple sans difficulté. Les notions propres à React — composant, JSX, état, props — sont introduites au fur et à mesure.
L'important n'est pas de tout comprendre du premier coup, mais de voir concrètement comment un composant se construit et réagit. Vous approfondirez chaque concept ensuite avec la pratique.
Pourquoi utiliser Vite pour démarrer ?
Vite est un outil de démarrage moderne, rapide à lancer et léger à configurer, idéal pour un premier projet React. Il crée en une commande un projet fonctionnel avec un serveur de développement instantané.
D'autres approches existent, mais Vite offre aujourd'hui l'un des parcours les plus fluides pour débuter. Une fois à l'aise, vous pourrez explorer des outils plus complets comme les meta-frameworks.
Qu'est-ce que le JSX dans cet exemple ?
Le JSX est la syntaxe qui ressemble à du HTML mais s'écrit à l'intérieur du JavaScript. Il permet de décrire l'interface directement dans le code du composant.
Ce n'est pas du HTML réel : il est transformé en JavaScript par l'outil de build avant d'être exécuté. Le JSX rend le code plus lisible en rapprochant la structure visuelle de la logique qui la produit.
À quoi sert le hook useState ?
useState permet à un composant de mémoriser une donnée qui peut changer, comme le compteur de cet exemple. Il renvoie deux choses : la valeur actuelle et une fonction pour la modifier.
Quand vous appelez cette fonction, React met à jour l'affichage automatiquement. C'est le mécanisme de base pour rendre une interface interactive : sans état, un composant reste figé.
Cet exemple est-il représentatif d'un vrai projet ?
Il en montre les briques fondamentales — composant, état, événement, props, build — mais un vrai projet est plus vaste : routage entre pages, appels à un back-end via des API, gestion d'état plus élaborée, tests et déploiement. Cet exemple est une porte d'entrée : il donne les réflexes de base sur lesquels tout le reste se construit.
Le passage à un projet réel se fait ensuite, brique par brique.
Scornidigital peut-il m'aider à aller plus loin ?
Oui. Studio full-stack basé à Gembloux, nous construisons des interfaces React complètes, reliées à un back-end, du prototype à la mise en ligne.
Si votre projet dépasse l'exemple et nécessite une vraie application, nous pouvons vous accompagner de la conception au déploiement.