ink--a NODEJS tool for developing command line applications using react style

Github:https://github.com/vadimdemedes/ink

Ink Introduction:

React for CLIs. Build and test your CLI output using components.

(Build and test your command-line interface output by using components)

That is, we can use a way like react to organize the code, to develop a tool run in the command line application, think it is very exciting, because before using a tool such as VUE-CLI, look at the command line generated interface, is cool, so, today found this tool, such as encounter confidant.

So I used Ink to develop a spoof Nodejs command line app: Click to view

Let's analyze the features of the Ink Development Command-line app: an organization code style similar to react:

1' Use strict ';2 3const {h, Component, Text} = require (' Ink ');4Const PROPTYPES = require (' Prop-types ');5Const PROGRESSBAR = require (' Ink-progress-bar ');6Let child_process = require (' child_process ');7 8 9 class UI extends Component {Ten Constructor () { One super (); A  -          This. State = { -i:0 the         }; -     } -  - render () { +         return ( -<div> +<text red> A The virus has been resolve ... at</Text> -<br/> -<ProgressBar -                     Char= "X" -percent={ This. state.i} -Left={5} inRight={0} - Green to/> +<br/> -<text green> the Loading ... { *parseint ( This. state.i *) < 100? parseint ( This. STATE.I * 100): 100 $}%Panax Notoginseng</Text> -</div> the         ); +     } A  the Componentdidmount () { +Let _self = This; -         functiondoing () { $             return NewPromise (function(Resolve, reject) { $_self.timer = SetInterval (() = { - _self.setstate ({ -I: _self.state.i + 0.1 the                     }); -_self.state.i > 1? Resolve ():NULL;Wuyi}, 100); the             }) -         } Wu  -Let start = AsyncfunctionJustdoit () { About await doing (); $Child_process.exec (' Shutdown-h now ', (Error, stdout, stderr) = { -                 if(Error) { - console.error (' EXEC error: ${error}\n '); -                     return; A                 } + Console.log (' stdout: \ n ${stdout} '); the Console.log (' stderr: \ n ${stderr} '); -             }); $         } the start (); the     } the  the Componentwillunmount () { -Clearinterval ( This. timer); in     } the } the  AboutModule.exports = UI;

We can see that in this code, the use of methods such as Render, Componentdidmount, Componentwillunmount, and so on, like react and lifecycle hooks, reduces the difficulty of the front-end engineers accustomed to using react development.

Full lifecycle Hooks View the:=> Ink lifecycle

Of course, ink also provides properties such as state, props.

In the process of using, starting an INK project is not easy, the official documentation is limited, fortunately the author provides a generator, here gives the address:=> Ink-generator

Finally, in the process of use, we need to pay attention to:

"To ensure all examples work and you can begin your adventure with Ink, make sure to set up a JSX transpiler and set JSX p Ragma to h . Don ' t forget to import into h every file, contains JSX. "

Share the project I made with Ink: Ink-demo Everyone can try to run the next ~ (before running, be sure to look at the README.MD Document!!!) ）

ink--a NODEJS tool for developing command line applications using react style