React et Typescript. Le cours et un projet complet.

Bonjour a tous !

Le but de ce tuto est de montrer comment écrire une application React en TypeScript. Deux parties ; une première partie de cours, et une deuxième partie de pratique avec un projet de type portfolio.

Le cours explique les notions de base du JS moderne :

     ...spread et rest

     => fonction fat arrow

     => =>fonction de Curry

     ! truthy et falsy

     || et && (ou et et)

puis celles du typescript :

     compilation/compilateur TS

     annotation de type

     types primitifs et non-primitifs

     inférence

     type alias

     interface

     classes

     tuples

     union et intersection de types

     type guards (typeof, instanceof, in, never)

     prédicat et assertion de type

     types génériques

Le projet met l’ensemble en application avec un vrai démonstrateur de type portfolio et lié au spatial et à son actualité (SpaceX, Nasa, JWST etc).

Il est bien sûr écrit en TypeScript avec React 18.

On utilise tailwind comme framework CSS et le projet est totalement responsive.

React Router V6 est utilisé ici pour le routage, les redirections en cas d’erreurs et ses loaders.

Pour les autres librairies : Lucide pour les icônes, Shadcn comme librairie de composants réutilisables, vite pour le scaffolder, et axios pour l’asynchrone/HTTP.

Le code est orienté “clean-code” et “best-practices”, et on passera l’appli au compilateur Typescript et au Linter, avant de la déployer en production grâce au couplage Github+Netlify.

Rmq : Ce tuto ne nécessite bien sûr aucune souscription à un service tiers payant. Tout est gratuit.

Bon tuto !