Exercices

LocalStorage Weather Api ToDo et LocalStorage

React+ionic

Ionic Create project 4.React Outils utiles 5.Lifecycle Methods 6.JSX

Gestion Ventes

Produit CRUD

6.Form :Ajouter un produit 8.Liste produits 9.Pagination 10.Liste produits +Pagination 11.Liste produits +Datatable 11.Liste produits +load more 12.Supprimer un produit 14.Details d'un produit 15.Recherche et Autocomplete

Reacts:Utils

Gestion des erreurs Variables d'environment Cookies Internationalization proptypes Form validation React Animation Fragment Google Maps

Utilisateur CRUD

18.Inscription upload file 19.Connexion et Les sessions 19.Connexion: JWT Token

Ventes CRUD

17.Vendre un produit 18.Facture Generate PDF 19.Statisques Charts

Redux





Les fonctions : find(), forEach(), reduce(), some(), every()

1. find()
La méthode find() est utilisée pour trouver la première occurrence dans un tableau qui satisfait une condition donnée.
import React from 'react';

function App() {
    const numbers = [10, 20, 30, 40, 50];

    // Utilisation de find() pour trouver le premier nombre supérieur à 25
    const foundNumber = numbers.find((number) => number > 25);

    return (
        <div>
            <h1>Exemple d'utilisation de la méthode find()</h1>
            <p>Le premier nombre supérieur à 25 est : {foundNumber}</p>
        </div>
    );
}

export default App;
Dans cet exemple, find() est utilisé pour trouver le premier nombre dans le tableau numbers qui est supérieur à 25.
2. forEach()
La méthode forEach() exécute une fonction donnée une fois pour chaque élément du tableau.
import React from 'react';

function App() {
    const fruits = ['Apple', 'Banana', 'Orange'];

    // Utilisation de forEach() pour afficher chaque fruit
    const displayFruits = [];
    fruits.forEach((fruit, index) => {
        displayFruits.push(<li key={index}>{fruit}</li>);
    });

    return (
        <div>
            <h1>Exemple d'utilisation de la méthode forEach()</h1>
            <ul>{displayFruits}</ul>
        </div>
    );
}

export default App;
Dans cet exemple, forEach() est utilisé pour parcourir le tableau fruits et créer une liste <li> pour chaque fruit.
3. reduce(): La méthode reduce() applique une fonction sur chaque élément du tableau pour le réduire à une seule valeur.
import React from 'react';

function App() {
    const numbers = [1, 2, 3, 4, 5];

    // Utilisation de reduce() pour calculer la somme des nombres
    const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

    return (
        <div>
            <h1>Exemple d'utilisation de la méthode reduce()</h1>
            <p>La somme des nombres est : {sum}</p>
        </div>
    );
}

export default App;
Dans cet exemple, reduce() est utilisé pour calculer la somme des nombres dans le tableau numbers.
4. some(): La méthode some() teste si au moins un élément du tableau passe le test implémenté par la fonction fournie.
import React from 'react';

function App() {
    const numbers = [10, 20, 30, 40, 50];

    // Utilisation de some() pour vérifier s'il existe un nombre supérieur à 25
    const hasNumberGreaterThan25 = numbers.some((number) => number > 25);

    return (
        <div>
            <h1>Exemple d'utilisation de la méthode some()</h1>
            <p>Y a-t-il un nombre supérieur à 25 ? {hasNumberGreaterThan25 ? 'Oui' : 'Non'}</p>
        </div>
    );
}

export default App;
Dans cet exemple, some() est utilisé pour vérifier s'il existe au moins un nombre dans le tableau numbers qui est supérieur à 25.
5. every(): La méthode every() teste si tous les éléments du tableau passent le test implémenté par la fonction fournie.
import React from 'react';

function App() {
    const numbers = [10, 20, 30, 40, 50];

    // Utilisation de every() pour vérifier si tous les nombres sont supérieurs à 5
    const areAllNumbersGreaterThan5 = numbers.every((number) => number > 5);

    return (
        <div>
            <h1>Exemple d'utilisation de la méthode every()</h1>
            <p>Tous les nombres sont-ils supérieurs à 5 ? {areAllNumbersGreaterThan5 ? 'Oui' : 'Non'}</p>
        </div>
    );
}

export default App;