Résumé des Notions :

1. Site Web Statique : Un site web dont le contenu est fixe et ne change pas en fonction
des actions de l'utilisateur.
2. Différence Front-end et Back-end :
 Front-end : La partie visible d'un site web avec laquelle l'utilisateur interagit
directement.
 Back-end : La partie invisible responsable du traitement des données et de la
gestion des opérations en coulisse.
3. Frameworks Front-end : Des bibliothèques pré-écrites de code facilitant le
développement front-end, tels que React, Angular, et Vue.
4. SPA (Single Page Application) : Une application web qui charge une seule page HTML
et met à jour le contenu en fonction des interactions de l'utilisateur, sans
rechargement de la page.
5. MPA (Multi-Page Application) : Une application web traditionnelle avec plusieurs
pages distinctes.
6. SPA vs MPA :
 SPA : Utilise une seule page qui se met à jour dynamiquement.
 MPA : Recharge entièrement la page lors du changement.
7. React JS : Une bibliothèque JavaScript pour la construction d'interfaces utilisateur
interactives.
8. CRA (Create React App) : Un ensemble d'outils prédéfinis pour créer rapidement des
applications React sans configuration manuelle.
9. DOM (Document Object Model) vs VDOM (Virtual DOM) :
 DOM : Représentation en mémoire d'une page web.
 VDOM : Version virtuelle du DOM utilisée pour optimiser les mises à jour
d'interface.
10.JSX (JavaScript XML) : Une syntaxe qui permet d'écrire du code HTML dans du code
JavaScript.
Détails sur React JS :
 Composants : Unités autonomes de l'interface utilisateur.
 Props (Propriétés) : Paramètres passés aux composants.
 Événements : Actions déclenchées par l'utilisateur.
  Composante Simple : Composante déclarée comme une fonction.
 Composante de Type Classe : Composante déclarée comme une classe.
 Communication Inter-composantes : Transmission de données entre composantes.
 États (State) : Données locales à une composante.
 Listes et Utilisations :
 Map, Key, Find, Filter, Sort, Reduce, Slice, etc.
 Conditions : Utilisation de structures conditionnelles (if, else).
 Boucles : Utilisation de boucles (for, while).
 Formulaire : Capture des données utilisateur.
 API (Fetch API) : Interaction avec des API externes.
 Routage : Gestion de la navigation dans l'application.
 Hooks : Fonctions spéciales pour manipuler le state et les cycles de vie des
composants.
 Redux : Gestion globale de l'état de l'application.
 UseParams : Extraction de paramètres d'une URL.
 UseEffect : Exécution d'effets secondaires dans les composants.
 UseState : Hook pour gérer l'état local d'une composante.
 Provider : Fournit le store Redux à l'application.
 Toolkit et Thunk : Outils pour simplifier l'utilisation de Redux.
Syntaxes des Fonctions dans React JS :
 Ajouter : Utilisation de méthodes comme push ou concat.
 Supprimer : Filtrage ou utilisation de splice.
 Modifier : Mise à jour des propriétés d'un objet ou d'un élément dans une liste.
 Trier : Utilisation de la méthode sort.
 Afficher : Utilisation de la méthode map pour créer des éléments JSX.
 Incrémenter/Décrémenter : Utilisation de l'état local ou global.
 Rechercher : Utilisation de méthodes comme find.
 Filtrer : Utilisation de la méthode filter.
La création d'actions et les reducers dépendent du modèle spécifique de gestion d'état de
l'application et peuvent varier en fonction de la structure des données (objets, listes, objets
imbriqués, etc.).

Détails sur React JS et Syntaxes des Fonctions :

1. Composants :

 Les composants sont des blocs de construction réutilisables dans React.

 Exemple de composant simple :

jsx code

function SimpleComponent() { return <div>Hello, World!</div>; }

2. Props (Propriétés) :

 Les props sont utilisées pour passer des données à un composant.

 Exemple :

jsx code

function Greeting(props) { return <div>Hello, {props.name}!</div>; }

3. Événements :

 Les événements réagissent aux actions de l'utilisateur.

 Exemple :

jsx code

function ButtonComponent() {

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

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

4. Composante de Type Classe :

 Les composants de classe sont définis à l'aide de la syntaxe ES6 class.

 Exemple :

jsx code

class ClassComponent extends React.Component { render() { return <div>Hello from Class Component!</div>; } }

5. Communication Inter-composantes :

 Les données sont transférées entre composantes parentes et enfants via les props.

 Exemple :

jsx code

// Parent Component function ParentComponent() { const data = "Data from parent"; return <ChildComponent
data={data} />; } // Child Component function ChildComponent(props) { return <div>{props.data}</div>; }

6. États (State) :
  Utilisation de useState pour gérer l'état local d'une composante fonctionnelle.

 Exemple :

jsx code

function CounterComponent() { const [count, setCount] = React.useState(0); return ( <div> <p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button> </div> ); }

7. Listes et Utilisations :

 Utilisation de méthodes comme map, filter, sort, etc.

 Exemple :

jsx code

function ListComponent() { const items = [1, 2, 3, 4]; return ( <ul> {items.map((item) => ( <li key={item}>{item}</li>
))} </ul> ); }

8. Redux :

 Utilisation de Redux pour gérer l'état global de l'application.

 Actions :

jsx code

const incrementAction = () => ({ type: "INCREMENT", });

 Reducer :

jsx code

const counterReducer = (state = 0, action) => { switch (action.type) { case "INCREMENT": return state + 1; default:
return state; } };

9. Utilisation des Hooks :

 Utilisation de useEffect pour les effets secondaires.

 Exemple :

jsx code

function EffectComponent() {

React.useEffect(() => {

console.log("Component Mounted");

return () => { console.log("Component Unmounted"); };

}, []);

return <div>Effect Component</div>;

10. API (Fetch API) :

 Interaction avec des API externes.

 Exemple :

jsx code
function FetchDataComponent() {

const [data, setData] = React.useState(null);

React.useEffect(() => {

fetch('https://api.example.com/data')

.then(response => response.json())

.then(data => setData(data))

.catch(error => console.error('Error fetching data:', error));

}, []);

return (

<div> {data ? <p>Data: {data}</p> : <p>Loading...</p>} </div>

);

Ces exemples fournissent une base solide pour comprendre la syntaxe de React JS et comment implémenter
différentes fonctionnalités à l'aide de cette bibliothèque.