React (Vite) for C#/Java developers — Mission

Version studied

React 19.3.0, released in September 2026, built with Vite 8.3.0 and @vitejs/plugin-react 6.1.1, checked with TypeScript 7.0.2 and tested with Vitest 5.0.0, React Testing Library 16.3.3 and jsdom 30.0.1, on Node.js 24.21.0. The course’s application is in code/react-vite, with its own package.json and lock file that pin those versions and oxlint 1.83.0. .github/workflows/react-vite-examples.yml runs check.sh on Linux, Windows and macOS: it scaffolds a project with create-vite, starts the dev server and receives a hot update, checks the application and every error snippet with tsc, builds it with Vite, lints it, runs every Vitest file, and compares all the outputs with the ones pasted in the lessons.

Why I’m learning this

The front ends of Guitar Alchemist are React applications built with Vite. The TypeScript course read their types; this course reads their components. As a C# developer I know Blazor and XAML, where a component is a class with properties, the framework keeps its fields, and a binding updates the screen. React looks similar at first, then a component turns out to be a function that runs again on every change, a list needs keys, an object in state must be replaced instead of changed, and two innocent components can render each other forever.

Who this course is for

You are comfortable with C# or Java, and with at least one UI framework among Blazor, WPF or JavaFX. You have followed JavaScript for C#/Java developers and TypeScript for C#/Java developers, or know their content: modules and npm, functions and closures, objects and arrays, structural types, unions and narrowing, generics. The lessons link to their pages instead of explaining the language again. This course is about components, JSX, the DOM, and the tools that build and test them.

React (Vite) in one table

	Blazor	WPF / XAML	JavaFX	React with Vite
A component	a .razor file, compiled to a class	a UserControl: XAML and code-behind	a Node subclass, or FXML and a controller	a function that returns JSX
Markup	Razor	XAML	FXML	JSX, compiled to function calls
Inputs	[Parameter] properties	dependency properties	JavaFX properties	props, one object
Local state	fields, rendered again after an event handler	properties with INotifyPropertyChanged	observable properties	useState, a value per render
Updating the screen	a render tree compared with the previous one	bindings update the controls	bindings and listeners	render again, compare, commit the differences
Two-way binding	@bind	{Binding Mode=TwoWay}	bindBidirectional	none: value and onChange
Build	MSBuild	MSBuild	Maven or Gradle	Vite: a dev server, and Rolldown for production
Component tests	bUnit	UI automation	TestFX	Vitest and Testing Library

The data

The lessons use real code as material. GuitarAlchemist/ga is quoted at commit 8cc8c5a, in ReactComponents/ga-react-components, its main React application, and Apps/ga-client, which its own dev script calls the legacy demo client. Both ask for React 18.3 and Vite 5.4 in their package.json; Apps/ga-dashboard is an Angular application, outside this course. I read their components, ran oxlint’s React rules on them, and reduced what I found to components that the course’s tests render, with a link to the original lines. The findings are in the journal.

By the end of this course, I will be able to

• create a React project with Vite, explain what its dev server and its production build do, and make type errors fail the build;
• write typed function components, compose them with props and children, and render lists with stable keys;
• keep state minimal, update it without mutation, and explain when and why React renders a component again;
• handle events and build controlled forms with validation;
• synchronize a component with the outside world with effects, and recognize the effects that shouldn’t exist;
• load data with loading and error states, cancellation and caching;
• share state with context and custom hooks, and route between pages;
• test components the way a user uses them, and measure and improve rendering performance;
• deploy a static React application in front of an ASP.NET Core or Spring API.

Outline

#	Lesson	You already know
1	A Vite project	dotnet new, dotnet watch, MSBuild, Maven, hot reload
2	Components and JSX	Blazor components, XAML user controls, [Parameter], RenderFragment, @foreach
3	State and rendering	fields, StateHasChanged, INotifyPropertyChanged, immutable records
4	Events and forms	event handlers, EventCallback, @bind, EditForm, validation attributes
5	Effects: useEffect, dependencies, cleanup, Strict Mode’s double mount, and when not to use an effect (coming next)	IDisposable, OnAfterRenderAsync, event subscriptions
6	Data: fetch, loading and error states, cancellation, Suspense, TanStack Query	HttpClient, CancellationToken, async in OnInitializedAsync
7	Composition: context, custom hooks, props against context against a store	dependency injection, cascading parameters, services
8	Routing with React Router	Blazor’s @page and NavigationManager, ASP.NET Core routing
9	Tests: Vitest, Testing Library, component tests, Playwright end to end	xUnit, bUnit, JUnit, Selenium
10	Performance: React Compiler, memo, the Profiler, splitting the bundle	profilers, virtualization, lazy loading
11	Styles and accessibility: CSS Modules, ARIA, lint rules	XAML styles, CSS isolation in Blazor, analyzers
12	React 19: Actions, use, Server Components, and what applies to a Vite SPA	Razor Pages, Blazor render modes
13	Deployment: a static build, environment variables, GitHub Pages, and an ASP.NET Core or Spring API behind it	dotnet publish, configuration, reverse proxies
—	Journal

Resources

• react.dev: Learn React, the API reference, and Using TypeScript
• React 19.3 release post and the React changelog
• Vite guide, Why Vite, and the Vite 8 announcement
• Vitest guide and React Testing Library
• TypeScript handbook — JSX and @types/react