Forem: Gérard Cubaka

🛰️ How to Detect Minerals (Au, Cu, Li, Fe, etc.) Using Multispectral & Hyperspectral Remote Sensing

Gérard Cubaka — Wed, 08 Apr 2026 13:23:24 +0000

Gérard Cubaka — Geospatial / AI / Earth Observation
You can start now detecting minerals using our plateform : GeoCongo AI

🌍 Introduction

Mineral exploration has been revolutionized by remote sensing. Instead of relying only on fieldwork, geologists can now detect mineralization zones from satellite imagery.

The key idea is simple:

Each mineral interacts with electromagnetic radiation differently — creating a unique spectral signature across Visible, NIR, SWIR, and TIR wavelengths.

This article explains:

How to detect key minerals (Au, Cu, Fe, Li, etc.) using multispectral data
The band ratios and indices used in practice
How hyperspectral data unlocks precise mineral identification

🧪 1. Core Principle: Spectral Signatures

Every mineral:

Reflects certain wavelengths
Absorbs others

For example:

Iron oxides → strong in visible (red)
Clays → absorption near 2.2 µm (SWIR)
Quartz → better detected in thermal infrared (TIR)

🛰️ 2. Multispectral Mineral Detection

Multispectral sensors (e.g., ASTER, Landsat 8/9) use broad bands, so we rely on:

Band ratios
Indices
PCA (Principal Component Analysis)

🔴 2.1 Iron Oxides (Fe, Mn, Ti)

These are the easiest to detect.

Characteristics:

Absorb blue
Reflect red

📊 Band Ratios:

Landsat 8:


B4 / B2

ASTER:


B2 / B1

Interpretation:

Bright areas → Hematite / Goethite (gossans)
Often indicate oxidized ore zones

🟡 2.2 Hydrothermal Alteration Minerals (Au, Cu, Ag, Zn, Ni, Co)

You rarely detect the metal directly. Instead, detect alteration halos:

Clays (Al-OH)
Carbonates (Mg-OH)
Sulfate alteration (Jarosite, Alunite)

📊 Key Indices:

🧱 Clay Index (Al-OH)

ASTER:


B4 / B6

Landsat 8:


B6 / B7

👉 Indicates:

Kaolinite, Illite
Strong indicator of gold (Au) and copper (Cu) systems

🪨 Carbonate / Chlorite Index (Mg-OH)

ASTER:


B8 / B9

👉 Useful for:

Copper (Cu)
Zinc (Zn)

🟤 Jarosite Index (Gold Indicator)

ASTER:


B4 / B3

👉 Indicates:

Acidic alteration → often linked to gold deposits

⚪ 2.3 Silica & Quartz (SiO₂)

⚠️ Problem:
Quartz has no strong SWIR absorption

👉 Solution: Use Thermal Infrared (TIR)

📊 Silica Index:

ASTER:


(B11 * B11) / (B10 * B12)

👉 Detects:

Quartz veins
Silicification zones (important for Au)

🟢 2.4 Mafic & Ultramafic Rocks (Ni, Co, Diamond Indicators)

We detect the host rocks, not the minerals directly.

📊 Indices:

Mafic Index:

ASTER:


B12 / B13

Ultramafic Index:

ASTER:


(B1 + B3) / B2

👉 Indicates:

Kimberlites → Diamond exploration
Ultramafic intrusions → Nickel, Cobalt

🟣 2.5 Pegmatites (Li, Be, Nb)

No direct detection ❌

👉 Strategy:

Detect associated minerals:
Micas (Lepidolite)
Feldspars

👉 Use:

Clay/mica indices (Al-OH absorption ~2.2 µm)

⚫ 2.6 Special Cases

💎 Diamond

Not directly detectable
Target: Kimberlite pipes
Look for:
Mg-rich signatures
Circular anomalies

☢️ Uranium (U)

Detect indirectly:
Clay alteration
Redox boundaries (Fe²⁺ / Fe³⁺)

👉 Note:

Radiometric surveys are often better than optical

🎨 3. RGB Composite Strategy

For fast visual interpretation:

Example (Gold/Copper exploration):

Channel	Data
🔴 Red	Iron Oxide Ratio
🟢 Green	Clay Index
🔵 Blue	Carbonate Index

👉 Result:

Bright composite zones = high exploration targets

🧠 4. Hyperspectral Data (The Game Changer)

Multispectral = ~10 bands

Hyperspectral = 100–300 narrow bands

👉 This allows true mineral identification

🔧 4.1 Preprocessing

Atmospheric correction:
ATREM
QUAC
Noise filtering:
Savitzky-Golay

🧩 4.2 Endmember Extraction

Pixel Purity Index (PPI)
n-D Visualizer

👉 Goal:
Extract pure mineral signatures

🔍 4.3 Spectral Matching Algorithms

🧭 SAM (Spectral Angle Mapper)

Measures similarity between spectra

📐 SFF (Spectral Feature Fitting)

Matches absorption features precisely

⚖️ Linear Unmixing

Determines proportions:


Pixel = 30% Quartz + 70% Iron Oxide

🎯 4.4 Targeting Specific Minerals

Mineral	Strategy
Li, Be, Nb	Shift in mica absorption (~2200 nm)
U	Redox zones (Fe²⁺ vs Fe³⁺)
Diamond	Indicator minerals (pyrope, magnesite)
Cu	Malachite spectral signature
Au	Hydrothermal alteration zones

🛠️ 4.5 Recommended Tools

ENVI → Industry standard
QGIS + EnMAP-Box → Open-source alternative
GeoCongo AI → Web plateform

🚀 Conclusion

Multispectral remote sensing is powerful for:

Mapping alteration zones
Identifying exploration targets

But:

Hyperspectral data enables direct mineral identification.

🔑 Key Takeaways

You rarely detect metals directly — focus on alteration minerals
SWIR (2.1–2.4 µm) is critical for clays and hydrothermal systems
Use band ratios to enhance signals
Combine indices into RGB composites
Use hyperspectral data for high-precision exploration

Artificial Intelligence Makes Life Easier for Geologists

Gérard Cubaka — Thu, 08 Aug 2024 12:11:51 +0000

Introduction

Artificial Intelligence (AI) refers to the ability of machines to mimic human cognitive functions such as learning, problem-solving, and decision-making. Its growing importance across various fields stems from its capability to automate tasks, analyze vast amounts of data to derive insights, enhance operational efficiency, and create new opportunities in sectors such as healthcare, finance, logistics, industry, and many others.

The impact of artificial intelligence on the field of geology is significant, as it enables the analysis of large geological datasets, enhances the modeling of geological processes, and facilitates the discovery of mineral deposits and natural resources. By utilizing machine learning techniques and data processing, AI allows geologists to identify patterns and correlations that would be challenging to detect manually.

A concrete example is the use of AI in seismic interpretation, where machine learning algorithms are employed to analyze seismic data and identify underground geological structures. This approach improves the accuracy and efficiency of seismic interpretation, which is crucial for oil and gas exploration.

Challenges Faced by Geologists

Geologists encounter complex tasks that require a deep understanding of geological processes and specialized technical expertise. Among these tasks is the interpretation of seismic data, which necessitates the ability to identify and interpret seismic waves to map underground structures. Additionally, modeling geological processes, such as the formation of mineral deposits and oil reservoirs, demands advanced skills in numerical modeling and simulation. Geologists must also analyze the chemical composition of rocks to understand their origins and evolution, as well as map geological formations to comprehend the distribution of natural resources.

The analysis of large geological datasets presents significant challenges due to the complexity of geological models and the variability of data from different sources. Geologists often have to deal with heterogeneous datasets from drilling, geological maps, satellite imagery, seismic data, and other sources. The need to consider factors such as depth, pressure, and temperature adds an additional layer of complexity to geological data analysis. Furthermore, collecting and managing large-scale geological data can be time-consuming and may require specialized tools to extract meaningful information.

These challenges demand innovative solutions, such as the use of artificial intelligence and machine learning techniques to analyze and interpret geological data more effectively.

A concrete example of the application of artificial intelligence in the mining industry is the optimization of mining planning. Mining companies utilize AI to analyze vast amounts of geological data, information on deposits, and operational data to plan mineral extraction more efficiently.

By employing machine learning algorithms, AI can help predict the geological characteristics of deposits, optimize mine design, plan extraction routes, and maximize operational efficiency. Additionally, AI can be used to monitor geological and operational conditions in real time, enabling quick adjustments to optimize production and safety.

This example illustrates how AI has become a powerful tool for enhancing the efficiency and profitability of mining operations by integrating geological, operational, and environmental data for more informed decision-making.

How Artificial Intelligence Assists Geologists

Artificial intelligence offers numerous valuable applications for geologists, significantly enhancing their efficiency and accuracy across various domains. Here are some concrete examples of how AI aids geologists:

Seismic Data Analysis:

Artificial intelligence can be employed to process and interpret vast amounts of seismic data in record time. Machine learning algorithms can detect complex patterns within seismic data, helping geologists identify geological structures beneath the Earth's surface. By automating part of the seismic data analysis, geologists can save valuable time and obtain more detailed and reliable interpretations.

Geological Mapping:

Through satellite imaging and image processing techniques, artificial intelligence can be used to generate detailed and accurate geological maps. Computer vision algorithms can automatically identify and classify different geological formations from aerial or satellite images, facilitating terrain mapping. This automation in geological mapping allows geologists to cover large areas more quickly and detect subtle geological features that might be easily overlooked by the naked eye.

Reservoir Modeling:

Artificial intelligence is utilized to model underground hydrocarbon reservoirs more precisely, taking into account a multitude of geological and geophysical parameters. AI-based predictive modeling techniques enable the simulation of fluid behavior within reservoirs, optimizing drilling operations and informing resource exploitation decisions. By combining field data, seismic data, and production data, geologists can create more reliable and accurate reservoir models, thereby improving the efficiency of oil and gas operations.

Artificial intelligence is revolutionizing how geologists conduct their studies and work by automating complex tasks, accelerating analysis processes, and providing more precise and detailed results. These technological advancements open up exciting new prospects for the exploration and exploitation of natural resources while allowing geologists to focus on more strategic and creative tasks.

Concrete Examples:

Advanced Seismic Analysis Project: A mining company utilized machine learning algorithms to analyze large volumes of seismic data to accurately predict the geological structure beneath the surface. This enabled the optimization of drilling locations and improved exploration efficiency.
Automated Geological Mapping: A research team developed a satellite imaging system combined with AI algorithms to generate detailed geological maps at a large scale. This approach allowed for the mapping of hard-to-access areas and the identification of new exploration opportunities.

Concrete Advantages and Benefits:

Increased Accuracy: The use of AI has enhanced the accuracy of geological predictions, leading to more informed decisions regarding exploration and resource exploitation.
Operational Efficiency: Automating tasks such as seismic analysis and geological mapping has saved time and optimized resources, thereby reducing operational costs.
Discovery of New Opportunities: AI's ability to detect complex patterns and correlations has led to the discovery of new mineral deposits and the identification of previously unrecognized geological areas of interest.

Future Perspectives:

The integration of artificial intelligence (AI) in the field of geology presents exciting prospects for the future. Here are some emerging trends and opportunities to consider:

- GeoAI: The intersection of AI, machine learning, and geology, known as GeoAI, is on the rise. Here are key points to remember:

- Advanced Geological Mapping:

AI can analyze complex geospatial data to create detailed geological maps. It identifies rock formations, minerals, and geological structures with exceptional accuracy. This automated mapping accelerates the information-gathering process and improves map precision, which is essential for mining exploration and resource management.

- Enhanced Seismic Analysis:

AI can be used to analyze massive seismic data sets, accurately predicting the geological structure beneath the surface. This helps optimize drilling locations and improve exploration efficiency.

- Anomaly Detection:

AI algorithms can detect anomalies in geological data, such as density variations, faults, or intrusions. This allows for the identification of areas potentially rich in minerals or hydrocarbons.

Future Challenges and Areas for Improvement:

- Data Quality:

AI relies on high-quality data. Geologists must ensure that geoscientific data is accurate, complete, and well-labeled for AI models to learn effectively.

- Model Interpretability:

AI models, particularly deep neural networks, are often considered black boxes. Researchers are working on methods to make these models more interpretable so that geologists can understand the decisions made by AI.

- Interdisciplinary Collaboration:

Geologists need to collaborate closely with experts in AI, computer science, and statistics. A mutual understanding of these fields is essential for the successful integration of AI into geological work.

In summary, AI offers exciting opportunities to enhance our understanding of the planet and optimize natural resources. Geologists should continue to explore these new technologies and integrate them into their practices to address future challenges.

Conclusion:

Artificial intelligence (AI) plays a crucial role in analyzing vast amounts of geological data, enhancing the modeling of geological processes, and facilitating the discovery of mineral deposits. This is achieved through the application of machine learning techniques and data processing methods, such as AI-enhanced seismic interpretation.

Geologists face complex tasks, including the interpretation of seismic data and the analysis of extensive geological datasets from various sources. These challenges can be effectively addressed by employing AI and machine learning techniques, leading to more efficient analyses.

In summary, AI presents exciting opportunities to deepen our understanding of the Earth and optimize natural resource management. Geologists should continue to explore and integrate these innovative technologies into their practices to tackle future challenges effectively.

From Geologist to Backend Developer with HNG Internship

Gérard Cubaka — Thu, 04 Jul 2024 11:59:16 +0000

Introduction

Have you ever felt the urge to completely change career paths? That's exactly what I'm doing, and I'm excited to share my story and the journey I'm about to embark on with the HNG Internship program.

The world of technology is constantly evolving, and sometimes, the most rewarding journeys are those that take us down unexpected paths. This is certainly the case for me. As an exploration geologist with a passion for uncovering the Earth's secrets, I recently found myself drawn to a new kind of exploration: the world of coding. This newfound passion ignited a desire to transition from the realm of rocks and minerals to the exciting and dynamic world of web development.

This article chronicles my initial steps on this exciting path, specifically focusing on a challenging backend problem I encountered during my studies. More importantly, it explores why the HNG Internship program is the perfect launchpad for my journey as a developer.

From Rocks to Code: A Passion for Exploration Takes a New Form

For the past five years, I've been an exploration geologist, using my skills to identify and assess mineral deposits. It's a fascinating field, but recently, a new passion has emerged: coding. I'm currently studying programming at Kinshasa Digital Academy, and my ultimate goal is to create earth process simulations through code. This shift might seem unexpected, but both geology and coding share a core element – the thrill of exploration!

Facing My First Big Backend Challenge: Authentication and Permissions

As a beginner coder, I recently tackled a challenging backend project during my studies. We were building an API for an application that assigns computers to students based on their coaches. The biggest hurdle I faced was implementing user authentication and authorization – concepts I was completely unfamiliar with. It was a classic "sink or swim" moment.

Learning by Doing: A Journey of Self-Improvement

