Create a React App with .NET Core Web API Backend

React and .NET Core Web API both provide super-simple tools that let you magically spit out a fully-functional application by executing a single command. Making the two work together is pretty easy, but there are a couple not-so-obvious steps that you need to take that aren’t explained in the 1-step, just-run-this-command getting-started guides you’ll come across. This article will walk you through the steps of creating new React and .NET Core Web API applications, then modifying the React app to make an API request and display the result.

Create the React App

The easiest way to create a new React app from scratch is with Create React App. Run the npx command, and you’re done!

/> npx create-react-app my-app
/> cd my-app
/> npm start


Create the Web API

Creating a .NET Core ASP.Net web API is just as easy. Run the dotnet command, and you’ve got your API.

/> dotnet new webapi -o my-api
/> cd my-api
/> dotnet run


Specify Proxy

React app: check. .NET Core API: check. Now let’s hook ’em up. The out-of-the-box API comes with a /api/values endpoint, so let’s use that to retrieve and display values on our home page.

By default, the React app is going to run on http://localhost:3000 and the API on https://localhost:5001. Since our app and API are running on different servers, we must specify a proxy. Open package.json in the React app, and add the line shown below. Note that if your app is running, you’ll need to restart it for the setting to take effect.

{
  "name": "my-app",
  ...
  "proxy": "https://localhost:5001"
}

Make Request, Display Result

Now we’re ready to add the API request. Open your React app’s App.js file, found in the /src folder. Add a constructor that will execute the request, and modify render() to display the result.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { values: [] };

    fetch('/api/values')
      .then(response => response.json())
      .then(data => {
        this.setState({ values: data });
      });
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          Can I haz values? 
          <ul>
            {this.state.values.map((value, index) => <li key={index}>{value}</li>)}
          </ul>
        </header>
      </div>
    );
  }
}

All that’s left now is to run the projects. Start the API first, followed by the React app. The result should be something like this!

Author: Adam Prescott

I'm enthusiastic and passionate about creating intuitive, great-looking software. I strive to find the simplest solutions to complex problems, and I embrace agile principles and test-driven development. View all posts by Adam Prescott