How to correctly control loader states?

Question

React

I have a loader component that closes a page while waiting for it to load. She is a component

var PageLoader = React.createClass({
     render: function() {
        return (
            <div className='loader'>
                <div className="loader-body" />
                <div className="loader-section section-left" />
                <div className="loader-section section-right" />
            </div>
        );
    }
});

React.render(<PageLoader />, body);

Well, there are more styles, I won’t write them here. The loader is hidden when .loader gets the .loaded class. He gets this class on complete ajax request, just through
$('.loader').addClass('loaded');
Is this correct, from the point of view of the "React way"? Or should such changes be made through component state control? If yes, what is the best way to do it?

Answer 1

The specified construction is not correct at the root, the React way might look something like this:

var PageLoader = React.createClass({
     onAjaxComplete : function() {
         ths.setState({loaded: true});
     },
     render: function() {
        var classes = cx({
           loader: true,
           loaded: this.state.loaded,
        })
        return (
            <div className={classes}>
                <div className="loader-body" />
                <div className="loader-section section-left" />
                <div className="loader-section section-right" />
            </div>
        );
    }
});

React.render(<PageLoader />, body);

However, to organize the data flow, I still recommend looking towards the Flux architecture, where the state will be obtained from the corresponding storage. flummox reflux