Instead of letting the challenge defeat me, I embraced it as an opportunity to learn. I dove headfirst into tutorials on YouTube, scoured informative blog posts on Medium (like this one on JWT authentication [URL non valide supprimée]), and tapped into the knowledge of my fellow students. Within days, I went from complete novice to someone with a solid grasp of authentication and permissions.

Why HNG Internship is the Perfect Launchpad

Having just finished my training at Kinshasa Digital Academy, I'm eager to propel my newfound web development skills to the next level. When I discovered the HNG Internship program (you can learn more about it on the HNG website: [https://hng.tech/internship]), I knew it was the perfect opportunity to begin my journey. The program's emphasis on web and mobile development, data analysis, and artificial intelligence perfectly aligns with my goals. Not only will it equip me with technical skills, but it also holds the potential to open doors to exciting career prospects after the internship (check out HNG's hiring options here: [https://hng.tech/hire]).

Beyond the Code: My Strengths as a Team Player

While technical skills are essential, I believe a successful developer thrives in a collaborative environment. My background in geology has instilled in me a strong work ethic, excellent communication skills, and a natural ability to solve problems creatively. I'm also a positive and optimistic individual who finds joy in the journey, and that translates to a positive influence on the teams I work with. My friends can attest to that – they often seek me out as a teammate! (Want to put my teamwork skills to the test? Hire me or collaborate with me; you won't be disappointed!)

The Road Ahead: Embracing the Challenge with HNG

I'm incredibly motivated and excited to embark on this new adventure with HNG Internship. I'm confident that the program's comprehensive curriculum and collaborative environment will provide the perfect springboard to propel me towards achieving my dream of building earth process simulations. Stay tuned to see what this aspiring developer accomplishes next!

Conclusion

My journey from geologist to aspiring backend developer has just begun, and I'm brimming with enthusiasm for what lies ahead. The HNG Internship program, with its emphasis on web development, data analysis, and artificial intelligence, presents an incredible opportunity to not only hone my technical skills but also connect with a like-minded community. I'm confident that the program's comprehensive curriculum and collaborative environment will provide the perfect springboard to propel me towards achieving my dream of building earth process simulations through code. So, stay tuned – this is just the beginning of my coding adventure!

Rapport de Stage chez Kali Academy

Gérard Cubaka — Fri, 14 Jun 2024 17:36:32 +0000

Remerciements

Je tiens à remercier monsieur Abel Mbula CEO de Kali Academy madame Patience Kavira pour l'opportunité de participer à ce stage, ainsi que les formateurs monsieur Delord Wayire et les collegues de la cohort Mars 2024 de Kali Academy spétialement mon binome Firmin Finva et mes coéquipiers du projet Wikidata Query AI, Landry Bitege, Patrice Kalwira et Espoir Birusha pour leur collaboration, leur soutien et leur partage de connaissances.

Introduction

Ce rapport présente mon expérience de stage chez Kali Academy à Goma, en République Démocratique du Congo. Le stage s'est déroulé du 11 mars au 14 Juin 2024 et a été l'occasion de découvrir l'univers du développement open-source et de la culture hacker.

Première leçon : L'attitude hacker

Le premier mois du stage a été consacré à la présentation du concept de hacker, en s'appuyant sur le texte "What is the Hacker & Hacker Attitude" d'Eric Steven Raymond. Ce texte a permis de comprendre la distinction fondamentale entre les hackers et les crackers. Les hackers sont des passionnés de technologie qui construisent et partagent des outils et des ressources, tandis que les crackers sont des individus motivés par des intentions malveillantes.

L'attitude hacker est basée sur cinq principes clés :

Le monde regorge de problèmes fascinants qui attendent d'être résolus.
Aucun problème ne devrait jamais devoir être résolu deux fois.
L'ennui et la corvée sont mauvais.
La liberté est une bonne chose.
L'attitude ne remplace pas la compétence.

En adoptant ces principes, les hackers développent une approche proactive et créative pour résoudre des problèmes et contribuer à l'avancement technologique.

Learn In Public

Le deuxième mois du stage a été consacré au concept de "Learn In Public". Ce concept encourage à partager ses connaissances et à apprendre en permanence en créant du contenu éducatif et en participant à des événements. L'objectif est de ne pas se focaliser sur la reconnaissance extérieure, mais plutôt sur l'amélioration personnelle et l'aide aux autres.

Contribuer sur un issue sur GitHub

Le dernier mois du stage a été consacré à l'apprentissage des étapes à suivre pour contribuer à un problème (issue) sur GitHub. Les étapes clés sont les suivantes :

S'assurer que l'issue est toujours ouverte
Lire les instructions
Fork le dépôt
Cloner le dépôt en local
Créer une branche locale
Effectuer les modifications nécessaires
Commit et push
Créer une Pull Request (PR)
Suivre les commentaires et effectuer les modifications nécessaires
Attendre la validation et fusion

En suivant ces étapes, les contributeurs peuvent apporter des modifications aux projets open-source et participer à leur développement.

Ce stage chez Kali Academy a été une expérience enrichissante qui m'a permis de découvrir la culture hacker et les principes du développement open-source. J'ai également appris à partager mes connaissances et à contribuer à des projets collaboratifs. Je suis reconnaissant envers les formateurs et les membres de la communauté Kali Academy pour leur accueil et leur partage de connaissances.

Prochaines étapes

Je compte mettre en pratique les connaissances acquises lors de ce stage en continuant à apprendre sur le développement open-source et en contribuant à des projets qui me passionnent. Je souhaite également partager mes connaissances avec d'autres personnes en créant du contenu éducatif et en participant à des événements.

Deuxième leçon : Choisir un projet open-source et apprendre les bases de Git

Le deuxième jour du stage a été consacré à deux thématiques importantes :

1. Choisir un projet open-source

La sélection d'un projet open-source sur lequel contribuer est une étape cruciale pour s'impliquer dans la communauté open-source. Pour faire un choix éclairé, il est recommandé de prendre en compte les points suivants :

Intérêts personnels: Orienter le choix vers un projet en adéquation avec ses centres d'intérêt, qu'il s'agisse d'un domaine technologique spécifique, d'un langage de programmation apprécié ou d'une cause qui tient à cœur.
Niveau de compétence: Sélectionner un projet correspondant à son niveau de compétences. Certains projets s'adressent davantage aux débutants, tandis que d'autres exigent des compétences plus avancées.
Taille du projet: Considérer la taille du projet et de sa communauté. Les projets plus petits peuvent offrir une expérience plus collaborative, tandis que les projets plus importants peuvent présenter des opportunités d'apprentissage et de contribution à plus grande échelle.
Problèmes ouverts: Explorer la liste des problèmes ouverts (issues) sur GitHub pour identifier des tâches à réaliser. Certains projets signalent les problèmes adaptés aux nouveaux contributeurs, ce qui peut constituer un bon point de départ.

Ressources pour trouver des projets open-source:

GitHub Explore: Explorer la section "Explore" sur GitHub pour découvrir des projets populaires et en vogue dans divers domaines.
GitHub Topics: Utiliser la fonction "Topics" sur GitHub pour rechercher des projets par catégorie, langage de programmation ou technologie.
Hacktoberfest: Participer à des événements comme Hacktoberfest qui encouragent la contribution à des projets open-source pendant le mois d'octobre.
Sites Web dédiés: Consulter des sites web comme Open Source Friday, Up For Grabs, CodeTriage ou First Timers Only qui répertorient des projets open-source accueillant les nouveaux contributeurs.
Réseaux sociaux et forums: Suivre des comptes et des communautés liés à l'open-source sur les réseaux sociaux, et participer à des forums comme Reddit r/opensource pour découvrir des projets intéressants.

2. Apprendre les bases de Git

Git est un système de contrôle de version essentiel pour le développement open-source. Il permet de suivre les modifications apportées aux fichiers, de collaborer avec d'autres contributeurs et de gérer différentes versions du code. Le stage a permis d'acquérir les connaissances fondamentales pour utiliser Git, notamment :

Création d'un branch: git checkout -b nom_de_la_branche
Navigation dans les fichiers et répertoires: cd, ls, pwd
Création, copie, déplacement et suppression de fichiers et répertoires: touch, mkdir, cp, mv, rm
Affichage du contenu des fichiers: cat, more, less
Recherche de fichiers: find
Changement des permissions des fichiers: chmod
Commandes utiles: grep, wc, head, tail
Utilisation de l'éditeur Nano: nano
Utilisation de l'éditeur Vim: vim

Ressources pour apprendre Git:

Les deux premiers mois du stage ont permis de découvrir les principes fondamentaux du développement open-source, l'importance de la contribution à des projets existants et les outils essentiels pour s'impliquer dans la communauté. Le choix d'un projet adapté et l'apprentissage des bases de Git constituent des étapes préalables importantes pour débuter en tant que contributeur open-source.

Troisième mois : Contribution à un projet open-source et apprentissage de Wikidata

Le troisième mois du stage ont été consacrés à la mise en pratique des connaissances acquises. Les stagiaires ont eu l'opportunité de :

1. Contribuer à un projet open-source

En se basant sur les notions apprises les deux premiers jours, les stagiaires ont choisi un projet open-source auquel ils souhaitaient contribuer. Ils ont suivi les étapes suivantes :

Forker le projet: Ils ont créé une copie du projet sur leur propre compte GitHub.
Cloner le projet en local: Ils ont téléchargé le projet sur leur ordinateur.
Effectuer les modifications: Ils ont apporté des modifications au code du projet en suivant les directives et les besoins du projet.
Tester les modifications: Ils ont testé leurs modifications pour s'assurer qu'elles ne causaient pas de problèmes.
Pusher les modifications: Ils ont envoyé leurs modifications vers leur fork sur GitHub.
Créer une Pull Request: Ils ont soumis une demande de fusion pour que leurs modifications soient intégrées au projet original.

2. Apprendre les bases de Wikidata

Wikidata est une base de données collaborative permettant de stocker et d'interroger des informations structurées. Les stagiaires ont découvert :

La structure de Wikidata: Ils ont compris comment les données sont organisées en triplets sujet-prédicat-objet.
Le langage SPARQL: Ils ont appris à utiliser SPARQL pour interroger les données de Wikidata.
Des exemples de requêtes SPARQL: Ils ont pratiqué la formulation de requêtes pour récupérer des informations spécifiques de Wikidata.

Ressources pour apprendre Wikidata:

Conclusion

Le stage chez Kali Academy a permis aux participants d'acquérir des connaissances fondamentales sur le développement open-source et l'utilisation de Wikidata. Ils ont pu mettre en pratique leurs acquis en contribuant à un projet open-source et en explorant les requêtes SPARQL. Ce stage a constitué une expérience enrichissante et motivante pour les stagiaires, les encourageant à s'impliquer davantage dans la communauté open-source et à poursuivre leur apprentissage dans ce domaine.

Gérard Cubaka Bisimwa
https://ger-cub.github.io/portfoliogerard/

Qu'est-ce qu'un projet MERN Stack et comment créer une application CRUD avec? Partie 2/2, Tutoriel

Gérard Cubaka — Mon, 06 May 2024 21:38:59 +0000

Introduction

Dans la première partie de cet article (dont voici), nous avons défini ce qu'est un projet MERN Stack et exploré les raisons pour lesquelles cette ensemble technologique suscite tant d'intérêt dans la communauté du développement web.

Dans cette deuxième partie nous nous concentrerons sur la création d'une application CRUD basique qui permet aux utilisateurs de créer, lire, modifier et supprimer les données dans la base de données en utilisant les technologies MERN.

Ces opérations CRUD seront implémentées côté serveur (avec Node.js et Express.js) pour exposer les endpoints REST API appropriés. Côté client (avec React.js), on pourra alors utiliser ces endpoints pour effectuer les interactions CRUD avec la base de données MongoDB.

C'est partie pour découvrir comment créer une application CRUD avec l'ensemble technologique MERN.

Construire un CRUD de base à l'aide de la pile MERN

Configuration de l'environnement

Avant de commencer, assurez-vous que les éléments suivants sont installés sur votre machine de développement.

