CODEWITHSUNDEEP
jqueryrestreactjs
Tristán Belmont
Tristán Belmont

Reputation: 73

Consuming a RESTful service in Reactjs

im starting with reactjs and i want to make a GET request to a RESTful service, here is my code, can anyone help me please?

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>;        
    }

}

i already load Jquery in the html with react, but i still cant make it work, i'm missing something important? or there is a better way to do this? i dont want to use another extra thing, just react and Jquery, or is something more necesary?

Thank you for all the help.

Upvotes: 5

Views: 7344

Answers (2)

max_new
max_new

Reputation: 343

So I am trying to answer the subsequent comment to load a different view once login is successful

I would start by having 4 components - Main, 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')
);

You can use a componentDidUnmount in any of react components to clean up once you are done with a component.

Upvotes: 1

const314
const314

Reputation: 1630

Make your request in the componentDidMount method and use the setState method to assign the data returned by RESTful service to your component's state. In render method you can access it through this.state.greetingId and this.state.greetingContent properties:

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>;        
}

Refer to the following link for details: https://facebook.github.io/react/tips/initial-ajax.html

Upvotes: 7

Related Questions