Introduction

In today’s full-stack landscape, pairing a modern React frontend with a robust .NET backend is a powerful combo. With .NET 9 pushing performance and developer experience even further, it’s the perfect time to explore how to stitch these technologies together into a clean, scalable application.

🧱 Project Overview

We’ll build a simple app that displays a list of products fetched from a .NET 9 API. The React frontend will consume this API and render the data dynamically.

🔧 Tech Stack

• Frontend: React (with Vite for fast dev experience)
• Backend: ASP.NET Core 9 Web API
• Communication: REST (JSON)
• Tooling: Visual Studio Code, Node.js, .NET SDK 9

🛠️ Step 1: Create the .NET 9 Backend

1.1 Initialize the API

dotnet new webapi -n ProductApi
cd ProductApi

dotnet new webapi -n ProductApi
cd ProductApi

This creates a minimal API project. Open Program.cs and define a simple in-memory endpoint:

var products = new[]
{
    new { Id = 1, Name = "Laptop", Price = 999 },
    new { Id = 2, Name = "Smartphone", Price = 699 },
    new { Id = 3, Name = "Headphones", Price = 199 }
};

app.MapGet("/api/products", () => products);

var products = new[]
{
    new { Id = 1, Name = "Laptop", Price = 999 },
    new { Id = 2, Name = "Smartphone", Price = 699 },
    new { Id = 3, Name = "Headphones", Price = 199 }
};

app.MapGet("/api/products", () => products);

1.2 Enable CORS

To allow requests from the React frontend:

var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: MyAllowSpecificOrigins,
        policy =>
        {
            policy.WithOrigins("http://localhost:5173")
                  .AllowAnyHeader()
                  .AllowAnyMethod();
        });
});

app.UseCors(MyAllowSpecificOrigins);

var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: MyAllowSpecificOrigins,
        policy =>
        {
            policy.WithOrigins("http://localhost:5173")
                  .AllowAnyHeader()
                  .AllowAnyMethod();
        });
});

app.UseCors(MyAllowSpecificOrigins);

⚛️ Step 2: Create the React Frontend

2.1 Set Up with Vite

npm create vite@latest react-client --template react
cd react-client
npm install

npm create vite@latest react-client --template react
cd react-client
npm install

2.2 Fetch Data from the API

In App.jsx:

import { useEffect, useState } from 'react';

function App() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch('http://localhost:5000/api/products')
      .then(res => res.json())
      .then(data => setProducts(data));
  }, []);

  return (
    <div>
      <h1>Product List</h1>
      <ul>
        {products.map(p => (
          <li key={p.Id}>{p.Name} - ${p.Price}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

import { useEffect, useState } from 'react';

function App() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch('http://localhost:5000/api/products')
      .then(res => res.json())
      .then(data => setProducts(data));
  }, []);

  return (
    <div>
      <h1>Product List</h1>
      <ul>
        {products.map(p => (
          <li key={p.Id}>{p.Name} - ${p.Price}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

2.3 Run the Frontend

npm run dev

npm run dev

Make sure your backend is running on port 5000. You should now see your product list rendered in the browser!

🧩 Bonus: Folder Structure Tips

Here’s a clean structure to keep things maintainable:

/ProductApi
  Program.cs
  Controllers/
  Models/

/react-client
  src/
    components/
    services/
    App.jsx

/ProductApi
  Program.cs
  Controllers/
  Models/

/react-client
  src/
    components/
    services/
    App.jsx

🎯 Final Thoughts

Combining React with .NET 9 gives you the best of both worlds: a snappy, interactive UI and a high-performance backend. This setup is perfect for enterprise-grade apps, side projects, or anything in between.

Views: 20