App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';


/**
Retrieve and display the messages
**/
class MessageList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      messages: [],
    }
  }

  componentDidMount() {
    this.getMessages();
  }

  getMessages(){
    fetch('INSERT YOUR API ENDPOINT URL', 
    {
      method: 'GET',
      headers: { "Accept": "application/json" }
    })
    .then(response => response.json())
    .then((data) => {
      this.setState({ messages: data.messages });
    });
  }

  render() {
    return (
      <div>
        {this.state.messages.map(message => (
          <p key={message.id}>{message.content}</p>
        ))}
      </div>
    );
  }
}

/**
App
**/
class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <MessageList />
      </div>
    );
  }
}

export default App;

Sample React's App.js for a serverless AWS Lambda / Azure Functions example
The only thing that this file does is call an endpoint, behind which we have an AWS Lambda or an Azure Functions function, to retrieve a simple list of items(messages) and displays them on a page

Article