How do I make components in React Native without using JSX?

Question

The canonical way of using React Native is apparently with JSX:

render: function() {
  var movie = MOCKED_MOVIES_DATA[0];
  return (
    <View style={styles.container}>
      <Text>{movie.title}</Text>
      <Text>{movie.year}</Text>
      <Image source={{uri: movie.posters.thumbnail}} />
    </View>
  );
}

How would I do this using JavaScript only? Typically in normal React, React.createElement('div') would work as an alternative to JSX, but I get an error "null is not a function" when trying to run my iOS React Native app.

Answer 1

I tried contacting the packager, which says it listens on port 8081 and also says that it is getting requests for index.ios.bundle as it runs.

So I put this in my browser: http://localhost:8081/index.ios.bundle

In the returned bundle, I found:

var wazoo = React.createClass({displayName: "wazoo",
  render: function() {
    return (
        React.createElement(View, {style: styles.container}, 
          React.createElement(ScrollView, null, 
            React.createElement(View, null, 
                React.createElement(Text, {style: styles.welcome}, 
                  "Wazoo"
                ), 

And so on. So it looks like View, ScrollView etc. are just like components as defined as usual in Web React, and the above code is the JS equivalent to the JSX.