写点什么

Ink 2.0 发布:命令行应用程序的 React

  • 2019-04-25
  • 本文字数:1419 字

    阅读完需:约 5 分钟

Ink 2.0发布:命令行应用程序的React

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


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


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


import React, {Component} from 'react';import {render, Color} from 'ink';
class Counter extends Component { constructor() { super(); this.state = { i: 0 }; }
render() { return ( <Color green> {this.state.i} tests passed </Color> ); }
componentDidMount() { this.timer = setInterval(() => { this.setState({ i: this.state.i + 1 }); }, 100); }
componentWillUnmount() { clearInterval(this.timer); }}
render(<Counter/>);
复制代码


终端上的输出:



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


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


import {render, Box, Text, Color} from 'ink';
const Flexbox = () => ( <Box padding={2} flexDirection="column"> <Box> <Box width={14}> <Text bold>Total tests:</Text> </Box> 12 </Box>
<Box> <Box width={14}> <Text bold>Passed:</Text> </Box> <Color green>10</Color> </Box>
<Box> <Box width={14}> <Text bold>Failed:</Text> </Box> <Color red>2</Color> </Box> </Box>);
render(<Flexbox/>);
复制代码


将在终端上显示:



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


import React from 'react';import {Text} from 'ink';import {render} from 'ink-testing-library';
const Counter = ({count}) => <Text>Count: {count}</Text>;
const {lastFrame, rerender} = render(<Counter count={0}/>);lastFrame() === 'Count: 0'; //=> true
rerender(<Counter count={1}/>);lastFrame() === 'Count: 1'; //=> true
复制代码


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


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



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



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


查看英文原文Ink: React for Interactive Command-Line Apps


2019-04-25 08:005345
用户头像

发布了 731 篇内容, 共 468.5 次阅读, 收获喜欢 2006 次。

关注

评论 1 条评论

发布
用户头像
秀啊 react
2019-04-25 10:15
回复
没有更多了
  • 特别加餐|用 ChatGPT 开发一个看板项目

    有不少同学希望了解AI,尤其是生成式AI对前端开发工作和前端工程师意味着什么,我个人也在关注相关领域的进展,正好趁着这次加餐的机会,跟你交流一下我的想法。

    2023-05-22

  • 从 React 源码角度看 useCallback,useMemo,useContext

    useCallback和useMemo是一样的东西,只是入参有所不同。

    2023-02-28

  • Angular tsconfig.json 文件里的 paths 用途

    Angular 项目目录中的 TSConfig 文件表明该目录是 TypeScript 或 JavaScript 项目的根目录。 TSConfig 文件可以是 tsconfig.json 或 jsconfig.json,两者都有相同的配置变量集。

    2022-09-08

  • 🧩 Vue 深入组件开发☞#异步组件#

    大家好,我是小鑫同学。一位从事过Android开发、混合开发,现在长期从事前端开发的编程爱好者,我觉得在编程之路上最重要的是知识的分享,所谓三人行必有我师。所以我开始在社区持续输出我所了解到、学习到、工作中遇到的各种编程知识,欢迎有想法、有同感的

    2022-10-12

  • 32|Fabric:新渲染器的演进之路

    对核心渲染流程的持续迭代和优化,是 React Native 能够广受欢迎的重要原因之一。

    2023-01-01

  • 构建工具 Gulp-lesson5

    大家好,我是小鑫同学。一位从事过 Android 开发、混合开发,现在长期从事前端开发的编程爱好者,我觉得在编程之路上最重要的是知识的分享,所谓三人行必有我师。所以我开始在社区持续输出我所了解到、学习到、工作中遇到的各种编程知识,欢迎有想法、有同感

    2022-10-13

  • CLI 新功能之多项目启动器

    大家好,我是小鑫同学。一位从事过Android开发、混合开发,现在长期从事前端开发的编程爱好者,我觉得在编程之路上最重要的是知识的分享,所谓三人行必有我师。所以我开始在社区持续输出我所了解到、学习到、工作中遇到的各种编程知识,欢迎有想法、有同感的

    2022-10-12

  • 小程序生命周期

    小程序生命周期分为 : 页面生命周期 + 组件生命周期它有四个阶段:

    2023-04-14

  • 22|物料组件的编译和管理:如何处理组件的多种模块格式?

    浏览器端把握在用户手里,我们无法预测实际代码在运行过程中会出现什么兼容问题,如果平台渲染能支持多重模块格式,就意味着可以做一些优化策略,在低版本浏览器中,就可以优先选择对应能支持的模块格式。

    2023-01-13

  • 加餐 01|留言区心愿单:真·子组件以及 jsx-runtime

    在本专栏选用的React 18.2.0版本和与它配套的CRA中,新JSX运行时也是被默认启用的。

    2022-09-20

  • 一天梳理完 React 所有面试考察知识点

    性能优化,永远是面试的重点,性能优化对于 React 更加重要

    2022-10-25

  • 编程小白也能快速掌握的 ArkUI JS 组件开发

    近期,Playground中ArkUI JS组件在线预览又有更新啦~

    2022-08-31

  • 这些 react 面试题你会吗,反正我回答的不好

    第二个参数是一个函数,该函数会在 setState函数调用完成并且组件开始重渲染时调用,可以用该函数来监听渲染是否完成。

    2022-09-24

  • Qt | 控件之 QComboBox

    QComboBox组件的使用。

    2022-07-17

  • Flutter 实现小姐姐渐现动画效果

    小姐姐使用渐现动效和我们捉迷藏了,还能从清纯风无痕过渡到高冷风哦!这就是 AnimatedOpacity 渐现动画组件的魅力

    2022-07-12

  • 39|语法扩展:通过 JSX 来做语法扩展

    这节课我们就来看看JSX是如何用在Web UI开发中的。即使你不使用React,这样的模版模式也有很大的借鉴意义。

    2022-12-17

  • React 组件设计模式 - 纯组件,函数组件,高阶组件

    如果你想写的组件只包含一个 render 方法,并且不包含 state,那么使用函数组件就会更简单。我们不需要定义一个继承于 React.Component 的类,我们可以定义一个函数,这个函数接收 props 作为参数,然后返回需要渲染的元素。

    2022-12-07

  • vue 中的几个高级概念

    混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

    2023-02-28

  • 从源码角度看 React-Hydrate 原理

    React 渲染过程,即ReactDOM.render执行过程分为两个大的阶段:render 阶段以及 commit 阶段。React.hydrate渲染过程和ReactDOM.render差不多,两者之间最大的区别就是,ReactDOM.hydrate 在 render 阶段,会尝试复用(hydrate)浏览器现有的 dom 节点,并相互

    2022-11-25

  • 04|Vue 概览:Vue 哪些内容是你必须要掌握的?

    这节课我们就来揭开Vue的神秘面纱,一起来看看Vue里必须掌握的知识点,以及怎样学习Vue才更加高效。

    2023-05-01

