les fondamentaux de ReactJS

L'Équipe Alphorm
L'Équipe Alphorm Ajouter un commentaire 21e lecture en min

Dans notre précédent article sur l’installation de ReactJS, nous avons couvert les étapes pour configurer votre environnement de développement. Aujourd’hui, nous allons approfondir les fondamentaux de ReactJS, essentiels pour tout développeur souhaitant créer des applications web dynamiques et interactives. Dans cet article, nous vous guiderons à travers les étapes clés, de la création et l’utilisation des composants, à la gestion des props et l’écriture de JSX. Suivez ce guide complet pour maîtriser les bases de ReactJS et commencez à développer des interfaces utilisateur performantes et réactives.

É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 :

Accès au site officiel de React en tapant reactjs.org dans la barre de recherche du navigateur.
Accès rapide au site de ReactJS pour obtenir des informations et des ressources supplémentaires.


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.

Illustration des trois zones principales du site : en-tête, navigation et contenu parmi les fondamentaux Reactjs
Structuration visuelle du site ReactJS en mettant en évidence ses principales zones fonctionnelles.


Revenons maintenant à notre application et examinons les fichiers de notre projet. Ouvrez votre projet dans VS Code.

Capture d'écran montrant l'ouverture du projet dans l'éditeur de code VS Code pour découvrir les fondamentaux Reactjs
Visualisation de l'ouverture du projet dans l'environnement de développement intégré 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.

Capture d'écran montrant le texte 'Hello World' affiché dans le navigateur
Capture d'écran illustrant le résultat de l'affichage du texte 'Hello World' dans le navigateur après l'exécution d'une application ReactJS.


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 :

Capture d'écran montrant le processus de création du fichier HelloWorld.js dans le répertoire src des fondamentaux ReactJS.
Illustration du processus de création du fichier HelloWorld.js dans le répertoire src d'un projet ReactJS.


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.

Capture d'écran montrant le texte 'Hello World' affiché dans le navigateur
Capture d'écran illustrant le résultat de l'affichage du texte 'Hello World' dans le navigateur après l'exécution d'une application ReactJS.

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.

 

Schéma illustrant une arborescence de composants avec un flux de données unidirectionnel pour les fondamentaux Reactjs.
Schéma représentant la structure hiérarchique des composants dans une application ReactJS avec une flèche indiquant le 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
				
			
"Bonjour" affiché sur un navigateur grâce à ReactJS, illustrant les bases de React.
Découverte des fondamentaux de ReactJS avec un simple "Bonjour".

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émarrage de l'application React via la commande npm start pour afficher un message
Utilisation de "npm start" pour activer l'application React.

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 :

Écran montrant le fichier 'helloworld.css' ouvert dans un éditeur de codeparmi les fondamentaux Reactjs.
Mise en place de styles avec "helloworld.css"


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.

Capture d'écran montrant le contenu textuel devenu rouge dans une application React
Modification du style pour rendre le texte rouge

 Pour approfondir vos connaissances et maîtriser pleinement ReactJS, découvrez notre formation vidéo sur React.

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.

Tableau affichant des données structurées pour un exercice d'application, avec des colonnes pour les identifiants, noms, et valeurs
Exemple de données utilisées dans notre exercice d'application, structurées pour faciliter le traitement et l'analyse.


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;
}
				
			
Capture d'écran montrant le résultat final d'un exercice affiché dans une application React.
Visualisation du résultat de notre exercice React, démontrant les capacités dynamiques de mise à jour de l'interface utilisateur


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.

Écran montrant l'application en cours d'exécution après le stockage des données
Démonstration du fonctionnement de l'application suite au stockage de données


Vous avez bien manipulé les props maintenant.

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 !

 

ÉTIQUETÉ : Reactjs
Partager cet article
Par L'Équipe Alphorm Démocratiser la Connaissance Informatique pour Tous !
Suivre :
L'Équipe Alphorm, c'est la démocratisation de la connaissance informatique. Passionnés et dévoués, nous sommes là pour vous guider vers le succès en rendant la technologie accessible à tous. Rejoignez notre aventure d'apprentissage et de partage. Avec nous, le savoir IT devient une ressource inspirante et ouverte à tous dans un monde numérique en constante évolution.
Laisser un commentaire