リアクションスケッチとは何ですか

react スケッチは、反応コンポーネントをスケッチにレンダリングするためのツールです。オープン ソース ライブラリです。Sketch ドキュメントの仕様に準拠した React コンポーネントを作成でき、コンポーネントを管理するためのより便利な方法を提供します。「」を使用できます。 npm install --global skpm」でインストールします。

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

reactsketchとは

React Sketch Appは、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"
    ]
  }
  }

Sketch ライブラリ ファイルを作成します。ここで 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 中国語 Web サイトの他の関連記事を参照してください。