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.

Spécificités pédagogiques de la session à distance

Formation dispensée en visio-formation avec un séquencement adapté. Configuration et accès à notre outil de visio-formation. Accès à la bibliothèque pédagogique virtuelle durant la formation afin de partager les exercices, contrôler les résultats obtenus et déployer l’ensemble du séquencement pédagogique. La durée exacte des modules définis ci-après est susceptible de varier en fonction de la vitesse d’appropriation des concepts enseignés de la part du stagiaire.

Remarques

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... Demandeurs d’emploi : Développer son employabilité, favoriser sa transition professionnelle...

Certification

Profil de l'intervenant

Consultant-formateur expert. Suivi des compétences techniques et pédagogiques assuré par nos services.

Accessibilité

Nous contacter.

Moyens techniques

Le suivi pédagogique, administratif et logistique est assuré et coordonné par nos services afin de garantir le bon déroulement de l’action de formation. Les stagiaires bénéficient d’un encadrement complet tout au long de la formation. Pour les formations réalisées en centre, les participants disposent d’un espace d’accueil, de salles configurées techniquement selon les besoins pédagogiques et d’un matériel dédié. Des ressources pédagogiques sont mis à disposition des participants pendant la formation. Une documentation pédagogique est remise à échéance de la formation au format papier ou numérique

Moyens techniques relatifs aux sessions à distance

Encadrement complet des stagiaires durant la formation. Accès à notre service technique durant l’animation pour toute limite rencontrée. Accès à l’espace de conversation instantané durant la session pour interagir avec le formateur et les participants. Transmission d’un email de contact pour réaction privée durant la session. 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.

Méthodes d'évaluation des acquis de la formation à distance

Exercices individuels et collectifs communiqués durant la formation via la bibliothèque pédagogique virtuelle mise à disposition ou directement par le formateur. Ces activités constituent les modalités de suivi et d’évaluation du Stagiaire de la part du formateur. Suivi permanent du formateur durant l’animation et durant les exercices pratiques.

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