创建一个react cli_使用React创建CLI

创建一个react cli

Nowadays, CLIs have better designs and are much easier to work with. Even their functionality has been extended a lot. CLIs are no longer limited to hardcore programmers anymore.

如今，CLI具有更好的设计并且更易于使用。 甚至它们的功能已经扩展了很多。 CLI不再仅限于核心程序员。

In this article, we talk about how to build a CLI tool using React. We discuss two libraries that can be used for this: INK and React-Blessed.

在本文中，我们讨论了如何使用React构建CLI工具。 我们讨论了两个可用于此目的的库：INK和React-Blessed。

There are many benefits to building your CLI using React. An obvious one would be to use what you already know, but another one would be to fully embrace component-driven design. This enables you to handle your CLI components the same way you would handle any other UI component. For example, you can share and reuse your CLI components in a component hub like Bit (Github). You can create different themes, and so on.

使用React构建CLI的好处很多。 一个明显的方法是使用您已经知道的方法，但是另一个方法是完全采用组件驱动的设计。 这使您可以像处理任何其他UI组件一样处理CLI组件。 例如，您可以在诸如Bit ( Github )之类的组件中心中共享和重用CLI组件。 您可以创建不同的主题，依此类推。

Example: React components shared on Bit — now possible with CLI components

示例：在 Bit上共享React组件-现在可以使用CLI组件

INK vs React祝福 (INK vs React-Blessed)

The main difference between React-Blessed and INK is React-blessed is more oriented towards user interface with the full screen while INK is aimed to be used in simple interactive user interfaces.

React-blessed和INK之间的主要区别是React-blessed更加面向全屏用户界面，而INK旨在用于简单的交互式用户界面。

There are key points to be noted about the popularity between react-Blessed and INK. According to npm trends, the number of downloads of the INK in the past three months is much greater than that of React-Blessed. Also, Github repo of INK has a more star rating compared to React-Blessed. It’s also important to remember that INK has a much wider community compared to React-Blessed so you will have access to more resources and can receive more help in case you face an issue.

关于React-Bless和INK之间的流行，有一些要注意的要点。 根据npm趋势 ，在过去三个月中，INK的下载量远远大于React-Blessed。 此外，与React-Blessed相比，INK的Github仓库具有更高的星级。 同样重要的是要记住，与React-Blessed相比，INK拥有更广泛的社区，因此您可以使用更多资源，并且在遇到问题时可以得到更多帮助。

墨水 (INK)

INK is a custom react renderer who renders the components to text along with the ANSI (American National Standards Institute) escape code. It also allows us to utilize the flexbox for layouts. With INK, you can use JSX to build our own pretty easy to use CLI.

INK是一个自定义的React渲染器，它将组件与ANSI(美国国家标准协会)转义码一起渲染为文本。 它还允许我们将flexbox用于布局。 使用INK，您可以使用JSX来构建我们自己非常易于使用的CLI。

Let’s do some examples to know how to use the tool.

让我们做一些例子来了解如何使用该工具。

范例1： (Example 1:)

Create a new directory/folder called INK-React.

创建一个名为INK-React的新目录/文件夹。

This may be a fresh project with React