ReactJS+NodeJS

React: Intoduction

1.Introduction,istallation

Components

2.a>Components 2.b> Constructeur et propriétés 2.c> Components:Exemples

State,filter , map ...

4.a> State (data) 4.b> State (change data) 4.c> State (Formulaire)
Exercice 1:Vente Produit Exercice 2:Note Stagiaire Exercice 3:Quizz Exercice 4:Gestion matchs Exercice 5:Crud Produit

Props

5a.Props introduction Exercice 1

Exercices

6.a Nombre Random 6.b Game Pile ou Face 6.c Calculatrice 6.c Quizz 6.c Les Styles Dynamiques 6.c Array Object Filter

..

7.React Hooks

Exercices

Exercice1: Client Crud Exercice2 :Filter Teams Exercice3 : Multi-select

Props dans Composant fonctionnel

Exemples Exercice1 Exercice2 Exercice3

Routage

7.Routage 8.Routage :public and restricted

Axios ,Fetch, Api

CRUD application

Redux,Redux Toolkit

Cours Redux

Exercices Redux

Exercice1 Social App Exercice1 WhatsApp App Exercice2 Restaurant App Exercice3 Student App Exercice4 Income ,Expense App Exercice5 Bank App

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





Exercices

folder Projet: test_react_project

Créer une application React Permettant gérer des notes (todo list) avec localStorage

App.js
import React, { useState, useEffect } from 'react';

function App() {
    //sauvegarder les notes
    const [notes, setNotes] = useState([]);
    //le contenu d'une note
    const [note, setNote] = useState({text:'',priority:'',date:new Date()});
   
    //récupéer le contenu d'une note pour la l'ajoute dans LocalStorage
    const handleChange = e => {
        setNote(prevNote=>({
            ...prevNote,
            [e.target.name]:e.target.value
        }))
    }
   
   
    //charger les notes from localStorage
    useEffect(() => {
        const storedNotes = localStorage.getItem("notes");
        if (storedNotes) {
            //charger les notes dans la variable de state notes pour les affichées
            setNotes(JSON.parse(storedNotes));
        }
    }, []);
   
    //ajouter une nouvellenote
    const ajouterNote = e => {
        //pour éviter que <form re charge la page
        e.preventDefault();
        if(note.text!='' && note.priority!='')
        {
            //ajouter la date systeme à la note pour la sauvegarder
           
           
            //ajouter la note crée dans la variable de state note
            setNotes([...notes, note]);
            //sauvegarder la nouvelle valeur dans localStorage
            localStorage.setItem("notes", JSON.stringify([...notes, note]));
        }
       
    }
   
    //index:est la position de l'element cliqué dans le tableau notes
    const removeNote = index => {
        //charger les notes from LocalStorage
        const storedNotes = localStorage.getItem("notes");
        //si on a quelque chose dans le localStorage
        if (storedNotes) {
            //convertir le localStorage ver un objet Json parceque
            //la valeur du localStorage est une string sous forme de json
            const notes = JSON.parse(storedNotes);
            //supprimer un element 1,à partir de la position index
            notes.splice(index, 1);
            //sauvegarderla nouvelle valeurs de notes
            setNotes(notes);
            //sauvegarder dans localStorage
            localStorage.setItem("notes", JSON.stringify(notes));
        }
    }
   
   
   
   
   
    return (
        <div>
        <form onSubmit={ajouterNote} style={{width:'100%',background:'#efefef'}}>
        <input type="text" name="text"placeholder='Saisir une note' onChange={handleChange} />
        <select name="priority" onChange={handleChange} >
        <option disabled selected>priority</option>
        <option value="red">urgent</option>
        <option value="white">normale</option>
        <option value="yellow">necessaire</option>
        </select>
        <button type="submit">Add note</button>
        </form>
        {notes.map((vnote, index) => (
            <div style={{ border: "1px solid black", padding: "2px" ,float:'left',widht:'50%',background:vnote.priority}} key={index}>
            <span>{vnote.text}</span>
            <br/>
            <div style={{background:'#eee',width:'100%'}}>{vnote.date.toLocaleString()}</div>
            <button style={{width:'100%'}} onClick={() => removeNote(index)}>Remove</button>
            </div>
            ))}
           
            </div>
            );
        }
       
       
        export default App ;