리액트 스케치란 무엇인가

react 스케치는 React 컴포넌트를 스케치로 렌더링하는 도구입니다. Sketch 문서 사양을 준수하는 React 컴포넌트를 작성할 수 있으며 "npm install"을 사용하여 보다 편리하게 컴포넌트를 관리할 수 있습니다. 글로벌 skpm"을 설치합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

React Sketch란 무엇인가요?

React Sketch 앱은 React 구성 요소를 Sketch로 렌더링하는 도구입니다. Sketch에서 디자인 시스템의 자산을 관리하는 것은 복잡하고 오류가 발생하기 쉬우며 시간이 많이 걸립니다. Sketch는 스크립트가 가능하지만 API는 자주 변경됩니다. React는 JavaScript 개발자가 익숙한 방식으로 재사용 가능한 문서를 작성할 수 있는 완벽한 래퍼를 제공합니다.

React - SketchApp은 디자인 시스템에 맞춰진 오픈 소스 라이브러리입니다. React 요소를 Sketch로 렌더링하여 디자인과 개발 사이의 격차를 해소합니다.

이 놀라운 오픈 소스 라이브러리는 디자이너에게 새로운 디자인 작업 흐름을 제공합니다. 가장 인기 있는 React 프런트 엔드 프레임워크에서 코드로 디자인하고 검토를 위해 실시간으로 Sketch로 렌더링합니다. 곰곰이 생각해 보면 디자인계에서 큰 인기를 누리고 있는 스케치(Sketch)가 오픈소스 라이브러리 이름의 절반을 차지하지만 실제로는 브라우저 역할만 할 뿐이다. 남겨진 실제 디자인 문서는 코드가 됩니다.

설치

npm install --global skpm

템플릿을 기반으로 프로젝트를 생성합니다

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

를 사용하여 src/manifest.json을 수정합니다.

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

여기 src/manifest에 정의된 스케치 라이브러리 파일을 생성합니다. json은 ./ 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 (
    <View style={styles.container}>
      {times((i) => color(i / steps).hex(), steps).map((val, i) => (
        <View
          name={val}
          key={val}
          style={{
            backgroundColor: val,
            margin: 2,
            // prettier-ignore
            height: 96 - (2 * i),
            // prettier-ignore
            width: 96 - (2 * i),
            borderRadius: 2 * i,
          }}
        />
      ))}
    </View>
  );
};
Document.propTypes = {
  colors: PropTypes.arrayOf(PropTypes.string),
  steps: PropTypes.number,
};
export default () => {
  render(
    <Document colors={[&#39;#01FFD8&#39;, &#39;#C137E3&#39;, &#39;#8702ED&#39;]} steps={50} />,
    context.document.currentPage(),
  );
};

Execution

npm run render

권장 학습: "react 비디오 튜토리얼"

위 내용은 리액트 스케치란 무엇인가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!