It is common practice to perform an AJAX request in the componentDidMount lifecycle method. For more details, refer to the React documentation: https://facebook.github.io/react/tips/initial-ajax.html
Retrieve Initial Data with AJAX
Retrieve data in componentDidMount. Once the response is received, save the data in state to trigger a UI update.
To implement this convention, you can use this code snippet: https://jsbin.com/cijafi/edit?html,js,output
class App extends React.Component {
constructor() {
super();
this.state = {data: false}
}
componentDidMount() {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
this.setState({data: response.data[0].title})
});
}
render() {
return (
<div>
{this.state.data}
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
For another demonstration, check out this example (http://codepen.io/PiotrBerebecki/pen/dpVXyb) showcasing two approaches using either jQuery or Axios libraries.
Complete code below:
class App extends React.Component {
constructor() {
super();
this.state = {
time1: '',
time2: ''
};
}
componentDidMount() {
axios.get(this.props.url)
.then(response => {
this.setState({time1: response.data.time});
})
.catch(function (error) {
console.log(error);
});
$.get(this.props.url)
.then(result => {
this.setState({time2: result.time});
})
.catch(error => {
console.log(error);
});
}
render() {
return (
<div>
<p>Time via axios: {this.state.time1}</p>
<p>Time via jquery: {this.state.time2}</p>
</div>
);
}
};
ReactDOM.render(
<App url={"http://date.jsontest.com/"} />, document.getElementById('content')
);