React.js Library that you never heard about

React.js has many cool libraries such as React 360, React-Blessed and React-NodeGUI, so let’s discover each one together :

1. React 360 :

This React.js library is used to create 3D app, forms and animations, it’s a VR library. You can check the official documentation here : https://facebook.github.io/react-360/doc

To get started with this library we’ll have to install it via the dependencies manager “npm” by typing :

npm install react-360-cli

This one above will install it globally. Now we can create our first React360 app by typing :

react-360 init HelloWorld

To dive a little deep let’s see the generated directory content by typing :

cd HelloWorld

When we build React 360 applications, we have a number of source code and library files that need to be bundled into a single file for a web browser to load. You may have encountered some of these tools if you’re familiar with web development. Our directory main files are :

index.js : This is the main code of your application, it is where all of your React code lives. This is the code that makes your application unique, and determines how it looks. Any code imported by index.js will also become a part of your app, allowing you to organize your app into many different files.

client.js : This is the code that connects your browser to your React application — the Runtime. This file does three things. First, it creates a new instance of React 360, loading your React code and attaching it to a specific place in the DOM. This is also where your application can pass a variety of initialization options.

index.html : This is the web page you load when viewing your application. All it does is provide a point to mount your JavaScript code. This is intentional. Most functionality is left out of HTML, so that you can easily integrate your React 360 application into server-render pages or existing web apps.

Now to start the project just run it with the command :

npm start

and check your app on http://localhost:8081/index.html and here we go it has to be something like below :

Image for post
Image for post

2. React-Blessed :

React-Blessed is a react library used to build and customize your terminals, to make clearer this library is based on another library called “Blessed” which is 100% Javascript code created to customize terminals.

To get started let’s install it by installing “blessed ”library and our bridge “react-blessed” :

npm install blessed react

npm install react-blessed

Or we can go fast by cloning a demo project :

git clone https://github.com/Yomguithereal/react-blessed

then install the dependencies with “npm install”. This directory has many examples, to show that list just type “npm run demo” to see like this :

Image for post
Image for post

So let’s try to run the “animation” example by typing :

npm run demo animation

Image for post
Image for post

As you can see and maybe noticed it’s just a console app running in the terminal, so basically this library is about building React apps in terminal.

For more details check out the official github repo : https://github.com/Yomguithereal/react-blessed

3. React NodeGUI :

React NodeGUI is an open source project created and written in React to build desktop apps with React.js library by supporting all platforms Windows, MacOS and Linux with a huge set of widgets rendered with native code by Qt.

To get started we’ll have to configure first our environment by respecting the requirements, for Windows (if you have Linux/MacOS check the config here) :

  • Visual studio 2017 and up.
  • CMake 3.1 and up (Installation instructions can be found here: https://cmake.org/install/)
  • Currently supported Node.Js versions are 12.x and up.

After installing all of that we can now see things in action, let’s get started with an existing template that you can find on the official documentation or just by cloning the project like this :

git clone https://github.com/nodegui/react-nodegui-starter

then follow the start steps :

npm install

npm run dev

npm start

You can check out the official doc here : https://react.nodegui.org/

N.B : This article might be updated periodically later :)

Written by

an IT lover , a reality seeker

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