Una de las combinaciones más utilizadas para desarrollar aplicaciones web modernas es React en el frontend y ASP.NET Core Web API en el backend. React se encarga de la interfaz y la interacción con el usuario, mientras que .NET procesa la lógica, consulta la base de datos y expone los datos mediante una API REST.
La conexión entre ambos se realiza principalmente mediante HTTP, utilizando herramientas como fetch o Axios.
1. Crear la API REST en .NET
Supongamos que tenemos una API sencilla para administrar productos.
En ASP.NET Core podemos crear un controlador:
[ApiController]
[Route("api/[controller]")]
public class ProductosController : ControllerBase
{
[HttpGet]
public IActionResult GetProductos()
{
var productos = new[]
{
new { Id = 1, Nombre = "Laptop", Precio = 2500000 },
new { Id = 2, Nombre = "Mouse", Precio = 80000 }
};
return Ok(productos);
}
}
Al ejecutar el proyecto, nuestra API podría estar disponible en:
https://localhost:7001/api/productos
Al realizar una petición GET a esa dirección, la API devuelve los productos en formato JSON.
2. Crear el proyecto React
Podemos crear una aplicación React utilizando Vite:
npm create vite@latest frontend
cd frontend
npm install
npm run dev
Después tendremos nuestra aplicación funcionando normalmente en una dirección como:
http://localhost:5173
Ahora React necesita comunicarse con la API que está ejecutándose en otro puerto.
3. Consumir la API desde React
Una de las formas más sencillas es utilizar fetch.
import { useEffect, useState } from "react";
function Productos() {
const [productos, setProductos] = useState([]);
useEffect(() => {
fetch("https://localhost:7001/api/productos")
.then(response => response.json())
.then(data => setProductos(data))
.catch(error => console.error(error));
}, []);
return (
<div>
<h1>Productos</h1>
{productos.map(producto => (
<div key={producto.id}>
<h3>{producto.nombre}</h3>
<p>${producto.precio}</p>
</div>
))}
</div>
);
}
export default Productos;
Aquí ocurre algo importante: useEffect ejecuta la petición cuando el componente se monta, fetch realiza la solicitud HTTP y setProductos guarda la respuesta en el estado de React.
4. ¿Qué pasa con POST, PUT y DELETE?
Una API REST normalmente utiliza diferentes métodos HTTP:
- GET: obtener información.
- POST: crear información.
- PUT: actualizar información.
- DELETE: eliminar información.
Por ejemplo, para crear un producto:
fetch("https://localhost:7001/api/productos", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
nombre: "Teclado",
precio: 120000
})
});
De esta manera React puede enviar información directamente a los endpoints creados en .NET.
5. El problema de CORS
Cuando React y .NET funcionan en diferentes puertos, el navegador puede bloquear las solicitudes por seguridad. Esto se conoce como CORS (Cross-Origin Resource Sharing).
En Program.cs podemos permitir el origen de nuestra aplicación React:
builder.Services.AddCors(options =>
{
options.AddPolicy("ReactPolicy", policy =>
{
policy.WithOrigins("http://localhost:5173")
.AllowAnyHeader()
.AllowAnyMethod();
});
});
var app = builder.Build();
app.UseCors("ReactPolicy");
Ahora la API permite solicitudes provenientes de nuestro frontend.
6. Una estructura más profesional
En proyectos reales conviene evitar colocar todas las peticiones fetch directamente dentro de los componentes.
Una estructura sencilla podría ser:
src/
├── components/
├── pages/
├── services/
│ └── productoService.js
├── hooks/
└── App.jsx
En productoService.js podemos centralizar las llamadas:
const API_URL = "https://localhost:7001/api/productos";
export async function obtenerProductos() {
const response = await fetch(API_URL);
if (!response.ok) {
throw new Error("Error al obtener productos");
}
return await response.json();
}
Después, el componente solamente utiliza el servicio:
useEffect(() => {
obtenerProductos()
.then(setProductos)
.catch(console.error);
}, []);
Esto hace que el código sea más limpio, reutilizable y fácil de mantener.
7. En proyectos reales
Una arquitectura React + .NET puede crecer bastante. El frontend puede manejar componentes, formularios, rutas y estados, mientras que ASP.NET Core puede encargarse de autenticación, autorización, validaciones, reglas de negocio, Entity Framework Core y SQL Server.
También es recomendable utilizar variables de entorno para guardar la URL de la API:
VITE_API_URL=https://localhost:7001/api
Así no tenemos que escribir directamente la dirección del backend en cada archivo.
Conectar React con una API REST de .NET no es complicado: React realiza peticiones HTTP, .NET recibe esas peticiones y devuelve datos normalmente en JSON. La clave está en diseñar correctamente los endpoints, configurar CORS y separar las llamadas a la API de los componentes.
Esta combinación permite construir aplicaciones modernas, escalables y profesionales, utilizando React para la experiencia de usuario y ASP.NET Core para un backend robusto y seguro.
