Quick-start ��
First, make sure you have installed Sketch version 50+, & a recent npm.
Open a new Sketch file, then in a terminal:
git clone https://github.com/airbnb/react-sketchapp.git
cd react-sketchapp/examples/basic-setup && npm install
npm run render
Next, check out some more examples!
Why?!
Managing the assets of design systems in Sketch is complex, error-prone and time consuming. Sketch is scriptable, but the API often changes. React provides the perfect wrapper to build reusable documents in a way already familiar to JavaScript developers.
What does the code look like?
import * as React from 'react';
import { render, Text, Artboard } from 'react-sketchapp';
const App = props => (
<Artboard>
<Text style={{ fontFamily: 'Comic Sans MS', color: 'hotPink' }}>{props.message}</Text>
</Artboard>
);
export default context => {
render(<App message="Hello world!" />, context.document.currentPage());
};
What can I do with it?
- Manage design systems—
react-sketchappwas built for Airbnb’s design system; this is the easiest way to manage Sketch assets in a large design system - Use real components for designs— Implement your designs in code as React components and render them into Sketch
- Design with real data— Designing with data is important but challenging;
react-sketchappmakes it simple to fetch and incorporate real data into your Sketch files - Build new tools on top of Sketch— the easiest way to use Sketch as a canvas for custom design tooling
Found a novel use? We'd love to hear about it!
Read more about why we built it
Documentation
-
rn动画：http://blog.csdn.net/hello_hwc/article/details/51775696 股票金融类app：https://github.com/7kfpun/FinanceReactNative 图形表：https://github.com/wuxudong/react-native-charts-wrapper 好看的日历控件：https://github.co
-
React 已经诞生很久了，自从它诞生开始，围绕组件驱动形成了一个非常全面的生态，但是来自其他编程语言或者框架的开发人员很难找到要构建一个 React 系统的所有组件。如果你是来自于像 Angular 这样的框架的开发者，你可能已经习惯了框架包含了所需要的所有功能， 然而对于 React 来说，它的核心并不是完善所有的可选库。 这是优势还是劣势取决于你自己。 当我从 Angular 切换到 Rea
-
前言 最近在整理设计规范的过程中，尝试使用了 Airbnb 公司发布的 react-sketchapp 工具，感觉非常好用，在这里墙裂推荐一哈，顺便聊一聊使用过程中的体会： 这是一个使用 React 生成 Sketch 文件的命令行工具，主要用于生成设计系统(design system)，**简单来说就是使用 代码 生成 设计稿 **。这个跨界的工具提供了一种很新颖的思路，在某些特定情况下有其应用
-
问题内容： 我注意到可以这样导入： …或像这样： 第一个导入模块中的所有内容（请参阅：导入整个模块的内容） 第二个仅导入模块导出（请参阅：导入默认值） 似乎这两种方法是不同的，并且根本上是不兼容的。 为什么它们都起作用？ 请参考源代码并解释该机制…我有兴趣了解其工作原理。 ES6常规模块信息回答了该问题。 我在问使模块像这样工作的机制。在这里，它似乎与源代码中的 “ hacky”导出机制有关，但尚
-
这篇快速上手指南会教你如何将TypeScript与React结合起来使用。 在最后，你将学到： 使用TypeScript和React创建工程 使用TSLint进行代码检查 使用Jest和Enzyme进行测试，以及 使用Redux管理状态 我们会使用create-react-app工具快速搭建工程环境。 这里假设你已经在使用Node.js和npm。 并且已经了解了React的基础知识。 我们之所以使
-
我已经改用react Native制作跨平台应用程序（虽然没有制作）。我只是想要一个答案，我的问题，反应和反应之间的区别。我在网上搜索了一下，但没有找到合适的答案。
-
问题内容： 与 哪个更好，为什么？ 还是除了以后编写更少的代码外没有其他区别？ 写作是否意味着只导入Component对象？ 问题答案： 让您代替。它减少了React名称空间的键入和重复，这通常是一种理想的现代编码约定。 此外，Webpack 2和Rollup之类的工具会“摇晃”，这意味着任何未使用的导出都不会捆绑到您的最终代码中。使用/，您可以保证所有React的源代码都将被捆绑。使用，某些工具
-
本文向大家介绍react-native 启动React Native Packager，包括了react-native 启动React Native Packager的使用技巧和注意事项，需要的朋友参考一下 示例 在最新版本的React Native上，无需运行打包程序。它将自动运行。 默认情况下，这将在端口8081上启动服务器。要指定服务器所在的端口
-
我正在使用“React admin”创建一个管理界面（前端）。我正在使用spring boot作为我的REST API。我的React应用程序的url是：“http://localhost:3000”。我的spring boot API的url是：“http://localhost:8080”。 下面是CORS配置的spring boot代码，它在一个单独的类中，称为CORSCONFIG： 下面是
-
主要内容：React 实例React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。 这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。 使用方法 绑定一个 ref 属性到 render 的返回值上： 在其它代码中，通过 this.refs 获取支撑实例: 完整实例 你可以通过使用
-
主要内容：React 实例React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。 当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。 以下实例演示了获取 Github 用户最新 gist 共享描述: React 实例 cla