Hey folks! Some of you may already know about us. We quietly launched a new meetup group in Amsterdam few weeks ago. As we are gearing up for our second event soon, we thought we would introduce ourselves in a more official way.

Who are we?

We are TechFolks Amsterdam. A meetup group…

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. …

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…

Illustration of a website design

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:

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…

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…

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.

I spent more time on this image than writing this post =D

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…

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…

Image by Jake Page

When you build something with FrintJS, you do it by creating an App first. The primary app that you create is called a “Root App” by convention.

While having a single Root App is a requirement, FrintJS also gives you the APIs to create and register multiple Child Apps to…

Fahad Heylaal

Maker of things · JavaScript · RxJS · ReactJS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store