Node.js ( https://nodejs.org/ )
npm (gestionnaire de packages de nœuds)
MongoDB ( https://www.mongodb.com/try/download/community )
Pour le style, j'ai utilisé Tailwind CSS ( https://tailwindcss.com/ ) qui est déjà disponible avec React

Etape1: configurer le projet

Créez un nouveau répertoire de projet et initialisez un nouveau projet Node.js :

   mkdir mern-crud-blog
   cd mern-crud-blog
   npm init -y

Installez les dépendances requises :

   npm install express mongoose body-parser cors

Installez React du côté client :

   npm install -D vite
   cd client 
   npm install react-dom react-scripts axios

Mettre en plae la sutrure du projet:

mern-crud-blog
  ├── client
  │   └── public
  │   |   └── index.html
  |   |   └── images and more.....
  │   └── src
  │       ├── components
  │       ├── App.jsx
  │       └── index.jsx
  │       └── package.json
  ├── server.js
  └── package.json

Etape2: Implémenter le backend (Node.js avec Express et MongoDB)

Créez un fichier nommé server.js dans le répertoire racine et ajouter le code suivant :


// server.js 

//1.Création du serveur.......................................

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');

const app = express();
const port = 5000;

// Activation de CORS pour autoriser les requêtes en provenance d'autres serveurs
app.use(cors());

// Code nécessaire pour analyser le body HTML dans la réponse
app.use(bodyParser.json());

// Etablir la connexion avec mongoDb
mongoose.connect('mongodb://localhost:27017/mern_crud_blog', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const db = mongoose.connection;
db.on('error', console.error.bind(console, 'Erreur de connexion avec MongoDB:'));
db.once('open', () => {
  console.log('Connexion à MongoDB réussie');
});


// nous ajouterons des routes ici à l'avenir .....
// Avance pour en savoir plus


// Création du schéma étudiants
const Schema = mongoose.Schema;
const StudentSchema = new Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
}, { timestamps: true });

// Création du Schéma projets
const ProjectSchema = new Schema({
  name: { type: String, required: true },
  description: { type: String, required: true },
  price: { type: Number, required: true },
}, { timestamps: true });

const Student = mongoose.model('Student', StudentSchema);
const Project = mongoose.model('Project', ProjectSchema);



app.listen(port, () => {
  console.log(`Le Serveur écoute sur le port ${port}`);
});

Etape3: Implémenter le frontend (React.js et Tailwind pour le style)

Dans le dossier client, créez un nouveau fichier nommé index.js et ajoutez le code suivant :

Assurez vous d'avoir installer Tailwind dans votre projet


// client/src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// Si tu veux commencer à mesurer les performances de ton application, passe une fonction
// pour enregistrer les résultats (par exemple : reportWebVitals(console.log))
// ou envoie-les à un point d'analyse. Apprends-en plus : https://bit.ly/CRA-vitals
reportWebVitals();

Créez un nouveau fichier nommé App.jsx dans le même répertoire et ajoutez le code suivant :


// client/src/App.jsx
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';
import StudentList from './components/StudentList';
import ProjectList from './components/ProjectList';
import AddEditProject from './components/AddEditProject';
import AddEditStudent from './components/AddEditStudent';
import Home from './components/Home';

const App = () => {
  // Hooks d'état et d'effet
  const [Students, setStudents] = useState([]);
  const [Projects, setProjects] = useState([]);
  axios.defaults.baseURL = `http://localhost:5000`

  useEffect(() => {
    fetchStudents();
    fetchProjects();
  }, []);

  //Récupération de tous les étudiants dans la base de données
  const fetchStudents = async () => {
    try {
      const response = await axios.get('/api/Students');
      setStudents(response.data.data);
      console.log(response);
    } catch (error) {
      console.error('Error fetching Students:', error);
    }
  };

  //Récupération de tous les projets dans la base de données
  const fetchProjects = async () => {
    try {
      const response = await axios.get('/api/Projects');
      setProjects(response.data.data);
    } catch (error) {
      console.error('Error fetching Projects:', error);
    }
  };
  // Suppression d'un étudiant
  const deleteStudent = async (id) => {
    try {
      await axios.delete(`/api/Students/${id}`);
      fetchStudents(); // Fetch Students after deleting a Student
    } catch (error) {
      console.error('Error deleting Student:', error);
    }
  };
  // Suppression d'un projet
  const deleteProject = async (id) => {
    try {
      await axios.delete(`/api/Projects/${id}`);
      fetchProjects(); // Fetch Projects after deleting a Project
    } catch (error) {
      console.error('Error deleting Project:', error);
    }
  };

  return (
    <div className="mx-auto app h-[100vh]">
      <Router>
        <div className='flex flex-row bg-black py-4 px-4 justify-between align-middle items-center'>
          {/** Header */}
          <div>
            <h1 className="text-3xl font-bold text-white">Inscription PhD Géologie Numérique</h1>
            <small className="text-1xl font-bold text-white">MERN Stack CRUD Application</small>
          </div>

          <div className="flex">
            <div className="mr-4">
              <Link to="/" className="hover:bg-blue-500 rounded-2xl text-white px-2 py-1 rounded">
                Accuel
              </Link>
            </div>
            <div className="mr-4">
              <Link to="/Students" className="hover:bg-blue-500 rounded-2xl text-white px-2 py-1 rounded">
                Etudiants
              </Link>
            </div>
            <div className='mr-4'>
              <Link to="/Projects" className="hover:bg-blue-500 rounded-2xl text-white px-2 py-1 rounded">
                Projects
              </Link>
            </div>
          </div>
        </div>


        <div className=" w-[100%] h-[100%] flex mx-auto w-1/2 place-self-center place-content-center self-center ">

          <div className="flex flex-col bg-gray-600 pt-[2.5rem] w-[18rem]">


            <Link to="/" className="text-xl font-bold text-white">
              <div className={"pl-[2.5rem] hover:bg-blue-500 pt-[1rem] pb-[1rem] m-[5px] rounded-2xl"}>
                Accuel
              </div>
            </Link>


            <Link to="/Students" className="text-xl font-bold text-white">
              <div className="pl-[2.5rem] hover:bg-blue-500 pt-[1rem] pb-[1rem] m-[5px] rounded-2xl">
                Liste des étudiants
              </div>
            </Link>

            <Link to="/Projects" className="text-xl font-bold text-white">
              <div className='pl-[2.5rem] hover:bg-blue-500 pt-[1rem] pb-[1rem] m-[5px] rounded-2xl'>
                Projet d'études
              </div>
            </Link>
          </div>

          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/Students" element={<StudentList Students={Students} fetchStudents={fetchStudents} deleteStudent={deleteStudent} />} />
            <Route path="/Projects" element={<ProjectList Projects={Projects} fetchProjects={fetchProjects} deleteProject={deleteProject} />} />
            <Route path="/add-Project" element={<AddEditProject fetchProjects={fetchProjects} />} />
            <Route path="/add-Student" element={<AddEditStudent fetchStudents={fetchProjects} />} />
            <Route path="/edit-Project/:id" element={<AddEditProject fetchProjects={fetchProjects} />} />
            <Route path="/edit-Student/:id" element={<AddEditStudent fetchStudents={fetchProjects} />} />
          </Routes>
        </div>

      </Router>
    </div>
  );
};

export default App;

Étape 4 : implémenter des routes backend pour les utilisateurs et les produits

Dans le fichier server.js, ajoutez les routes suivantes pour les opérations CRUD des utilisateurs et des produits :


// server.js 
// ... (code précédent) 

//2. Routes pour les étudiants..............................
// Récupération de tous les utilisateurs
app.get('/api/Students', (req, res) => {
  Student.find().then(item => {
    console.log(item);
    res.status(200).json({ message: 'Item fetched successfully', data: item, });
  })
    .catch(err => {
      console.log(err);
      res.status(500).json({ message: 'Server error' });
    });
});

// récupérer un seul utilisateur
app.get('/api/Students/:id', (req, res) => {
  const { id } = req.params;
  Student.find({_id:id}).then(item => {
    console.log(item);
    res.status(200).json({ message: 'Item fetched successfully', data: item, });
  })
    .catch(err => {
      console.log(err);
      res.status(500).json({ message: 'Server error' });
    });
});

// créer un nouvel étudiant
app.post('/api/Students', (req, res) => {
  const newStudent = new Student(req.body);
  console.log(newStudent);
  newStudent.save().then(item => {
    console.log(item);
    res.status(201).json({ message: 'Item added successfully' });
  })
    .catch(err => {
      console.log(err);
      res.status(500).json({ message: 'Server error' });
    });
});

// Mettre à jour (modifier)le nouvel étudiant
app.put('/api/Students/:id', (req, res) => {
  const { id } = req.params;
  Student.findByIdAndUpdate(id, req.body, { new: true }).then(item => {
    console.log(item);
    res.status(203).json({ message: 'Item Fetched Successfully', data:item });
  })
    .catch(err => {
      console.log(err);
      res.status(500).json({ message: 'Server error' });
    });
});

// Supprimer un étudiant
app.delete('/api/Students/:id', (req, res) => {
  const { id } = req.params;
  Student.findByIdAndRemove(id).then(item => {
    console.log(item);
    res.status(203).json({ message: 'Item Fetched Successfully', data:item });
  })
    .catch(err => {
      console.log(err);
      res.status(500).json({ message: 'Server error' });
    });
});

// 3. Routes pour les projets................................
// Récupération de tous les projets
app.get('/api/Projects', (req, res) => {
  Project.find().then(item => {
    console.log(item);
    res.status(201).json({ message: 'Projects Fetched Successfully!', data: item });
  })
    .catch(err => {
      console.log(err);
      res.status(500).json({ message: 'Server error' });
    });
});

// Récupération d'un seul projet
app.get('/api/Projects/:id', (req, res) => {
  const { id } = req.params;
  Project.find({_id:id}).then(item => {
    console.log(item);
    res.status(200).json({ message: 'Item fetched successfully', data: item, });
  })
    .catch(err => {
      console.log(err);
      res.status(500).json({ message: 'Server error' });
    });
});

// Création d'un nouveau projet
app.post('/api/Projects', (req, res) => {
  const newProject = new Project(req.body);
  newProject.save().then(item => {
    console.log(item);
    res.status(201).json({ message: 'Item added successfully' });
  })
    .catch(err => {
      console.log(err);
      res.status(500).json({ message: 'Server error' });
    });
});

// Mettre à jour (modifier) un projet
app.put('/api/Projects/:id', (req, res) => {
  const { id } = req.params;
  Project.findByIdAndUpdate(id, req.body, { new: true }).then(item => {
    console.log(item);
    res.status(203).json({ message: 'Item Fetched Successfully', data:item });
  })
    .catch(err => {
      console.log(err);
      res.status(500).json({ message: 'Server error' });
    });
});

// Supprimet un projet
app.delete('/api/Projects/:id', (req, res) => {
  const { id } = req.params;
  Project.findByIdAndRemove(id).then(item => {
    res.status(203).json({ message: 'Deleted Successfully' });
  })
    .catch(err => {
      console.log(err);
      res.status(500).json({ message: 'Server error' });
    });
});

// ... (code restant)

Étape 5 : implémenter des composants frontend pour les utilisateurs et les produits

Dans le répertoire client/src/components, créez un fichier nommés Home.jsx et ajoutez le code suivant :


// client/src/components/UserList.js
import React, { useEffect } from 'react';

const Home = () => {

    return (
        <div className='mt-10 flex flex-col mx-auto w-[70%]'>

            <div>
                <h1 className="text-[3rem] font-bold mb-2">Inscription PhD Géologie Numérique</h1>
                <h2 className="text-xl font-bold mb-2">Aprennez l'approche numérique de la géologie de terrain</h2>
                <p>Pour vous inscrire au programme de formation, vous devez fournir vos infromations proposer un projet de recherche.</p>
                <br />
                <div className=''>
                <img className='w-[25rem]' src="https://www.researchgate.net/profile/Remi-Valois/publication/278637347/figure/fig33/AS:332216954572802@1456218102119/Modele-numerique-de-terrain-avec-une-coupe-geologique-du-secteur-central-du-Causse-de.png" alt="" />
                </div>
                <br />
                <p>Pour plus d'information contactez cliquez <a className='text-blue-500' href='https://ger-cub.github.io/portfoliogerard/'>ici.</a></p>
                <br />
                <h1 className="text-[.6rem] font-[200] mb-2">MERN Stack CRUD Application Demostration ©Gerard-Mai/2024</h1>
            </div>

        </div>
    );
};

export default Home;

Dans le répertoire client/src/components, créez deux fichiers nommés StudentList.jsx, ProjectList.jsx et ajoutez le code suivant :


// client/src/components/StudentList.jsx
// client/src/components/StudentList.js
import React, { useEffect } from 'react';
import { Link, useSearchParams, useNavigate } from 'react-router-dom';

const StudentList = ({ Students, deleteStudent, fetchStudents }) => {
  const navigate = useNavigate();

  const editStudent = (id) => {
    navigate(`/edit-Student/${id}`);
  }

  useEffect(() => {
    fetchStudents()
  }, [])
  return (
    <div className=' mt-10 flex flex-col mx-auto w-[70%] overflow-y-auto'>
      <div className='justify-between flex'>
        <h2 className="text-xl font-bold mb-2">Liste des étudiants</h2>
        <Link to="/add-Student" className="bg-blue-500 text-white px-2 py-1 rounded">
          Ajouter un étudiant
        </Link>
      </div>
      <table className="table-auto mt-10 w-full">
        <thead>
          <tr>
            <th className="px-4 border py-2">Noms</th>
            <th className="px-4 border py-2">Adresses mails</th>
            <th className="px-4 border py-2">Actions</th>
          </tr>
        </thead>
        <tbody>
          {Students?.length
            ?
            Students.map((Student) => (
              <tr key={Student._id}>
                <td className="border px-4 py-2 text-center">{Student.name}</td>
                <td className="border px-4 py-2 text-center">{Student.email}</td>
                <td className="border px-4 py-2 flex flex-nowrap justify-center">
                  <button
                    className="bg-green-500 text-white px-2 py-1 rounded"
                    onClick={() => editStudent(Student._id)}
                  >
                    Modifier
                  </button>
                  <button
                    className="bg-red-500 ms-2 text-white px-2 py-1 rounded"
                    onClick={() => deleteStudent(Student._id)}
                  >
                    Supprimer
                  </button>

                </td>
              </tr>
            ))
            :
            <td className="border px-4 py-2 text-center" rowSpan={10} colSpan={10}>La liste est encore vide</td>

          }
        </tbody>
      </table>
    </div>
  );
};

export default StudentList;


// client/src/components/ProjetList.jsx 
// client/src/components/ProjectList.js
import React, { useEffect } from 'react';
import { Link, useNavigate } from 'react-router-dom';

const ProjectList = ({ Projects, deleteProject, fetchProjects }) => {
  const navigate = useNavigate();

  const editProject = (id) => {
    navigate(`/edit-Project/${id}`);
  }
  useEffect(() => {
    fetchProjects();
  }, [])
  return (
    <div className='mt-10 flex flex-col mx-auto w-[70%] max-h-[80vh] overflow-y-auto'>
      <div className='justify-between flex'>
        <h2 className="text-xl font-bold mb-2">Liste des projets</h2>
        <Link to="/add-Project" className="bg-blue-500 text-white px-2 py-1 rounded">
          Ajouter un projet
        </Link>
      </div>
      <table className="table-auto mt-10 w-full">
        <thead>
          <tr>
            <th className="px-4 border  py-2">Noms</th>
            <th className="px-4 border  py-2">Description</th>
            <th className="px-4 border  py-2">Coût</th>
            <th className="px-4 border  py-2">Actions</th>
          </tr>
        </thead>
        <tbody>
          {

          Projects?.length ?
            Projects.map((Project) => (
              <tr key={Project._id}>
                <td className="border px-4 py-2 text-center">{Project.name}</td>
                <td className="border px-4 py-2 text-center">{Project.description}</td>
                <td className="border px-4 py-2 text-center">${Project.price}</td>
                <td className="border px-4 py-2 flex flex-nowrap justify-center">
                <button
                    className="bg-green-500 text-white px-2 py-1 rounded"
                    onClick={() => editProject(Project._id)}
                  >
                    Modifier
                  </button>
                  <button
                    className="bg-red-500 text-white px-2 ms-2 py-1 rounded"
                    onClick={() => deleteProject(Project._id)}
                  >
                    Supprimer
                  </button>
                </td>
              </tr>
            )) :
            <td className="border px-4 py-2 text-center" rowSpan={10} colSpan={10}>La liste est encore vide</td>

          }
        </tbody>
      </table>
    </div>
  );
};

export default ProjectList;

Dans le client/src/componentsrépertoire, créez deux fichiers nommés AddEditStudent.jsx et AddEditProject.jsx, et ajoutez le code suivant :


// client/src/pages/AddEditProject.js
// client/src/pages/AddEditProject.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useNavigate, useParams } from 'react-router-dom';

const AddEditProject = ({ fetchProjects = null }) => {
  const navigate = useNavigate();
  const { id } = useParams();
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [price, setPrice] = useState('');

  useEffect(() => {
    if (id) {
      fetchProject();
    }
  }, [id]);

  const fetchProject = async () => {
    try {
      const response = await axios.get(`/api/Projects/${id}`);
      setName(response.data.data[0].name);
      setDescription(response.data.data[0].description);
      setPrice(response.data.data[0].price);
    } catch (error) {
      console.error('Error fetching Project:', error);
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const newProject = { name, description, price: Number(price) };

    if (id) {
      try {
        await axios.put(`/api/Projects/${id}`, newProject);
        navigate('/Projects');
      } catch (error) {
        console.error('Error updating Project:', error);
      }
    } else {
      try {
        await axios.post('/api/Projects', newProject);
        fetchProjects(); // Fetch Projects after adding a new Project
        navigate('/Projects');
      } catch (error) {
        console.error('Error adding Project:', error);
      }
    }



  };

  // Compteur des mots

  const compterMots = () => {
    const mots = description.split(' ');
    return mots.length - 1;
  };

  return (
    <div className='w-[85%] p-[5rem]'>
      <h2 className="text-xl font-bold mb-2">{id ? 'Ajoutez votre' : 'Modifiez votre'} Projet</h2>
      <form onSubmit={compterMots() <= 450 && handleSubmit}>
        <div className="mb-4">
          <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="name">
            Nom complet
          </label>
          <input
            type="text"
            id="name"
            name="name"
            value={name}
            placeholder='Nom Postnom Prenom'
            onChange={(e) => setName(e.target.value)}
            required
            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          />
        </div>
        <div className="mb-4">
          <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="description">
            Bref description de votre Projet de recherche / Sujet, Problèmatique, Objectifs, Méthodologies et resultat attendus / 450 mots max
          </label>
          <textarea
            id="description"
            name="description"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            required
            className="shadow appearance-none border h-[15rem] rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          />
          <small className={compterMots() < 450 ? 'text-green-500 text-justify' : 'text-red-500 text-justify'}>{compterMots()} mots.</small>
        </div>
        <div className="mb-4">
          <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="price">
            Coût estimé en $
          </label>
          <input
            type="number"
            id="price"
            name="price"
            value={price}
            onChange={(e) => setPrice(e.target.value)}
            required
            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          />
        </div>
        <div>
          <button
            type="submit"
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
          >
            Enregister
          </button>
        </div>
      </form>
    </div>
  );
};

export default AddEditProject;

A ce stade votre application devrait ressemblé à ceci :


// client/src/pages/AddEditStudent.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useNavigate,useSearchParams, useParams } from 'react-router-dom';

const AddEditStudent = ({ fetchStudents }) => {
  const navigate = useNavigate();

  const { id } = useParams();
  const [name, setname] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');


  useEffect(() => {
    if (id) {
      console.log('here');
      fetchStudent();
    }
  }, [id]);

  const fetchStudent = async () => {
    try {
      const response = await axios.get(`/api/Students/${id}`);
      setname(response.data.data[0].name);
      setEmail(response.data.data[0].email);
      setPassword(response.data.data[0].password);
    } catch (error) {
      console.error('Error fetching Student:', error);
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const newStudent = { name, email, password };

    if (id) {
      try {
        await axios.put(`/api/Students/${id}`, newStudent);
        navigate('/Students');
      } catch (error) {
        console.error('Error updating Student:', error);
      }
    } else {
      try {
        await axios.post('/api/Students', newStudent);
        fetchStudents(); // Fetch Students after adding a new Student
        navigate('/Students');
      } catch (error) {
        console.error('Error adding Student:', error);
      }
    }
  };

  return (
    <div className='w-[85%] p-[5rem]'>
      <h2 className="text-xl font-bold mb-2"> {id ? 'Modifier' : 'Ajouter'} l'étudiant</h2>
      <form onSubmit={handleSubmit} className='w-[70%]'>
        <div className="mb-4">
          <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="name">
            Nom
          </label>
          <input
            type="text"
            id="name"
            name="name"
            value={name}
            onChange={(e) => setname(e.target.value)}
            required
            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          />
        </div>
        <div className="mb-4">
          <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="email">
            Adresse mail
          </label>
          <input
            type="email"
            id="email"
            name="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          />
        </div>
        <div className="mb-4">
          <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="email">
            Mot de passe
          </label>
          <input
            type="password"
            id="password"
            name="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          />
        </div>
        <div>
          <button
            type="submit"
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
          >
            Enregistrer
          </button>
        </div>
      </form>
    </div>
  );
};

export default AddEditStudent;

Dans le fichier client/src/App.jsx, vous avez déjà importé les composants StudentListet ProjectList pour les afficher dans le Appcomposant, extrayez à nouveau le code.

Étape 6 : tester l'application

Si vous êtes sous Windows ou Mac, vous pouvez utiliser l'interface graphique pour démarrer le serveur MongoDb, sinon sous Linux, vous pouvez utiliser mongod la commande pour exécuter le service.

Ouvrez un nouveau terminal et démarrez le serveur MongoDB :

mongod

Dans un autre terminal, démarrez le serveur Node.js :

serveur de nœud.js

Dans un troisième terminal, accédez au client répertoire et démarrez le serveur de développement React :

client cd
 démarrage npm

Ouvrez votre navigateur Web et accédez http://localhost:3000 à l'application d'Inscription MERN Stack CRUD Application.

Pour la référence GitHub

https://github.com/Ger-Cub/inscription-phd-mern-crud-app

Deploy a MERN STACK app on Render platform in 2024
(https://www.youtube.com/watch?v=ZsFwpjFmpFQ)

Choses à ne jamais oublier :

Adoptez la documentation comme boussole pour plus de clarté et de progrès.
Nourrissez un esprit curieux en vous demandant : « Qu’ai-je fait et pourquoi l’ai-je fait ? » à chaque étape.
Pratiquez la pleine conscience et restez concentré pour exceller dans n’importe quelle entreprise.
L'amélioration continue est un voyage, et même avec un dépôt GitHub minutieusement testé et à jour, soyez ouvert à tout commentaire pour améliorer davantage le code.

Merci d'avoir lu jusqu'au bout. Veuillez envisager de suivre l’écrivain et cette publication. Visitez Stackademic pour en savoir plus sur la façon dont nous démocratisons l’enseignement gratuit de la programmation dans le monde.

Qu'est-ce qu'un projet MERN et comment créer une application CRUD avec? Partie 1/2

Gérard Cubaka — Sat, 04 May 2024 15:13:30 +0000

1. Introduction

MERN fait référence aux premières lettres de chacune des technologies suivantes: MongoDB, Express.js, React.js et Node.js. Cet ensemble des technologies est devenue une solution de choix pour le développement d'applications web modernes. Grâce à cette combinaison de technologies JavaScript, les développeurs peuvent créer des applications complètes, du backend au frontend, tout en bénéficiant des avantages du full-stack.

CRUD signifie "Create", "Read", "Update", "Delete" qui signifie produire, lire, mettre à jour et supprimer. En programmation, ce sont les quatre fonctions de base du stockage persistant.

En outre, chaque lettre du signifiant consultera toutes les fonctions mortes dans les applications de bases de données électroniques et mappées à une technique de protocole de transfert hypertexte régulière (HTTP par exemple), une instruction SQL ou une opération DDS.

Dans cet article, nous allons d'abord définir ce qu'est un projet MERN Stack et explorer les raisons pour lesquelles cette ensemble technologique suscite tant d'intérêt dans la communauté du développement web.

Ensuite, nous nous concentrerons sur la création d'une application CRUD basique qui permet aux utilisateurs de créer, lire, modifier et supprimer les données dans la base de données en utilisant les technologies MERN. Ces quattre opérations seront implémentées grâces aux requetes HTTP get, put, post et delete. Nous parcourrons étape par étape les différentes phases de développement, depuis la configuration de l'environnement de travail jusqu'au déploiement final de l'application.

Que vous soyez un développeur débutant ou chevronné, ce tutoriel vous fournira les connaissances et les outils nécessaires pour maîtriser la conception d'applications web modernes et évolutives à l'aide de l'ensemble MERN.

C'est parti pour découvrir comment tirer le meilleur parti de cette stack JavaScript incontournable.

2. Projet MERN Stack

Une solide analyse technique est vraiment recommandée et nécessaire lorsque vous envisagez d’investir votre argent pour créer une application Web.

Comme précédemment dit, MERN Stack est une combinaison de technologies utilisées pour créer des applications Web premium qui a fait ses preuves sur le marché.

Pourquoi choisir l'ensemble MERN pour votre prochain projet ?

Faisabilité des quatre meilleures technologies

a. MongoDB:

MongoDB est une base de données open source orientée documents, ce qui signifie qu'elle stocke les données sous forme de documents au format JSON, plutôt que dans des tables avec des lignes et des colonnes comme dans les bases de données relationnelles traditionnelles. Cette conception flexible permet à MongoDB d'être facilement adaptable aux changements des besoins de l'application.

MongoDB offre des capacités de requêtage et d'analyse puissantes, sans nécessiter de définir un schéma rigide à l'avance. Cela facilite l'évolution de la structure des données au fur et à mesure que l'application se développe.

De manière générale, les bases de données NoSQL comme MongoDB sont souvent plus évolutives et performantes que les bases de données relationnelles, notamment pour la gestion de gros volumes de données à grande vitesse. Cela en fait un choix intéressant pour de nombreuses applications modernes, en particulier celles qui doivent traiter de grandes quantités de données non structurées.

b. Express.JS:

Express.js est un framework web rapide, minimaliste et sans opinion forte pour Node.js. C'est l'un des meilleurs frameworks JavaScript pour le développement back-end.

La principale utilisation d'Express.js est de créer des API REST qui reçoivent les demandes du front-end et renvoient les réponses appropriées. L'intégration native avec Node.js est l'une des principales raisons pour lesquelles on devrait choisir Express.js.

Grâce à Express.js, on peut développer un back-end en bénéficiant de la prise en charge de tous les packages NPM, ce qui facilite grandement le processus de développement. Express.js permet de gérer efficacement les requêtes entrantes, en offrant une gestion robuste de la logique d'entrée/sortie.

Enfin, Express.js bénéficie d'une large communauté open source très active et solidaire, ce qui en fait un choix très intéressant pour le développement back-end en JavaScript.

c. React.JS:

React.js est une bibliothèque JavaScript pour la construction d'interfaces utilisateur. Il se base sur le concept d'application mono-page (SPA - Single Page Application).

Une application mono-page consiste à accéder à l'intégralité de l'application web depuis une seule et même page. Cela évite de devoir recharger la page complète à chaque interaction de l'utilisateur, comme c'est le cas dans les applications web traditionnelles.

Cette approche permet d'offrir une expérience utilisateur beaucoup plus fluide et rationalisée, car l'application peut se mettre à jour dynamiquement sans nécessiter de rechargement complet de la page. L'utilisateur a ainsi l'impression d'interagir avec une application de bureau plutôt qu'avec un site web classique.

Cette architecture mono-page, combinée aux puissantes capacités de React.js en matière de conception d'interfaces utilisateur, en fait un choix très populaire pour le développement d'applications web modernes et réactives.

d. Node.js:

Node.js est un environnement d'exécution JavaScript côté serveur qui est reconnu pour ses performances élevées. Cette rapidité s'explique principalement par le fait que Node.js utilise un modèle d'exécution asynchrone et événementiel.

Plutôt que de bloquer le thread principal lors de l'exécution d'opérations lentes comme les accès disque ou réseau, Node.js gère ces opérations de manière asynchrone. Cela lui permet de rester très réactif et de traiter de nombreuses requêtes simultanément sans ralentir.

Ces performances impressionnantes, en comparaison à d'autres langages de programmation côté serveur, permettent aux applications développées avec Node.js d'accéder aux données de manière beaucoup plus rapide. C'est un avantage crucial dans un contexte où les utilisateurs attendent des temps de chargement de page inférieurs à la seconde.

De plus, cette grande efficacité de Node.js se traduit également par des coûts d'exploitation serveur réduits, car moins de ressources matérielles sont nécessaires pour atteindre des niveaux de performance élevés.

Voici quelques avantages des applications et des services

Les exigences complexes du site Web peuvent être divisées en segments pour gagner du temps.
Couvre tout, du développement front-end au développement back-end.
Tout est sous contrôle, du développement frontend au développement backend.
Basculement facile entre le développement front-end et back-end en fonction des exigences du projet.
Il est facile de s’approprier la conception et la mise en œuvre sur un site.
Facile à mettre à niveau avec de nouvelles technologies et de nouveaux outils plus rapidement qu'une personne spécialisée uniquement dans la technologie front-end ou back-end.
Compatible avec les quatre principales technologies MongoDB, Express.js, React et Node.js.
Ce sont des frameworks open source et soutenus par de bons supports communautaires.
Peut être utilisé pour développer des PWA. Les applications Web progressives rassemblent le monde avec les navigateurs, les sites Web et les applications mobiles.

3. Comment créer une application CRUD dans un projet MERN ?

Voici un développement plus détaillé sur les opérations CRUD dans une application React :

Création d'une application CRUD de base avec MERN

Ce point sera démontré sous forme de tutoriel dans la pratie 2. Nous allons développer une application CRUD permettant aux utilisateur de créer, lire, modiffier et supprimer du contenue dans la base de donnée en utilisant les REST API.

Voici les étapes pour créer une application CRUD:

Configuration de l'environnement

On commence par installer et configurer les outils nécessaires :

Node.js et npm (gestionnaire de paquets Node)
Un serveur MongoDB (local ou en ligne)
Créer un nouveau projet React avec create-react-app
Initialiser un nouveau projet Express.js

Implémentation du backend avec Express.js et MongoDB

Sur le serveur, crée les endpoints REST API qui permettront d'effectuer les opérations CRUD :

Create (Créer) :
- Endpoint : POST /api/items
- Exemple : Créer un nouvel élément dans la base de données en envoyant les données dans le corps de la requête POST
Read (Lire) :
- Endpoint : GET /api/items
- Exemple : Récupérer la liste de tous les éléments dans la base de données
- Endpoint : GET /api/items/:id
- Exemple : Récupérer les détails d'un élément spécifique en utilisant son identifiant
Update (Mettre à jour) :
- Endpoint : PUT /api/items/:id
- Exemple : Mettre à jour les informations d'un élément existant en envoyant les nouvelles données dans le corps de la requête PUT
Delete (Supprimer) :
- Endpoint : DELETE /api/items/:id
- Exemple : Supprimer un élément existant en utilisant son identifiant dans l'URL de la requête DELETE

Implémentation du frontend avec React.js

Côté client, on crée les composants React qui permettront d'interagir avec les endpoints REST API :

Composant de liste d'éléments :
- Récupérer la liste des éléments via une requête GET /api/items
- Afficher la liste des éléments dans le composant
Composant de détails d'un élément :
- Récupérer les détails d'un élément spécifique via une requête GET /api/items/:id
- Afficher les informations de l'élément dans le composant
Composant de création d'un élément :
- Permettre à l'utilisateur de saisir les informations d'un nouvel élément
- Envoyer ces données via une requête POST /api/items pour créer le nouvel élément
Composant de mise à jour d'un élément :
- Récupérer les informations de l'élément à mettre à jour via une requête GET /api/items/:id
- Permettre à l'utilisateur de modifier les informations de l'élément
- Envoyer les nouvelles données via une requête PUT /api/items/:id pour mettre à jour l'élément
Composant de suppression d'un élément :
- Ajouter un bouton de suppression qui envoie une requête DELETE /api/items/:id pour supprimer l'élément

Déploiement de l'application

Une fois le développement terminé, nous pourrons déployer l'application sur un serveur en ligne (par exemple, sur un service cloud comme AWS, Google Cloud, Heroku, versel ou gitpage) pour la rendre accessible aux utilisateurs.

Conclusion Partielle

Comme expliqué ci-dessus, l'ensemble du système, y compris le front-end, le back-end et la base de données, utilise l'API REST, qui agit comme un « middleware » et est réutilisable pour toute autre application comme un mobile, un logiciel, etc., très facilement. MERN est utilisé pour créer des pages Web qui entrent dans la catégorie premium SPA (application à page unique) Rendu rapide des pages Web.

Démystifier React : Un aperçu des 17 Concepts clés de React

Gérard Cubaka — Sat, 20 Apr 2024 12:58:21 +0000

Introduction

React est l'une des bibliothèques JavaScript les plus populaires pour la création d'interfaces utilisateur interactives et dynamiques. Cependant, avec ses nombreux concepts et fonctionnalités, il peut parfois sembler intimidant pour les nouveaux développeurs. Dans cet article, nous allons démystifier React en passant en revue 17 concepts clés qui vous aideront à mieux comprendre et maîtriser cette bibliothèque. De la création de composants essentiels à la gestion des données dynamiques en passant par la gestion des événements et des erreurs, nous explorerons en détail chaque aspect important de React. Alors, préparez-vous à plonger dans le monde fascinant de React et à découvrir comment vous pouvez créer des interfaces utilisateur incroyables avec facilité.

1. Composants : briques essentielles de l'interface utilisateur

Qu'est-ce qu'un composant React ?

Un composant React est un bloc de construction réutilisable pour l'interface utilisateur d'une application React. Il représente une partie spécifique de l'interface, comme un bouton, un champ de saisie, un menu déroulant ou une section entière de la page. Les composants sont la pierre angulaire de l'architecture React et permettent de créer des interfaces utilisateur complexes et modulaires.

Pourquoi utiliser des composants ?

Les composants offrent de nombreux avantages pour le développement d'interfaces utilisateur React :

Réutilisabilité : Les composants peuvent être utilisés et réutilisés à travers l'application, ce qui réduit la duplication de code et favorise la cohérence de l'interface.
Modularité : Les composants permettent de diviser l'interface utilisateur en modules indépendants, ce qui facilite la maintenance et le développement de l'application.
Encapsulation : Les composants encapsulent le code HTML, CSS et JavaScript liés à une partie spécifique de l'interface, ce qui favorise la lisibilité et la séparation des préoccupations.
Composition : Les composants peuvent être imbriqués les uns dans les autres pour créer des structures d'interface utilisateur plus complexes.

Exemple de composant React : un bouton
Voici un exemple simple d'un composant React qui représente un bouton :


function Button(props) {
  return (
    <button onClick={props.handleClick}>
      {props.label}
    </button>
  );
}

Ce composant Button reçoit deux props : label et handleClick. Le prop label définit le texte affiché sur le bouton, tandis que le prop handleClick est une fonction qui sera appelée lorsque l'utilisateur clique sur le bouton.

Utilisation du composant Button

Pour utiliser le composant Button dans un autre composant React, il suffit de l'appeler comme une balise HTML :

<Button label="Cliquez-moi !" handleClick={() => alert("Bouton cliqué !")} />

Ce code rendra un bouton avec le texte "Cliquez-moi !" et appellera la fonction alert lorsque l'utilisateur clique sur le bouton.
Les composants React sont des éléments essentiels pour créer des interfaces utilisateur modulaires, réutilisables et maintenables. Ils constituent la base de l'architecture React et permettent de construire des applications web puissantes et évolutives.

2. JSX : Syntaxe d'extension JavaScript pour React

Qu'est-ce que JSX ?

JSX (JavaScript Syntax Extension) est une extension syntaxique qui permet d'écrire du HTML directement dans du code JavaScript. Il est utilisé dans les applications React pour créer des interfaces utilisateur de manière plus claire et plus lisible que la création d'éléments d'interface utilisateur à l'aide de la fonction createElement de React.

Pourquoi utiliser JSX ?

JSX offre plusieurs avantages par rapport à la création d'éléments d'interface utilisateur avec createElement :

Syntaxe HTML familière : JSX utilise une syntaxe HTML proche de celle du HTML traditionnel, ce qui la rend plus facile à apprendre et à utiliser pour les développeurs web familiers avec le HTML.
Lisibilité accrue : Le code JSX est généralement plus lisible que le code JavaScript qui utilise createElement, car il permet de séparer le code HTML du code JavaScript.
Débogage plus facile : Les erreurs de syntaxe JSX sont généralement plus faciles à identifier et à déboguer que les erreurs liées à l'utilisation de createElement.

Exemple de JSX

Voici un exemple de code JSX qui crée un élément <button> :

const Button = () => {
  return (
    <button>Cliquez-moi !</button>
  );
};

Ce code est équivalent à l'utilisation de createElement de la manière suivante :

const Button = () => {
  return React.createElement('button', {}, 'Cliquez-moi !');
};

Comment JSX est transformé?

Le code JSX est compilé en JavaScript standard avant d'être exécuté par le navigateur. Ce processus de compilation utilise une bibliothèque telle que Babel pour transformer le code JSX en appels à la fonction createElement de React.

JSX est une extension syntaxique utile pour React qui permet aux développeurs de créer des interfaces utilisateur de manière plus claire, plus lisible et plus maintenable. Il est largement utilisé dans les applications React et constitue un élément essentiel de la pile de développement React.

3. Les Props React : Passer des données entre les composants

Qu'est-ce qu'une prop React ?

Une prop (propriété) React est un moyen de passer des données d'un composant parent à un composant enfant. Les props permettent de partager des informations entre les différentes parties d'une interface utilisateur, ce qui est essentiel pour créer des applications React dynamiques et réactives.

Comment définir des props

Les props sont définies comme des attributs sur les balises des composants parents. Les valeurs des props sont ensuite accessibles dans les composants enfants sous forme de propriétés JavaScript.

// Composant parent
function App() {
  return (
    <Greeting message="Bonjour à tous !" />
  );
}

// Composant enfant
function Greeting(props) {
  return <h1>{props.message}</h1>;
}

Dans cet exemple, le composant parent App définit une prop message avec la valeur "Bonjour à tous !". Cette prop est ensuite passée au composant enfant Greeting, qui l'utilise pour afficher le message "Bonjour à tous !" dans un titre <h1>.

Types de props

Il existe différents types de props React :

Props requises : Les props requises doivent être définies dans le composant parent, sinon une erreur est générée.
Props par défaut : Les props par défaut définissent une valeur initiale pour la prop si elle n'est pas fournie par le composant parent.
Props de type : Les props de type permettent de spécifier le type de données attendu pour la prop.
Props rest : Les props rest permettent de récupérer toutes les props restantes non définies explicitement.

Exemple concret : Afficher le nombre de clics d'un bouton
Considérons un exemple où l'on souhaite afficher le nombre de fois qu'un bouton a été cliqué. On peut utiliser des props pour passer le nombre de clics d'un composant parent à un composant enfant qui affiche le nombre.

// Composant parent
function App() {
  const [clickCount, setClickCount] = useState(0);

  return (
    <div>
      <Button onClick={() => setClickCount(clickCount + 1)} />
      <DisplayCount clickCount={clickCount} />
    </div>
  );
}

// Composant enfant (bouton)
function Button(props) {
  return <button onClick={props.handleClick}>Cliquez-moi !</button>;
}

// Composant enfant (affichage du nombre de clics)
function DisplayCount(props) {
  return <p>Nombre de clics : {props.clickCount}</p>;
}

Dans cet exemple, le composant parent App gère l'état clickCount qui représente le nombre de clics sur le bouton.

Lorsque le bouton est cliqué, la fonction handleClick est appelée, ce qui incrémente le clickCount et déclenche un nouveau rendu du composant. Le composant DisplayCount reçoit la prop clickCount du composant parent et l'affiche dans un paragraphe.

Les props React sont un élément essentiel pour passer des données entre les composants et créer des interfaces utilisateur dynamiques et réactives. Elles permettent de partager des informations entre les différentes parties d'une application, ce qui facilite le développement et la maintenance de code React complexe.

4. Children en React : Imbriquer des composants

Qu'est-ce que children en React ?

La prop children est une prop spéciale en React qui permet d'imbriquer des composants. Elle permet de passer des composants enfants dans un composant parent, en les plaçant entre les balises d'ouverture et de fermeture du composant parent. Ces composants enfants sont accessibles dans le composant parent via la prop children.

Comment utiliser children

Pour utiliser la prop children, il suffit de placer les composants enfants entre les balises d'ouverture et de fermeture du composant parent :

<ParentComponent>
  <ChildComponent1 />
  <ChildComponent2 />
  <ChildComponent3 />
</ParentComponent>

Dans cet exemple, le composant ParentComponent reçoit trois composants enfants : ChildComponent1, ChildComponent2 et ChildComponent3.

Accès aux children dans le composant parent

Les composants enfants sont accessibles dans le composant parent via la prop children. La prop children est un objet qui contient un tableau de tous les composants enfants.

On peut ensuite parcourir ce tableau pour accéder à chaque composant enfant individuellement.

function ParentComponent(props) {
  const children = props.children;

  return (
    <div>
      {children.map((child) => (
        <div key={child.key}>{child}</div>
      ))}
    </div>
  );
}

Dans cet exemple, le composant ParentComponent parcourt le tableau children et rend chaque composant enfant dans une balise div distincte. La clé key est importante pour optimiser les mises à jour de la liste des composants enfants.

Exemple concret : Créer une liste d'éléments
Considérons un exemple où l'on souhaite créer une liste d'éléments à partir d'un tableau de données. On peut utiliser la prop children pour passer le tableau de données à un composant ListItem qui rend chaque élément de la liste.

const items = ['Pomme', 'Orange', 'Banane'];

function App() {
  return (
    <ul>
      {items.map((item) => (
        <ListItem key={item}>{item}</ListItem>
      ))}
    </ul>
  );
}

function ListItem(props) {
  return <li>{props.children}</li>;
}

Dans cet exemple, le composant App mappe le tableau items et crée un composant ListItem pour chaque élément. Le composant ListItem reçoit le nom de l'élément (item) comme prop children et l'affiche dans une balise li.

La prop children est un élément essentiel pour imbriquer des composants en React et créer des structures d'interface utilisateur hiérarchiques. Elle permet de passer des composants enfants d'un composant parent à un autre, ce qui facilite la construction d'interfaces utilisateur modulaires et réutilisables.

5. La prop `key` en React : Identifier les éléments dans les listes

Qu'est-ce que la prop key en React ?

La prop key est une prop spéciale en React qui permet d'identifier de manière unique les éléments dans une liste. Elle est particulièrement importante pour optimiser les mises à jour de la liste lorsque des éléments sont ajoutés, supprimés ou modifiés.

Pourquoi utiliser la prop key ?

Sans la prop key, React ne peut pas identifier de manière unique les éléments dans une liste, ce qui peut entraîner des problèmes de performance et des erreurs de rendu. En utilisant la prop key, React peut comparer efficacement les éléments d'une liste avant et après une mise à jour, et déterminer les modifications minimales à apporter au DOM réel.

Comment définir la prop `key`

La prop key est généralement définie sur chaque élément de la liste. La valeur de la prop key doit être unique pour chaque élément et doit être stable dans le temps. Cela signifie que la valeur de la prop key ne doit pas changer si l'élément est mis à jour.

Exemple de prop key
Considérons une liste de personnes avec leur nom et leur âge :

const persons = [
  { id: 1, name: 'Alice', age: 30 },
  { id: 2, name: 'Bob', age: 25 },
  { id: 3, name: 'Charlie', age: 40 },
];

Pour afficher cette liste dans un composant React, on peut utiliser la prop key pour identifier chaque personne :

function PersonList() {
  return (
    <ul>
      {persons.map((person) => (
        <li key={person.id}>
          {person.name} ({person.age})
        </li>
      ))}
    </ul>
  );
}

Dans cet exemple, la prop key est définie sur l'id de chaque personne (person.id). Cela permet à React d'identifier de manière unique chaque personne dans la liste et d'optimiser les mises à jour de la liste.

Cas d'utilisation courants de la prop key

La prop key est particulièrement utile dans les cas suivants :

Affichage de listes d'éléments dynamiques

Gestion des mises à jour de listes avec des ajouts, des suppressions ou des modifications d'éléments Rendu de listes d'éléments imbriqués Utilisation de composants de liste tels que FlatList ou Map.

La prop key est un élément essentiel pour optimiser les performances des listes en React. En utilisant la prop key de manière appropriée, on peut garantir que les listes sont mises à jour efficacement et que les erreurs de rendu sont évitées.

6. Le DOM virtuel en React : Comprendre la mise à jour efficace de l'interface utilisateur

Qu'est-ce que le DOM virtuel en React ?

Le DOM virtuel est une représentation interne de l'interface utilisateur d'une application React. Il s'agit d'une structure arborescente qui représente les éléments HTML et leurs attributs, similaire à la structure du DOM réel (Document Object Model) utilisé par les navigateurs web. Cependant, le DOM virtuel n'est pas directement manipulé par le navigateur.

Pourquoi utiliser le DOM virtuel ?

Le DOM virtuel joue un rôle crucial dans l'optimisation des mises à jour de l'interface utilisateur en React. Il permet à React de déterminer efficacement les changements minimums à apporter au DOM réel afin de refléter l'état actuel de l'application.

Comment fonctionne le DOM virtuel ?

Lorsque l'état ou les props d'un composant React changent, React crée une nouvelle représentation du DOM virtuel à partir de l'état et des props mis à jour. Ensuite, React compare le nouveau DOM virtuel avec l'ancien DOM virtuel pour identifier les différences.

Enfin, React applique uniquement les modifications nécessaires au DOM réel, ce qui minimise les manipulations du DOM et améliore les performances.

Avantages du DOM virtuel

L'utilisation du DOM virtuel offre plusieurs avantages :

Performances améliorées : Le DOM virtuel permet à React de mettre à jour l'interface utilisateur de manière plus efficace en minimisant les manipulations du DOM réel.
Détection des changements précis : React peut identifier précisément les éléments de l'interface utilisateur qui ont changé et ne mettre à jour que ces éléments.
Facilité de test : Le DOM virtuel peut être facilement testé et simulé, ce qui facilite le développement et le débogage des applications React.

Exemple d'utilisation du DOM virtuel

Considérons un exemple simple où l'on souhaite mettre à jour le texte d'un paragraphe en fonction d'une variable count.

const count = 10;

function App() {
  return (
    <p>Le nombre est : {count}</p>
  );
}

Lorsque la variable count est modifiée, React crée un nouveau DOM virtuel avec le texte mis à jour. Ensuite, React compare le nouveau DOM virtuel avec l'ancien DOM virtuel et identifie que seul le texte du paragraphe a changé. Enfin, React met à jour uniquement le texte du paragraphe dans le DOM réel, sans modifier d'autres éléments de l'interface utilisateur.

Le DOM virtuel est un élément essentiel de l'architecture de React et joue un rôle crucial dans l'optimisation des performances et la mise à jour efficace de l'interface utilisateur. En comprenant comment fonctionne le DOM virtuel, les développeurs React peuvent créer des applications performantes et réactives.

7. Le rendu en React : Comprendre la création de l'interface utilisateur

Qu'est-ce que le rendu en React ?

Le rendu en React est le processus de création et de mise à jour de l'interface utilisateur d'une application React en fonction de son état et de ses props. Il s'agit d'une étape fondamentale dans le cycle de vie d'une application React, car elle permet de transformer les composants React en éléments DOM que le navigateur peut afficher.

Comment fonctionne le rendu en React ?

Le processus de rendu en React peut être décomposé en plusieurs étapes :

Création du DOM virtuel : React crée une représentation interne de l'interface utilisateur sous forme de DOM virtuel.
Comparaison du DOM virtuel : React compare le nouveau DOM virtuel avec l'ancien DOM virtuel pour identifier les différences.
Mise à jour du DOM réel : React applique les modifications minimumes nécessaires au DOM réel pour refléter les changements identifiés dans l'étape précédente.

Optimisation du rendu

React utilise plusieurs techniques pour optimiser le processus de rendu et améliorer les performances des applications :

Mise à jour par lots : React regroupe les mises à jour de l'état et des props afin de minimiser le nombre de rendus nécessaires.
Recyclage des composants : React réutilise les composants existants autant que possible au lieu de les recréer à chaque rendu.
Utilisation du DOM virtuel : Le DOM virtuel permet à React de comparer efficacement les modifications et de ne mettre à jour que les parties du DOM réel qui ont changé.

Exemple de rendu

Considérons un exemple simple où l'on souhaite afficher un compteur qui s'incrémente lorsque l'on clique sur un bouton.

const [count, setCount] = useState(0);

function App() {
  return (
    <div>
      <p>Nombre : {count}</p>
      <button onClick={() => setCount(count + 1)}>Cliquez-moi !</button>
    </div>
  );
}

Lorsque l'utilisateur clique sur le bouton, la fonction handleClick est appelée, ce qui incrémente la valeur de count et déclenche une mise à jour de l'état. React crée ensuite un nouveau DOM virtuel avec le nombre mis à jour. Ensuite, React compare le nouveau DOM virtuel avec l'ancien DOM virtuel et identifie que seul le texte du paragraphe a changé. Enfin, React met à jour uniquement le texte du paragraphe dans le DOM réel, sans modifier d'autres éléments de l'interface utilisateur.

Le rendu est un élément essentiel du fonctionnement de React.
En comprenant le processus de rendu et les techniques d'optimisation utilisées par React, les développeurs peuvent créer des applications React performantes et réactives qui offrent une expérience utilisateur fluide.

8. Gestion des événements en React : Gérer les interactions de l'utilisateur

Qu'est-ce que la gestion des événements en React ?

La gestion des événements en React permet de capturer et de réagir aux interactions de l'utilisateur avec les éléments de l'interface utilisateur. Elle est essentielle pour créer des applications React dynamiques et interactives qui répondent aux actions de l'utilisateur.

Comment gérer les événements en React ?

React utilise une approche basée sur les déclarations pour la gestion des événements. Cela signifie que les gestionnaires d'événements sont définis directement sur les éléments HTML dans le code JSX. Les gestionnaires d'événements sont des fonctions JavaScript qui sont appelées lorsque l'événement correspondant se produit.

Types d'événements courants

Il existe de nombreux types d'événements différents qui peuvent être capturés en React, tels que :

Événements de clic : Gérés lorsque l'utilisateur clique sur un élément.
Événements de changement : Gérés lorsque l'utilisateur modifie la valeur d'un champ de saisie, comme un champ de texte ou une liste déroulante.
Événements de survol : Gérés lorsque l'utilisateur déplace le curseur de la souris sur un élément.
Événements de clavier : Gérés lorsque l'utilisateur appuie sur une touche du clavier.

Exemple de gestion d'événements

Considérons un exemple simple où l'on souhaite afficher un message d'alerte lorsque l'utilisateur clique sur un bouton.

function App() {
  const handleClick = () => {
    alert('Bouton cliqué !');
  };
  return (
    <button onClick={handleClick}>Cliquez-moi !</button>
  );
}

Dans cet exemple, le gestionnaire d'événements handleClick est défini sur le bouton. Lorsque l'utilisateur clique sur le bouton, la fonction handleClick est appelée, ce qui affiche une alerte avec le message "Bouton cliqué !".

Événements avec plusieurs composants

Il est possible de gérer des événements impliquant plusieurs composants en passant les données entre les composants. On peut utiliser des techniques telles que la remontée d'événements ou le state management pour partager les informations entre les composants.

La gestion des événements est un élément crucial de la création d'interfaces utilisateur interactives en React. En comprenant les concepts de base de la gestion des événements et en utilisant les techniques appropriées, les développeurs React peuvent créer des applications qui répondent aux actions de l'utilisateur de manière intuitive et efficace.

9. Le state en React : Gérer les données dynamiques

Qu'est-ce que le state en React ?

Le state en React est un moyen de stocker des données dynamiques qui peuvent changer au cours de l'exécution d'une application. Il permet de créer des interfaces utilisateur réactives qui se mettent à jour automatiquement lorsque les données changent.

Comment utiliser le state en React ?

Pour utiliser le state en React, on utilise le hook useState. Le hook useState renvoie un tableau composé de deux éléments : le state lui-même et une fonction pour le mettre à jour.

const [count, setCount] = useState(0);

Dans cet exemple, count est la variable qui représente l'état actuel, et setCount est la fonction pour le mettre à jour.

Mettre à jour le state

Pour mettre à jour le state, on appelle la fonction setCount et lui passe la nouvelle valeur du state.

setCount(count + 1);

Cette ligne de code incrémente la valeur de count de 1 et déclenche une mise à jour de l'interface utilisateur.

Exemple d'utilisation du state

Considérons un exemple simple où l'on souhaite afficher un compteur qui s'incrémente lorsque l'on clique sur un bouton.

const [count, setCount] = useState(0);

function App() {
  return (
    <div>
      <p>Nombre : {count}</p>
      <button onClick={() => setCount(count + 1)}>Cliquez-moi !</button>
    </div>
  );
}

Lorsque l'utilisateur clique sur le bouton, la fonction handleClick est appelée, ce qui incrémente la valeur de count et appelle la fonction setCount pour mettre à jour le state. React détecte la modification du state et rend à nouveau le composant App, ce qui met à jour l'affichage du nombre avec la nouvelle valeur.

State local et state global

Le state peut être local à un composant ou global à l'application entière. Le state local est accessible uniquement au composant dans lequel il est défini, tandis que le state global est accessible à tous les composants de l'application. On utilise des bibliothèques de gestion du state comme Redux pour gérer le state global.

Le state est un élément essentiel de la création d'interfaces utilisateur réactives en React. En comprenant comment utiliser le state et en l'utilisant efficacement, les développeurs React peuvent créer des applications dynamiques qui s'adaptent aux changements de données et offrent une expérience utilisateur fluide.

10. Composants contrôlés en React : Gérer les entrées utilisateur

Qu'est-ce qu'un composant contrôlé en React ?

Un composant contrôlé est un composant React qui gère la valeur d'un champ d'entrée, comme un champ de texte ou une liste déroulante, en conservant la valeur actuelle dans l'état du composant. Cela permet au composant de contrôler le comportement du champ d'entrée et de réagir aux modifications de la valeur de l'entrée par l'utilisateur.

Comment créer un composant contrôlé

Pour créer un composant contrôlé, il faut suivre ces étapes :
Utiliser le hook useState pour gérer l'état du composant. La valeur de l'état correspondra à la valeur actuelle du champ d'entrée.
Associer l'attribut value du champ d'entrée à la valeur de l'état. Cela permet au composant de synchroniser la valeur affichée dans le champ d'entrée avec la valeur stockée dans l'état.
Gérer les événements de changement du champ d'entrée. Lorsque l'utilisateur modifie la valeur de l'entrée, la fonction de gestionnaire d'événement met à jour l'état du composant avec la nouvelle valeur.

Exemple de composant contrôlé

Considérons un exemple simple d'un composant contrôlé qui affiche un champ de saisie et un bouton :

import React, { useState } from 'react';

function InputExample() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <button onClick={() => console.log(inputValue)}>Soumettre</button>
    </div>
  );
}

Dans cet exemple :
Le hook useState est utilisé pour gérer l'état du composant, avec la variable inputValue pour stocker la valeur actuelle du champ de saisie.
L'attribut value du champ de saisie est lié à la valeur de inputValue à l'aide de l'accolade {}. Cela garantit que la valeur affichée dans le champ de saisie correspond toujours à la valeur stockée dans l'état.
La fonction handleChange est appelée chaque fois que l'utilisateur modifie la valeur du champ de saisie. Elle met à jour l'état inputValue avec la nouvelle valeur du champ.

Le bouton Soumettre affiche la valeur actuelle de inputValue dans la console lorsque l'utilisateur clique dessus.

Avantages des composants contrôlés

Les composants contrôlés offrent plusieurs avantages :

Meilleur contrôle sur les entrées utilisateur : Le composant a un contrôle total sur la valeur du champ d'entrée et peut réagir aux modifications de la valeur de manière appropriée.
Facilite la validation des entrées : On peut facilement implémenter des règles de validation pour s'assurer que l'utilisateur saisit des données valides.
Simplifie la gestion des erreurs : Il est plus facile de gérer les erreurs de saisie et d'afficher des messages d'erreur appropriés à l'utilisateur.

Inconvénients des composants contrôlés

Les composants contrôlés peuvent avoir quelques inconvénients :

Code plus verbeux : La définition des gestionnaires d'événements et la mise à jour de l'état peuvent rendre le code plus verbeux par rapport aux composants non contrôlés.
Problèmes potentiels de performance : Si le composant contrôlé met à jour fréquemment l'état, cela peut entraîner des problèmes de performance, en particulier pour les listes de champs d'entrée.

Les composants contrôlés sont un outil puissant pour gérer les entrées utilisateur en React. Ils offrent un meilleur contrôle sur les données saisies par l'utilisateur et facilitent la validation et la gestion des erreurs. Cependant, il est important de tenir compte des inconvénients potentiels, tels que le code plus verbeux et les problèmes de performance, avant de choisir d'utiliser des composants contrôlés.

Remarque : Il existe également des composants non contrôlés en React, qui ne gèrent pas la valeur du champ d'entrée dans l'état du composant. Les composants non contrôlés peuvent être plus simples à implémenter, mais ils offrent moins de contrôle sur les entrées utilisateur et la gestion des erreurs.

11. Les Hooks React : Des fonctionnalités puissantes pour les composants React

Qu'est-ce qu'un Hook React ?

Les Hooks React sont des fonctions spéciales qui permettent d'accéder à l'état et à d'autres fonctionnalités de React depuis des composants fonctionnels sans avoir à écrire de classes. Introduits dans React 16.8, les Hooks ont révolutionné la façon de développer des interfaces utilisateur avec React en offrant un moyen plus simple et plus flexible de gérer l'état, les effets secondaires et d'autres aspects de la logique des composants.

Avantages des Hooks React

Les Hooks React offrent de nombreux avantages par rapport aux approches basées sur les classes :

Plus simple et plus concis : Les Hooks permettent d'écrire des composants fonctionnels plus simples et plus concis, ce qui facilite la lecture et la maintenance du code.
Meilleure réutilisabilité : Les Hooks peuvent être facilement réutilisés entre différents composants, ce qui favorise la modularité et la composition de code.
Accès à l'état et aux effets secondaires : Les Hooks permettent d'accéder à l'état et aux effets secondaires depuis des composants fonctionnels, offrant ainsi la même puissance que les composants basés sur les classes.
Préparation à l'avenir : Les Hooks sont une fonctionnalité native de React et font partie intégrante de son évolution future.

Types de Hooks React

Il existe plusieurs types de Hooks React, chacun servant un objectif spécifique :

Hooks d'état : Gèrent l'état local d'un composant, tels que useState et useReducer.
Hooks d'effet : Permettent d'effectuer des effets secondaires, tels que des appels API, des abonnements à des événements ou des mises à jour du DOM, tels que useEffect et useLayoutEffect.
Hooks de contexte : Permettent de partager des informations entre des composants non parents, tels que useContext et useContext.
Hooks personnalisés : Permettent de créer de nouveaux Hooks réutilisables pour encapsuler des logiques communes.
React Hook Form : Gérer les formulaires avec simplicité et efficacité React Hook Form est une bibliothèque open-source populaire pour gérer les formulaires dans les applications React. Elle simplifie considérablement le processus de validation, de soumission et de gestion des données des formulaires, en offrant une API intuitive et puissante basée sur les Hooks React.

Avantages de React Hook Form :

Simplicité d'utilisation : React Hook Form utilise une approche basée sur les Hooks, ce qui la rend facile à apprendre et à intégrer dans les composants React existants.
Validation puissante : La bibliothèque offre un système de validation complet et personnalisable pour garantir que les données saisies par l'utilisateur sont valides et conformes aux exigences.
Gestion des erreurs intuitive : React Hook Form facilite la gestion des erreurs de validation et d'autres erreurs liées aux formulaires, en fournissant des messages d'erreur clairs et des mécanismes de retour d'information.
Soumission de formulaires simplifiée : La soumission des données des formulaires est simplifiée avec React Hook Form, permettant de gérer efficacement l'envoi des données au serveur.

Exemple d'utilisation de React Hook Form :

Considérons un exemple simple d'un formulaire de connexion avec React Hook Form :

import React from 'react';
import { useForm } from 'react-hook-form';

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data); // Envoyer les données du formulaire au serveur
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>Nom d'utilisateur :</label>
      <input type="text" {...register('username', { required: true })} />
      {errors.username && <p className="error">Nom d'utilisateur requis</p>}

      <label>Mot de passe :</label>
      <input type="password" {...register('password', { required: true })} />
      {errors.password && <p className="error">Mot de passe requis</p>}

      <button type="submit">Se connecter</button>
    </form>
  );
}

