I started getting seriously interested in RxJS by mid 2016, especially when I started developing FrintJS.

It was quite difficult for me to find my way into reactive programming. And I can imagine beginners may still feel the same way now. To keep myself updated and motivated, I started finding and following some people on Twitter who are very involved with RxJS and reactive programming in general.

This has worked for me very positively, and helped me understand the direction the RxJS community is taking, and be informed about new toolings and various other resources that keep popping up in…

Our focus in this article will be about using the observe higher-order component, shipped from frint-react package.

Even though FrintJS is rendering library agnostic (and supports React and Vue.js both), we will stick to React.js only for the sake of this article.

To make the most out of this, it is advised that you read these previous articles from our blog first:

• Rendering FrintJS Apps with React.js
• Accessing FrintJS App Providers inside React.js Components

Higher-order component

The API of the observe higher-order component (HoC) is quite simple:

import React from 'react';
import { observe } from 'frint-react';function MyComponent(props) { return <div>...</div>…

In this article, we will focus on rendering FrintJS Child Apps in specific areas of our UI (which we call “Regions”), using React.js as our rendering library.

To make the most out of this article, it is advised that you read these two previous articles first:

• Thinking in Apps with FrintJS
• Rendering FrintJS Apps with React.js

What is a Region?

In a traditional website, you usually have elements like header, footer, sidebar, etc. They are areas in your website where you put relevant content accordingly.

• Header: may contain logo and navigation links
• Footer: more navigation, and copyright information
• Main: your main content area
• Sidebar…

FrintJS itself is agnostic of any rendering library. The core is primarily focused on managing its dependencies with providers, so that other tools and integrations can form around it.

While the main frint package takes care of creating Apps with providers, we have other packages like frint-react handling React.js integration. Same way, we also have frint-vue that enables you to render your Vue.js components using similar API to that of React’s integration.

Rendering with Vue.js alone

Before getting into FrintJS, let’s first create and render a Component with Vue.js alone.

We will be using JSX for the examples below. Let’s say we have a…

Redux is an extremely popular state management library in the React.js ecosystem. It also comes with integrations like react-redux which gives you a higher-order component to connect your Redux store to your React components.

How can this killer duo be utilized in FrintJS Apps too?

Example Store

Before getting into FrintJS, let’s first have a basic store with Redux. Our application will have a counter, that we can increment and decrement.

Constants:

Define some constants for our action types:

// constants/index.jsexport const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
export const DECREMENT_COUNTER = 'DECREMENT_COUNTER';

Action creators:

// actions/counter.jsimport { 
  INCREMENT_COUNTER, 
  DECREMENT_COUNTER 
} from '../constants';export function incrementCounter()…

Previously, we covered creating Apps with providers, and then rendering them with React.js in the browser and server. Today, we will see how we can access the providers defined in FrintJS Apps from inside React components.

Higher-order component

We ship a higher-order component (HoC) called observe from our React integration package frint-react.

The observe HoC allows you to wrap your target Component while giving you access to your FrintJS App’s instance, enabling you to prepare the props that you can pass to your target Component later.

You can either generate a synchronous props object, or stream it asynchronously using an Observable with…

Previously, I wrote about dependency injection and how providers are set up in FrintJS Apps. Today, we will be using the same APIs and render a FrintJS App with React in the browser and server.

Rendering with react-dom

In the most basic and simple example, we can render a React component like this using ReactDOM:

import React from 'react';
import { render } from 'react-dom';function MyComponent() {
  return <p>Hello World</p>;
}render(
  <MyComponent />, 
  document.getElementById('root')
);

We define a component, and then render it using the render function coming from react-dom package by specifying a target node.

The code above assumes you…

Redux is a great library for managing state in your applications. Combining it with React.js also gives your application a nice structure allowing you to benefit from various other tools built and supported by the community.

I also enjoy RxJS a lot. And the journey of building FrintJS has helped me embrace reactive programming even further. In this post, I will explore how we can stream the state from a Redux store using Observables.

Redux store

Let’s say we have a simple Redux store, that increments and decrements a counter value.

Reducer:

We can start by creating our reducer first:

const INITIAL_STATE =…