title: How do I properly use ASP.NET Core Web Application React project template
body: <p>Not allowed to say help in title but I need help understanding this template. I am trying to use the ASP.NET Core Web Application React project template for the first time. I am already somewhat familiar with React but not this project template. The template comes with a small weather api to which the FetchData page makes a fetch request.</p>
  <p>First of all, I can not figure out where exactly React is making the request from and second I can not figure out how to replicate this.</p>
  <p>This is the Fetch Data method:</p>
  <h3>FetchData</h3>
  <pre><code>import React, { Component } from 'react';
  
  export class FetchData extends Component {
    static displayName = FetchData.name;
  
    constructor(props) {
      super(props);
      this.state = { forecasts: [], loading: true };
    }
  
    componentDidMount() {
      this.populateWeatherData();
    }
  
    static renderForecastsTable(forecasts) {
      return (
        &lt;table className='table table-striped' aria-labelledby=&quot;tabelLabel&quot;&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;Date&lt;/th&gt;
              &lt;th&gt;Temp. (C)&lt;/th&gt;
              &lt;th&gt;Temp. (F)&lt;/th&gt;
              &lt;th&gt;Summary&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            {forecasts.map(forecast =&gt;
              &lt;tr key={forecast.date}&gt;
                &lt;td&gt;{forecast.date}&lt;/td&gt;
                &lt;td&gt;{forecast.temperatureC}&lt;/td&gt;
                &lt;td&gt;{forecast.temperatureF}&lt;/td&gt;
                &lt;td&gt;{forecast.summary}&lt;/td&gt;
              &lt;/tr&gt;
            )}
          &lt;/tbody&gt;
        &lt;/table&gt;
      );
    }
  
    render() {
      let contents = this.state.loading
        ? &lt;p&gt;&lt;em&gt;Loading...&lt;/em&gt;&lt;/p&gt;
        : FetchData.renderForecastsTable(this.state.forecasts);
  
      return (
        &lt;div&gt;
          &lt;h1 id=&quot;tabelLabel&quot; &gt;Weather forecast&lt;/h1&gt;
          &lt;p&gt;This component demonstrates fetching data from the server.&lt;/p&gt;
          {contents}
        &lt;/div&gt;
      );
    }
  
    async populateWeatherData() {
      const response = await fetch('weatherforecast');
      const data = await response.json();
      this.setState({ forecasts: data, loading: false });
    }
  }
  
  </code></pre>
  <p>This all makes perfect sense to me except this line: <code>const response = await fetch('weatherforecast');</code>. I'm having a hard time understanding where exactly 'weatherforecast' is.</p>
  <p>Now here is the WeatherForecast controller:</p>
  <h3>WeatherForecastController</h3>
  <pre><code>using Microsoft.AspNetCore.Mvc;
  using Microsoft.Extensions.Logging;
  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Threading.Tasks;
  
  namespace ReactFront.Controllers
  {
      [ApiController]
      [Route(&quot;[controller]&quot;)]
      public class WeatherForecastController : ControllerBase
      {
          private static readonly string[] Summaries = new[]
          {
              &quot;Freezing&quot;, &quot;Bracing&quot;, &quot;Chilly&quot;, &quot;Cool&quot;, &quot;Mild&quot;, &quot;Warm&quot;, &quot;Balmy&quot;, &quot;Hot&quot;, &quot;Sweltering&quot;, &quot;Scorching&quot;
          };
  
          private readonly ILogger&lt;WeatherForecastController&gt; _logger;
  
          public WeatherForecastController(ILogger&lt;WeatherForecastController&gt; logger)
          {
              _logger = logger;
          }
  
          [HttpGet]
          public IEnumerable&lt;WeatherForecast&gt; Get()
          {
              var rng = new Random();
              return Enumerable.Range(1, 5).Select(index =&gt; new WeatherForecast
              {
                  Date = DateTime.Now.AddDays(index),
                  TemperatureC = rng.Next(-20, 55),
                  Summary = Summaries[rng.Next(Summaries.Length)]
              })
              .ToArray();
          }
      }
  }
  
  </code></pre>
  <p>And this is I'm assuming something like a model class for WeatherForecast</p>
  <h3>WeatherForecast.cs</h3>
  <pre><code>using System;
  
  namespace ReactFront
  {
      public class WeatherForecast
      {
          public DateTime Date { get; set; }
  
          public int TemperatureC { get; set; }
  
          public int TemperatureF =&gt; 32 + (int)(TemperatureC / 0.5556);
  
          public string Summary { get; set; }
      }
  }
  
  </code></pre>
  <p>And this is the result of fetching <code>weatherforecast</code>:</p>
  <p><a href="https://i.stack.imgur.com/PaOze.png" rel="noreferrer">weatherforecast</a></p>
  <p>However, I can not replicate this using my own controller. For example, I have created this simple controller:</p>
  <h3>ValuesController</h3>
  <pre><code>using Microsoft.AspNetCore.Http;
  using Microsoft.AspNetCore.Mvc;
  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Threading.Tasks;
  
  namespace ReactFront.Controllers
  {
      [ApiController]
      [Route(&quot;api/[controller]&quot;)]
      public class ValuesController : ControllerBase
      {
          [HttpGet]
          public IEnumerable&lt;string&gt; Get()
          {
              return new string[] { &quot;Value1&quot;, &quot;Value2&quot;, &quot;Value3&quot; };
          }
  
          [HttpGet(&quot;{id}&quot;)]
          public string Get(int id)
          {
              return &quot;The vlaue is &quot; + id;
          }
      }
  }
  
  </code></pre>
  <p>And replicated the view like this:</p>
  <h3>FetchValues</h3>
  <pre><code>import React, { Component } from 'react';
  
  export class FetchValues extends Component {
      static displayName = FetchValues.name;
  
      constructor(props) {
          super(props);
          this.state = { apiValues: [], loading: true };
      }
  
      componentDidMount() {
          this.populateValuesData();
      }
  
      static renderValuesTable(apiValues) {
          return (
              &lt;table className='table table-striped' aria-labelledby=&quot;tabelLabel&quot;&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Value&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      {apiValues.map(apiValues =&gt;
                          &lt;tr key={apiValues.value}&gt;
                              &lt;td&gt;{apiValues.value}&lt;/td&gt;
                          &lt;/tr&gt;
                      )}
                  &lt;/tbody&gt;
              &lt;/table&gt;
          );
      }
  
      render() {
          let contents = this.state.loading
              ? &lt;p&gt;&lt;em&gt;Loading...&lt;/em&gt;&lt;/p&gt;
              : FetchValues.renderValuesTable(this.state.apiValues);
  
          return (
              &lt;div&gt;
                  &lt;h1 id=&quot;tabelLabel&quot; &gt;Values from API&lt;/h1&gt;
                  &lt;p&gt;This component demonstrates fetching data from the server.&lt;/p&gt;
                  {contents}
              &lt;/div&gt;
          );
      }
  
      async populateValuesData() {
          const response = await fetch('values');
          const data = await response.json();
          this.setState({ apiValues: data, loading: false });
      }
  }
  
  </code></pre>
  <p>When I access the <code>FetchValues</code> page I get this error:</p>
  <pre><code>Uncaught (in promise) SyntaxError: Unexpected token &lt; in JSON at position 0        fetch-values:1
  </code></pre>
  <p>And checking Inspect -&gt; Network -&gt; Preview -&gt; values (or fetch-values) the preview is empty.</p>
  <p>Here are my questions:</p>
  <p>1.) Where exactly is <code>weatherforecast</code> and how do I see it so that I can replicate what is happening with my values?</p>
  <p>2.) Why is values empty in the preview? The same code works perfectly in the API project template.</p>
  <p>3.) Does there exist any official docs on this project template? I can't find more than 1 unhelpful page: <a href="https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/react?view=aspnetcore-5.0&amp;tabs=visual-studio" rel="noreferrer">https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/react?view=aspnetcore-5.0&amp;tabs=visual-studio</a></p>