Dans cet exemple :
Le Hook useForm de React Hook Form est utilisé pour gérer l'état du formulaire.
Les champs du formulaire sont enregistrés à l'aide de la fonction register, ce qui permet de les valider et d'accéder à leurs valeurs.
La fonction handleSubmit gère la soumission du formulaire et appelle la fonction onSubmit avec les données saisies.
L'objet errors contient les erreurs de validation pour chaque champ.
Le code affiche des messages d'erreur conditionnellement en fonction des erreurs de validation.

React Effects : Gérer les effets secondaires dans les composants fonctionnels
Les Hooks useEffect et useLayoutEffect permettent d'effectuer des effets secondaires dans les composants fonctionnels React. Les effets secondaires sont des opérations qui peuvent affecter le monde extérieur au composant, telles que des appels API, des abonnements à des événements ou des modifications du DOM.

Types d'effets secondaires :

Effets de nettoyage : S'exécutent après la destruction du composant pour libérer les ressources et effectuer des tâches de nettoyage.
Effets d'après rendu : S'exécutent après le rendu du composant et la mise à jour du DOM.
Effets de dépendance : S'exécutent uniquement lorsque les dépendances spécifiées changent.

Exemple d'utilisation de React Effect :

Considérons un exemple d'un composant qui utilise l'effet useEffect pour récupérer des données d'une API après le rendu initial du composant :

