Working with RxJS & ReactJS

In this chapter, we will see how to use RxJs with ReactJS. We will not get into the installation process for Reactjs here, to know about ReactJS Installation refer this link: /reactjs/reactjs_environment_setup.htm


We will directly work on an example below, where will use Ajax from RxJS to load data.


import React, { Component } from "react";
import ReactDOM from "react-dom";
import { ajax } from 'rxjs/ajax';
import { map } from 'rxjs/operators';
class App extends Component {
   constructor() {
      this.state = { data: [] };
   componentDidMount() {
      const response = ajax('').pipe(map(e => e.response));
      response.subscribe(res => {
         this.setState({ data: res });
   render() {
      return (
            <h3>Using RxJS with ReactJS</h3>
               { => (
                     {}: {}
ReactDOM.render(<App />, document.getElementById("root"));


<!DOCTYPE html>
      <meta charset = "UTF-8" />
      <title>ReactJS Demo</title>
      <div id = "root"></div>

We have used ajax from RxJS that will load data from this Url −

When you compile, the display is as shown below −

RxJs with ReactJS
Kickstart Your Career

Get certified by completing the course

Get Started