Eseguire richieste HTTP in React

Sul web si trovano solo esempi di richieste HTTP in React usando la libreria Axios.

Non metto in dubbio la sua qualità, ma a me non ha funzionato causa CORS.

Anche se in verità ho fatto tutto quello che andava fatto (potete leggere qui).

Quindi mi sono buttato su fetch, che tra l'altro è già incluso.

Partiamo dalla struttura del mio JSON:

[{
	"id": 1,
	"nome": "Adaline - L'eterna giovinezza.avi"
}, {
	"id": 237,
	"nome": "Zio Paperone alla ricerca della lampada perduta.mpg"
}, {
	"id": 238,
	"nome": "Zootopia.mkv"
}]

Questo il mio App.js:

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

const urlFilms = 'http://www.sito.com/api/films.php';

class App extends Component {

  state = {
    films: []
  }

  componentDidMount() {
    fetch(urlFilms).then(res => {
      return res.json();
    }).then(data => {
      this.setState({films: data});
    }).catch(error => {
      console.log('Error', error.message);
    });
  }

  render() {
    const {films} = this.state;
    return (<table>
      <tbody>
        {films.map(film => <tr key={film.id}><td>{film.nome}</td></tr>)}
      </tbody>
    </table>);
  }
}

export default App;

Infine il file index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App/>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

Come vedete nulla di incredibile; se, come nel mio caso, state interrogando un server remoto, ricordatevi di impostare il Access-Control-Allow-Origin.

In PHP:

<?php

header("Access-Control-Allow-Origin: *");
..................
echo json_encode($result);

Enjoy!