import React, { useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((response) => response.json
     .then((response) => response.json())
      .then((responseData) => setData(responseData));
  }, []); // Exécuter l'effet une seule fois après le rendu initial

  return (
    <div>
      {data.length > 0 ? (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Chargement des données...</p>
      )}
    </div>
  );
}

Dans cet exemple :

Le Hook useState est utilisé pour gérer l'état du composant, avec la variable data pour stocker les données récupérées de l'API.
L'effet useEffect est utilisé pour récupérer les données de l'API.
Le tableau de dépendances vide [] indique que l'effet doit s'exécuter uniquement une fois après le rendu initial du composant.

Le code affiche les données récupérées ou un message de chargement en fonction de la disponibilité des données.

React Refs : Accéder aux éléments DOM et gérer les références

Qu'est-ce que React Ref ?

Les Refs React permettent d'accéder aux éléments DOM et de gérer les références à des instances de composant. Ils sont utiles pour des cas où l'accès direct à un élément DOM ou à un composant est nécessaire, par exemple pour effectuer des manipulations manuelles ou des mesures.

Types de Refs :

Refs impératifs (refs): Permettent d'accéder directement aux instances d'éléments DOM.
Refs de fonction (refs): Permettent de stocker des références à des instances de composant.

Exemple d'utilisation de React Refs :