发现更多内容

知道这些面试技巧,让你的测试求职少走弯路

Java 程序员 后端

神了!对标阿里P8的JVM超硬核神仙笔记,了解至少定级P6+

Java 程序员 后端

程序员欣宸文章汇总(Java篇)

Java 程序员 后端

程序员的黄金五年,如何做到从月薪8K达到38K?

Java 程序员 后端

社招和校招有什么不同?阿里美团等大厂JAVA社招面经分享!

Java 程序员 后端

秀出新天际的SpringBoot笔记,让开发像搭积木一样简单

Java 程序员 后端

程序员面试防坑宝典,助你秋招一臂之力(建议收藏,文末有彩蛋)

Java 程序员 后端

程序员,你以为你很优秀,但却面试屡屡失败?

Java 程序员 后端

程序员必须掌握的600个英语单词

Java 程序员 后端

程序员欣宸文章汇总(Spring篇)

Java 程序员 后端

窥探Tomcat整体架构,server

Java 程序员 后端

第一次凡尔赛,字节跳动3面+腾讯6面一次过,谈谈我的大厂面经

Java 程序员 后端

真是绝了!git标星19

Java 程序员 后端

真香!面试题库泄漏,在Github一夜爆火的面试题库,被各大厂要求直接下架

Java 程序员 后端

程序员膨胀了?年薪100万,腾讯程序员跟南航飞行员差不多?

Java 程序员 后端

程序流程控制

Java 程序员 后端

站在巨人的肩膀上学习:五位阿里大牛联手撰写的《深入浅出Java多线程》

Java 程序员 后端

硬核,这 3 款 IDE 插件让你的代码牢不可破

Java 程序员 后端

程序员必备的思维能力:结构化思维

Java 程序员 后端

硬核!SpringBoot连接MySQL数据库,十分钟啃透

Java 程序员 后端

程序流程控制(1)

Java 程序员 后端

程序人生:做了6年Java开发,海投28家简历被拒,该何去何从?

Java 程序员 后端

程序员你了解零拷贝吗?

Java 程序员 后端

程序员如何利用技术变现?

Java 程序员 后端

程序员如何提高影响力

Java 程序员 后端

程序员必备基础:Git 命令全方位学习

Java 程序员 后端

程序员缺乏经验的 7 种表现

Java 程序员 后端

知道这些线程池底层源码的知识,你也能和面试官扯半小时

Java 程序员 后端

硬核,学习 Java 的一点小建议(思维导图,建议收藏)

Java 程序员 后端

站在筛选简历和面试流程角度,给培训班出身Java程序员一些建议!

Java 程序员 后端

知乎热问:国家何时整治程序员的高薪现象?太可怕了!

Java 程序员 后端

Ink 2.0发布:命令行应用程序的React_大前端_Bruno Couriol_InfoQ精选文章