React JS est une bibliothèque JavaScript développée par Facebook qui permet de créer des interfaces

utilisateur en utilisant une approche basée sur des composants. Il sert à développer des applications web
interactives en permettant la mise en place d'une logique de gestion d'état et de rendu du contenu.
React facilite la création de composants réutilisables et permet une gestion efficace de l'état de
l'application. Il utilise un système de rendu différencié pour actualiser uniquement les parties de l'interface
qui ont été modifiées, ce qui contribue à améliorer les performances de l'application.
React est également largement utilisé dans le développement d'applications mobiles grâce à sa
bibliothèque React Native qui permet de développer des applications native pour iOS et Android en
utilisant le même code JavaScript.

1. React : une bibliothèque JavaScript open-source développée par Facebook pour créer des applications
web et mobiles.
2. Composant React: Une unité de code réutilisable qui gère une partie de l'interface utilisateur d'une
application.
3. Props: Les propriétés d'un composant, qui peuvent être passées depuis un composant parent pour
personnaliser le composant enfant.
4. State : un objet JavaScript qui définit les propriétés des composants de l'interface utilisateur et peut être
modifié au fil du temps
5. JSX: Un syntaxe de balisage qui permet de mélanger du JavaScript et du HTML pour décrire l'interface
utilisateur d'une application.
6. Virtual DOM: Une représentation interne du DOM réelle, qui est utilisée par React pour optimiser les
mises à jour de l'interface utilisateur.
7. Hooks: Des fonctions React qui permettent de gérer l'état et les effets d'un composant sans avoir à écrire
une classe.
8. Événement: Un événement déclenché par l'interface utilisateur, tels que le clic sur un bouton, la saisie
d'un texte, etc.
9. Références: Un mécanisme pour accéder à des éléments HTML directement depuis le code JavaScript.
10.Portée: La portée d'une variable détermine où elle peut être utilisée dans le code.
11.Render: La fonction render d'un composant définit ce qui sera affiché dans le navigateur.
12.Redux : un framework pour gérer l'état global de l'application, qui facilite la gestion de données
partagées entre différents composants.
13.Routing : la gestion de la navigation entre les pages d'une application, gérée en utilisant des
bibliothèques telles que React Router.
14.Redux Thunk : un middleware pour Redux qui permet de gérer les actions asynchrones dans une
application.
15.React Router est un package utilisé pour la gestion des routes dans une application ReactJS. Il permet à
une application de gérer les différentes pages et URLs de manière cohérente et organisée. Cela signifie
que vous pouvez définir des routes qui correspondent à des URL spécifiques et les associé à un
composant spécifique qui sera rendu pour cette URL.
Axios est une bibliothèque de requêtes HTTP pour React qui facilite la gestion des requêtes HTTP pour les
applications React. Il offre une syntaxe simple et facile à comprendre, ainsi qu'une fonctionnalité
d'interception des requêtes pour définir des comportements génériques pour toutes les requêtes. Axios gère
également automatiquement les erreurs de réseau et les codes d'erreur HTTP.

Fetch est une fonctionnalité native de JavaScript qui permet de faire des requêtes HTTP pour les applications
React. Il est plus léger que Axios en termes de taille de fichier et n'a pas besoin de dépendances externes.
Cependant, la syntaxe de Fetch est plus complexe que Axios et ne gère pas automatiquement les erreurs de
réseau et les codes d'erreur HTTP. Les développeurs doivent gérer les erreurs manuellement.

Axios et Fetch sont tous les deux des bibliothèques utilisées pour faire des requêtes HTTP en React.
Cependant, il y a quelques différences clés entre les deux:

1. Facilité d'utilisation: Axios a une syntaxe plus simple et plus facile à comprendre que Fetch, ce qui
en fait un choix populaire pour les développeurs débutants.
2. Interception des requêtes: Axios propose une fonctionnalité d'interception des requêtes qui permet
de définir des comportements génériques pour toutes les requêtes. Fetch ne le prend pas en charge.
3. Support des erreurs: Axios gère automatiquement les erreurs de réseau et les codes d'erreur HTTP.
Avec Fetch, vous devez gérer les erreurs manuellement.
4. Configuration globale: Axios vous permet de définir des configurations par défaut pour toutes les
requêtes, telles que les en-têtes et les paramètres. Fetch ne prend pas en charge cette
fonctionnalité.

En conclusion, Axios et Fetch ont tous les deux leurs avantages et inconvénients. Il est important de
sélectionner celui qui convient le mieux à vos besoins en fonction de votre expérience de développement
et de vos exigences de projet.

