React.js and ExtJS 4

Question

I've just explored react.js and I think it's great, but I have a problem. Do you have any idea how to render an extjs layout using React.js?

I know that react.js is designed to create components, not the whole layout. So I think that I need to make them relative (link action between components like button changes value of some div using text from other input - component?)

Thanks for any idea.

krs krs · Accepted Answer · 2013-10-30T16:25:34

propagate the change up to the first common ancestor which keeps the value in its state and the component that uses the value get it sent in via its props

i.e

ColorChangeButton = React.createClass({
    render: function() {
        return <button 
                  onClick={this.props.onChangeColor}
                  className={this.props.color} />

    }
});

ColoredDiv = React.createClass({
    render: function() {
        return <div className={this.props.color} />
    }
});

Container = React.createClass({
    getInitialState: function() {
        return { color:"blue" }
    },
    onChangeColor: function() {
        this.setState({color:"red"})
    },
    render: function() {
        return (
          <section>
            <ColorChangeButton 
                color={this.state.color} 
                onChangeColor={this.onChangeColor} />
            <ColoredDiv color={this.state.color} />
          </section>
        )
    }
})

React.js and ExtJS 4

1 Answers