Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of what the concept of react sketch is, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this react sketch concept article. Let's take a look at it.

React sketch is a tool for rendering react components to sketch and is an open source library; you can write React components that conform to Sketch documentation specifications, providing a more convenient way to manage components and install them with "npm install-global skpm".

The operating environment of this tutorial: Windows10 system, react17.0.1 version, Dell G3 computer.

What is react sketch?

React Sketch App is a tool for rendering React components to Sketch. Managing the assets of a design system in Sketch is complex, error-prone and time-consuming. Sketch can be scripted, but API changes frequently. React provides the perfect wrapper for JavaScript developers to build reusable documents in a familiar way.

React-SketchApp is an open source library that is tailored to the design system. It connects the gap between design and development by rendering React elements to Sketch.

This magical open source library provides designers with a new design workflow: design in code under the most popular React front-end framework, and real-time rendering to Sketch to review the design. After careful consideration, Sketch, which is very popular in the design circle, accounts for half of the name of the open source library, but it only plays the role of a browser. The real design document becomes the code.

Installation

Npm install-global skpm

Create a project based on the template

Skpm create my-app-template=airbnb/react-sketchapp cd my-app

Use

Modify src/manifest.json

"commands": [{"name": "My App Name: Sketch Components"identifier": "main", "script": ". / main.js"}], "menu": {"isRoot": true, "items": ["main"]}}

Create a Sketch import file, which is defined in src/manifest.json as. / main.js

Import * as React from 'react';import * as PropTypes from' prop-types';import {render, StyleSheet, View} from 'react-sketchapp';import chroma from' chroma-js';import {times} from 'ramda';const styles = StyleSheet.create ({container: {width: 480, height: 480, flexDirection:' row', flexWrap: 'wrap', alignItems:' center',},}) Const Document = ({colors, steps}) = > {const color = chroma.scale (colors); return ({times ((I) = > color (I / steps). Hex (), steps). Map ((val, I) = > ()});}; Document.propTypes = {colors: PropTypes.arrayOf (PropTypes.string), steps: PropTypes.number,}; export default () = > {render (context.document.currentPage (),);}

Execution

This is the end of npm run render's article on "what is the concept of react sketch?" Thank you for reading! I believe you all have a certain understanding of "what is the concept of react sketch". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.