React.js Libraries 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 :
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.
How to use it :
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 :
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 :
So let’s try to run the “animation” example by typing :
npm run demo animation
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 :
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 :)
