如何在不使用JSX的情况下在React Native中创建组件？

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.

Answer 2

Daniel Earwicker's solution is correct, but we can use Factories to make it more readable:

var View       = React.createFactory(React.View);
var ScrollView = React.createFactory(React.ScrollView);
var Text       = React.createFactory(React.Text);

var wazoo = React.createClass({displayName: "wazoo",
  render: function() {

    return View({style: styles.container}, 
      ScrollView(null, 
        View(null, 
          Text({style: styles.welcome}, 
            "Wazoo"
          )
        )
      )
    );


  }
});

Answer 3

I know it's been a while since the original question but, in case someone else is interested, you could check the library we made at Uqbar:

https://www.npmjs.com/package/njsx

It's quite easy to use and provides a cleaner interface than the React out-of-the-box interface.