CODEWITHSUNDEEP
ajaxreactjs
starcorn
starcorn

Reputation: 8531

Ajax call with React

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')
);

Upvotes: 0

Views: 3124

Answers (4)

Catalin
Catalin

Reputation: 135

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

Upvotes: 0

gyzerok
gyzerok

Reputation: 1418

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.

Upvotes: 1

Nour Sammour
Nour Sammour

Reputation: 2852

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

Upvotes: 3

Rick Runyon
Rick Runyon

Reputation: 4354

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.

Upvotes: 3

Related Questions