Considérons un exemple d'un composant qui utilise un Ref impératif pour concentrer le curseur sur un champ d'entrée après le rendu du composant :

import React, { useRef } from 'react';

function InputFocus() {
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    <input type="text" ref={inputRef} />
  );
}

Dans cet exemple :

Le Hook useRef est utilisé pour créer un Ref impératif nommé inputRef.
L'effet useEffect est utilisé pour définir le focus sur l'élément d'entrée après le rendu initial.
La propriété ref de l'élément d'entrée est liée au Ref inputRef, ce qui permet d'y accéder et de le manipuler.
Les Hooks React, tels que React Hook Form, useEffect et Refs, offrent des fonctionnalités puissantes et flexibles pour développer des interfaces utilisateur réactives et performantes avec React. En comprenant et en utilisant efficacement ces Hooks, les développeurs peuvent créer des applications React modernes, maintenables et évolutives.

Note importante :

Il est important de choisir le Hook React approprié pour chaque tâche. React Hook Form est idéal pour gérer les formulaires, useEffect pour les effets secondaires et Refs pour accéder aux éléments DOM et gérer les références.
Les Hooks React sont des outils puissants et polyvalents qui ont transformé le développement React. Ils offrent un moyen plus simple, plus flexible et plus efficace de créer des interfaces utilisateur réactives et performantes. En comprenant les concepts fondamentaux des Hooks React et en les utilisant efficacement, les développeurs peuvent créer des applications React modernes et maintenables.

