在命令行里是怎么用 React

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/196695.html

1. 初始化
2. 内置组件
• <Text />
• <Box />
• <Newline />
• <Spacer />
3. 内置 Hooks
• useInput
• useApp
• useStdin
• useStdout
4. 第三方组件
• ink-spinner
• ink-link
• ink-table
• ink-syntax-highlight
• ink-muti-select
5. 调试工具
6. 总结

用过 React 的同学都知道，React 作为一个视图库，在进行 Web 开发的时候需要安装两个模块。

npm install react --save
npm install react-dom --save

react 模块主要提供了组件的生命周期、虚拟 DOM Diff、Hooks 等能力，以及将 JSX 转换为虚拟 DOM 的 h 方法。而 react-dom 主要对外暴露一个 render 方法，将虚拟 DOM 转化为真实 DOM。

import React from 'react'
import ReactDOM from 'react-dom'
/* import ReactDOM from 'react-dom/server' //服务的渲染 */

class Hello extends React.component {
  render() {
    return <h1>Hello, world!</h1>,
  }
}

ReactDOM.render(
  <Hello />,
  document.getElementById('root')
)

如果我们将 react-dom 换成 react-native 就可以将虚拟 DOM 转换为安卓或 iOS 的原生组件。虚拟 DOM 最大的优势并不是其 Diff 算法，而是将 JSX 转换为统一的 DSL，通过其抽象能力实现了跨平台的能力。除了官方提供的 react-dom、react-native ，甚至可以渲染到命令行上，这也是我们今天介绍的 ink。

npm ink

ink 内部使用 facebook 基于 C++ 开发的一款跨平台渲染引擎 yoga，支持 Flex 布局，功能十分强大。另外，React Native 内部使用了该引擎。

初始化

这里有一个官方提供的脚手架，我们可以直接通过这个脚手架来创建一个项目。

mkdir ink-app
cd ink-app
npx create-ink-app

如果你想使用 TypeScript 来编写项目，你也可以使用如下命令：

npx create-ink-app --typescript

生成的代码如下：

// src/cli.js
#!/usr/bin/env node
const ink = require('ink')
const meow = require('meow')
const React = require('react')
const importJsx = require('import-jsx')

const ui = importJsx('./ui')

const cli = meow(`
    Usage
      $ ink-cli
    Options
        --name  Your name
`)

ink.render(React.createElement(ui, cli.flags))

// src/ui.js
const App = (props) => (
  <Text>
    Hello, <Text color = "green">
          { props.name || 'UserName' }
      </Text>
  </Text>
)

module.exports = App;

除了 ink 和 react，脚手架项目还引入了 meow、import-jsx 两个库。

meow 的主要作用是运行命令时，对参数进行解析，将解析的参数放到 flags 属性中，其作用与 yargs、commander 一样，是构建 CLI 工具的必备利器。

const meow = require('meow')
// 传入的字符串，作为 help 信息。
const cli = meow(`
    Options
        --name  Your name
        --age   Your age
`)
console.log('flags: ', cli.flags)

总结

React 确实是视图开发的一把利器，再加上 Hooks 的加持，其抽象能力得到了进一步的提升，统一的 DSL 加上 虚拟 DOM，照理来说，是可以在任何平台进行渲染的。甚至，微软官方都开发了一个 React Native for Windows，关键是这个东西不仅仅能开发 Windows 的桌面软件，还可以开发 mac 的桌面软件。

有点跑题，说回 ink，大家熟知的 Gatsby 的命令行工具也是通过 ink 进行开发的。如果大家后续有本地的 CLI 工具需要实现，可以考虑这款工具，至少不必烦恼如何在命令行进行文本对齐。

原文链接：点击这里

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/