React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by Patrick Gordon

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

const MOVIE_API = "https://api.themoviedb.org/3/discover/movie?api_key=72049b7019c79f226fad8eec6e1ee889&language=en-US&sort_by=release_date.desc&include_adult=true&include_video=false&page=2&primary_release_year=2018";


class Hello extends React.Component {
 constructor(props){
    super(props);

    this.state = {
      movies: [],
      movieName: ''
    }
  }


  componentWillMount(){
    this.fetchMovie();
  }


//fetching movie
  fetchMovie = () =>{
    const req = new Request(MOVIE_API, {
      method: 'GET',
      cache: 'default'
    });

    fetch(req).then(response =>{
      return response.json();
    }).then(data =>{
      console.log(data); //REF 1;
      this.setState({
        movies: data.results
      });
    }).catch(err => {
      console.log("ERROR: " + err);
    })
  }

  render() {
   console.log(this.state)
	  return (<ul>
	    {this.state.movies.map(movie => <li>{movie.title}</li>)}
	  </ul>);
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);