12. Pureté en React : Garantir des mises à jour prévisibles et cohérentes

Qu'est-ce que la pureté en React ?

La pureté en React fait référence à la pratique d'écrire des fonctions de composant qui produisent toujours le même rendu pour un même ensemble d'entrées. Cela signifie que le rendu d'un composant pur ne dépend que de ses props et de son state, et qu'il ne devrait pas avoir d'effets secondaires tels que la modification du DOM, des appels API ou la mutation de l'état global.

Pourquoi la pureté est-elle importante ?

La pureté offre plusieurs avantages dans les applications React :

Mises à jour prévisibles : Des composants purs garantissent que les mises à jour de l'interface utilisateur sont prévisibles et cohérentes, ce qui facilite le débogage et la maintenance du code.
Performance améliorée : React peut optimiser efficacement le rendu des composants purs, ce qui peut améliorer les performances de l'application.
Meilleure testabilité : Des composants purs sont plus faciles à tester isolément, ce qui permet d'écrire des tests unitaires plus fiables.

Comment écrire des composants purs en React ?

Pour écrire des composants purs en React, il faut suivre ces principes :

Éviter les effets secondaires : Les fonctions de composant ne doivent pas modifier le DOM, effectuer d'appels API ou muter l'état global.
Baser le rendu sur les props et le state : Le rendu du composant doit dépendre uniquement de ses props et de son state.
Utiliser des mémos de comparaison : Pour les props et les objets d'état complexes, utiliser des mémos de comparaison tels que React.memo ou React.useMemo pour éviter les comparaisons inutiles et les mises à jour superflues.

Exemple de composant pur en React :

Considérons un composant simple qui affiche un message de bienvenue en fonction d'un nom d'utilisateur :

import React from 'react';

function WelcomeMessage(props) {
  const { name } = props;
  return (
    <p>Bienvenue, {name} !</p>
  );
}

Ce composant est pur car il n'a pas d'effets secondaires et son rendu dépend uniquement du prop name.
La pureté est un principe important à suivre lors de l'écriture de composants React. En écrivant des composants purs, les développeurs peuvent créer des applications React plus prévisibles, performantes et testables.

13. Strict Mode en React : Détecter les problèmes potentiels en développement

Qu'est-ce que Strict Mode en React ?

Strict Mode est un mode de développement spécial dans React qui active des vérifications et des avertissements supplémentaires pour aider à identifier les problèmes potentiels dans les applications React. Il est conçu pour détecter les comportements non désirés qui pourraient entraîner des problèmes de performances ou des bugs en production.

Comment activer Strict Mode

Pour activer Strict Mode, il suffit d'envelopper votre application React dans le composant StrictMode :

import React from 'react';
import { StrictMode } from 'react-dom';

const App = () => {
  // Votre code d'application React ici
};

ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  document.getElementById('root')
);

Fonctionnalités de Strict Mode

Strict Mode active les fonctionnalités suivantes :

Vérification des cycles de vie obsolètes : Identifie et avertit des composants qui utilisent des cycles de vie obsolètes tels que componentWillMount, componentWillUpdate et componentWillReceiveProps.
Vérification des références obsolètes : Identifie et avertit des composants qui utilisent des références obsolètes telles que findDOMNode et refs.
Détection des effets secondaires : Identifie et avertit des composants qui effectuent des effets secondaires tels que la modification du DOM ou la mutation de l'état global directement dans la fonction de rendu.
Vérification des mises à jour de l'état : Identifie et avertit des composants qui mettent à jour l'état de manière non optimale, ce qui peut entraîner des performances lentes.
Vérification des props obsolètes : Identifie et avertit des composants qui reçoivent des props obsolètes ou mal nommées.

Avantages de l'utilisation de Strict Mode

L'utilisation de Strict Mode offre plusieurs avantages :

Détection précoce des problèmes : Permet de détecter les problèmes potentiels en développement, ce qui facilite leur correction avant qu'ils n'affectent la production.
Meilleure qualité du code : Encourage l'écriture de code React plus propre et plus performant.
Préparé pour l'avenir : Strict Mode permet de s'assurer que le code est compatible avec les futures versions de React.

Inconvénients de l'utilisation de Strict Mode

Strict Mode peut avoir quelques inconvénients :

Performances légèrement diminuées : Les vérifications et les avertissements supplémentaires peuvent légèrement diminuer les performances en développement.
Messages d'avertissement verbeux : Le nombre élevé de messages d'avertissement peut rendre la console de développement encombrée.

Strict Mode est un outil précieux pour les développeurs React qui souhaitent détecter les problèmes potentiels et améliorer la qualité de leur code en développement. Bien qu'il puisse avoir quelques inconvénients mineurs, les avantages de détecter les problèmes précocement et d'écrire un code plus propre l'emportent généralement.

Note importante :

Strict Mode est uniquement destiné à être utilisé en développement. Il ne doit pas être activé en production, car cela peut diminuer les performances et générer des messages d'avertissement inutiles.

14. Contexte React : Partager des données à travers l'arborescence des composants

Le contexte React est une fonctionnalité puissante qui permet de partager des données à travers plusieurs niveaux de l'arborescence des composants sans avoir à les passer explicitement en props à chaque composant. Cela est particulièrement utile pour partager des données qui sont nécessaires à de nombreux composants situés à des endroits éloignés dans la hiérarchie.

Comment fonctionne le contexte ?

Le contexte React fonctionne en utilisant deux composants principaux :

createContext: Crée un objet contexte qui permet de définir la valeur par défaut du contexte et d'accéder à cette valeur depuis les composants descendants.
Provider: Encapsule les composants qui doivent avoir accès à la valeur du contexte et fournit la valeur à ses enfants.
useContext Hook: Permet aux composants descendants d'accéder à la valeur actuelle du contexte.

Voici les étapes pour utiliser le contexte React :

Créer un contexte: Utilisez la fonction createContext pour créer un objet contexte. Cet objet peut prendre une valeur par défaut en argument.

Envelopper les composants avec un Provider: Enveloppez les composants qui ont besoin de fournir la valeur du contexte avec le composant Provider. Le Provider prend la valeur du contexte en tant que prop.

Accéder à la valeur du contexte: Utilisez le Hook useContext dans les composants descendants pour accéder à la valeur actuelle du contexte fournie par le Provider le plus proche dans l'arborescence.

Exemple d'utilisation du contexte

Considérons un exemple simple d'une application qui gère un thème sombre/clair pour l'ensemble de l'interface utilisateur.

1. Créer un contexte de thème

import React, { createContext, useState } from 'react';

const ThemeContext = createContext('light');

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

2. Envelopper l'application principale avec ThemeProvider

import React from 'react';
import { ThemeProvider } from './ThemeContext';

const App = () => {
  return (
    <ThemeProvider>
      {/* Votre application ici */}
    </ThemeProvider>
  );
};

3. Accéder au thème depuis un composant enfant

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const Button = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button onClick={toggleTheme}>Thème : {theme}</button>
  );
};

Dans cet exemple :

Le contexte ThemeContext est créé pour stocker la valeur du thème (clair ou sombre) et une fonction pour basculer le thème.
Le composant ThemeProvider fournit la valeur du contexte à ses enfants.
Le composant Button utilise le Hook useContext pour accéder à la valeur actuelle du thème et à la fonction toggleTheme.

Avantages du contexte React

Partage de données efficace : Le contexte permet de partager des données à travers plusieurs niveaux de l'arborescence des composants sans avoir à les passer explicitement en props à chaque composant.
Meilleure organisation du code : Le code devient plus organisé en regroupant les données partagées dans un seul endroit (le contexte).
Gestion de l'état global simplifié : Le contexte peut être utilisé pour gérer des données d'état global qui doivent être accessibles par de nombreux composants.

Inconvénients du contexte React

Surutilisation potentielle : Le contexte ne doit pas être surutilisé pour passer des données à quelques niveaux seulement. Il est préférable d'utiliser les props pour les relations parent-enfant directes.
Difficulté de raisonnement : Le suivi du flux de données à travers le contexte peut devenir difficile dans les applications complexes.

Le contexte React est un outil puissant pour partager des données à travers l'arborescence des composants. Il est important de l'utiliser à bon escient et de tenir compte de ses avantages et inconvénients pour créer des applications React organisées et maintenables.

15. Portails React : Rendre vos composants plus flexibles

Les portails React sont une fonctionnalité intéressante qui permet de rendre des éléments de composant en dehors de la hiérarchie DOM habituelle de leur parent. Cela offre une plus grande flexibilité pour positionner et gérer des éléments d'interface utilisateur spécifiques.

Cas d'utilisation des portails

Voici quelques cas d'utilisation courants des portaux React :

Modaux et boîtes de dialogue : Les portails permettent de rendre les modaux et les boîtes de dialogue en dehors du flux normal du document, ce qui empêche la superposition involontaire d'autres éléments d'interface utilisateur.
Menus contextuels et popovers : Les portails facilitent le positionnement des menus contextuels et des popovers par rapport à des éléments spécifiques de l'interface utilisateur, indépendamment de la structure DOM de leur parent.
Tooltips et infobulles : Vous pouvez utiliser les portails pour rendre des tooltips et des infobulles au-dessus d'autres éléments, sans affecter la disposition du contenu principal.

Comment fonctionnent les portails ?

Les portaux React fonctionnent en utilisant deux fonctions principales :

createPortal: Cette fonction prend deux arguments : l'élément enfant à rendre et un noeud DOM cible où l'élément doit être inséré. Le noeud DOM cible peut exister en dehors de la hiérarchie DOM du composant parent.
ReactDOM.createPortal (alternative): Similaire à createPortal, mais fourni par ReactDOM directement. Il est généralement utilisé dans les navigateurs plus anciens qui ne prennent pas en charge createPortal.

Exemple d'utilisation des portails

Considérons un exemple simple d'un composant Modal qui utilise un portail pour rendre son contenu en dehors du flux normal du document :

import React from 'react';
import ReactDOM from 'react-dom'; // Pour ReactDOM.createPortal

const modalRoot = document.getElementById('modal-root'); // Un noeud DOM cible en dehors de l'application

const Modal = ({ children, isOpen }) => {
  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal">{children}</div>,
    modalRoot
  );
};

export default Modal;

Dans cet exemple :

Un élément DOM avec l'identifiant modal-root est créé en dehors de l'application React. Ce sera le noeud cible pour le portail.
Le composant Modal rend son contenu conditionnellement en fonction de l'état isOpen.
La fonction ReactDOM.createPortal est utilisée pour rendre le contenu du modal dans le noeud cible modalRoot.

Avantages des portails React

Positionnement flexible : Les portails permettent de positionner les éléments d'interface utilisateur indépendamment de la structure DOM de leur parent, offrant une plus grande flexibilité.
Z-index indépendant : Le contenu rendu via un portail peut avoir son propre z-index, ce qui permet de le superposer à d'autres éléments de l'interface utilisateur.
Meilleure organisation du code : Les portails peuvent aider à séparer les préoccupations de présentation des composants modaux et des composants principaux, améliorant la lisibilité du code.

Inconvénients des portails React

Complexité accrue : L'utilisation des portails peut ajouter une certaine complexité au code par rapport au rendu standard dans la hiérarchie DOM.
Accessibilité : Il est important de s'assurer que les éléments rendus via des portails respectent les bonnes pratiques d'accessibilité.

Les portails React sont un outil puissant pour les développeurs qui souhaitent créer des interfaces utilisateur plus flexibles et composables. En comprenant leur fonctionnement et leurs avantages et inconvénients, vous pouvez les utiliser efficacement pour améliorer l'expérience utilisateur de vos applications React.

16. Suspense en React : Gérer le chargement asynchrone de manière élégante

Qu'est-ce que Suspense en React ?

