Aller au contenu
learn
Menu global

React (Vite) pour développeurs C#/Java — Mission

Pourquoi j’apprends ça

Section intitulée « Pourquoi j’apprends ça »

Les front ends de Guitar Alchemist sont des applications React construites avec Vite. Le cours TypeScript a lu leurs types ; ce cours lit leurs composants. En développeur C#, je connais Blazor et XAML, où un composant est une classe avec des propriétés, le framework garde ses champs, et un binding met l’écran à jour. React a l’air semblable au début, puis un composant se révèle être une fonction qui s’exécute à nouveau à chaque changement, une liste a besoin de clés, un objet dans l’état doit être remplacé au lieu d’être modifié, et deux composants innocents peuvent se rendre l’un l’autre à l’infini.

À qui s’adresse ce cours

Section intitulée « À qui s’adresse ce cours »

Tu es à l’aise avec C# ou Java, et avec au moins un framework d’interface parmi Blazor, WPF ou JavaFX. Tu as suivi JavaScript pour développeurs C#/Java et TypeScript pour développeurs C#/Java, ou tu connais leur contenu : modules et npm, fonctions et closures, objets et tableaux, types structurels, unions et narrowing, génériques. Les leçons renvoient à leurs pages au lieu de réexpliquer le langage. Ce cours parle des composants, de JSX, du DOM, et des outils qui les construisent et les testent.

React (Vite) en un tableau

Section intitulée « React (Vite) en un tableau »
Blazor WPF / XAML JavaFX React avec Vite
Un composant un fichier .razor, compilé en classe un UserControl : XAML et code-behind une sous-classe de Node, ou FXML et un contrôleur une fonction qui renvoie du JSX
Balisage Razor XAML FXML JSX, compilé en appels de fonction
Entrées des propriétés [Parameter] des propriétés de dépendance des propriétés JavaFX les props, un seul objet
État local des champs, rendus à nouveau après un gestionnaire d’événement des propriétés avec INotifyPropertyChanged des propriétés observables useState, une valeur par rendu
Mettre l’écran à jour un arbre de rendu comparé au précédent les bindings mettent les contrôles à jour bindings et écouteurs rendre à nouveau, comparer, appliquer les différences
Binding bidirectionnel @bind {Binding Mode=TwoWay} bindBidirectional aucun : value et onChange
Build MSBuild MSBuild Maven ou Gradle Vite : un serveur de développement, et Rolldown pour la production
Tests de composants bUnit automatisation d’interface TestFX Vitest et Testing Library

Les données

Section intitulée « Les données »

Les leçons s’appuient sur du vrai code. GuitarAlchemist/ga est cité au commit 8cc8c5a, dans ReactComponents/ga-react-components, son application React principale, et dans Apps/ga-client, que son propre script dev appelle l’ancien client de démonstration. Les deux demandent React 18.3 et Vite 5.4 dans leur package.json ; Apps/ga-dashboard est une application Angular, hors du champ de ce cours. J’ai lu leurs composants, lancé sur eux les règles React d’oxlint, et réduit ce que j’ai trouvé à des composants que les tests du cours rendent, avec un lien vers les lignes d’origine. Les constats sont dans le journal.

À la fin de ce cours, je saurai

Section intitulée « À la fin de ce cours, je saurai »
  • créer un projet React avec Vite, expliquer ce que font son serveur de développement et son build de production, et faire échouer le build sur les erreurs de type ;
  • écrire des composants fonctions typés, les composer avec des props et des enfants, et rendre des listes avec des clés stables ;
  • garder un état minimal, le mettre à jour sans mutation, et expliquer quand et pourquoi React rend à nouveau un composant ;
  • gérer les événements et construire des formulaires contrôlés avec validation ;
  • synchroniser un composant avec le monde extérieur grâce aux effets, et reconnaître les effets qui ne devraient pas exister ;
  • charger des données avec des états de chargement et d’erreur, l’annulation et la mise en cache ;
  • partager l’état avec le contexte et des hooks personnalisés, et naviguer entre les pages ;
  • tester les composants comme un utilisateur s’en sert, et mesurer et améliorer les performances de rendu ;
  • déployer une application React statique devant une API ASP.NET Core ou Spring.

Plan

Section intitulée « Plan »
# Leçon Tu connais déjà
1 Un projet Vite dotnet new, dotnet watch, MSBuild, Maven, le rechargement à chaud
2 Composants et JSX les composants Blazor, les user controls XAML, [Parameter], RenderFragment, @foreach
3 État et rendu les champs, StateHasChanged, INotifyPropertyChanged, les records immuables
4 Événements et formulaires les gestionnaires d’événements, EventCallback, @bind, EditForm, les attributs de validation
5 Les effets : useEffect, les dépendances, le nettoyage, le double montage du Strict Mode, et quand ne pas utiliser d’effet (la prochaine) IDisposable, OnAfterRenderAsync, les abonnements aux événements
6 Les données : fetch, états de chargement et d’erreur, annulation, Suspense, TanStack Query HttpClient, CancellationToken, async dans OnInitializedAsync
7 La composition : le contexte, les hooks personnalisés, props contre contexte contre store l’injection de dépendances, les paramètres en cascade, les services
8 Le routage avec React Router @page et NavigationManager de Blazor, le routage d’ASP.NET Core
9 Les tests : Vitest, Testing Library, tests de composants, Playwright de bout en bout xUnit, bUnit, JUnit, Selenium
10 Les performances : React Compiler, memo, le Profiler, le découpage du bundle les profileurs, la virtualisation, le chargement différé
11 Styles et accessibilité : CSS Modules, ARIA, règles de lint les styles XAML, l’isolation CSS de Blazor, les analyseurs
12 React 19 : les Actions, use, les Server Components, et ce qui s’applique à une SPA Vite Razor Pages, les modes de rendu de Blazor
13 Le déploiement : un build statique, les variables d’environnement, GitHub Pages, et une API ASP.NET Core ou Spring derrière dotnet publish, la configuration, les reverse proxies
— Journal

Ressources

Section intitulée « Ressources »