piotrpalek / ExtJS-React

JSX Transformer support + React.js component for ExtJS
11 stars 1 forks source link

useage example #1

Open tnrich opened 9 years ago

tnrich commented 9 years ago

Hey there @piotrpalek, I'm interested in using the component you've created, but am a little unsure about how to actually go about using it after it's set up.

Would the syntax be something like:

var reactComponent = Ext.create('Ws.react.Cmp', { react: ...? not sure what would go here... })

Any help would be greatly appreciated, Thanks!

piotrpalek commented 9 years ago

I am pretty unsure myself as this wasn't really used much and since then I didn't really work with ExtJS ;) and you have to remember this was written for an early version of React and not updated since then.

That said I think you would need to define your react component in the react property. So if you look at the https://github.com/piotrpalek/ExtJS-React/blob/master/Cmp.js source it runs React.createClass on the this.react property. This means that if you take a react component from the tutorial on the website:

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});

You probably would have to define the component like this:

var reactComponent = Ext.create('Ws.react.Cmp', {
  react: {
    render: function() {
      return (
        <div className="commentBox">
          Hello, world! I am a CommentBox.
        </div>
      );
    }
  }
});

I just noticed I used React.renderComponent (in the Cmp.js file) and this was since changed to React.render so it probably won't work with the newset react.js version. You would have to update the code to make it work.