I come from the world where you did Ajax with jQuery. Now I'm trying a data-binding framework such as React.
I have a question for it anyhow. How do you make an Ajax call using React?
The examples I have found such as this or this seems to have used jQuery for making Ajax call since they are using $.get()
and $.ajax()
However when I tried those snippet I get ReferenceError: $ is not defined
. Do I need to reference jQuery to use Ajax in React?
Here's my code snippet
import React from 'react'
import ReactDOM from 'react-dom'
var MyApp = React.createClass({
getInitialState: function() {
console.log("getInitialState")
return {
username: 'stardustz'
};
},
componentDidMount: function() {
console.log("componentDidMount");
$.ajax({
url: this.props.source,
dataType: 'json',
success: function() {
console.log("success");
}.bind(this)
});
console.log(this.props.source);
console.log(this.serverRequest);
},
componentWillUnmount: function() {
console.log("componentWillUnmount");
},
render: function() {
console.log("render");
return (
<div>
Hello {this.state.username}.
</div>
);
}
});
ReactDOM.render(
<MyApp source="http://localhost:8080/api/person/getAll" />,
document.getElementById('myapp')
);
React as a library provides no built in mechanism for AJAX. If you want to use jQuery inside your React components you'll need to include it via a script tag or import it as a node module. jQuery's ubiquity makes it a common choice for tutorials, but that's the only reason you're seeing it. You're free to use whatever AJAX library you'd like.
No need to include JQuery library to use Ajax
more than 95% Jquery functions will be useless in React Apps because React don't work well with DOM manipulation libraries (like JQuery)
It's better to use libraries make http calls like Request
There is no built-in way to do AJAX requests in React since React is a View layer library, not a complete framework.
While using React there no need to use jQuery because it's only increase your overall JavaScript size. Probably you can find https://github.com/github/fetch polyfill usefull.
There is no built-in way to do AJAX requests in React since React is a View layer library, not a complete framework.
While using React there no need to use jQuery because it's only increase your overall JavaScript size. Probably you can find https://github.com/github/fetch polyfill usefull.
While "fetch" it's a modern replacement for XMLHttpRequest, you have to pay attention to browser compatibility.
After I did a nice React App only with fetch calls, I had to modify it because it didn't worked at all on latest version of Safari and IOS Safari and IE 11.
See Browsers compatibility here: http://caniuse.com/#search=fetch