De nombreux développeurs débutants en ReactJS se perdent rapidement lorsqu’ils essaient de comprendre comment créer et gérer des composants efficacement. Cette confusion peut ralentir leur progression et entraîner des erreurs coûteuses.
Sans une approche claire, ils risquent de produire un code désorganisé et difficile à maintenir, ce qui affecte la qualité globale de l’application et la collaboration en équipe.
Cet article présente un guide étape par étape pour maîtriser la création de composants, la gestion des props, et l’intégration de JSX, vous aidant à créer des applications React robustes et maintenables.
Écrire "Hello World" en ReactJS : Les Fondamentaux ReactJS
Vous avez correctement installé votre environnement de travail. C’est super ! Maintenant, vous souhaitez apporter vos propres modifications à votre application, n’est-ce pas ? Nous passons à des étapes plus avancées. Tout d’abord, commençons par le terme bien connu et souvent utilisé dans la programmation : le fameux « Hello World« .
Dans le chapitre précédent, vous avez affiché le logo de React, mais il s’agissait simplement d’une application par défaut. Maintenant, le concept est d’afficher « Hello World » dans votre navigateur une fois que vous lancez votre application.
Mais avant d’entamer sur cette merveilleuse modification, je vais vous faire découvrir la documentation de reactJS d’abord, donc rendez-vous sur le site de react en tapant : reactjs.org sur votre barre de recherche navigateur.
Et voici ce que vous allez voir :
Il est important de noter que nous utilisons la version 18 de React comme vous le voyez, que nous avons installée précédemment. La documentation actuelle est davantage axée sur une version antérieure de React, avant la mise en place des composants fonctionnels. React se base sur des composants, qui sont essentiellement des morceaux de pages web.
Par exemple, vous pouvez observer trois zones sur le site : la zone d’en-tête, la zone de navigation, et la zone de contenu. Et l’idée de React est que chacune de ces zones soit un composant, ce qui signifie qu’elles ne se mettront à jour que si le composant en question nécessite une mise à jour.
Revenons maintenant à notre application et examinons les fichiers de notre projet. Ouvrez votre projet dans VS Code.
Donc, modifiez src/App.js pour afficher un « Hello World ».
import React from 'react';
function App() {
return (
<div>
<h1>Hello World!</h1>
</div>
);
}
export default App;
Exécuter le projet en vous positionner dans le répertoire du projet et taper la commande.
npm start
Ouvrez votre navigateur à l’adresse http://localhost:3000 pour voir votre application React et voilà notre fameux ‘Hello World ‘ affiche bien comme ce ci.
Examinons de plus près le fichier index.js, Il y a cette ligne :
const root = ReactDOM.createRoot(document.getElementById('root'));
Cette ligne crée la racine (Root) de l’application et la stocke dans le constant root. La méthode createRoot de ReactDOM (DOM virtuel de React) est utilisée pour créer une racine dans le DOM JavaScript. Cette méthode prend en argument l’élément HTML dans lequel nous allons afficher, la boîte DIV ayant l’ID ‘root’. Il est donc important de bien maîtriser JavaScript avant d’apprendre React.
Enfin, cette ligne de code :
root.render(<App />);
La méthode render est appelée sur l’instance root pour rendre l’application React, c’est-à-dire qu’elle effectue le rendu du composant App. Le code à l’intérieur de render représente la structure de l’application React.
Créer un Composant ReactJS : Apprenez les Fondamentaux ReactJS
Vous avez déjà vu plusieurs fois le mot “composant”, Vous l’aurez compris : les composants sont essentiels dans React.
Une interface est toujours constituée de différents éléments : des boutons, des listes, des titres, des sous-titres. Une fois rassemblés, ces éléments constituent une interface utilisateur ou UI. Par exemple si vous intégrez dans un site de vente en ligne, vous voyez la barre de menu, le panier, et que pour chaque article, il y a un nom, une photo, une description.
Avec ReactJS, chacune de ces parties qu’on va pouvoir réutiliser correspond à un composant. Ils contiennent tout ce qui est nécessaire à leur bon fonctionnement : la structure, les styles et le comportement (par exemple, les actions qui sont déclenchées quand on clique dessus).
C’est donc la mission des développeurs et développeuses React de découper toute interface utilisateur en éléments réutilisables, imbriqués les uns dans les autres. La majorité de nos composants sont eux-mêmes créés en combinant d’autres composants plus simples.
Mais vous vous demandez de quoi un composant est fait ?
Super, il est vraiment puissant, il suffit juste d’écrire dans la bonne syntaxe.
Vous savez que le HTML est une suite d’instructions que le navigateur doit suivre pour construire le DOM. Eh bien, ReactJS vient directement modifier le DOM pour vous : il suffit juste de lui donner les instructions de ce que vous souhaitez faire.
Pour faire simple : en utilisant React.createElement, ReactJS crée d’abord ses éléments dans le DOM virtuel, puis il vient prévenir le DOM au moment de sa création, “Hé, rajoute-moi une balise h1 par exemple avec le texte de votre choix dedans”.
Mais, mettons le fameux ‘Hello world’ qu’on vient d’afficher tout à l’heure sous forme d’un composant :
Créer le fichier helloworld.js dans le dossier src : src/HelloWorld.js :
Dont voici le contenu
export default function Helloworld(){
return(
<div>
<h1>Hello World</h1>
</div>
);
}
Voilà notre premier composant dans le fichier helloworld.js.
Export default : nous permet d’exporter le composant afin qu’on puisse l’importer dans l’endroit où on en a besoin et defaut nous indique que l’exportation est par défaut.
Et puis, HelloWorld est le nom de notre composant
Importer maintenant notre composant dans le fichier index.js comme ce ci :
import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles/index.css'
import Helloworld from './helloworld';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Helloworld/>
</React.StrictMode>
);
Vous voyez comment j’ai importé notre composant avec cette ligne :
import Helloworld from './helloworld';
Et puis, on doit l’appeler aussi en mettant dans le render et sous forme d’une balise :
<Helloworld/>
Voilà, si vous lancez l’application avec la commande que vous connaissez déjà sous terminal npm start, vous trouverez ‘Hello World’ dans votre navigateur.
Passer une Props à un Composant ReactJS : Les Fondamentaux ReactJS
Les props nous permettent de configurer nos composants. Elles répondent à la logique même de React selon laquelle les données descendent à travers notre arborescence de composants : il s’agit d’un flux de données unidirectionnel.
Le concept du props est alors d’envoyer des données au composant enfant pour afficher ou manipuler en fonction de l’objectif mais seul le composant parent qui peut envoyer les données. Par exemple si vous voulez afficher une salutation sur le navigateur en utilisant le props, voyons ensemble comment passer des props.
On a deux méthodes pour cela :
Première méthode
export default function Helloworld(props){
return(
<div>
<h1>{props.salutation}</h1>
</div>
);
}
Deuxième méthode
export default function
return(
<div>
<h1>{salutation}</h1>
</div>
);
}
Vous voyez la différence entre le deux methode, oui, non ….
En résumé, en React, l’utilisation de props.salutation fait référence à l’accès direct à une propriété name via l’objet props dans le corps ou les méthodes d’un composant. D’autre part, {salutation} utilise la déstructuration dans le corps du composant pour extraire directement la propriété salutation de l’objet props lors du rendu JSX.
Et vous avez une idée comment se fait le changement au niveau de l’importation dans le fichier index.js ? il suffit juste de mettre comme un attribut le props et donner sa valeur. Voyons le ci-dessous:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles/index.css'
import Helloworld from './helloworld';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Helloworld salutation = 'Bonjour'/>
</React.StrictMode>
);
Voilà vous trouvez ‘Bonjour’ sur votre navigateur si vous lancez votre application.
npm start
Passer Plusieurs Props à un Composant ReactJS : Les Fondamentaux ReactJS
On vient juste d’afficher une donnée venant du composant paren, mais comment les composants gèrent les données si on a plusieurs données à transférer ainsi à afficher ??? Par exemple saluer une personne en affichant son nom et son âge comme props.
Voyez la solution sur les codes ci-dessous :
export default function Helloworld(props){
return(
<div>
<h1>Bonjour { props.nom},votre age est { props.age}</h1>
</div>
);
}
Voilà notre composant enfant, il contient deux props tel que le nom et age. Les valeurs de ces props seront envoyer par le composant parent. Donc voyons comment il envoie les valeurs de nos props alors :
import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles/index.css'
import Helloworld from ./helloworld';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Helloworld
nom = "Elon Musk"
age = "24" />
</React.StrictMode>
);
Bah voilà, c’est simple non ?! Pour tester si tout fonctionne bien comme il faut, n’oubliez pas de lancer l’application et si tout se passe bien, vous aurez une un message comme ceci dans votre navigateur :
Npm start
Découvrir les fondamentaux Reactjs : JSX
JSX (JavaScript XML) est une extension de syntaxe pour JavaScript utilisée avec React pour décrire l’apparence des interfaces utilisateur. Il ressemble à du XML ou du HTML, mais il est ensuite transformé en JavaScript pur par Babel avant d’être interprété par le navigateur.
Fondamentaux Reactjs : Syntaxe et utilisation des JSX en ReactJS
JSX ressemble à du HTML, ce qui facilite la création d’éléments d’interface utilisateur dans React.
Exemple :
const element = <h1>Bonjour, monde !</h1>;
Fondamentaux Reactjs : Expression JavaScript dans JSX
Vous pouvez incorporer des expressions JavaScript dans du JSX en les entourant de {}.
Exemple :
const nom = "John";
const element = <p>Bienvenue, {nom} !</p>;
Fondamentaux Reactjs : Attributs dans JSX
Vous pouvez utiliser des attributs HTML dans JSX de manière similaire à HTML standard.
Exemple :
const imageElement = <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Une image" data-lazy-src="image.jpg" /><noscript><img decoding="async" src="image.jpg" alt="Une image" /></noscript>;
Utilisation des composants dans JSX
Les composants React peuvent également être utilisés dans JSX.
Exemple :
const MonComposant = <MonComposant />;
Fondamentaux Reactjs : Éléments JSX dans les fonctions
Vous pouvez également utiliser JSX dans les fonctions et les méthodes pour retourner des éléments React.
Exemple :
function Greet() {
return <p>Bonjour, utilisateur !</p>;
}
Ne pas confondre avec HTML pur
Bien que ressemblant à HTML, JSX est une syntaxe distincte. Par exemple, class devient className, et for devient htmlFor en JSX.
Enfin le code JSX est transformé en code JavaScript standard par Babel pour être compris par le navigateur.
Ajouter du CSS aux composants ReactJS
Utilisation de className pour le style parmi les fondamentaux Reactjs
Comme en HTML, nous pouvons associer des attributs à nos éléments. Les attributs HTML tels qu’id, href pour un lien <a />, src pour une balise <img />, fonctionnent normalement en JSX.
En revanche, il existe des mots réservés en JavaScript, tels que class.
Mais la question qui se pose, comment faire pour contribuer du style avec une classe CSS ?
Il suffit pour cela d’utiliser l’attribut className, et de lui préciser un string. D’ailleurs, vous pouvez utiliser plusieurs classes sur un élément en les mettant à la suite, séparées par un espace.
Créons dans /src un dossier /styles qui va regrouper nos fichiers CSS. On peut y glisser index.css en n’oubliant pas de modifier le path relatif pour importer index.css dans index.js.
Et il est temps de vous dire aussi qu’il faut créer un dossier qui s’appelle component pour regrouper tous les composants. Tout cela nous aidera à bien comprendre et optimiser la structure de votre projet
Je crée donc mon fichier helloworld.css qui va me permettre de styler mon composant. Ce qui nous donne une organisation comme dans la capture d’écran ci-dessous :
Appliquez maintenant vos compétences en CSS. Par exemple, donnez une couleur rouge au contenu de la balise h1 de notre composant.
Creer alors le fichier helloworld.css dans le dossier styles comme : styles/helloworld.css
h1{
color: rgb (255, 0, 21);
}
Par la suite, n’oublie pas d’importer ce fichier dans le fichier helloworld.js en bien précisant le chemin correspondant.
Dans mon composant helloworld.js, on aura une structure de code comme ceci :
import '../styles/helloworld.css'
export default function Helloworld(props) {
return(
<div>
<h1>Bonjour {props.nom},votre âge est {props.age}</h1>
</div>
);
}
Dans le fichier index.js :
import React from 'react';
import ReactDOM from 'react-dom/client';
import Helloworld from './component/helloworld';
import'./styles/helloworld.css'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Helloworld nom = 'Elon Musk' age = '24' />
</React.StrictMode>
);
Tout d’abord, on a importé le fichier helloworld.css et si puis on a le composant. Et si vous lancez votre application, vous verrez que le contenu a une couleur rouge car on a qu’un élément h1 dans notre composant.
Formation React 18 - Maîtriser la Création d'Interfaces Interactives
Dominez la création d'interfaces modernes avec React 18 et ses nouvelles fonctionnalités!
Exercices d'Applications en ReactJS : Pratiquez les Fondamentaux ReactJS
Maintenant, nous allons mettre en application ce que nous venons d’apprendre donc je vous propose de découvrir le projet qu’on va réaliser ensemble.
Sur ce premier exercice, on va manipuler ce qu’on a appris jusqu’à maintenant et je vais vous montrer comme faire. Mais si vous voulez essayer de faire tout seul, essayez et puis après on le fait ensemble.
Donc, l’idée est de créer un composant qui va contenir une section de tableau. Et dans le tableau, il contient trois colonnes avec des en-têtes : Prenom, Nom, Ville, on dirait une liste des personnes. Donc, l’idée est d’avoir un composant enfant qui va afficher les données qui sont dans le tableau en les recevant du props, c’est-à-dire, le composant parent envoie des données au composant enfant et ce dernier les affiche sous forme tableau contenant une liste des objet (ou bien une liste des personnes).
Pour faire cela, on utilise toujours notre dernière application, et on va commencer par la déclaration des bases de l’exercice.
Modifier alors le fichier index.js dans src/index.js comme ce ci :
import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles/index.css'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<section>
<table>
<tr>
<th>Prénom</th>
<th>Nom</th>
<th>Ville</th>
</tr>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
</table>
</section>
</React.StrictMode>
);
Et maintenant, essayons de mettre un peu de styles notre application : dans le fichier index.css : src/styles/index.css
body {
background-color: #c0392b;
font-family:Arial, Helvetica, sans-serif;
height : 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section{
background-color : #bdc3c7;
padding: 15px;
border-radius: 4px;
}
table {
width: 250px;
}
th{
background-color : #f39c12;
padding: 6px;
}
Bah, voilà ce que vous devez avoir dans votre navigateur si vous exécutez votre application
Créons maintenant le composant fonctionnel.
Notre objectif est de mettre en props les contenus de notre tableau tels que les contenus des balise td. Donc, pour faire cela, couper notre code td dans le fichier index.js et coller le dans notre composant enfant.
Voilà d’abord la modification dans le fichier index.js :
import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles/index.css'
import ClientsList from './component/ClientsList';
let datas = [
{prenom: 'Jean',nom : 'Dubois',ville:'Paris'},
{prenom:'Pierre',nom:'Durand',ville:'Toulouse'},
{prenom:'Emile',nom: 'Dufour',ville:'Bordeaux'}
]
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<section>
<table>
<tr>
<th>Prénom</th>
<th>Nom</th>
<th>Ville</th>
</tr>
<ClientsList clientData = {datas[0]}/>
<ClientsList clientData = {datas[1]}/>
<ClientsList clientData = {datas[2]}/>
</table>
</section>
</React.StrictMode>
);
Créons le fichier ClientsList.js : src/component/ClientsList.js
export default function ClientsList(props){
return(
<tr>
<td>{props.clientData.nom}</td>
<td>{props.clientData.prenom}</td>
<td>{props.clientData.ville}</td>
</tr>
)
}
Voilà, les valeurs des données sont stockées dans le tableau dans le composant parent et on a utilisé la déstructuration pour les envoyer aux composants enfants. ET exécuter maintenant votre application et normalement vous devez avoir comme ceci dans votre navigateur.
Vous avez bien manipulé les props maintenant.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui. Découvrez des cours variés pour tous les niveaux !
Conclusion
Vous avez maintenant une compréhension solide des fondamentaux de ReactJS, y compris la création de composants, la gestion des props et l’écriture de JSX. Ces compétences vous permettent de construire des applications web interactives et performantes. Et par la suite nous allons traiter le volet de hook UseState ReactJS.Bonne programmation !
