渲染 React 组件到 Sketch 的开源库 React Sketch.app

简介:

React-sketch app 是一个开源库,它可以让你写出符合 Sketch 文档规范的 React 组件。它能打通设计师和工程师之间的鸿沟,使人们便于在一个大规模的设计系统中协同工作。

为什么要将 React 置入 Sketch ?

在 Sketch 中管理设计系统的资产是复杂又耗时且容易出错的。Sketch 是可程式化的,但 API 通常会发生变化。 React 提供了完美的包装器,以 JavaScript 开发人员已经熟悉的方式构建可重用的文档。

快速启动

首先,请确保您已经安装了 Sketch 43+ 版本和最新的 npm 。

打开一个新的 Sketch 文件,然后在终端中:

git clone https://github.com/airbnb/react-sketchapp.git
cd react-sketchapp/examples/basic-setup && npm install

npm run render

screenshot

文章转载自 开源中国社区[https://www.oschina.net]

相关文章
|
3月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
40 0
|
1天前
|
前端开发
react-grapesjs——开源代码学习与修改(初出茅庐)(一)
react-grapesjs——开源代码学习与修改(初出茅庐)
20 0
|
2天前
|
数据采集 资源调度 前端开发
React的服务器端渲染:使用ReactDOMServer进行高效页面预渲染
【4月更文挑战第25天】使用ReactDOMServer,React支持服务器端渲染以实现高效预渲染。通过在Node.js环境中将React组件转化为HTML字符串,减少客户端JavaScript负载和渲染时间。优点包括更快首屏加载、改善SEO和兼容无JavaScript环境,但也会增加服务器负载、复杂性和状态管理挑战。开发者需根据项目需求平衡SSR和CSR。
|
1月前
|
前端开发 Android开发 iOS开发
应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
【2月更文挑战第31天】应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
32 2
|
1月前
|
Android开发
『京墨』开源的诗文(名句)、歇后语、成语、绕口令、节日等的阅读 APP
『京墨』开源的诗文(名句)、歇后语、成语、绕口令、节日等的阅读 APP
92 0
|
2月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
17 1
|
2月前
|
前端开发 JavaScript
React渲染性能的优化
React渲染性能的优化
25 2
|
2月前
|
前端开发 JavaScript 安全
react如何渲染包含html标签元素的字符串
react如何渲染包含html标签元素的字符串
58 0
|
2月前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
21 0
|
2月前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理