Why Firebase is Very Cool with React

The simplicity at highest level…

I am a huge fan of React. We already have few production running applications in React.

currently I am experimenting with Firebase with React. So, I created a Damm Simple example.

Let us see the image first,

You can see, in my JSON data, I have a root level node called accountsList.

This node, will contain a list of accounts.

You can see, Whatever, I add an “Account” on UI, it is reflected back in List. The List which you see, is directly connected to Firebase DB in real time. Any change at that node will be reflected back in UI.

Now, In order to achieve, this much, we need to code only few lines in JavaScript.

No Store, No FLUX, with plain simple JSX , we can achieve this real time behaviour.

Step 1 — Make a Pure function for accountsList, a function which will render the list.

and Here it is

Step 2 — Now we can show list of All account by writing just 1 line of code.

So, I created a Component called RealTimeVariable,

This component take 2 arguments, path and render function. This component do very simple task, It listen to the given path and execute the accountListRender with the value. So, whenever there is a change in the given key-path, accountListRender will be execute again.

It mean, RealTimeVariable component behave like a Store for pure function. RealTimeVariable watch your remote json data at given path and execute the render function whenever the data changes.

What goes inside RealTimeVariable component is also very cool. Here it is.

So, above component is the connector between your Pure React Component and your Remote JSON Data

So, No FLUX, No BL Layer, Not much code, I can create RealTime UI just by pure functions.

Let me know what you like about Firebase

Like what you read? Give Narendra Sisodiya a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.