React - Ajax Requests

//English

Hi Guys, today I'm going to expose hot to make Ajax requests with React, It's pretty straight forward...(At the end you will see the link to my plunker, to see it working...)

Basically you just create your Class:

 var ReactAjax = React.createClass({  
  getInitialState : function(){  
   return {  
    plunks : []  
   }  
  },  
  render : function(){  
   var plunks = this.state.plunks;  
   return (  
    <div id="container">  
     <div className="row">  
      <div className="col-xs-4 col-xs-offset-4">  
       <button onClick={this.fetchPlunks} className="btn btn-default">Get My(brion25) Plunks</button>  
      </div>  
     </div>  
     <PlunksList plunks={plunks} />  
    </div>  
   );  
  }  
 });  

And on the event, it could be either a click, change, etc. you just make the requests:

  fetchPlunks : function(){  
   var self = this;  
   jQuery.ajax({  
    url:'http://api.plnkr.co/users/brion25/plunks',  
    method:'GET',  
    success : function(response){  
     console.log(response);  
     self.setState({plunks : response});  
    }  
   });  
  }  

And if you want to be fancy as my friend Hector(He does not have Twitter, so you cannot stalk him), let's  create another class just to handle the response:

 var PlunksList = React.createClass({  
  render : function(){  
   return (  
    <ul className="list-group">{this.props.plunks.map(this.createPlunk)}</ul>  
   );  
  },  
  createPlunk : function(plunk){  
   var tags = plunk.tags.reduce(function(tag,cur,i){  
    if(i < plunk.tags.length - 1) tag+=cur+' , ';  
    else tag+=cur+' ]'  
    return tag;  
   },'[ ');  
   var style = (plunk.tags.length>0)?{display:'initial'}:{display:'none'};  
   return (  
    <li className="list-group-item">  
     <h3 className="list-group-item-heading">{plunk.description}</h3>  
     <p className="list-group-item-text">  
      <p>  
       <strong>Created At : </strong>{plunk.created_at.split('T')[0]}<br />  
       <strong>Last Update : </strong>{plunk.updated_at.split('T')[0]}  
      </p>  
      <p style={style}>  
       <strong>Tags:</strong><br />  
       {tags}  
      </p>  
      <p>  
       <strong>URL : </strong><a href={plunk.raw_url} target="_blank">{plunk.raw_url}</a>  
      </p>  
     </p>  
    </li>  
   );  
  }  
 });  

At the end, you will have something similar to this:

 /** @jsx React.DOM */  
 var PlunksList = React.createClass({  
  render : function(){  
   return (  
    <ul className="list-group">{this.props.plunks.map(this.createPlunk)}</ul>  
   );  
  },  
  createPlunk : function(plunk){  
   var tags = plunk.tags.reduce(function(tag,cur,i){  
    if(i < plunk.tags.length - 1) tag+=cur+' , ';  
    else tag+=cur+' ]'  
    return tag;  
   },'[ ');  
   var style = (plunk.tags.length>0)?{display:'initial'}:{display:'none'};  
   return (  
    <li className="list-group-item">  
     <h3 className="list-group-item-heading">{plunk.description}</h3>  
     <p className="list-group-item-text">  
      <p>  
       <strong>Created At : </strong>{plunk.created_at.split('T')[0]}<br />  
       <strong>Last Update : </strong>{plunk.updated_at.split('T')[0]}  
      </p>  
      <p style={style}>  
       <strong>Tags:</strong><br />  
       {tags}  
      </p>  
      <p>  
       <strong>URL : </strong><a href={plunk.raw_url} target="_blank">{plunk.raw_url}</a>  
      </p>  
     </p>  
    </li>  
   );  
  }  
 });  
 var ReactAjax = React.createClass({  
  getInitialState : function(){  
   return {  
    plunks : []  
   }  
  },  
  render : function(){  
   var plunks = this.state.plunks;  
   return (  
    <div id="container">  
     <div className="row">  
      <div className="col-xs-4 col-xs-offset-4">  
       <button onClick={this.fetchPlunks} className="btn btn-default">Get My(brion25) Plunks</button>  
      </div>  
     </div>  
     <PlunksList plunks={plunks} />  
    </div>  
   );  
  },  
  fetchPlunks : function(){  
   var self = this;  
   jQuery.ajax({  
    url:'http://api.plnkr.co/users/brion25/plunks',  
    method:'GET',  
    success : function(response){  
     console.log(response);  
     self.setState({plunks : response});  
    }  
   });  
  }  
 });  
 React.render(<ReactAjax />,document.getElementById('main-container'));  

Well guys that's it for now, I hope this can help you and if you have any doubts please feel free to reach me. By the way, this example is on my plunker, so you just need to go there to see it working.

//Spanish

Muy Pronto...