Avantages d'utiliser Axios avec React:

1. Facilité d'utilisation: Axios a une syntaxe simple et facile à comprendre, ce qui le rend accessible
aux développeurs débutants.

2. Interception des requêtes: Axios offre une fonctionnalité d'interception des requêtes qui permet de
définir des comportements génériques pour toutes les requêtes.

3. Gestion des erreurs: Axios gère automatiquement les erreurs de réseau et les codes d'erreur HTTP,
ce qui en fait un choix plus fiable pour les développeurs.

4. Configuration globale: Axios vous permet de définir des configurations par défaut pour toutes les
requêtes, telles que les en-têtes et les paramètres.

Inconvénients d'utiliser Axios avec React:

1. Taille du fichier: Axios est plus grand que Fetch en termes de taille de fichier, ce qui peut affecter
les performances pour les projets plus petits.

2. Dépendances: Axios dépend de plusieurs bibliothèques tierces, ce qui peut rendre plus difficile la
gestion des dépendances pour certains projets.
 Avantages d'utiliser Fetch avec React:

1. Légèreté: Fetch est plus léger que Axios en termes de taille de fichier, ce qui le rend plus
approprié pour les projets plus petits ou les applications mobiles.

2. Intégration native: Fetch est une fonctionnalité native de JavaScript, ce qui signifie qu'il n'y a pas
de dépendances à gérer.

Inconvénients d'utiliser Fetch avec React:

1. Complexité de la syntaxe: Fetch a une syntaxe plus complexe que Axios, ce qui peut être difficile
à comprendre pour les développeurs débutants.

2. Gestion des erreurs: Fetch ne gère pas automatiquement les erreurs de réseau et les codes d'erreur
HTTP, ce qui signifie que les développeurs doivent gérer les erreurs manuellement.

En conclusion, il est important de choisir la bibliothèque qui convient le mieux à vos besoins en fonction
de vos exigences de projet et de votre expérience de développement.

Switch et Router sont des composants importants pour la navigation dans une application React.

Switch est un composant React qui permet de rendre un composant unique en fonction de la
correspondance avec une URL. Il fonctionne en examinant toutes les routes définies dans l'application et
en sélectionnant la première route qui correspond à l'URL actuelle. Les routes non correspondantes ne
seront pas rendues.
Router est un composant React qui gère la navigation entre les différentes pages de votre application. Il
fournit des fonctionnalités telles que la gestion de l'historique de navigation et la mise à jour de l'URL
sans recharger la page. Il peut être utilisé avec des bibliothèques telles que React

Les composants classiques et les composants fonctionnels sont deux types de composants dans ReactJS.

Les composants classiques sont définis en utilisant une classe qui étend la classe React.Component. Ils
ont accès à un certain nombre de méthodes de cycle de vie, telles que componentDidMount et
componentWillUnmount, qui leur permettent de gérer les différents états d'un composant pendant son
cycle de vie. Les composants classiques peuvent également gérer l'état interne et les mises à jour du rendu
en réponse à des changements dans les props ou l'état.
Les composants fonctionnels, en revanche, sont définis en utilisant une fonction. Ils n'ont pas accès aux
méthodes de cycle de vie, mais ils sont plus simples à comprendre et à utiliser que les composants
classiques. Les composants fonctionnels ne peuvent pas gérer d'état interne et ne peuvent pas gérer les
mises à jour du rendu en réponse à des changements dans les props ou l'état. Cependant, ils peuvent être
utilisés pour rendre des parties plus simples de votre application, telles que des vues de présentation.
En gros, les composants classiques sont plus souples et offrent plus de fonctionnalités, tandis que les
composants fonctionnels sont plus simples et plus rapides. Le choix entre les deux dépend des exigences
spécifiques de votre application.
Les événements sont gérés en utilisant la méthode onXXX, où XXX représente le nom de l'événement,
par exemple onClick. Les événements peuvent être gérés dans les composants classiques en utilisant la
syntaxe de flèche, comme ceci :

class ExampleComponent extends React.Component {

handleClick = () => {
console.log("Button clicked");
};

render() {
return <button onClick={this.handleClick}>Click me</button>;
}
}

Dans les composants fonctionnels, vous pouvez gérer les événements en utilisant la syntaxe de fonction
de flèche :

const ExampleComponent = () => {

const handleClick = () => {
console.log("Button clicked");
};

return <button onClick={handleClick}>Click me</button>;

};

Il est important de noter que les événements ne peuvent être gérés que pour les composants qui sont
rendus. Si vous gérez un événement dans un composant qui n'est pas rendu, il ne sera pas déclenché.