React Native - unexpected identifier

Question

I'm getting an unexpected identifier error on the line fetchMovies() { in the following program:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native'),

{
  StyleSheet,
  Component,
  AppRegistry,
  ListView,
  View,
  Text,
  Image
} = React,

baseUrl = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json',
apiKey = '7waqfqbprs7pajbz28mqf6vz',
pageLimit = 25,
queryString = '?apikey=' + apiKey + '&page_limit=' + pageLimit,
url = baseUrl + queryString,

styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  rightContainer: {
    flex: 1,
  },
  title: {
    marginBottom: 8,
    textAlign: 'center'
  },
  year: {
    fontSize: 10,
    textAlign: 'center'
  },
  thumbnail: {
    width: 53,
    height: 81
  },
  listView: {
    paddingTop: 20,
    backgroundColor: 'black'
  }
})

class movieList extends Component{

  getInitialState() {
    return {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2
      }),
      loaded: false
    }
  },

  fetchMovies() {
    return fetch(url)
    .then((response) => response.json())
    .then((data) => data.movies)
  },

  componentDidMount() {
    this.fetchMovies()
    .then((movies) => {
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(movies),
        loaded: true
      })
    })
    .done()
  },

  getLoadingView() {
    return (
      <View style={styles.container}>
        <Text>
          Loading Movies...
        </Text>
      </View>
    )
  },

  renderMovie(movie) {
    if (!this.state.loaded) {
      return this.getLoadingView()
    }

    return (
      <View style={styles.container}>
        <Image
          source={{uri: movie.posters.thumbnail}}
          style={styles.thumbnail}
        />
        <View style={styles.rightContainer}>
          <Text style={styles.title}>{movie.title}</Text>
          <Text style={styles.year}>{movie.year}</Text>
        </View>
      </View>
    )
  },

  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderMovie}
        style={styles.listView}
      />
    )
  }

}

AppRegistry.registerComponent('movieList', () => movieList)

What am I doing wrong?

Answer 1

You're treating the class construct as though it were a series of comma-separated var-like function expressions, but that's not how class works. The method definitions in a class are more like function declarations, and you don't put commas after them, because they're not part of one big expression as the variable list after var is.

class movieList extends Component{

  getInitialState() {
    return {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2
      }),
      loaded: false
    }
  } // <=== No comma here

  fetchMovies() {
    // ...
  }

  // ...
}