RxJS Crash Course with Practical Examples

1+

ReactiveX has revolutionized the way for modern developers to think about building apps it allows us to treat all data as a stream as it unfolds through the dimension of time.

In this RxJS crash course lesson, I’m going to cover about 25 different ways you can use RxJS so you have a solid foundation to use it in your own projects for this tutorial.

RxJS Crash Course
RxJS Crash Course

Let’s move to the playground

I’ve just created a basic HTML page and imported the rxjs script from a CDN in the head of that page. Then we’ll write all of our custom code in this lesson1.js file.
I created a helper function that will just append the results from an observable to the browser on the right side here so when you see me use the print function it’s to add the values to the browser.
The first thing we’re going to talk about is observable and I think the easiest way to think about it is just an array.

//index.html

<html>
	<head>
		<script src="https://npmcdn.com/@reactivex/[email protected]/dist/global/Rx.umd.js" ></script>
	</head>
	<body>
		<script src="lesson1.js"></script>
	</body>
</html>
//lesson1.js
const observable = Rx.Observable.create(
	observer => {
		observer.next('hello')
		observer.next('world')
	}
);

observable.subscribe(val => print(val));


/// helper to print values

function print(val) {
	let el = document.createElement('p');
	el.innerText = val;
	document.body.appendChild(el);
}

We’ll use jsfiddle for more clarity with code and result. So above code with JsFiddle given below:

Let us dive into RxJS tutorial and firstly start:

1+