React avec TypeScript

Présentation

Au cours de la dernière décennie, l’évolution rapide du web a stimulé le besoin d’un « JavaScript étendu » enrichissant l’expérience utilisateur avec de nouvelles fonctionnalités tout en simplifiant le développement. TypeScript, React, Angular ou encore Vue.js sont notamment nés de ce besoin.
TypeScript, créé en 2012 par Microsoft, offre un sur-ensemble typé de JavaScript qui facilite la construction d'applications complexes et améliore la qualité du code grâce en partie à son typage statique et son inférence de type. React, créé en 2013 par Meta (ex Facebook), s’est imposé comme un incontournable pour la création d’interfaces utilisateurs réactives, qui s’adaptent aux interactions des personnes ainsi qu’aux changements de données.
Au cours de cette formation, vous plongerez dans les spécificités de TypeScript appliquées à la bibliothèque React pour élaborer des applications robustes et évolutives. Vous apprendrez les fondamentaux de TypeScript pour définir des types statiques, des interfaces, et des génériques pour créer des composants réutilisables et facilement maintenables. En parallèle, vous apprendrez à maîtriser React en construisant des composants, en gérant l'état et les données, et en composant des interfaces dynamiques avec JSX. Cette formation vous permettra non seulement de consolider vos connaissances en JavaScript moderne, mais aussi d’intégrer les avantages de TypeScript et React pour optimiser votre développement et tirer parti des meilleures pratiques pour une expérience de développement améliorée.

Objectifs de la formation

• Découvrir, installer et utiliser React et TypeScript
• Développer sa rigueur de programmation informatique
• Savoir créer des composants React
• Savoir utiliser la State, les props, les styles et les Hooks au sein de React

Public

• Toute personne souhaitant améliorer ses compétences en développement web front-end.

Prérequis

• Une connaissance de JavaScript est nécessaire.

Programme

Introduction à l’environnement React avec TypeScript

Environnement d’exécution, modules et Node
Architecture d’un projet
Concept de rafraîchissement en temps réel

Introduction à TypeScript

Concepts et pertinence de TypeScript
Rappels nécessaires en JavaScript
Intégration et compilation
Syntaxe de base

Les types primitifs en TypeScript

Concepts de types primitifs / référencés
Description des types primitifs
Typages explicite ou par inférence
Les unions et alias de types

Les types référencés en TypeScript

Description des types référencés
Les tuples et enums
Les interfaces
Typage de fonctions

Les génériques en TypeScript

Concepts et cas d’utilisation
Paramètre de généricité
Les génériques dans les interfaces

Introduction à React

Origines et concepts liés à React
Fonctionnalités récentes de JavaScript utilisées avec React
La syntaxe JSX
Le DOM fantôme (Shadow DOM)
Le composant ReactDOM

Les composants React

Objectifs des composants, syntaxe, créer son premier composant
Composants fonctionnels ou composants sous forme de classe ? 
Le cycle de vie (lifecycle) et les grappins (hooks) : useEffect, useState, …
La state

Fonctionnalités liées aux composants React

Gestion des styles des composants : imports et styles React
Les props d’un composant
Le contrôle des formulaires
Créer des composants parents
Les contextes

Date de dernière modification : 22/03/2024

Ces formations pourraient vous intéresser

• React : les fondamentaux

  Avec l’évolution des usages du web de cette dernière décennie, il s’est développé un fort besoin d’un « JavaScript étendu » pour fournir de nouvelles fonctionnalités aux utilisateurs, dans un langage …

  En savoir plus

• JavaScript : Design Patterns et orienté prototype

  JavaScript est un langage disposant de multiples paradigmes de programmation en son sein. On y retrouve des éléments de programmation fonctionnelle avec l’utilisation massive des fonctions « map », « reduce » …

  En savoir plus