Matière
Framework JS : ReactJS, Node JS
Description
Comprendre l'apport d'un Framework JS, et l'appliquer dans le développement d'interfaces utilisateur interactives et dynamiques, notamment React et / ou Vue.js.
Expérimentation de React et Vue.js directement dans une page HTML en utilisant des CDN pour inclure les bibliothèques React et Vue.js.
Introduction à React JS, une bibliothèque JavaScript moderne pour la création d'interfaces utilisateur dynamiques en apprenant à l'utiliser via un CDN. Découvrir les principes fondamentaux de React, y compris les composants, le JSX et la gestion de l'état avec les hooks. Apprendre à créer des composants React simples et à les rendre dans une page HTML, en utilisant JSX pour une syntaxe familière. Gestion des événements, stylisation des composants et communication entre composants.
Introduction à Vue.js, un framework JavaScript moderne et réactif. Découvrir les bases de Vue.js en commençant par une présentation du framework et en apprenant à l'utiliser via un CDN. Créer une première application Vue.js dans une simple page HTML, comprendre les instances Vue et apprendre à lier des données réactives à des éléments HTML. Gestion des événements, et utilisation des directives Vue, stylisation des composants et communication entre composants.
Compétences requises
De bonnes connaissances de Javascript, tant en programmation procédurale qu'en programmation orientée objet, de diverses API (Window, Document, Node, Element, entre autres). Connaissance HTML et CSS.
Syllabus
Initiation à React JS
1. Présentation de React
- Qu'est-ce que React JS ?
- Avantages de l'utilisation de React
- Concepts de base (composants, virtual DOM, JSX)
2. Installation de React
- Utilisation de React via les CDN (Content Delivery Networks)
- Inclure React et ReactDOM dans une page HTML
3. Création de composants React
- Composants fonctionnels vs. composants de classe
- Création de composants simples en utilisant la fonction `React.createElement`
4. Rendu JSX
- Introduction à JSX (JavaScript XML)
- Utilisation de JSX pour rendre des éléments HTML
5. Gestion de l'état avec les hooks
- Introduction aux hooks (useState, useEffect)
- Utilisation de useState pour gérer l'état local d'un composant
- Utilisation de useEffect pour effectuer des actions après le rendu d'un composant
6. Gestion des événements
- Liaison des événements aux fonctions de gestion
- Utilisation des événements courants (onClick, onChange, etc.)
7. Styling dans React
- Méthodes de stylisation des composants React (CSS, inline styles)
- Utilisation de classes CSS et de styles en ligne
8. Communication entre composants
- Transmission de données entre composants parent et enfants
- Utilisation des props pour passer des données
9. Projet pratique : Création d'une petite application React
- Mettre en pratique les concepts appris en créant une application simple
- Application d'un design simple avec des composants React
- Utilisation des hooks pour gérer l'état et les effets secondaires
Initiation à Vue.js
1. Présentation de Vue.js
- Qu'est-ce que Vue.js ?
- Avantages de l'utilisation de Vue.js
- Comparaison avec d'autres frameworks JavaScript
2. Installation de Vue.js
- Utilisation de Vue.js via un CDN (Content Delivery Network)
- Inclure Vue.js dans une page HTML
3. Première application Vue.js
- Création d'un projet Vue.js simple dans une page HTML
- Structure de base d'une application Vue.js
4. Comprendre les instances Vue
- Création d'une instance Vue
- Liaison de l'instance Vue à un élément HTML existant
5. Rendu avec Vue.js
- Utilisation de directives Vue pour lier des données à des éléments HTML
- Rendu conditionnel avec `v-if` et `v-else`
6. Gestion de l'état avec Vue.js
- Création de données réactives avec l'option `data` de l'instance Vue
- Modification de données réactives et observation des changements automatiques
7. Gestion des événements
- Liaison des événements aux méthodes de l'instance Vue
- Utilisation des événements courants (click, input, etc.)
8. Interpolation et directives
- Utilisation de l'interpolation pour afficher des données dans le DOM
- Utilisation de directives Vue (v-bind, v-on, v-model, etc.)
9. Styling dans Vue.js
- Méthodes de stylisation des composants Vue (CSS, inline styles)
- Utilisation de classes CSS et de styles en ligne avec Vue.js
10. Communication entre composants
- Transmission de données entre composants parent et enfants
- Utilisation des props pour passer des données
11. Projet pratique : Création d'une petite application Vue.js
- Mettre en pratique les concepts appris en créant une application simple
- Application d'un design simple avec des composants Vue.js
- Utilisation des directives et de la gestion de l'état pour créer une expérience utilisateur interactive
Bibliographie
React.js
Auteur(s): Sarrion, Eric
Editeur: Eyrolles
Année de Publication: 2019
ISBN: 978-2-212-67756-0