rxjs.tar.gz

rxjsCode Widget

rxjsSPA

This short demo shows how the RxJS library can be used with two Educative teaching tools—the Code widget and the SPA widget.

How to Enable RxJS on Educative using Docker

# Demo: An Example of RxJS in our SPA Widget

In addition to running RxJS code in our standard Code widget, you can also configure it to run in our [Single Page App (SPA) widget](https://www.educative.io/courses/author-guide/gxnRy9wKQ8G). This widget is normally used to teach students how to build simple applications (e.g., React, Angular, and other applications).

If you plan to only teach RxJS code and concepts, the _Code widget_ may be enough for your teaching needs. But if you want to teach app development incorporating RxJS, you will want to make use of our SPA functionality also.

Here's how it will look:

const{of}  =require('rxjs') ;
const{ map } = require('rxjs/operators'); 

// subtract two values of x
map(x => x - x)(of(10, 100, 1000)).subscribe((v) => console.log(`difference: ${v}`));

// add two values of x
map(x => x + x)(of(10, 100, 1000)).subscribe((v) => console.log(`sum: ${v}`));

// multiply two values of x
map(x => x * x)(of(10, 100, 1000)).subscribe((v) => console.log(`product: ${v}`));

// divide two values of x
map(x => x / x)(of(10, 100, 1000)).subscribe((v) => console.log(`quotient: ${v}`));

// raise one value to the power of itself
map(x => x ** x)(of(10, 100, 1000)).subscribe((v) => console.log(`exponentiation: ${v}`));


import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

Typescript React

We used the same code as in the [previous lesson](https://www.educative.io/collection/page/6630002/4924114977423360/6440190819172352), just to demonstrate that it will also run in the SPA widget. The syntax to import modules is the same as in the Code widget, but in this case, the `foo` folder can be left blank.

Now that you've seen RxJS in action, let's discuss how to actually set everything up so your RxJS code will run as it has in this tutorial.


---
In the next lesson, you'll see how to set up your course, the Code widget, and the SPA widget to work with RxJS.

Quick example of using the Single Page App widget with RxJS code.

See RxJS in Action on Our Platform

Set Up RxJS to Work in Your Course

RxJS in the SPA Widget

Demo: An Example of RxJS in our SPA Widget