Vue JS - Initiation
5 jours - 35 heures
Objectifs
Réalisation efficacement des applications front Web avec VueJS.
Participants
Architectes, Chefs de Projet, Consultants, Développeurs
Prérequis
Connaitre la programmation script avec une culture de Web
Pédagogie
La pédagogie est basée sur le principe de la dynamique de groupe avec alternance d'apports théoriques, de phases de réflexion collectives et individuelles, d'exercices, d'études de cas et de mises en situations observées. Formation / Action participative et interactive : les participants sont acteurs de leur formation notamment lors des mises en situation car ils s'appuient sur leurs connaissances, les expériences et mettront en œuvre les nouveaux outils présentés au cours de la session.
Public Visé
Collaborateurs - Développer ses compétences, s’affirmer comme expert dans son domaine, sécuriser son parcours professionnel ; Entreprises ou organisations - Accélérer les évolutions de carrière des collaborateurs, augmenter l’efficacité et l’employabilité des équipes… ; Demandeur d’emploi - Développer son employabilité, favoriser sa transition professionnelle...
Profil de l'intervenant
Consultant-formateur expert. Suivi des compétences techniques et pédagogiques assuré par nos services.
Accessibilité
Moyens techniques
Encadrement complet des stagiaires durant la formation. Espace d’accueil, configuration technique des salles et matériel pédagogique dédié pour les formations en centre. Remise d’une documentation pédagogique papier ou numérique à échéance de la formation.
Méthodes d'évaluation des acquis
Exercices individuels et collectifs durant la formation. La feuille d’émargement signée par demi-journée ainsi que l’évaluation des acquis de fin de stage sont adressées avec la facture.
Programme
Introduction
- Présentation de l'environnement de développement : vscode, NodeJS/npm
- Rappel des normes EcmaScript
- Installation de CLI VuesJS
- Créer un projet VueJS : structure, parametrage et scripts
- Compilation incrémentale
TypeScript
- TypeScript vs EcmaScript
- Configuration et paramétrage
- Types de données : scalaires et agrégés
- Nullable, valeur par défaut, opérateurs ? et !
- Opérateurs : affectation, arithmétique, logique et relationnel
- Méthode, lambda et passage d'arguments
- Généricité
Le framework ReactJS
- Concepts de base : Composant, Prop, modules, template,...
- Structure d'un modules et echanges en Code et Template
- Parties du code : Data(), methodes:
- Le DOM virtuel avec JSX
- Cycle de vie du module : create(), mount(), umount()...
Les props
- Définition des props et transmission de données
- Accéder aux props
- La props.children
Le JSX et les composants
- Définition d'un élément React
- Liaison avec le DOM (ReactDOM.render())
- Syntaxe JSX
- Les composants : définition et intérêt
- Code du Composants : Classe vs Fonctionnel
- Gestion des méthodes d'évènement (handlers)
- Contenu conditionnel et raccourcis : opérateur &&, opérateur ternaire
- Imbrication de composants
Le routing et la navigation
- Modèle d'application SPA (Single Page Application)
- Le routage
- Les paramètres d'URL
- Navigations imbriquées
Les Hooks
- Hooks d'état (useState) et d'effet (useEffect)
- Règles des Hooks et custom Hooks
Listes et raccourcis (map, filter)
- Les clés (key) et le DOM virtuel
- Les fragments
- Etat du composant et composants contrôlés
- Gestion des formulaires et refs
Gestion de l'état d'une application VueJS
- Gestion de l'état : store , actions, reducers ...
- Le composant Provider
- Les containers
- Introduction à Redux et Zustand
- Utilisation avec les Hooks useSelector et useDisptach
Introduction aux tests unitaires
- Le framework Jest (setup, teardown, describe, it)
Déploiement
- Dist : version distribuable du projet VueJS
- Commande de compilation