Suspense est une fonctionnalité introduite dans React 16.6 qui permet de gérer le chargement asynchrone de données dans les composants React de manière plus élégante et efficace. Il permet aux développeurs d'afficher un contenu de substitution ou un indicateur de chargement pendant que les données sont en cours de chargement, ce qui offre une meilleure expérience utilisateur.

Comment fonctionne Suspense ?

Suspense fonctionne en utilisant deux composants principaux :
<Suspense> : Ce composant spécial permet d'encapsuler le code qui attend le chargement de données asynchrones.
useDeferredValue Hook (expérimental): Ce Hook permet de récupérer la valeur asynchrone une fois qu'elle est disponible.

Voici les étapes pour utiliser Suspense :

Envelopper le code asynchrone avec <Suspense> : Enveloppez le code qui attend le chargement de données asynchrones, telles que des requêtes API ou des appels à des bases de données, avec le composant <Suspense>.

Afficher un contenu de substitution ou un indicateur de chargement : Placez le contenu de substitution ou l'indicateur de chargement entre les balises d'ouverture et de fermeture de <Suspense>. Ce contenu sera affiché pendant que les données sont en cours de chargement.

Récupérer la valeur asynchrone (facultatif): Si vous utilisez le Hook useDeferredValue expérimental, vous pouvez récupérer la valeur asynchrone une fois qu'elle est disponible et l'utiliser pour rendre le contenu final.

Exemple d'utilisation de Suspense

Considérons un exemple simple d'un composant qui affiche les données d'un utilisateur après avoir récupéré les données d'une API :

import React, { useState, useEffect, useDeferredValue } from 'react';

const UserFetcher = () => {
  const [user, setUser] = useState(null);
  const deferredUser = useDeferredValue(fetchUser()); // Utiliser useDeferredValue (expérimental)

  useEffect(() => {
    const fetchData = async () => {
      const data = await deferredUser; // Récupérer la valeur asynchrone
      setUser(data);
    };

    fetchData();
  }, [deferredUser]);

  if (!user) {
    return <div>Chargement de l'utilisateur...</div>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
};

async function fetchUser() {
  const response = await fetch('https://api.example.com/user/1');
  const data = await response.json();
  return data;
}

export default UserFetcher;

Dans cet exemple :

Le composant UserFetcher utilise Suspense pour encapsuler le code qui attend le chargement des données de l'utilisateur.
Un contenu de substitution "Chargement de l'utilisateur..." est affiché pendant que les données sont en cours de chargement.
Le Hook useDeferredValue expérimental est utilisé pour récupérer la valeur asynchrone de l'utilisateur une fois qu'elle est disponible.

Le contenu final avec les informations de l'utilisateur est affiché une fois que les données sont chargées.

Avantages de l'utilisation de Suspense

Meilleure expérience utilisateur : Suspense permet d'afficher un contenu de substitution ou un indicateur de chargement pendant le chargement des données, ce qui offre une expérience utilisateur plus fluide et moins frustrante.
Code plus lisible et maintenable : Le code devient plus lisible et maintenable en séparant le chargement des données et le rendu du contenu.
Gestion simplifiée des erreurs : Suspense permet de gérer facilement les erreurs de chargement asynchrone et d'afficher des messages d'erreur appropriés.

Inconvénients de l'utilisation de Suspense

Complexité accrue : Suspense peut ajouter une certaine complexité au code par rapport au chargement asynchrone traditionnel.
Nécessite une prise en charge du navigateur : Suspense nécessite une version récente de React et une prise en charge du navigateur pour fonctionner correctement.

Suspense est un outil puissant pour gérer le chargement asynchrone de données dans les applications React. En comprenant son fonctionnement et ses avantages et inconvénients, vous pouvez l'utiliser efficacement pour améliorer l'expérience utilisateur et la maintenabilité de votre code.

Note importante :

Suspense est encore une fonctionnalité relativement nouvelle et peut évoluer dans les futures versions de React. Il est important de se tenir informé des dernières mises à jour et des pratiques recommandées pour l'utiliser efficacement.

17. Error Boundaries en React : Gérer les erreurs et maintenir la stabilité de l'application

Les Error Boundaries sont un mécanisme de sécurité important dans React qui permet de capturer les erreurs JavaScript survenant dans un composant et ses enfants, empêchant ainsi l'application entière de planter. Ils fournissent un moyen de gérer les erreurs de manière centralisée et d'afficher une interface utilisateur alternative (fallback UI) pour informer l'utilisateur d'un problème inattendu.

Pourquoi utiliser les Error Boundaries ?

Les Error Boundaries offrent plusieurs avantages :

Prévention des plantages de l'application : En capturant les erreurs dans un composant spécifique, les Error Boundaries empêchent l'application entière de planter, garantissant une meilleure stabilité et une meilleure expérience utilisateur.
Dégradation gracieuse : Ils permettent d'afficher une interface utilisateur alternative (fallback UI) informative en cas d'erreur, indiquant à l'utilisateur qu'un problème est survenu.
Isolation des erreurs : Les Error Boundaries limitent l'impact d'une erreur à un sous-arbre spécifique de l'application, empêchant la propagation de l'erreur aux autres composants.

Comment fonctionnent les Error Boundaries ?

Les Error Boundaries fonctionnent en implémentant un composant React spécial qui suit le cycle de vie standard et possède deux méthodes spécifiques :

static getDerivedStateFromError(error) (facultatif) : Cette méthode statique optionnelle est appelée juste avant la prochaine mise à jour du rendu, si une erreur est survenue dans le composant ou l'un de ses enfants. Elle permet de mettre à jour l'état du composant d'Error Boundary pour afficher l'interface utilisateur alternative (fallback UI).
componentDidCatch(error, errorInfo) : Cette méthode de cycle de vie est appelée après la phase de validation si une erreur est survenue dans le composant ou l'un de ses enfants pendant le rendu, la mise à jour du composant ou la suppression. Elle reçoit deux arguments : l'erreur elle-même et un objet errorInfo contenant des informations supplémentaires sur l'erreur.

Exemple d'utilisation des Error Boundaries

Voici un exemple simple d'un composant Error Boundary :

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Error in component:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Une erreur est survenue</h1>; // Fallback UI
    }

    return this.props.children;
  }
}

Ce composant Error Boundary capture les erreurs et met à jour son état pour afficher l'interface utilisateur alternative (fallback UI) "Une erreur est survenue". Il enregistre également l'erreur dans la console pour un débogage ultérieur.

Comment utiliser les Error Boundaries

Pour utiliser les Error Boundaries, enveloppez la partie de l'arborescence des composants que vous souhaitez protéger des erreurs avec le composant Error Boundary :

<ErrorBoundary>
  <ComposantA /> {/* Peut potentiellement générer une erreur */}
  <ComposantB />
</ErrorBoundary>

Dans cet exemple, si une erreur survient dans ComposantA ou ComposantB, l'Error Boundary capturera l'erreur et affichera l'interface utilisateur alternative, garantissant que le reste de l'application continue de fonctionner.

Points importants à retenir

Les Error Boundaries ne capturent pas les erreurs provenant des gestionnaires d'événements, des subscriptions asynchrones ou du code exécuté en dehors des méthodes de cycle de vie des composants.

Il est recommandé d'avoir des Error Boundaries placés stratégiquement dans l'arborescence des composants pour une gestion efficace des erreurs.

N'utilisez pas les Error Boundaries pour la gestion d'état d'erreur complexe. Utilisez plutôt des solutions dédiées à la gestion de l'état d'erreur dans votre application.
Les Error Boundaries sont un outil essentiel pour améliorer la robustesse et la stabilité des applications React. En les implémentant correctement, vous pouvez garantir une meilleure expérience utilisateur en empêchant les plantages et en fournissant un retour d'information informatif en cas d'erreur.

Conclusion

React offre un ensemble de concepts fondamentaux qui permettent de construire des interfaces utilisateur web dynamiques et interactives. En maîtrisant ces concepts essentiels, tels que les composants, les props, l'état, les Hooks React et le DOM virtuel, vous serez en mesure de créer des applications React robustes, performantes et offrant une expérience utilisateur exceptionnelle. N'oubliez pas que React est une bibliothèque en constante évolution. Il est important de se tenir informé des dernières nouveautés et des meilleures pratiques pour tirer le meilleur parti de cette technologie puissante.

Grid CSS. Comment bien structurer une page web avec la propriété grid?

Gérard Cubaka — Tue, 25 Jul 2023 07:22:57 +0000

Introduction

Le but principale de cet article est de vous apprendre à utiliser la propriété CSS grid, via un exemple sous forme de maquette d’un site web afin de bien la maîtriser.

Grace à cet outil CSS nous allons pouvoir faire la mise en page, l’habillage, l’agencement et la disposition de nos différents éléments sur notre page web d’une manière simple.

Créé en 2011, CSS grid est venu étendre les possibilités offertes par le module de tableau CSS table, la propriété float et la propriété flexbox. En guise de rappel la propriété float indique qu'un élément doit être retirer du flux normal et doit être placer sur le coté droit ou sur le coté gauche de son conteneur.

Qu’est-ce que grid CSS?

Pour comprendre le fonctionnement du module CSS grid, il faut imaginer une grille composée de colonnes et de lignes. L’intersection entre les colonnes et les lignes forme les cellules. Une ou plusieurs cellules occupées par un meme élément forment une zone.

Cette grille est le conteneur parent qui ne s’affichent pas à l’écran, elle joue le rôle de repère pour placer verticalement et horizontalement les zones de contenu. Chaque zone est un conteneurs fils, positionné sur la grille en indiquant ses coordonnées ,c’est-à-dire les colonnes et les lignes dont il occupe l’espace. Chaque conteneur fils affiche alors son contenu, constitué d’un élément ou d’un groupe d’éléments.

Condition d’utilisation de grid CSS?

Pour utiliser CSS grid, il faut:
• Un conteneur parent : l’élément HTML

prend la propriété CSS display : grid pour se comporter comme une grille.
• Des conteneurs fils : chaque élément inclus dans le conteneur parent constitue une zone de la grille, placée verticalement sur une ou plusieurs colonnes et horizontalement sur une ou plusieurs lignes.

<div class="grille">
        <nav><p>Navbar</p></nav>
        <main><p>Main</p></main>
        <div id="sidebar"><p>Sidbar</p></div>
        <div id="content1"><p>Content1</p></div>
        <div id="content2"><p>Content2</p></div>
        <div id="content3"><p>Content3</p></div>
        <footer>Fooder</footer>
    </div>

Les valeurs que peut prendre la propriété grid

grid-template

Cette valeur définit ce qui inclut « grid-template-columns ». « grid-template-rows » et « grid-template-areas ».

grid-auto-flow

Cette valeur définit qui indique le fonctionnement de l’algorithme de placement automatique et qui détaille exactement comment les éléments placés automatiquement « coulent » dans la grille.

grid-auto-rows

Cette valeur définit qui indique la taille des pistes créées pour les lignes de façons implicite.

grid-auto-columns

Cette valeur définit qui indique la taille des pistes créées pour les colonnes de façon implicite.

Les propriété enrichies

La propriété grid-template-columns : définit la taille des colonnes.
La propriété background-color colore l’arrière-plan de la grille, ou l’arrière-plan d’une zone de la grille.
La propriété color colore le contenu des zones de la grille.
La propriété grid-gap détermine l’espace entre les zones de la grille.
La propriété border ajouter une bordure à la grille ou à une zone de la grille. Utiliser les propriétés « start » et « end »

Le propriété our indiquer l’emplacement de c
start et end permettent également d’indiquer l’emplacement de chaque zone, le code CSS renseigne, pour chacune :

à quelle colonne la zone commence, avec la propriété grid-column-start.
à quelle colonne la zone s’arrète, avec la propriété grid-column-end.
à quelle ligne la zone commence, avec la proprété grid-row-start.
à quelle ligne la zone s’arrète, avec la propriété grid-row-end.

Comment centrer une grille en CSS

Center une grille permet de positionner les zones de manières harmonieuse. Pour ce faire on utilise :

La propriété align-items indique le positionnement des zones sur l’axe vertical de la grille. La valeur « center » permet de positionner les zones sur l’axe vertical de la grille en créant autant d’espace en haut et en bas à l’intérieur de la grille.
La propriété justify-items indique le positionnement des zones sur l’axe horizontal de la grille. La valeur « center » permet de positionner les zones au centrer de la grille en créant autant d’espace à gauche et à droite à l’intérieur de la grille.

Utiliser les propriété raccourcies

Les propriété raccourcies permettent de rédiger plus rapidement le code CSS, et améliorent sa lisibilité. Au lieu de renseigner le début et la fin de chaque ligne et de chaque colonne de la grille avec quatre propriétés distinctes, il suffit d’utiliser les propriétés raccourcies grid-column et grid-row, et de leur attribuer deux valeurs à chacune.

Utiliser la propriété grid-area

Cette propriété raccourcit encore le code CSS grid. Au lieu de mentionner les lignes et les colonnes, la propriété grid-area suffit à déterminer l’espace occupé par chaque zone. La propriété grid-area fonctionne avec quatre valeurs :

La première correspond au début de la ligne.
La deuxième correspond au début de la colonne.
La troisième correspond à la fin de la ligne.
La quatrième correspond à la fin de la colonne.

Personnaliser la disposition des zones

Dans les exemples précédents, chaque zone occupe une seule « case » de la grille. Pour personnaliser la disposition des zones, afin de créer une mise en page plus attractive, il faut ajouter les valeurs des propriétés grid-column et grid-row.

Voici le code CSS où nous utilisons les propriétés grid pour structurer une page en partant du code HTML précédent:

}
.grille{
    display: grid;
    height: 100vh;
    grid-template-columns: 10fr 10fr 10fr 10fr;
    grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr;
    grid-template-areas: 
    "nav nav nav nav"
    "sidebar main main main"
    "sidebar content1 content2 content3"
    "sidebar footer footer footer";
    grid-gap: 0.2rem;
    font-family: sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
    text-align: center;
    color: #717475;
}

La propriété grid-templates-area prend des valeurs qui sont les éléments HTML et qui doivent être préciser par la propriété qui s'applique aux éléments fils grid-aria de la manière suivante:

nav{
    background: #a7ffeb;
    grid-area: nav;
    border-radius: 5px;
    align-items: center;

}

main{
    background: #0e4848;
    grid-area: main;
    border-radius: 5px;
    padding-top:5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sidebar{
    background: #18ffff;
    grid-area: sidebar;
    border-radius: 5px;
    padding-top:5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#content1{
    background: #6fffd2;
    grid-area: content1;
    border-radius: 5px;
    padding-top:5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#content2{
    background: #64ffda;
    grid-area: content2;
    border-radius: 5px;
    padding-top:5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#content3{
    background: #73ffba;
    grid-area: content3;
    border-radius: 5px;
    padding-top:5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer{
    background: #1de9b6;
    grid-area: footer;
    border-radius: 5px;
    padding-top:5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

Ainsi nous avons notre page web bien stucturé.
L’en-tête de la page au dessus,