React可以写命令行，你知道吗？

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

编者注：作者是网易资深前端@金炳，当前负责网易严选自研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/>);

文件结构如下：