AJAX Requests in React: How and Where to Fetch Data

Dave Ceddia. CodeProject. 2016-09-14.
One of the first questions new React developers have is, “How do I do AJAX requests in React?”
Here’s an answer to that question.
First: React itself doesn’t have any allegiance to any particular way of fetching data. In fact, as far as React is concerned, it doesn’t even know there’s a “server” in the picture at all.
React simply renders components, using data from only two places: props and state.
So therefore, to use some data from the server, you need to get that data into your components’ props or state.
You can complicate this process with services and data models (er, “build abstractions”) as much as you desire, but ultimately it’s just components rendering props and state.

[AJAX Requests in React: How and Where to Fetch Data]


Reactive Framework – Build Asynchronous AJAX-Enabled Web Pages with Reactive Extensions

Peter Vogel. MSDN Magazine. September 2016-09-01.
In an earlier article, I discussed how the observer pattern can be used to manage long-running tasks (msdn.com/magazine/mt707526). By the end of that article, I showed how Microsoft Reactive Extensions (Rx) provide a simple mechanism for managing a sequence of events from a long-running process in a Windows application.
Using Rx just for monitoring a sequence of events from a long-­running task, however, doesn’t take full advantage of the technology. The beauty of Rx is that it can be used for asynchronously integrating any event-based process with any other process. In this article, for example, I’ll use Rx to make asynchronous calls to a Web service from a button click in a Web page (a button click is, effectively, a sequence of one event). To use Rx in the client-side Web environment, I’ll use Rx for JavaScript (RxJS).
Rx provides a standard way to abstract a variety of scenarios and manipulate them using a fluent, LINQ-like interface that lets you compose applications from simpler building blocks. Rx lets you both integrate your UI events with back-end processing while, at the same time, keeping them separate—with Rx you can rewrite your UI without having to make corresponding changes to your back end (and vice versa).
RxJS also supports a clean separation between your HTML and your code, effectively giving you data binding without requiring special HTML markup. RxJS also builds on existing client-side technologies (jQuery, for example). There’s one other benefit to Rx: all Rx implementations tend to look very similar—the RxJS code in this article is very much like the Microsoft .NET Framework code I wrote in my previous article. You can leverage the skills you pick up in one Rx environment in any Rx environment.

[Reactive Framework – Build Asynchronous AJAX-Enabled Web Pages with Reactive Extensions]