React可以写命令行,你知道吗?

阅读 633
收藏 31
2019-06-09
原文链接:mp.weixin.qq.com

戳蓝字「前端技术优选 」关注我们哦!

编者注:作者是网易资深前端@金炳,当前负责网易严选自研Node框架建设工作。做过前端、后端、产品设计,是一名全栈工程师。目前致力于Node应用框架研究开发与生态建设,实践Node应用在Serverless、Faas场景下的迁移和落地,探索Service Mesh在Node应用中的价值。

React可以写命令行,你知道吗?

一、介绍

命令行工具,大家应该比较熟悉了。比如我们平常使用的vue-cli、create-react-app、angular-cli等工具,这类都是命令行工具。

一个好的命令行工具,能给对应的框架加分,也同时显示出了框架开发者的水平。

那么,如何写出一个好看的命令行呢?

本文给大家介绍一些,如何使用React来写命令行,来达到更好用的命令行的效果。

二、入门实践

2.1 新建工程

// 创建一个工程路径mkdir helloworld// 进入这个目录cd helloworld// 初始化npmnpm init -y// 安装依赖npm install ink react import-jsx -s

2.2 编写代码

我们创建index.js文件

'use strict';require('import-jsx')('./hello');

然后我们再新建一个hello.js:

'use strict';const React = require('react');const {render, Color} = require('ink');class Counter extends React.Component {    constructor() {        super();        this.state = {            counter: 0        };    }    render() {        return (            <Color green>                {this.state.counter} tests passed            </Color>        );    }    componentDidMount() {        this.timer = setInterval(() => {            this.setState(prevState => ({                counter: prevState.counter + 1            }));        }, 100);    }    componentWillUnmount() {        clearInterval(this.timer);    }}render(<Counter/>);

文件结构如下:

2.3 运行代码

我们运行我们的代码

node ./index.js

然后我们看到:

image.png
然后tests前面的数字不停地在变化,然后按ctrl + c 可以退出我们的命令行。

2.4 解释

写过react的很好理解,render函数里面就是会输出原先的界面信息,内部用到了state.counter的变量。由于在componentDidMount这个生命周期创建了一个定时器,每100ms修改一下这个变量。

最终我们看到了tests passed前面的数字不停的在变化。

如果我们想要让他输出一下,就退出,那就把这个定时器删除就好了。

三、进阶实践

前面我们看到了一个基本的react写一个命令行程序的例子。下面让我们深入学习

3.1 文档地址

我们看到上面我们用的最核心的是ink,大家可以打开ink的地址:https://github.com/vadimdemedes/ink

3.2 普通组件

进阶篇,我们可以首先看一下作者给我们提供了哪些组件:

  1. Box

  2. Color

  3. Text

3.3 生态组件

    1. Input组件:https://github.com/vadimdemedes/ink-text-input

2. 旋转Spinner组件: https://github.com/vadimdemedes/ink-spinner

3. 选择组件:https://github.com/vadimdemedes/ink-select-input

4.超链接组件:https://github.com/sindresorhus/ink-link

5.大banner组件:https://github.com/sindresorhus/ink-box

6.颜色渐进组件:https://github.com/sindresorhus/ink-gradient

7.大字组件:https://github.com/sindresorhus/ink-big-text

8.图片显示组件:https://github.com/kevva/ink-image

9. tab选择组件:https://github.com/jdeniau/ink-tab

10. 带背景色的组件:https://github.com/LitoMore/ink-color-pipe

11.多选组件:https://github.com/karaggeorge/ink-multi-select

12.分割线组件:https://github.com/JureSotosek/ink-divider

四、可学习的软件

4.1 命令行输出emoji的工具

代码地址:https://github.com/sindresorhus/emoj效果:

4.2 命令行查找npm包的工具

代码地址:https://github.com/maticzav/emma-cli效果:

4.3 命令行查找changelog工具

代码地址:https://github.com/jdeniau/changelog-view

总结

所以本文主要介绍了如何使用React去开发炫酷的命令行工具。

如果听了之后,对你有所启发和帮助,希望能帮忙转发一下。本公众号特点:分享Node相关好玩好用的东西,希望各位看官关注下面公众号,如果有问题,也可以发送问题给我

评论