Consumare un servizio RESTful in Reactjs

Question

sto iniziando con reactjs e voglio fare una richiesta GET ad un servizio RESTful, ecco il mio codice, qualcuno può aiutarmi per favore?

render: function() { 
$.ajax({ 
    url: "http://rest-service.guides.spring.io/greeting" 
}).then(function(data) { 
    $('.greeting-id').append(data.id); 
    $('.greeting-content').append(data.content); 
return <div style="background-color: #ffffff"> 
        <p class="greeting-id">The ID is </p> 
        <p class="greeting-content">The content is </p> 

       </div>;   
    } 

} 

ho già carico Jquery in HTML con reagito, ma ho ancora cant farlo funzionare, mi manca qualcosa di importante? o c'è un modo migliore per farlo? Non voglio usare un'altra cosa in più, solo reagire e Jquery, o è qualcosa di più necessario?

Grazie per tutto l'aiuto.

Answer 1

Effettuare la richiesta nel metodo componentDidMount e utilizzare il metodo setState per assegnare i dati restituiti dal servizio RESTful allo stato del componente. Nel metodo render è possibile accedervi tramite this.state.greetingId e this.state.greetingContent proprietà:

componentDidMount: function(){ 
    $.ajax({ 
     url: "http://rest-service.guides.spring.io/greeting" 
    }).then(function(data) { 
     this.setState({ 
      greetingId: data.id, 
      greetingContent: data.content 
     }); 
    } 
)}, 
render: function() { 
    return <div style="background-color: #ffffff"> 
       <p class="greeting-id">The ID is {this.state.greetingId}</p> 
       <p class="greeting-content">The content is {this.state.greetingContent}</p> 
      </div>;   
} 

fare riferimento al seguente link per i dettagli: https://facebook.github.io/react/tips/initial-ajax.html

Answer 2

Così sto cercando di rispondere al commento successivo per caricare un diverso punto di vista, una volta accesso riesce

vorrei iniziare da avere 4 componenti principali -, login, SUCCESSRESULT, FailureResult

var LoginForm = React.createClass({ 
    render : function(){ 
    return (
     <form onSubmit={this.props.handleSubmit.bind(this, React.findDOMNode(this.refs.login))}> 
     <label for="logininfo">Login Info</label> 
     <input id="logininfo" type="search" placeholder="input" ref="login"/> 
     <input type="submit" value="LogIn" /> 
     </form> 
    ) 
    } 
}); 

var SuccessResult = React.createClass({ 
    render : function(){ 
    var entries = this.props.data; 
    return (
     <div> 
     Is success 
     </div> 
    ) 
    } 
}); 

var FailureResult = React.createClass({ 
    render : function(){ 
    return (
     <div> 
     Is failure 
     </div> 
    ) 
    } 
}); 

var Main = React.createClass({ 
    getInitialState : function(){ 
    return { 

    } 
    }, 

    render : function(){ 
    return (
     <div> 
     {this.state.success ? <SuccessResult entries={this.state.result}/> : <LoginForm handleSubmit={this.handleSubmit.bind(this,'maxea')}/>} 
     {this.state.failure ? <FailureResult /> : null} 
     </div> 
    ) 
    }, 
    handleSubmit : function(loginInfo){ 
    var component = this; 
    $.get('https://api.github.com/users/' + loginInfo). 
     then(function(response){ 
     component.setState({ 
      success : true, 
      result : response.data 
     }) 
     } , 
     function(error){ 
     failure : true 
     }); 
    } 
}); 

// Code goes here 
React.render(
    <Main />, 
    document.getElementById('example') 
); 

È possibile utilizzare un componenteDidUnmount in qualsiasi componente di reazione per eseguire la pulizia una volta terminato con un componente.