react 让滚动条一直在下面_Ink 2.0 发布：命令行应用程序的 React

作者 | Bethany Griggs、Michael Dawson译者 | 无明

自称为“命令行接口 React”的 JavaScript 库 Ink 最近发布了第二个主要迭代版本。借助 Ink，开发者可以通过组装 React 组件来构建命令行应用程序，并充分利用他们的 React 知识和 React 生态系统。

Ink 是一个 React 渲染器，可以将 React 组件树转成字符串，然后输出到终端上。Ink 2.0 可以无缝支持 React 的某些特性，比如 Hooks 或 Context，还可以与 React 生态系统中的其他重要组件(比如 Redux)发生交互。

官方文档提供了如下的示例：

import React, {Component} from 'react';

终端上的输出：

Ink 2.0 提供了 7 个内置的组件。还有其他 10 个第三方组件也可用于开发终端应用程序，以及 14 个组件正在迁移到 Ink 2.0。这些可重用的组件提供了常用的终端用户界面布局和行文(文本输入框、进度条、微调器、确认输入框、滚动条、自动完成、文本动画、图像显示等)。这些组件也解决了其他一些较受关注的问题，比如链接、路由、动画和颜色。

Ink 2.0 使用了 Yoga，一个实现了 Flexbox 的跨平台布局引擎。所以，每个元素就是一个 Flexbox 容器，可以使用相关的 Flexbox 参数(flexShrink、flexGrow、flexDirection 等等)。内置组件 Box 可用于配置布局。下列的组件：

import {render, Box, Text, Color} from 'ink';

将在终端上显示：

可以使用 ink-testing-library 来测试 Ink 组件。这个库的灵感来自 react-testing-library，一个可替代 Jest 来测试 React 组件的框架。可以像下面这样测试一个计数器应用程序：

import React from 'react';

终端应用程序和命令行应用程序之间有一个区别。终端应用程序具有图形化用户界面，可能带有复杂的导航和输入功能。

基于 blessed 终端界面库构建的 React-blessed 可以让应用程序变成下面这样：

Ink 旨在简化命令行应用程序的界面，提供更简单的输入功能：

Ink 采用了 MIT 开源协议。开发者可以通过其 GitHub 主页贡献代码：

https://github.com/vadimdemedes/ink

查看英文原文：

https://www.infoq.com/news/2019/04/ink-react-command-line-app

react 让滚动条一直在下面_Ink 2.0 发布：命令行应用程序的 React相关推荐

2020前端最新面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）（3年前端菜鸟级开发师含泪总结）
2020前端最新面试题总结(js.html.小程序.React.ES6.Vue.算法.全栈热门视频资源) 文档描述 (今年确实挺难 3年前端菜鸟级开发师含泪总结希望能帮助大家) 本文是关注微信小程序 ...
前端面试题总结（js、html、小程序、React、ES6、Vue、全栈）
前端面试题总结(js.html.小程序.React.ES6.Vue.全栈) 文档描述本文是关注微信小程序的开发和面试问题, 由基础到困难循序渐进, 适合面试和开发小程序. 并有热点框架(vue re ...
react中使用构建缓存_通过构建海滩度假胜地网站，了解如何使用React，Contentful和Netlify...
react中使用构建缓存 In this full course from John Smilga you will learn React by building a beach resort we ...
React Native 0.59.0 发布，使用 React 编写原生应用
React Native 0.59.0 发布了.React Native 使开发者只使用 JavaScript 也能编写原生移动应用. 新版更新亮点: React Hooks React Native ...
react native命令行全局安装
命令行npm install -g react-native-cli rn的架构图: C:\MyApp\node-v10.16.3-win-x64\node_modules\react-native- ...
react部署在node_如何在没有命令行的情况下在3分钟内将React + Node应用程序部署到Heroku
react部署在node In this tutorial we will be doing a basic React + Node app deploy to Heroku. 在本教程中,我们将进 ...
[react] props.children.map和js的map有什么区别？为什么优先选择react的？
[react] props.children.map和js的map有什么区别?为什么优先选择react的? React.Children.map 能够处理未知数据类型,即使 React.childre ...
React学习，Babel ES6兼容运行使用的命令行整理
测试项目为,一个js文件引用其他ES6编写的文件,最终网页中引用打包好的最终js文件注意:需要安装Node.js,没有的话,需要搜索安装 1 Browserify //在终端中输入如下命令,可以通过 ...
如何命令行结束react程序_想要成为前端Star 吗？一首歌时间将React / Vue 应用Docker 化...
前言以前一直有疑问困扰着我:人人都在吹的Docker容器化,与前端有何关系? 然而在近两年的编程生涯,在每一次产品迭代中,渐渐体会到了容器化其魅力所在. 应用部署从刀耕火种,到DevOps崛起,原来 ...

react 让滚动条一直在下面_Ink 2.0 发布：命令行应用程序的 React

react 让滚动条一直在下面_Ink 2.0 发布：命令行应用程序的 React相关推荐

最新文章

热门文章