Master Dotnet Tutorial React JS Building Modern Web Apps

The integration of .NET and ReactJS has become increasingly popular, allowing developers to leverage the robustness of .NET with the flexibility of ReactJS. If you're a developer eager to explore this fusion, you've come to the right place. In this comprehensive tutorial, we'll walk you through creating a .NET Core Web API that serves data to a ReactJS frontend.

Before we dive in, ensure you have the following prerequisites: Node.js, npm, .NET SDK, and a code editor like Visual Studio Code.

Setting up the .NET Core Web API

The first step is to create a new .NET Core Web API project. Open your terminal and run:

dotnet new webapi -n DotNetReactApi

Navigate into the created project and add the following packages: Microsoft.AspNetCoreronectin and Microsoft.AspNetCore.SpaServices.React!

Setting up the ReactJS client

Next, create a new ReactJS app using Create React App. In your terminal, run:

npx create-react-app dotnet-react-client

Navigate into the client folder and install axios for API calls and react-router-dom for navigation.

Configuring Middleware for ReactJS

To serve the ReactJS client from our .NET Core API, we need to set up middleware. In the Startup.cs file, add the following:

```csharp app.UseSpa(static spa => { spa.Options.SourcePath = Path.Combine(Directory.GetCurrentDirectory(), "ClientApp"); if (env.IsDevelopment()) { spa.UseReactDevelopmentServer(npmScript: "start"); } }); ```

Creating APIs for the Client

Let's create a simple API that returns a list of items. In your WebAPI project, create a new controller called ItemsController:

public class ItemsController : ControllerBase

```csharp [Route("api/[controller]")] public class ItemsController : ControllerBase { private static readonly List _items = new List { new Item { Id = 1, Name = "Item 1" }, new Item { Id = 2, Name = "Item 2" } }; [HttpGet] public IEnumerable Get() => _items; } ```

Fetching Data in ReactJS

Next, fetch this data in your ReactJS app. Create a new component called Items.js:

```jsx import React, { useEffect, useState } from "react"; import axios from "axios"; function Items() { const [items, setItems] = useState([]); useEffect(() => { const fetchItems = async () => { const response = await axios.get("api/items"); setItems(response.data); }; fetchItems(); }, []); return (

{items.map((item) => (
• {item.name}
))}

); } export default Items; ```

Finally, include this component in your App.js:

```jsx import React from "react"; import { BrowserRouter as Router, Route } from "react-router-dom"; import Items from "./Items"; function App() { return ( ); } export default App; ```

Now, run both your .NET Core API and ReactJS client. Navigate to localhost:5001 to see your API-served ReactJS app in action.

Exploring the fusion of .NET and ReactJS is an exciting journey filled with endless possibilities. Whether you're a seasoned developer or just starting, this integration can enhance your tech stack and unlock new levels of productivity.