19

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.

2
  • Have you looked at the result of compiling the JSX to pure JS? That should give you the answer you're looking for. Mar 26, 2015 at 19:10
  • From JSX to JS that runs in the React Native iOS project, this is all a transparent operation to me. I don't know how to grab only the JSX to JS compilation step. Mar 26, 2015 at 19:13

3 Answers 3

20

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.

2
16

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"
          )
        )
      )
    );


  }
});
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.