React Javascript

Ce projet à compléter vous permettra de vous entraîner à l'utilisation des fondamentaux de la bibliothèque React, ceci en JavaScript.

[!TIP] Il vous est fortement conseillé de suivre le tutoriel officiel React jusqu'à la partie "JavaScript in JSX with Braces.

[!WARNING] Ce projet est basé sur React uniquement et permet d'assimiler les bases de la bibliothèque. Par la suite vous pourrez plutôt utiliser un framework tel que NextJS pour vos développements.

Mise en place du projet

1. Installer les dépendances :

npm install

ou sa version plus courte :

npm i

2. Démarrer le serveur de développement :

npm run dev

L'odre dev de la commande ci-dessus fait référence à la section "script" du fichier de configuration package.json.

Voici l'extrait en question :

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  }

Plusieurs commandes possibles pour ce projet :

• npm run dev correspond à vite: lance la commande vite qui démarrer un serveur de développement local
• npm run build correspond à vite builds : permet de créer un "bundle" de l'application optimisé pour la production (fichiers minifiés, CSS regroupé, optimisation des assets comme les images...)
• npm run lint correspond à eslint . : ESLint est un outil d'analyse de code qui permet :
  • détecter les erreurs
  • vérifier que l'indentation est bien faite
  • retrouver les "code smell"
• npm run preview correspond à vite preview : démarre un serveur local pour prévisualiser la version compilée pour la production (avec, par exemple, la commande npm run build).

Etapes de développement

Vous allez pouvoir développer les différents composants proposés dans l'ordre présenté dans la liste ci-dessous :

1. CounterPage.jsx :

• écriture de composant
• utilisation de state
• gestion des évènements

2. TasksPage.jsx :

• utiliation de states
• manipulation de tableaux
• répétition de composants

3. RandomWord.jsx :

• utiliation de states
• mise en place du hook useEffect

4. DomModificationPage.jsx :

• utilisation de références (useRef)
• manipulation d'éléments du DOM
• gestion des évènements utilisateur

5. UsersPage.jsx :

• requêtage de Web API
• construction dynamique d'une interface
• répétition de composants

6. ClockPage.jsx :

• utilisation de states
• utilisation de la fonction setInterval

[!TIP] Pour chacun des exercies vous trouverez des informations dans le code fourni ainsi que dans les README contenus dans les sous-dossiers.