Skip to content

Instantly share code, notes, and snippets.

@imalchenko

imalchenko/App.js

Last active Aug 1, 2017
Embed
What would you like to do?
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;
@imalchenko

This comment has been minimized.

Copy link
Owner Author

@imalchenko imalchenko commented Jul 19, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment