Sessions 24 and 25: In-Depth Explanation

Lecture Topics:

• MVC integration with React
  • Introduction to MVC and React
  • Setting up the Project
  • Integrating React with MVC Backend
    • Define Models
    • Implement Controllers
    • Use Views
  • Data Management and State Handling
    • Establish data flow
    • Manage state
  • Advanced Topics and Best Practices
    • Authentication and Authorization
    • Routing
    • Structuring React components

Lab:

• Create a RESTful service using Web API with React as the front end
• Create a consumer

Lecture: Detailed Explanation

1. Introduction to MVC and React

This section introduces combining ASP.NET MVC Core (backend) with React (frontend) to build a full-stack application.

• **ASP.NET MVC Core**:
  • A server-side framework for building web applications using the Model-View-Controller pattern.
  • Handles backend logic, database access, and API endpoints.
  • Example: Provides a Web API for CRUD operations on Employee data.
• React:
  • A JavaScript library for building dynamic, component-based user interfaces.
  • Runs client-side, typically consuming APIs for data.
  • Example: Displays an interactive list of employees fetched from an MVC Web API.
• Integration Overview:
  • MVC serves as the backend, providing RESTful APIs (like in Sessions 21-23).
  • React acts as the frontend, rendering UI and communicating with the MVC backend via HTTP requests.
  • Benefits: Combines MVC’s robust server-side capabilities with React’s fast, interactive UI.
• Why This Matters:
  • Integrating MVC and React creates scalable, modern web applications with a clear separation of backend and frontend concerns.

2. Setting up the Project

This involves creating an ASP.NET MVC Core project with a React frontend.

• Steps:

  1. Create MVC Project with React:

     • In Visual Studio 2022, select “ASP.NET Core with React.js” template:

       dotnet new react -o EmployeeApp
       
       

     • This creates:

       • MVC backend with a Web API.
       • React frontend in the ClientApp folder.
       • Integration via SpaServices for development.

  2. Project Structure:

     • Controllers/: API controllers (e.g., EmployeesController).
     • ClientApp/: React app (contains src/, package.json).
     • appsettings.json: Configuration (e.g., database connection).
     • Program.cs: Configures services and middleware.

  3. Install Dependencies:

     • Backend (EF Core for database, Newtonsoft.Json for serialization):

       dotnet add package Microsoft.EntityFrameworkCore.SqlServer
       dotnet add package Microsoft.EntityFrameworkCore.Design
       dotnet add package Newtonsoft.Json
       
       

     • Frontend (React dependencies, e.g., axios):

       cd ClientApp
       npm install axios
       
       

  4. Configure Development:

     • The template uses SpaProxy to proxy React (http://localhost:3000) to the MVC backend (http://localhost:5000).

     • Update Program.cs for CORS and services:

       var builder = WebApplication.CreateBuilder(args);
       builder.Services.AddCors(options =>
       {
           options.AddPolicy("AllowReactApp", builder =>
           {
               builder.WithOrigins("<http://localhost:3000>")
                      .AllowAnyMethod()
                      .AllowAnyHeader();
           });
       });
       builder.Services.AddControllers().AddNewtonsoftJson();
       builder.Services.AddDbContext<EmployeeContext>(options =>
           options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));
       builder.Services.AddSpaStaticFiles(configuration =>
           configuration.RootPath = "ClientApp/build");
       var app = builder.Build();
       app.UseCors("AllowReactApp");
       app.UseSpa(spa =>
       {
           spa.Options.SourcePath = "ClientApp";
           if (app.Environment.IsDevelopment())
           {
               spa.UseReactDevelopmentServer(npmScript: "start");
           }
       });
       app.UseRouting();
       app.MapControllers();
       app.Run();
       
       

• Key Points:

  • The React template simplifies integration but requires CORS for API calls.
  • ClientApp is a standard React project using create-react-app.
  • Run npm start in ClientApp for frontend development.

• Why This Matters:

  • Proper setup ensures seamless communication between MVC and React.