When will you use this?

Use when your React app must talk to a real backend or show live updates.

• React frontends talk to .NET, Node, or Java APIs — fetch and auth are daily tasks.
• Live chat and stock tickers use WebSockets or SignalR with React state.

Real-world: React + C# Web API

Enterprise LMS uses React Vite frontend on port 5173 and ASP.NET Core API on 5000 — CORS and JWT configured for dev and prod.

Production-style code

// Program.cs
builder.Services.AddCors(o => o.AddPolicy("spa", p =>
  p.WithOrigins("https://app.toolliyo.example").AllowAnyHeader().AllowAnyMethod()));
app.UseCors("spa");

// React .env
VITE_API_URL=https://api.toolliyo.example

// api/client.js
const api = axios.create({ baseURL: import.meta.env.VITE_API_URL });

What happens in production: Common stack in Indian enterprises — React UI + .NET backend with shared JWT auth.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

// React — Vite proxy or full URL
fetch('https://api.myapp.com/api/products')

// Program.cs — CORS
builder.Services.AddCors(o => o.AddPolicy("spa", p =>
  p.WithOrigins("https://localhost:5173").AllowAnyHeader().AllowAnyMethod()));

Line-by-line walkthrough

How it works (big picture)

• Dev: Vite proxy avoids CORS.
• Prod: API allows SPA origin.
• JWT from /api/auth/login sent as Bearer header.

Do this on your computer

1. Run ASP.NET API on port 5000.
2. Configure Vite proxy to /api.
3. Add CORS for production SPA URL.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.
• Open React DevTools (browser extension) while running ASP.NET Core Integration and inspect component props/state.

Remember

React UI + ASP.NET API. CORS and JWT are key. SignalR for real-time .NET + React.

Common questions